/* ===========================================================================
Инструмент ведения проектов СГИ.
Правила: заливок нет нигде, кроме кнопки действия. Чёрного нет — акцент
спокойный синий. Красного нет — тревожное берётся приглушённым бордо,
предупреждающее охрой. Плотно: воздух ровно такой, чтобы блоки не слипались.
======================================================================== */
@font-face{font-family:Onest;src:url(../fonts/Onest-400-cyrillic.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url(../fonts/Onest-400-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url(../fonts/Onest-500-cyrillic.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url(../fonts/Onest-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Onest;src:url(../fonts/Onest-600-cyrillic.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url(../fonts/Onest-600-latin.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Onest;src:url(../fonts/Onest-700-cyrillic.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url(../fonts/Onest-700-latin.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
--f:Onest,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
/* 26.09.2026, аудит. Переменная --f-num стояла у семи наборов цифр
(плитки кабинета, счётчики уведомлений, показатели воды), но нигде не
объявлялась: браузер отбрасывал всё правило font-family, и цифры
наследовали шрифт случайно. Объявляем явно — тот же Onest, но с
моноширинными цифрами, чтобы столбцы чисел не «плясали». */
--f-num:Onest,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--s1:4px; --s2:6px; --s3:10px; --s4:14px; --s5:20px;
--r1:7px; --r2:9px; --r3:12px;
--t:.16s cubic-bezier(.32,.72,.36,1);
/* 16.09.2026, просьба Раиля: «Входящие документы» не помещались в плашку
даже в две строки. Ширины хватает на самый длинный пункт в одну строку. */
--side:248px; --top:46px;
}
html[data-theme="light"]{
--bg:#F2F4F7; --sf:#FFFFFF; --sf-2:#F7F9FB; --sf-3:#ECEFF3;
--sf-grad:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%);
--ink:#11151B; --ink-2:#3B4552; --ink-3:#556170; --ink-4:#636D79;
--line:#E3E7EC; --line-2:#CFD5DD; --line-3:#B3BBC5;
--ac:#2F5C93; --ac-2:#37699F; --ac-3:#254B7A; --ac-ink:#FFFFFF;
--ac-soft:#5B85BC;
--ok:#2C6B52; --wait:#8A6516; --bad:#94413B; --idle:#5F6975; --brass:#8A6A2E;
--sh-1:0 1px 2px rgba(16,22,30,.05);
--sh-2:0 1px 2px rgba(16,22,30,.05),0 8px 20px -14px rgba(16,22,30,.18);
--sh-3:0 2px 8px rgba(16,22,30,.07),0 20px 44px -22px rgba(16,22,30,.24);
--hair:inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="dark"]{
--bg:#1D222A; --sf:#262C35; --sf-2:#2C333D; --sf-3:#333B45;
--sf-grad:linear-gradient(180deg,#2A313A 0%,#252B34 100%);
--ink:#F1F4F8; --ink-2:#CBD3DC; --ink-3:#A6B0BB; --ink-4:#949FAB;
--line:#38414C; --line-2:#48525E; --line-3:#5B6673;
--ac:#6F9BD0; --ac-2:#82A9D8; --ac-3:#5C87BB; --ac-ink:#0F1319;
--ac-soft:#8FB3DC;
--ok:#7FBFA1; --wait:#D2AF75; --bad:#DC9E97; --idle:#95A0AB; --brass:#C0A162;
--sh-1:0 1px 2px rgba(0,0,0,.4);
--sh-2:0 1px 2px rgba(0,0,0,.4),0 10px 24px -16px rgba(0,0,0,.7);
--sh-3:0 2px 10px rgba(0,0,0,.5),0 24px 52px -26px rgba(0,0,0,.8);
--hair:inset 0 1px 0 rgba(255,255,255,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* iOS сам увеличивает шрифт, если считает колонку широкой («text autosizing»).
На телефоне это выглядит как «растянуто и размазано»: часть текста внезапно
вдвое крупнее остального. Отключаем — размеры задаём мы, а не браузер. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
font-family:var(--f);font-size:13.5px;line-height:1.45;
background:var(--bg);color:var(--ink);
font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:2.5px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
[hidden]{display:none!important}
.lab{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mut{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.sp{flex:1}
/* ── Вход ──────────────────────────────────────────────────────────────────
Обложка. Слева — глубокое графитовое поле с чертёжной сеткой и линией
этапов: сразу видно, о чём продукт. Справа карточка входа. Ничего лишнего
на ней не пишем.
------------------------------------------------------------------------ */
.вход{
position:fixed;inset:0;display:grid;grid-template-columns:1fr 424px;
background:#0F1319;overflow:hidden;
}
.вход__полотно{
position:relative;overflow:hidden;
background:
radial-gradient(120% 90% at 12% 8%, #223044 0%, transparent 58%),
radial-gradient(90% 80% at 88% 96%, #1B2A24 0%, transparent 62%),
linear-gradient(150deg, #131A22 0%, #0E1218 52%, #11161D 100%);
}
/* Чертёжная сетка: крупная клетка и мелкая внутри неё. */
.вход__сетка{
position:absolute;inset:-2px;
background-image:
linear-gradient(rgba(150,180,215,.075) 1px, transparent 1px),
linear-gradient(90deg, rgba(150,180,215,.075) 1px, transparent 1px),
linear-gradient(rgba(150,180,215,.032) 1px, transparent 1px),
linear-gradient(90deg, rgba(150,180,215,.032) 1px, transparent 1px);
background-size:120px 120px,120px 120px,24px 24px,24px 24px;
mask-image:radial-gradient(135% 115% at 26% 42%, #000 26%, transparent 92%);
-webkit-mask-image:radial-gradient(135% 115% at 26% 42%, #000 26%, transparent 92%);
}
/* Тонкая виньетка, чтобы поле не выглядело плоским. */
.вход__шум{
position:absolute;inset:0;
background:radial-gradient(88% 82% at 28% 42%, transparent 46%, rgba(6,9,13,.46) 100%);
}
.вход__текст{
position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
padding:0 clamp(32px,6vw,84px);max-width:760px;
}
.вход__марка{
display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;
border:1.5px solid rgba(160,195,235,.5);color:#C9DCF0;
font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:26px;
}
.вход__текст h2{
font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.12;
color:#EEF3F9;
}
.вход__ряд{
margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:0;
}
.вход__ряд span{
font-size:15px;font-weight:500;color:#BCCCDE;letter-spacing:.01em;
}
.вход__ряд span + span::before{
content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
background:rgba(150,180,215,.45);margin:0 14px;vertical-align:middle;
}
/* Линия этапов — тот же язык, что в самом инструменте. */
.вход__ход{
margin-top:40px;display:flex;align-items:flex-start;position:relative;
padding-top:10px;max-width:600px;
}
.вход__ход::before{
content:'';position:absolute;left:6px;right:6px;top:15px;height:2px;
background:linear-gradient(90deg,#4E9C7C 0%,#4E9C7C 34%,#5B87C4 46%,rgba(150,175,205,.3) 62%,rgba(150,175,205,.24) 100%);
border-radius:2px;box-shadow:0 0 14px -4px rgba(91,135,196,.5);
}
.вход__ост{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.вход__ост i{
width:11px;height:11px;border-radius:50%;background:#131A22;
border:2px solid rgba(150,175,205,.38);position:relative;z-index:1;
}
.вход__ост em{
font-style:normal;font-size:11.5px;color:#9EB1C6;white-space:nowrap;
letter-spacing:.01em;
}
.вход__ост.есть i{background:#4E9C7C;border-color:#4E9C7C}
.вход__ост.есть em{color:#B6D0C3}
.вход__ост.идёт i{
background:#5B87C4;border-color:#5B87C4;
box-shadow:0 0 0 5px rgba(91,135,196,.18);
}
.вход__ост.идёт em{color:#CFE0F4;font-weight:600}
/* Карточка */
.вход__к{
position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
background:var(--sf);border-left:1px solid rgba(255,255,255,.08);
box-shadow:-24px 0 60px -40px rgba(0,0,0,.7);
}
.вход__нить{
position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,#2C6E6B 0%,#2F5C93 46%,#8A6516 100%);
}
.вход__б{width:100%;max-width:312px;padding:28px}
.вход__мк{
width:38px;height:38px;border-radius:11px;border:1.5px solid var(--ac);color:var(--ac);
display:grid;place-items:center;font-size:11px;font-weight:700;margin-bottom:18px;
}
.вход__б h1{font-size:20px;font-weight:600;letter-spacing:-.022em;line-height:1.22}
.вход__б p{font-size:13px;color:var(--ink-3);margin-top:4px}
.вход form{margin-top:22px;display:flex;flex-direction:column;gap:11px}
.вход form .к{margin-top:5px}
@media (max-width:1080px){
.вход{grid-template-columns:1fr 360px}
.вход__ход{display:none}
}
@media (max-width:820px){
.вход{grid-template-columns:1fr;place-items:center;padding:20px}
.вход__полотно{position:absolute;inset:0}
.вход__к{
background:var(--sf);border:1px solid var(--line);border-left:1px solid var(--line);
border-radius:var(--r3);max-width:352px;width:100%;box-shadow:var(--sh-3);overflow:hidden;
}
.вход__нить{position:static;height:3px}
.вход__б{padding:24px}
}
/* ── Поля ──────────────────────────────────────────────────────────────── */
.поле{display:flex;flex-direction:column;gap:4px}
.поле > span{font-size:11px;font-weight:500;color:var(--ink-3)}
.поле > span i{font-style:normal;color:var(--bad)}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r2);
background:var(--sf);color:var(--ink);font-size:13px;width:100%;
transition:border-color var(--t),box-shadow var(--t);
}
textarea{height:auto;min-height:62px;padding:8px 10px;line-height:1.45;resize:vertical}
select{appearance:none;padding-right:26px;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);
box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
.сетка{display:grid;gap:var(--s3)}
.сетка--2{grid-template-columns:1fr 1fr}
.сетка--3{grid-template-columns:repeat(3,1fr)}
/* Поле с кнопкой справа: «Сгенерировать» у логина и пароля, «+ Добавить»
у должности и подразделения (21.09.2026). */
.поле__скнопкой{display:flex;gap:6px;align-items:stretch;min-width:0}
.поле__скнопкой > input,.поле__скнопкой > select{flex:1;min-width:0}
.поле__скнопкой > .к{flex:none;white-space:nowrap}
/* ── Кнопки ────────────────────────────────────────────────────────────── */
.к{display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:31px;padding:0 13px;border-radius:var(--r2);font-size:13px;font-weight:500;
border:1px solid var(--line-2);background:var(--sf);color:var(--ink);
box-shadow:var(--sh-1),var(--hair);transition:border-color var(--t),background var(--t),color var(--t);white-space:nowrap}
.к:hover{border-color:var(--line-3);background:var(--sf-2)}
.к:disabled{opacity:.45;cursor:not-allowed}
/* Пока действие идёт, кнопка не отвечает и говорит об этом приглушением:
второе нажатие заводило двойника (приёмка 16.09.2026). */
.к--ждём{opacity:.55;pointer-events:none;cursor:progress}
.инп--м{height:26px;padding:0 8px;font-size:12px;max-width:190px}
.к svg{width:14px;height:14px}
.к--г{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:var(--sh-2)}
/* Отправка отчёта — тёмный изумруд: «Отправить сделай зелёненькой, чтобы
покрасивее была» (21.09.2026). Не сигнальный зелёный, а глубокий. */
.к--ок{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:var(--sh-2)}
.к--ок:hover{background:color-mix(in srgb,var(--ok) 88%,#000);
border-color:color-mix(in srgb,var(--ok) 88%,#000)}
.к--г:hover{background:var(--ac-2);border-color:var(--ac-2)}
.к--м{height:26px;padding:0 10px;font-size:12px}
.к--б{height:36px;font-size:13.5px}
.к--ш{width:100%}
.к--о{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line-2))}
.к--о:hover{border-color:var(--bad)}
/* Отметка о состоянии в ряду кнопок. Нажимать нечего, но стоять она обязана
вровень с кнопками: геометрию берёт кнопочную, цветом остаётся отметкой.
Наведение гасим — иначе спокойный текст выглядит как доступное действие. */
.к--сост{cursor:default;color:var(--ok);
border-color:color-mix(in srgb,var(--ok) 42%,var(--line-2));
background:color-mix(in srgb,var(--ok) 7%,var(--sf))}
.к--сост:hover{color:var(--ok);
border-color:color-mix(in srgb,var(--ok) 42%,var(--line-2));
background:color-mix(in srgb,var(--ok) 7%,var(--sf))}
/* ── Оболочка ──────────────────────────────────────────────────────────── */
.апп{position:fixed;inset:0;display:flex;overflow:hidden}
.сайд{width:var(--side);flex:none;display:flex;flex-direction:column;gap:var(--s2);
padding:var(--s3) var(--s2) var(--s2);background:var(--sf-grad);
border-right:1px solid var(--line);overflow-y:auto}
.марка{display:flex;align-items:center;gap:8px;padding:1px var(--s2) var(--s3)}
.марка i{width:27px;height:27px;flex:none;border-radius:8px;border:1.5px solid var(--ac);color:var(--ac);
display:grid;place-items:center;font-size:9px;font-weight:700;font-style:normal}
.марка b{display:block;font-size:12px;font-weight:600;line-height:1.15}
.марка span{display:block;font-size:10px;color:var(--ink-3);line-height:1.2}
.нав{display:flex;flex-direction:column;gap:1px}
/* Подразделения завода: карточка на каждое, числа в ряд. Вход в эксплуатацию
для руководства и руководителей проектов (16.09.2026). */
.эподр-сетка{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
gap:var(--s2)}
.эподр{display:flex;flex-direction:column;gap:9px;width:100%;text-align:left;
padding:13px 14px;border:1px solid var(--line);border-radius:var(--r3);
background:var(--sf);cursor:pointer;font:inherit;color:inherit}
.эподр:hover{border-color:var(--line-3);background:var(--sf-2)}
.эподр__ш{display:flex;align-items:center;gap:10px}
.эподр__и{width:34px;height:34px;flex:none;border-radius:9px;display:flex;
align-items:center;justify-content:center;font-size:12px;font-weight:700;
color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);
border:1px solid color-mix(in srgb,var(--ac) 28%,transparent)}
.эподр__т{display:flex;flex-direction:column;min-width:0;flex:1}
.эподр__т b{font-size:14px;font-weight:600;line-height:1.25}
.эподр__т span{font-size:11.5px;color:var(--ink-3);line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.эподр__ч{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.эподр__ч span{display:flex;flex-direction:column;justify-content:center;gap:2px;
min-height:46px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r2);
background:var(--bg)}
.эподр__ч b{font-size:15px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.эподр__ч i{font-style:normal;font-size:10px;color:var(--ink-4);line-height:1.2}
.эподр__ц{font-size:11.5px;color:var(--ink-3);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.эподр__х{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-4);
margin-top:auto}
.эподр__х b{margin-left:auto;font-weight:600;color:var(--ac)}
@media (max-width:760px){.эподр-сетка{grid-template-columns:1fr}
.эподр__ч{grid-template-columns:repeat(2,1fr)}}
/* Пункт меню — одной строкой: перенос делал плашку двухэтажной и всё равно
обрезал длинные названия (16.09.2026). */
.нав a{display:flex;align-items:center;gap:8px;height:29px;padding:0 8px;border-radius:8px;
white-space:nowrap;
color:var(--ink-2);font-size:12.5px;font-weight:500;border:1px solid transparent;
transition:background var(--t),color var(--t),border-color var(--t)}
.нав a svg{width:14px;height:14px;color:var(--ink-4);flex:none}
.нав a:hover{background:var(--sf-3);color:var(--ink)}
.нав a.вкл{background:var(--sf);color:var(--ink);font-weight:600;border-color:var(--line-2);
box-shadow:var(--sh-1),var(--hair)}
.нав a.вкл svg{color:var(--ac)}
.нав .сч{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--ink-3);
border:1px solid var(--line-2);border-radius:6px;padding:0 5px;line-height:15px;min-width:20px;text-align:center}
.нав a.тревога .сч{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
/* 28.09.2026, приёмка под учётной записью инженера: «новое уведомление должно
сразу бросаться в глаза, а тут оно не видно». Непрочитанное красим заливкой,
а не рамкой: цифра в бледной рамке терялась среди пунктов меню.
Тихие счётчики (сколько проектов в работе) остаются бледными — они не про
новое и мигать не должны. */
.нав .сч:not(.сч--тихо){background:var(--ac);border-color:var(--ac);color:#fff;
font-weight:700;border-radius:999px}
.нав a.ждём .сч{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 45%,transparent)}
.сайд .низ{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);
display:flex;align-items:center;gap:8px;padding-left:5px}
.сайд .низ i{width:27px;height:27px;flex:none;border-radius:8px;border:1px solid var(--line-2);
display:grid;place-items:center;font-size:10px;font-weight:600;font-style:normal;color:var(--ink-2)}
.сайд .низ b{display:block;font-size:11.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.сайд .низ span{display:block;font-size:10px;color:var(--ink-3);line-height:1.2}
.сайд .низ button{width:24px;height:24px;flex:none;border-radius:7px;color:var(--ink-4)}
.сайд .низ button:hover{background:var(--sf-3);color:var(--ink)}
.сайд .низ button svg{width:14px;height:14px}
.главное{flex:1;min-width:0;display:flex;flex-direction:column}
.шапка{height:var(--top);flex:none;display:flex;align-items:center;gap:var(--s3);
padding:0 var(--s4);border-bottom:1px solid var(--line);background:var(--sf-grad)}
.шапка h1{font-size:14.5px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* 22.09.2026. Неразрывный текст без min-width:0 во флексе не сжимается вовсе:
его минимум равен ширине содержимого. Подзаголовок распирал шапку и выталкивал
кнопки за правый край, где их наглухо срезает .апп{overflow:hidden} — не
прокрутить и не нажать. Теперь подпись уступает место первой и обрезается. */
.шапка .под{font-size:11px;color:var(--ink-3);white-space:nowrap;
min-width:0;flex-shrink:6;overflow:hidden;text-overflow:ellipsis}
/* Четыре элемента шапки проекта держат общую ширину по самому длинному —
ряд читается одним блоком, а не набором разнокалиберных пилюль. */
#шапкакн > .к{min-width:146px}
/* 22.09.2026, Раиль: «сделал окно чуть больше половины экрана — всё поехало».
Четыре кнопки шапки держат по 146 px: 4×146 + зазоры = 620 px, плюс боковая
панель и поля. Ниже ~1400 px в одну строку это не помещается физически,
сколько подпись ни обрезай, поэтому шапка складывается в две строки, а
кнопки перестают держать минимум. Проверено замером от 1680 до 700 px. */
@media (max-width:1400px){
.шапка{height:auto;min-height:var(--top);flex-wrap:wrap;
padding:7px var(--s4);gap:4px var(--s3)}
#шапкакн{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end}
#шапкакн > .к{min-width:0}
}
.работа{flex:1;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);overflow-y:auto}
/* Блоки не сжимаются: иначе длинная карточка этапа давит схему в ноль. */
.работа > *{flex:none}
/* ── Карточка ──────────────────────────────────────────────────────────── */
.к2{background:var(--sf-grad);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:var(--sh-1),var(--hair);overflow:hidden}
.к2__ш{display:flex;align-items:center;gap:var(--s3);padding:8px var(--s4);border-bottom:1px solid var(--line)}
.к2__ш b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.к2__б{padding:var(--s4)}
.к2__б--0{padding:0}
.нить{height:3px;background:linear-gradient(90deg,#2C6E6B 0%,#2F5C93 46%,#8A6516 100%)}
html[data-theme="dark"] .нить{opacity:.8}
/* ── Показатели: подписи и числа стоят на одном уровне ─────────────────── */
.пл{display:grid;gap:var(--s2);grid-auto-flow:column;grid-auto-columns:1fr}
.пл > div,.пл > button{border:1px solid var(--line);border-radius:var(--r2);padding:6px 11px 7px;
background:var(--sf);display:grid;grid-template-rows:13px 24px auto;align-content:start}
.пл .lab{align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.пл b{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:24px;white-space:nowrap;
align-self:center;display:block;
/* 22.09.2026: без обрезки длинное значение уходило за рамку плашки поверх
соседней. Многоточие честнее: видно, что значение длиннее. */
overflow:hidden;text-overflow:ellipsis}
.пл b small{font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-left:3px}
.пл em{font-style:normal;font-size:11px;line-height:1.35;color:var(--ink-3);display:block;margin-top:1px}
.пл .тревога b{color:var(--bad)} .пл .тревога{border-color:color-mix(in srgb,var(--bad) 38%,var(--line))}
/* ФИО в плашке. Числу идёт nowrap и 19 px, фамилии с именем и отчеством —
нет: «Москальченко Николай Викторович» растягивал ряд и давал прокрутку
вбок (21.09.2026). */
.пл > div:has(.пл__фио){grid-template-rows:13px auto}
/* 22.09.2026. Правило писалось 21.09 как «ФИО переносится», но не работало ни
дня: у «.пл__фио» вес 0-1-0, а у «.пл b» выше по файлу — 0-1-1, и побеждал
nowrap с кеглем 19 px. Проверено замером: «Москальченко Николай Викторович»
требовал 319 px и резался многоточием даже на полном экране 1512 px.
Пишем «.пл b.пл__фио» — тот же вес плюс класс, теперь выигрывает. */
.пл b.пл__фио{font-size:14px;line-height:1.3;letter-spacing:0;
white-space:normal;overflow-wrap:anywhere}
/* Длинное название (подразделение) ведёт себя как ФИО: переносится, а не
режется многоточием — «Отдел пожарной ...» не читается (26.09.2026). */
.пл > div:has(.пл__длинно){grid-template-rows:13px auto}
.пл b.пл__длинно{font-size:14px;line-height:1.3;letter-spacing:0;
white-space:normal;overflow-wrap:anywhere}
.пл > div,.пл > button{min-width:0}
/* Строка «ничего нет» внутри таблицы: шапка остаётся видна, а сама строка
не притворяется нажимаемой (21.09.2026). */
/* Непрочитанный отчёт видно и краем глаза: слева акцентная черта. */
.тб tbody tr.эотч--новый td:first-child{box-shadow:inset 3px 0 0 0 var(--ac)}
.тб tbody tr.эотч--новый td.гл{color:var(--ink);font-weight:600}
.тб tbody tr.тб__нет,.тб--нажим tbody tr.тб__нет{cursor:default;background:none}
.тб tbody tr.тб__нет:hover td{background:none}
.тб tbody tr.тб__нет td{padding:18px var(--s4);text-align:center;color:var(--ink-3);
font-size:12.5px}
.пл .ждём b{color:var(--wait)} .пл .ждём{border-color:color-mix(in srgb,var(--wait) 38%,var(--line))}
.пл .готов b{color:var(--ok)} .пл .готов{border-color:color-mix(in srgb,var(--ok) 34%,var(--line))}
/* ── Состояния ─────────────────────────────────────────────────────────── */
.сост{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;white-space:nowrap}
.сост::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.с-закрыт{color:var(--ok)} .с-нарушение{color:var(--bad)}
.с-ждём.сост,.с-приёмка{color:var(--wait)} .с-работе{color:var(--ac)}
.с-неначат{color:var(--idle)}
.бир{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;
border:1px solid var(--line-2);border-radius:var(--r1);font-size:11px;font-weight:500;
color:var(--ink-3);white-space:nowrap}
.бир--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent)}
.бир--w{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 46%,transparent)}
.бир--b{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 46%,transparent)}
.бир--a{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 46%,transparent)}
/* ── Таблица ───────────────────────────────────────────────────────────── */
.тб{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.тб th{text-align:left;font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-2);background:var(--sf-3);padding:7px 10px;white-space:nowrap;
border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);
position:sticky;top:0;z-index:2}
.тб th.ч{text-align:right} .тб th.н{text-align:center;width:38px;min-width:38px}
.тб th:last-child,.тб td:last-child{border-right:0}
/* Слитный набор без пробелов («sdkfhkshdf…») распирал колонку и вся таблица
разъезжалась: заголовки переставали стоять над своими ячейками. */
.тб td{padding:7px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line-2);
overflow-wrap:anywhere;word-break:break-word;
color:var(--ink-2);vertical-align:middle;
/* Длинное слово без пробелов (вставка из Word, склеенное название) растягивало
таблицу портфеля почти на сто тысяч точек: колонки «Сумма», «Этапов» и
«Состояние» уезжали за край экрана, и добраться до них было нельзя.
Теперь такое слово переносится по буквам — приёмка 16.09.2026. */
max-width:420px;overflow-wrap:anywhere;word-break:break-word}
/* И не больше трёх строк на ячейку: иначе одна запись с длинным названием
занимает пол-экрана, а остальные проекты уходят вниз. Полное название
видно в карточке проекта. */
/* 20.09.2026. Обрезка в три строки делалась через display:-webkit-box, но
такая ячейка выпадает из табличной раскладки: её правая граница встаёт по
содержимому, а не по колонке, и шапка расходится с телом. На узком окне
это видно как «съехал первый столбец» в «Людях и ролях». Измерено:
в «Детализации фонда» 755 против 683 точек.
Возвращаем ячейке табличное поведение. От расползания длинного названия
по-прежнему держат max-width:420px и перенос по буквам ниже. */
.тб td.гл{display:table-cell;overflow:hidden}
.тб td.гл .под{display:block}
/* Таблица шире экрана прокручивается внутри своего блока, а не тащит за собой
всю страницу. */
.к2__б--0{overflow-x:auto}
.эстрока td,.кэ-стр span,.кэ-стр b,.поз__т b{overflow-wrap:anywhere}
.тб tr:last-child td{border-bottom:0}
/* 21.09.2026. Палец-указатель и подсветка стояли на БАЗОВОЙ таблице, и
нажимаемыми выглядели все 44 — в том числе справочные таблицы «Кадров»,
где нажимать нечего. Оставляем это только там, где строка правда
открывается: класс .тб--нажим. */
.тб--нажим tbody tr{cursor:pointer}
/* Через строку — как в дашборде склада: сетка читается даже беглым взглядом. */
.тб tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--sf-3) 45%,transparent)}
.тб--нажим tbody tr:hover td{background:var(--sf-2)}
/* Крайним колонкам нужны поля: карточка их не даёт, и первый столбец
упирался в рамку (эталон склада — 16 px на узком, 24 на широком). */
.к2__б--0 .тб th:first-child,.к2__б--0 .тб td:first-child{padding-left:16px}
.к2__б--0 .тб th:last-child,.к2__б--0 .тб td:last-child{padding-right:16px}
/* Широкая таблица прокручивается внутри блока, а не сминается в кашу. */
.тб:has(th:nth-child(6)){min-width:720px}
.тб:has(th:nth-child(8)){min-width:900px}
/* Двузначные номера строк переносились на две строки: 30 точек мало. */
.тб td.н{color:var(--ink-4);width:38px;min-width:38px;text-align:center;
font-size:11.5px;white-space:nowrap}
.тб td.гл{color:var(--ink);font-weight:500}
.тб td.ч{text-align:right;white-space:nowrap;color:var(--ink);font-weight:500}
/* Итоговая строка. Нижнюю границу последней строки тела снимает правило
.тб tr:last-child td — поэтому черту перед «Итого» рисуем сверху у tfoot,
иначе линии либо нет вовсе, либо она двоится. Классы .гл и .ч перечислены
явно: их специфичность выше, и без этого жирность до итога не доходит. */
.тб tfoot td,.тб tfoot td.гл,.тб tfoot td.ч{
border-top:1px solid var(--line-2);background:var(--sf-2);
color:var(--ink);font-weight:600;padding-top:8px;padding-bottom:8px}
.тб tfoot td.ч{font-size:13px;letter-spacing:-.01em}
/* ═══ СХЕМА ЭТАПОВ · «метро» ═══════════════════════════════════════════ */
.метро{padding:var(--s4) var(--s4) var(--s3)}
.метро__п{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.метро__п b{font-size:12px;font-weight:600}
/* горизонтально */
.лн{position:relative;display:flex;padding-top:19px}
.лн::before{content:'';position:absolute;left:14px;right:14px;top:24px;height:3px;
background:var(--line-2);border-radius:3px}
.ост{flex:1;min-width:78px;position:relative;display:flex;flex-direction:column;align-items:center;
padding:0 4px;cursor:pointer;background:none}
.ост__т{width:15px;height:15px;border-radius:50%;border:2.5px solid var(--line-2);
background:var(--sf);z-index:1;position:relative;flex:none;transition:transform var(--t)}
.ост:hover .ост__т{transform:scale(1.18)}
.ост__н{margin-top:8px;font-size:11px;line-height:1.3;text-align:center;color:var(--ink-2);
max-width:130px;font-weight:500}
.ост__д{margin-top:2px;font-size:10px;color:var(--ink-3);white-space:nowrap}
.ост.вкл .ост__т{box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent)}
.ост.вкл .ост__н{color:var(--ink);font-weight:600}
.ост[data-state="закрыт"] .ост__т{border-color:var(--ok);background:var(--ok)}
.ост[data-state="в работе"] .ост__т{border-color:var(--ac);background:var(--ac)}
.ост[data-state="ждём документы"] .ост__т{border-color:var(--wait);background:var(--sf)}
.ост[data-state="на приёмке"] .ост__т{border-color:var(--wait);background:var(--wait)}
.ост[data-state="нарушение"] .ост__т{border-color:var(--bad);background:var(--bad)}
.ост__л{position:absolute;top:5.5px;height:3px;background:var(--ok);z-index:0}
/* вертикально */
.лнв{position:relative;padding-left:6px}
.лнв::before{content:'';position:absolute;left:13px;top:11px;bottom:11px;width:3px;
background:var(--line-2);border-radius:3px}
.лнв .ост{flex-direction:row;align-items:center;gap:10px;min-width:0;width:100%;
padding:5px 4px;text-align:left}
.лнв .ост__н{margin-top:0;text-align:left;max-width:none;flex:1}
.лнв .ост__д{margin-top:0;margin-left:auto}
/* ветка СМР */
.ветка{margin-top:var(--s3);padding:var(--s3) 0 0;border-top:1px dashed var(--line-2);position:relative}
.ветка.пусто-сверху{border-top:0;margin-top:0;padding-top:0}
.ветка__п{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s2)}
.ветка__п::before{content:'';width:12px;height:12px;border-radius:50%;
border:2.5px solid var(--ac);flex:none}
/* ── Список позиций комплекта ──────────────────────────────────────────── */
/* Заливка полосы берётся СВЕТЛЕЕ фона страницы, а не темнее его. Было
--sf-3 #ECEFF3 при фоне #F2F4F7: полоса оказывалась темнее самой страницы
и читалась как серая плашка, вклеенная в белую карточку. */
.слой{display:flex;align-items:center;gap:var(--s2);padding:6px 11px;background:var(--sf-2);
border-bottom:1px solid var(--line);border-top:1px solid var(--line-2);
font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.слой:first-child{border-top:0}
.поз{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid var(--line)}
.поз:last-child{border-bottom:0}
.поз__и{width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid var(--line-2);
display:grid;place-items:center;color:var(--ink-4)}
.поз__и svg{width:10px;height:10px}
.поз.есть .поз__и{border-color:var(--ok);color:var(--ok)}
.поз.замечание .поз__и{border-color:var(--wait);color:var(--wait)}
.поз.нет .поз__и{border-color:var(--bad);color:var(--bad)}
.поз__т{flex:1;min-width:0}
.поз__т b{display:block;font-size:12px;font-weight:500;line-height:1.35;color:var(--ink)}
.поз__т span{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.35;margin-top:1px}
.поз__п{flex:none;display:flex;align-items:center;gap:7px}
/* ── Задания ───────────────────────────────────────────────────────────── */
.зад{display:flex;align-items:flex-start;gap:10px;padding:9px var(--s4);border-bottom:1px solid var(--line)}
.зад:last-child{border-bottom:0}
.зад__м{width:3px;align-self:stretch;border-radius:3px;background:var(--line-2);flex:none;margin:1px 0}
.зад--b .зад__м{background:var(--bad)} .зад--w .зад__м{background:var(--wait)}
.зад--a .зад__м{background:var(--ac)}
.зад__т{flex:1;min-width:0}
.зад__т b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.зад__т span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.зад__п{flex:none;display:flex;align-items:center;gap:6px;padding-top:1px}
/* ── Проверка файла ────────────────────────────────────────────────────── */
.пров{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.пров__р{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:12px}
.пров__р:last-child{border-bottom:0}
.пров__р i{width:15px;height:15px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);
display:grid;place-items:center;margin-top:1px;font-style:normal;color:var(--ink-4)}
.пров__р i svg{width:8px;height:8px}
.пров__р.да i{border-color:var(--ok);color:var(--ok)}
.пров__р.внимание i{border-color:var(--wait);color:var(--wait)}
.пров__р.нет i{border-color:var(--bad);color:var(--bad)}
.бросить{border:1.5px dashed var(--line-2);border-radius:var(--r2);padding:14px;text-align:center;
color:var(--ink-3);font-size:12px;background:var(--sf-2);cursor:pointer;transition:border-color var(--t),background var(--t)}
.бросить:hover,.бросить.над{border-color:var(--ac);background:var(--sf)}
.бросить svg{width:18px;height:18px;margin:0 auto 5px;color:var(--ink-4)}
.галки{display:flex;flex-direction:column;gap:5px}
.галки label{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--ink-2);line-height:1.4;cursor:pointer}
.галки input{position:absolute;opacity:0;pointer-events:none}
.галки i{width:15px;height:15px;flex:none;border-radius:4px;border:1.5px solid var(--line-3);
display:grid;place-items:center;margin-top:1px;font-style:normal;transition:border-color var(--t)}
.галки i svg{width:9px;height:9px;color:var(--ok);opacity:0;transition:opacity var(--t);pointer-events:none}
.галки i{pointer-events:none}
.галки input:checked + i{border-color:var(--ok)}
.галки input:checked + i svg{opacity:1}
/* фотографии плиткой */
.фото{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:5px}
.фото a,.фото .добавить{aspect-ratio:1;border-radius:var(--r1);border:1px solid var(--line-2);
overflow:hidden;background:var(--sf-3);display:block;position:relative}
.фото img{width:100%;height:100%;object-fit:cover;display:block}
.фото .добавить{border-style:dashed;display:grid;place-items:center;color:var(--ink-4);cursor:pointer}
.фото .добавить svg{width:16px;height:16px}
/* ── Окно ──────────────────────────────────────────────────────────────── */
.окно{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
background:color-mix(in srgb,var(--ink) 34%,transparent);backdrop-filter:blur(2px)}
.окно__к{width:100%;max-width:620px;max-height:94vh;display:flex;flex-direction:column;
background:var(--sf);border:1px solid var(--line-2);border-radius:var(--r3);box-shadow:var(--sh-3);overflow:hidden}
.окно__ш{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s4);border-bottom:1px solid var(--line)}
.окно__ш b{font-size:14px;font-weight:600;letter-spacing:-.015em}
.окно__б{padding:var(--s4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3)}
.окно__н{padding:11px var(--s4);border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.окно--ш .окно__к{max-width:860px}
/* ── Шаги мастера ──────────────────────────────────────────────────────── */
.шаги{display:flex;gap:5px;padding:11px var(--s4);border-bottom:1px solid var(--line);background:var(--sf-2)}
.шаги div{flex:1;display:flex;flex-direction:column;gap:4px}
.шаги i{height:3px;border-radius:3px;background:var(--line-2);display:block}
.шаги span{font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.шаги div.вкл i{background:var(--ac)} .шаги div.вкл span{color:var(--ink);font-weight:600}
.шаги div.пройден i{background:var(--ok)}
/* ── Уведомление ───────────────────────────────────────────────────────── */
.весть{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
padding:9px 15px;border-radius:var(--r2);background:var(--sf);border:1px solid var(--line-2);
box-shadow:var(--sh-3);font-size:12.5px;color:var(--ink);max-width:520px;
border-left:3px solid var(--ac)}
.весть.плохо{border-left-color:var(--bad)}
.весть.хорошо{border-left-color:var(--ok)}
.пусто{padding:26px var(--s4);text-align:center;color:var(--ink-3);font-size:12.5px}
.пусто b{display:block;color:var(--ink-2);font-size:13.5px;font-weight:600;margin-bottom:3px}
.две{display:grid;grid-template-columns:1fr 292px;gap:var(--s3);align-items:start}
@media (max-width:1080px){.две{grid-template-columns:1fr}.пл{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}}
/* ── Предпросмотр выбранного файла ─────────────────────────────────────── */
.файл{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line-2);
border-radius:var(--r2);background:var(--sf)}
.файл__и{width:38px;height:38px;flex:none;border-radius:8px;overflow:hidden;background:var(--sf-3);
border:1px solid var(--line);display:grid;place-items:center}
.файл__и img{width:100%;height:100%;object-fit:cover;display:block}
.файл__т{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-3)}
.файл__п{flex:1;min-width:0}
.файл__п b{display:block;font-size:12.5px;font-weight:500;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.файл__п span{display:block;font-size:11px;color:var(--ink-3);line-height:1.3;margin-top:1px}
/* ── Врезка-предупреждение ─────────────────────────────────────────────── */
.врезка{padding:10px 12px;border:1px solid var(--line-2);
border-radius:var(--r2);font-size:12.5px;line-height:1.5;color:var(--ink-2);background:var(--sf);
margin-bottom:2px}
.врезка b{color:var(--ink)}
.врезка--wait{border-color:color-mix(in srgb,var(--wait) 40%,var(--line-2))}
.врезка--ok{border-color:color-mix(in srgb,var(--ok) 36%,var(--line-2))}
.врезка--bad{border-color:color-mix(in srgb,var(--bad) 40%,var(--line-2))}
/* ── Галка отдельной строкой ───────────────────────────────────────────── */
.галка-строка{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line-2);
border-radius:var(--r2);background:var(--sf);cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.галка-строка input{position:absolute;opacity:0;pointer-events:none}
.галка-строка i{width:16px;height:16px;flex:none;border-radius:4px;border:1.5px solid var(--line-3);
display:grid;place-items:center;font-style:normal;pointer-events:none;transition:border-color var(--t)}
.галка-строка i svg{width:9px;height:9px;color:var(--ok);opacity:0;transition:opacity var(--t);pointer-events:none}
.галка-строка input:checked + i{border-color:var(--ok)}
.галка-строка input:checked + i svg{opacity:1}
.галка-строка b{color:var(--ink);font-weight:600}
/* ── Поле даты и календарь ─────────────────────────────────────────────── */
.дп{position:relative;display:block}
.дп__в{padding-right:34px!important}
.дп__в.дп--плохо{border-color:var(--bad)}
.дп__к{position:absolute;right:4px;top:50%;transform:translateY(-50%);
width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-4)}
.дп__к:hover{background:var(--sf-3);color:var(--ink-2)}
.дп__к svg{width:15px;height:15px}
.кал{position:fixed;z-index:120;width:252px;padding:10px;border-radius:var(--r3);
background:var(--sf);border:1px solid var(--line-2);box-shadow:var(--sh-3)}
.кал__ш{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.кал__ш b{font-size:12.5px;font-weight:600;text-transform:capitalize}
.кал__с{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.кал__с:hover{background:var(--sf-3);color:var(--ink)}
.кал__с svg{width:14px;height:14px}
.кал__н{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.кал__н span{text-align:center;font-size:9.5px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-4)}
.кал__т{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.кал__д{height:28px;border-radius:7px;font-size:12.5px;color:var(--ink-2);
border:1px solid transparent;transition:background var(--t),border-color var(--t)}
.кал__д:hover{background:var(--sf-3);color:var(--ink)}
.кал__д.нынче{border-color:var(--line-2);font-weight:600}
.кал__д.вкл{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:600}
.кал__низ{display:flex;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.кал__низ .к{flex:1}
/* Выключенное поле: видно, что есть, но заполнять нечего */
.поле--выкл > span{color:var(--ink-4)}
.поле--выкл input{background:var(--sf-3);color:var(--ink-4);cursor:not-allowed}
/* Окно: воздух по содержимому, без пустого низа */
.окно__б{gap:11px}
/* ── Пары «подпись — значение»: рядом, а не по краям экрана ────────────── */
/* Разделители рисуем границами ячеек, а не фоном сетки: при нечётном
числе пар пустой хвост строки должен быть цветом карточки, а не серым. */
.пары{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--sf);
border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.пары--узкие{grid-template-columns:1fr}
.пара{background:var(--sf);padding:7px 11px;display:flex;align-items:baseline;gap:8px;min-width:0;
border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.пара span{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.пара b{font-size:12.5px;font-weight:500;color:var(--ink);margin-left:auto;text-align:right;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1280px){.пары{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.пары{grid-template-columns:1fr}}
/* Свой margin-top не задаём: блок стоит в flex-колонке с общим gap, и отступ
считался дважды, а как первый ребёнок складывался ещё и с padding карточки —
над надписью «Цель этапа» набегало 33px пустоты вместо 17px. */
.цель{padding:7px 11px;border:1px solid var(--line);border-radius:var(--r2);background:var(--sf-2)}
.цель p{margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink-2);max-width:none}
.ряд-кнопок{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
/* Несколько файлов в одном поле */
.файлы{display:flex;flex-direction:column;gap:6px}
.файл-плюс{display:flex;align-items:center;justify-content:center;gap:7px;
border:1.5px dashed var(--line-2);border-radius:var(--r2);padding:10px;
color:var(--ink-3);font-size:12.5px;background:var(--sf-2);width:100%;
transition:border-color var(--t),background var(--t)}
.файл-плюс:hover{border-color:var(--ac);background:var(--sf)}
.файл-плюс svg{width:14px;height:14px}
/* Подпись второй строкой в таблице */
.тб td .под{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;font-weight:400;
overflow-wrap:anywhere}
.тб{table-layout:auto}
.тб th{overflow-wrap:anywhere}
/* Воздух между полями и галкой в мастере */
#мтело{display:flex;flex-direction:column;gap:11px}
/* ── Три колонки: этап · фотографии · паспорт ──────────────────────────── */
.трое{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 356px;gap:var(--s3);
align-items:stretch}
/* Карточка и паспорт задают высоту строки, фотографии подстраиваются под неё:
собственная высота фотоблока обнулена, иначе он сам растягивал бы строку. */
.трое > *:nth-child(1),.трое > *:nth-child(3){align-self:start}
.трое > *:nth-child(2){height:0;min-height:100%}
.трое > *{min-height:0}
.правая{display:flex;flex-direction:column;gap:var(--s3)}
@media (max-width:1500px){.трое{grid-template-columns:minmax(0,1fr) 356px}
.трое > *:nth-child(2){grid-column:1}}
@media (max-width:1080px){.трое{grid-template-columns:1fr}.трое > *:nth-child(2){grid-column:auto}}
/* Пары столбцом: подпись слева, значение справа, но в узкой колонке */
.пары--столбцом{grid-template-columns:1fr}
html[data-theme="dark"] .пары{border-color:var(--line-2)}
html[data-theme="dark"] .пара{border-color:var(--line-2)}
.к2{border-color:var(--line-2)}
.поз__и,.мпоз__и{border-color:var(--line-3)}
/* Фотографии крупнее в своей колонке */
.фото--крупно{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.фото-пусто{display:flex;flex-direction:column;align-items:center;gap:5px;padding:26px 14px;
border:1.5px dashed var(--line-2);border-radius:var(--r2);background:var(--sf-2);
color:var(--ink-3);font-size:12px;cursor:pointer;text-align:center;width:100%}
.фото-пусто:hover{border-color:var(--ac);background:var(--sf)}
.фото-пусто svg{width:20px;height:20px;color:var(--ink-4)}
.фото-пусто b{font-size:13px;color:var(--ink-2)}
/* Выбранная остановка: расходящиеся круги */
.ост.вкл .ост__т{animation:импульс 2.2s ease-out infinite}
@keyframes импульс{
0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac) 42%,transparent),
0 0 0 0 color-mix(in srgb,var(--ac) 28%,transparent)}
70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--ac) 0%,transparent),
0 0 0 16px color-mix(in srgb,var(--ac) 0%,transparent)}
100%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){.ост.вкл .ост__т{animation:none;
box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 20%,transparent)}}
.ост.вкл .ост__н{color:var(--ink);font-weight:600}
/* ── Схема столбцом: узкая колонка слева на высоту экрана ──────────────── */
.стб{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--s3);align-items:start}
.стб__л > .бл:first-child .к2{position:sticky;top:0}
.стб__л .метро{padding:var(--s3) 11px}
.стб__л .метро__п{flex-direction:column;align-items:stretch;gap:7px;margin-bottom:9px}
.стб__л .метро__п .sp{display:none}
.стб__л .метро__п > span:nth-child(2){display:none}
.стб__л .ост{flex-direction:column;align-items:flex-start;gap:3px;padding:7px 2px 7px 0}
.стб__л .ост__н{font-size:12px;margin-top:0;padding-left:24px;white-space:normal}
.стб__л .ост__д{font-size:10px;margin-left:0;padding-left:24px}
.стб__л .ост__т{position:absolute;left:6px;top:9px}
.стб__л .лнв::before{left:12px}
.стб__п{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.трое--узко{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 320px}
@media (max-width:1400px){.трое--узко{grid-template-columns:minmax(0,1fr) 320px}
.трое--узко > *:nth-child(2){grid-column:1}}
@media (max-width:1080px){.стб{grid-template-columns:1fr}.стб__л > .бл:first-child .к2{position:static}}
/* ── Две паспортные фотографии: как есть и как будет ───────────────────── */
.пасп-тело{display:grid;grid-template-columns:1fr;gap:8px}
.пасп-фото{display:flex;flex-direction:column;gap:5px;margin:0;min-width:0}
.пасп-фото a{display:block;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line-2);
background:var(--sf-3);aspect-ratio:4/3}
.пасп-фото img{width:100%;height:100%;object-fit:cover;display:block}
.пасп-фото figcaption{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3)}
.пасп-фото--пусто{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
aspect-ratio:4/3;border:1.5px dashed var(--line-2);border-radius:var(--r2);background:var(--sf-2);
color:var(--ink-3);font-size:12px;text-align:center;padding:10px}
.пасп-фото--пусто:hover{border-color:var(--ac);background:var(--sf)}
.пасп-фото--пусто svg{width:20px;height:20px;color:var(--ink-4)}
/* ── Карточка согласования ─────────────────────────────────────────────── */
.сог{padding:12px var(--s4);border-bottom:1px solid var(--line)}
.сог:last-child{border-bottom:0}
.сог__ш{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.сог__ш b{font-size:13.5px;font-weight:600}
.сог__ш .mut{font-size:11.5px}
.сог__ч{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:9px}
.сог__п{display:flex;flex-direction:column;gap:2px}
.сог__п b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.сог__п--рост b{color:var(--wait)}
.сог__с{font-size:16px;color:var(--ink-4);padding-bottom:2px}
.сог__т{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r2);background:var(--sf-2)}
.сог__т p{font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:2px;max-width:none}
.сог__н{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;flex-wrap:wrap}
/* пары чуть плотнее */
.пара{padding:5px 10px}
.пара span{font-size:12px}
/* ── Пилюли разделов проекта ───────────────────────────────────────────── */
.пилюли{display:flex;gap:2px;padding:0 2px;border-bottom:1px solid var(--line);margin-bottom:2px}
.пилюля{position:relative;padding:7px 13px 8px;font-size:13px;font-weight:500;color:var(--ink-3);
border-radius:8px 8px 0 0;display:flex;align-items:center;gap:6px;
transition:color var(--t),background var(--t)}
.пилюля:hover{color:var(--ink);background:var(--sf-2)}
.пилюля i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-3);
border:1px solid var(--line-2);border-radius:6px;padding:0 5px;line-height:15px}
.пилюля.вкл{color:var(--ink);font-weight:600}
.пилюля.вкл::after{content:'';position:absolute;left:9px;right:9px;bottom:-1px;height:2px;
background:var(--ac);border-radius:2px}
.пилюля.вкл i{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 40%,transparent)}
/* ── Схема линией: компактнее ──────────────────────────────────────────── */
.метро{padding:9px var(--s4) 8px}
.метро__п{margin-bottom:0}
.метро__п b{font-size:12.5px;font-weight:600}
.лн{padding-top:12px}
.лн::before{top:17px}
.ост__с{display:block;font-style:normal;font-size:10px;margin-top:2px;color:var(--ink-3)}
.ост[data-state="закрыт"] .ост__с{color:var(--ok)}
.ост[data-state="нарушение"] .ост__с{color:var(--bad)}
.ост[data-state="ждём документы"] .ост__с,
.ост[data-state="на приёмке"] .ост__с{color:var(--wait)}
.ост[data-state="в работе"] .ост__с{color:var(--ac)}
.лнв .ост__с{margin-top:0;margin-left:auto}
.ост__т{width:13px;height:13px;border-width:2px}
.ост__н{margin-top:6px;font-size:11px;line-height:1.25}
.ост__д{margin-top:1px}
.ветка{margin-top:8px;padding-top:8px}
.ветка__п{margin-bottom:2px}
.метро .lab{margin-bottom:2px!important}
/* ── Столбцом: схема шире, карточка уже ────────────────────────────────── */
.стб{grid-template-columns:300px minmax(0,1fr)}
.трое--узко{grid-template-columns:minmax(0,320px) minmax(0,1fr) 320px}
@media (max-width:1500px){.трое--узко{grid-template-columns:minmax(0,1fr) 320px}}
/* ── Фотографии по высоте карточки этапа ───────────────────────────────── */
.пасп-блок{display:flex;flex-direction:column;min-height:0}
/* Пара снимков стоит рядом и не тянется по высоте: блок теперь плитка
в общей сетке, а не колонка на весь экран. */
.пасп-тело{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.пасп-фото{display:flex;flex-direction:column;gap:5px;min-width:0}
.пасп-фото a{aspect-ratio:4/3;max-height:170px}
.пасп-фото--пусто{aspect-ratio:4/3;max-height:170px}
.пасп-фото figcaption{justify-content:space-between}
.пасп-фото figcaption{justify-content:space-between;flex:none}
/* ── Слои комплекта отделены и подписаны жирнее ────────────────────────── */
.слой{padding:9px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;
color:var(--ink);background:var(--sf-3);border-top:2px solid var(--line-2)}
.слой:first-child{border-top:0}
/* ── Мои задания: два блока в ряд ──────────────────────────────────────── */
.задания{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
@media (max-width:1200px){.задания{grid-template-columns:1fr}}
.задания > *{min-width:0}
/* карточка срока */
.срок-к{padding:11px var(--s4);border-bottom:1px solid var(--line)}
.срок-к:last-child{border-bottom:0}
.срок-к__ш{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.срок-к__ш b{font-size:13.5px;font-weight:600}
.срок-к__п{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.срок-к__п > div{background:var(--sf);padding:6px 9px}
.срок-к__п span{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-3)}
.срок-к__п b{display:block;font-size:13px;font-weight:600;margin-top:2px;white-space:nowrap}
.срок-к__н{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11.5px;flex-wrap:wrap}
/* снимки в разделе фотографий */
.снимки{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.снимок{margin:0;display:flex;flex-direction:column;gap:4px}
.снимок a{display:block;border:1px solid var(--line-2);border-radius:var(--r2);overflow:hidden;
background:var(--sf-3);aspect-ratio:4/3}
.снимок img{width:100%;height:100%;object-fit:cover;display:block}
.снимок figcaption{font-size:11px;color:var(--ink-3)}
/* ── Просмотр документа ────────────────────────────────────────────────── */
.просмотр{position:relative;height:82vh;border:1px solid var(--line-2);border-radius:var(--r2);
overflow:hidden;background:var(--sf-3);display:flex;align-items:center;justify-content:center}
/* Снимок с телефона бывает мелким: коробка подстраивается под кадр,
а не топит его в сером поле. */
/* 21.09.2026: превью открывалось квадратом и вертикальный снимок обрезался.
Коробка теперь высокая, кадр вписывается целиком. */
.просмотр--фото{height:82vh;min-height:320px;max-height:none;padding:10px}
.просмотр--фото img{max-width:100%;max-height:100%;object-fit:contain}
/* Листалка: полупрозрачные лепестки по краям, не перекрывают кадр. */
.лист{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:38px;height:56px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--line-2);border-radius:var(--r2);cursor:pointer;
background:color-mix(in srgb,var(--sf) 88%,transparent);color:var(--ink-2);
font-size:22px;line-height:1;padding:0;transition:background .15s,color .15s}
.лист:hover{background:var(--sf);color:var(--ink)}
.лист--н{left:8px}
.лист--в{right:8px}
.просмотр iframe{width:100%;height:100%;border:0;background:#fff}
.просмотр img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.просмотр--текст{display:block;overflow-y:auto;background:var(--sf);padding:0}
.док{padding:20px 26px;max-width:780px;margin:0 auto}
.док__з{font-size:14.5px;font-weight:600;margin:16px 0 6px;color:var(--ink)}
.док__з:first-child{margin-top:0}
.док__п{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0 0 7px;max-width:none}
/* Таблица из Excel или Word в окне просмотра: первая строка — шапка. */
.док__тб{margin:0 0 14px;width:auto;min-width:0}
.док__тб td{white-space:normal;max-width:360px}
.док__тб tr:first-child td{background:var(--sf-3);font-weight:600;color:var(--ink);
position:sticky;top:0;z-index:1}
.просмотр--звук{display:grid;place-items:center;background:var(--sf)}
/* «Создать папку» стоит в столбце папок, к которому и относится: обычная
кнопка действия во всю ширину, как «Создать рабочий день» (21.09.2026). */
.эдоска__кн{margin:0 0 8px}
/* Зона загрузки в папке документов. Раиль 21.09.2026: «чтобы она не прилипала
к нижней таблице… по два миллиметра сверху и снизу… контур синим, как у
кнопки Создать папку, только линией, не пунктиром… шрифт побольше и чёрными
буквами, чтобы люди, которым 50 лет, могли это точно считать».
Два миллиметра на экране — 7,5 px, берём 8. Цвета только переменными:
в тёмной теме --ink сам становится светлым, а --ac светло-синим. */
.эдоска__бросок{padding:8px var(--s4)}
.бросить--док{border:1.5px solid var(--ac);color:var(--ink);font-size:14px;
font-weight:500;line-height:1.4}
.бросить--док:hover,.бросить--док.над{border-color:var(--ac-2);background:var(--sf);
box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 15%,transparent)}
.бросить--док svg{width:20px;height:20px;margin-bottom:6px;color:var(--ac)}
.бросить--док span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.эсл--убранное{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 var(--r2) var(--r2)}
.эсл__н--знак svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.просмотр--нет{flex-direction:column;gap:8px;color:var(--ink-3);font-size:12.5px;text-align:center;padding:20px;
display:flex;align-items:center;justify-content:center;height:100%}
.просмотр--нет svg{width:26px;height:26px;color:var(--ink-4)}
.просмотр--нет b{font-size:14px;color:var(--ink-2)}
.окно--ш .окно__к{max-width:1040px}
/* Слой, где всё приложено, должно быть видно с другого конца комнаты:
зелёная подложка, зелёная подпись, галочка и зелёная бирка. */
.слой.полный{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,var(--sf-3));
border-top-color:color-mix(in srgb,var(--ok) 50%,var(--line-2))}
.слой.полный .бир{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);
border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.слой.полный::before{content:'';width:13px;height:13px;flex:none;margin-right:2px;
border-radius:50%;background:var(--ok);
-webkit-mask:no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
linear-gradient(#000,#000);
-webkit-mask-composite:xor;mask-composite:exclude;
mask:no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
linear-gradient(#000,#000)}
.слой{display:flex;align-items:center;gap:var(--s2)}
/* Деньги и договор: колонки под содержимое */
.деньги-сетка{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.договор-сетка{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s3);align-items:start}
@media (max-width:1200px){.деньги-сетка,.договор-сетка{grid-template-columns:1fr}}
/* ── Схема объекта ─────────────────────────────────────────────────────── */
.план__т{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:var(--s3);
padding:var(--s3);align-items:start}
.пл b small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:2px}
.план__х{min-width:0;border:1px solid var(--line);border-radius:var(--r2);
background:var(--sf-2);overflow:hidden;display:flex}
.плансхема{width:100%;height:auto;display:block}
.окр-слой{opacity:.55}
.окр{fill:none;stroke:var(--line-2);stroke-width:1.1;vector-effect:non-scaling-stroke}
.дренаж{fill:none;stroke:var(--brass);stroke-width:2.2;stroke-dasharray:9 6;opacity:.85;
vector-effect:non-scaling-stroke}
.колодец{fill:var(--sf);stroke:var(--brass);stroke-width:2;vector-effect:non-scaling-stroke}
.зона{cursor:pointer}
.зона__п{stroke-width:1.6;vector-effect:non-scaling-stroke;transition:fill-opacity .16s ease}
.нитка{stroke:var(--line-3);stroke-width:1;vector-effect:non-scaling-stroke}
.точка{fill:var(--sf-2);stroke:var(--line-3);stroke-width:1.4;vector-effect:non-scaling-stroke}
.зона__н{font-size:12.5px;font-weight:600;fill:var(--ink);cursor:pointer;
paint-order:stroke;stroke:var(--sf-2);stroke-width:3.5px;stroke-linejoin:round}
.зона__s{font-size:11px;fill:var(--ink-3);cursor:pointer;
paint-order:stroke;stroke:var(--sf-2);stroke-width:3px;stroke-linejoin:round}
.зона--ok .зона__п{fill:var(--ok); fill-opacity:.3;stroke:var(--ok)}
.зона--ac .зона__п{fill:var(--ac); fill-opacity:.3;stroke:var(--ac)}
.зона--wait .зона__п{fill:var(--wait);fill-opacity:.3;stroke:var(--wait)}
.зона--bad .зона__п{fill:var(--bad); fill-opacity:.3;stroke:var(--bad)}
.зона--нет .зона__п{fill:var(--line-2);fill-opacity:.25;stroke:var(--line-3)}
.зона.сверх .зона__п{stroke-dasharray:7 4}
.зона:hover .зона__п{fill-opacity:.5}
.зона.вкл .зона__п{fill-opacity:.62;stroke-width:2.6}
.зона.вкл .зона__н{fill:var(--ac)} .зона.вкл .точка{stroke:var(--ac);stroke-width:2}
.зона:focus{outline:none}
.зона:focus-visible .зона__п{stroke-width:3}
.ориентир{font-size:11px;fill:var(--ink-4);letter-spacing:.01em}
/* Генплан. Лист — А3-портрет 1179×1668, а плашка широкая и низкая. Тянуть лист
по ширине колонки значит получить 880–1260 px высоты в коробке на 520 —
отсюда и брался скролл. Поэтому лист вписывается целиком по высоте,
а свободная ширина отдана легенде, а не пустоте. */
.генплан{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 236px;
gap:var(--s3);padding:var(--s3);background:var(--sf);align-items:start}
.генплан__холст{position:relative;display:block;width:100%;padding:0;appearance:none;
height:clamp(340px,54vh,600px);overflow:hidden;cursor:zoom-in;
background:var(--sf-3);border:1px solid var(--line-2);border-radius:var(--r1);
transition:border-color var(--t)}
.генплан__холст:hover{border-color:var(--line-3)}
.генплан__холст:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.генплан__холст img{position:absolute;top:50%;left:50%;display:block;
width:auto;height:100%;max-width:none;transform:translate(-50%,-50%);
box-shadow:var(--sh-1)}
/* Разворот. Крутим только сам лист: легенда лежит соседним узлом и остаётся
ровной. Против часовой — юг уходит влево, север вправо, как на схеме объекта;
вверх ногами не встаёт ничего. Проценты меняют стороны листа местами
(70.683 % = 1179/1668), поэтому развёрнутый лист снова влезает целиком
и заполняет плашку: масштаб растёт примерно вдвое против вписанного портрета. */
.генплан--бок .генплан__холст{height:auto;aspect-ratio:1668/1179}
.генплан--бок .генплан__холст img{width:70.683%;height:141.476%;
transform:translate(-50%,-50%) rotate(-90deg)}
.генплан__сбоку{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.генплан__п{display:flex;flex-direction:column;gap:8px;font-size:11.5px;color:var(--ink-2)}
.генплан__п span{display:flex;align-items:flex-start;gap:7px;line-height:1.4}
.генплан__п i{margin-top:6px;flex:none}
.генплан__к{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:auto}
.генплан__к .lab{text-align:center}
.кл{width:14px;height:3px;border-radius:2px;display:inline-block}
.кл--m{background:#B0489B} .кл--c{background:#3E93A8} .кл--o{background:var(--brass)}
/* Узкая колонка: легенда уезжает под чертёж — но уже без скролла, лист вписан. */
@media (max-width:900px){
.генплан{grid-template-columns:1fr}
.генплан__к{margin-top:0}
}
/* Крупный вид. Ужатый до плашки чертёж не читается ни в каком повороте,
а читать его как раз и нужно: в окне даём лист в натуральную величину
и катаем его. Внутри сайта, новых вкладок не открываем. */
.просмотр--чертёж{height:76vh;overflow:auto;background:#fff;
align-items:flex-start;justify-content:flex-start}
.просмотр--чертёж img{width:1179px;height:auto;max-width:none;max-height:none}
.план__б{min-width:0;display:flex}
.ук{border:1px solid var(--line);border-radius:var(--r2);background:var(--sf-2);
padding:13px 14px;display:flex;flex-direction:column;gap:10px;width:100%}
.ук__ш{display:flex;flex-direction:column;gap:5px}
.ук__ш b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.ук__ц{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1}
.ук__ц em{font-style:normal;font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px}
.ук__к{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.ук__к .к{flex:1;min-width:118px}
.упусто{border:1px dashed var(--line-2);border-radius:var(--r2);padding:20px 16px;width:100%;
display:flex;flex-direction:column;justify-content:center;gap:5px;text-align:center}
.упусто b{font-size:13.5px;font-weight:600}
.упусто span{font-size:12px;color:var(--ink-3);line-height:1.45}
.метка{align-self:flex-start;font-size:10.5px;font-weight:500;letter-spacing:.02em;
padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-3)}
.метка--ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));color:var(--ok)}
.метка--wait{border-color:color-mix(in srgb,var(--wait) 48%,var(--line));color:var(--wait)}
.план__лег{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0 var(--s3) var(--s3);
font-size:11.5px;color:var(--ink-3)}
.план__лег span{display:flex;align-items:center;gap:6px}
.кв{width:11px;height:11px;border-radius:3px;display:inline-block;border:1.4px solid var(--line-2)}
.кв--ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 30%,transparent)}
.кв--ac{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 30%,transparent)}
.кв--wait{border-color:var(--wait);background:color-mix(in srgb,var(--wait) 30%,transparent)}
.кв--bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 30%,transparent)}
.кв--нет{border-color:var(--line-3);background:color-mix(in srgb,var(--line-2) 40%,transparent)}
.кв--пункт{border-style:dashed;border-color:var(--ink-4);background:none}
.кв--кол{border-radius:50%;border-color:var(--brass);background:var(--sf)}
.план__нет{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
margin:0 var(--s3) var(--s3);padding:8px 10px;border-radius:var(--r2);
background:var(--sf-2);border:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.план__нет b{font-size:11.5px;color:var(--ink-2)}
.план__нет span{padding:1px 7px;border-radius:999px;border:1px dashed var(--line-2)}
.план__нет em{font-style:normal;color:var(--ink-4);flex-basis:100%}
.тб--нажим tbody tr:hover td{background:var(--sf-3)}
.тб--нажим tbody tr.вкл td{background:color-mix(in srgb,var(--ac) 12%,transparent)}
@media (max-width:1100px){
.план__т{grid-template-columns:1fr}
}
/* ── Фильтры в «Моих заданиях» ─────────────────────────────────────────── */
.фильтры{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--s3)}
.фильтры__к{display:flex;gap:5px;flex-wrap:wrap}
.чип{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;
border:1px solid var(--line-2);border-radius:999px;background:var(--sf);
font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
transition:border-color .14s ease,color .14s ease,background .14s ease}
.чип:hover{border-color:var(--line-3);color:var(--ink)}
.чип.вкл{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,transparent)}
.чип i{font-style:normal}
.поиск{height:28px;width:230px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r1);
background:var(--sf);color:var(--ink);font-size:12.5px}
.поиск:focus{outline:none;border-color:var(--ac)}
.поиск::placeholder{color:var(--ink-4)}
.выбор-узкий{height:28px;width:200px;font-size:12.5px;padding:0 8px;
border:1px solid var(--line-2);border-radius:var(--r1);background:var(--sf);color:var(--ink)}
@media (max-width:900px){.поиск,.выбор-узкий{width:100%}}
/* Полоса состояний в админке */
.полоса{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden}
.полоса__ч{display:block;border-radius:3px}
/* ── Незаполненное поле подсвечивается по нажатию «Дальше» ─────────────── */
.поле--нужно input,.поле--нужно select,.поле--нужно textarea,
.поле--нужно .файл-плюс{border-color:var(--wait);box-shadow:0 0 0 3px color-mix(in srgb,var(--wait) 16%,transparent)}
.поле--нужно > span:first-child{color:var(--wait)}
/* Участники, вписанные руками */
.строка-уч{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:7px;margin-bottom:7px}
.строка-уч input{height:34px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r1);
background:var(--sf);color:var(--ink);font-size:13px}
.строка-уч input:focus{outline:none;border-color:var(--ac)}
/* Команда проекта */
.люди-сетка{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px}
.чел{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);
border-radius:var(--r2);background:var(--sf-2)}
.чел__и{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
border:1.5px solid var(--line-2);font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.чел__т{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.чел__т b{font-size:13.5px;font-weight:600;line-height:1.25}
.чел__т span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.чел__к{font-variant-numeric:tabular-nums}
/* Два снимка при заведении этапа: как есть и как будет */
.дваснимка{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.снимок-плюс{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-height:88px;padding:12px;border:1.5px dashed var(--line-2);border-radius:var(--r2);
background:var(--sf);color:var(--ink-3);text-align:center;transition:border-color .15s,color .15s}
.снимок-плюс:hover{border-color:var(--ac);color:var(--ink-2)}
.снимок-плюс i{display:flex;color:var(--ink-4)}
.снимок-плюс i svg{width:16px;height:16px}
.снимок-плюс b{font-size:13px;font-weight:600;color:var(--ink)}
.снимок-плюс span{font-size:11px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;max-width:100%}
.снимок-плюс.готов{border-style:solid;border-color:var(--ok)}
.снимок-плюс.готов i{color:var(--ok)}
/* ── Документ объясняет сам себя ───────────────────────────────────────── */
.к--знак{width:24px;padding:0;font-weight:600;font-size:13px;flex:none}
.поз--раскрыв{flex-wrap:wrap}
.зачем{display:none;flex-basis:100%;margin-top:9px;padding:11px 13px;border-radius:var(--r2);
border:1px solid var(--line);background:var(--sf-2);
grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.поз.раскрыт .зачем{display:grid}
.зачем p{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.зачем .риск{color:var(--wait)}
@media (max-width:900px){.зачем{grid-template-columns:1fr}}
.слой--прочее{width:100%;text-align:left;cursor:pointer;color:var(--ink-3)}
.слой--прочее:hover{color:var(--ink)}
.слой__стрелка{display:flex;transition:transform .18s ease}
.слой__стрелка svg{width:13px;height:13px}
.слой__стрелка.вниз{transform:rotate(180deg)}
/* Плашка-число, по которой можно нажать */
.пл button{font:inherit;color:inherit;text-align:left;cursor:pointer;
transition:border-color .15s ease,transform .12s ease}
.пл button:hover{border-color:var(--line-3);transform:translateY(-1px)}
.пл button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.поле--тихо > span:first-child{color:var(--ink-4)}
.поле--тихо input{background:var(--sf-3);color:var(--ink-4)}
/* ── Фотолента: день за днём, слева направо ────────────────────────────── */
.лента{display:flex;flex-direction:column;gap:14px;padding:var(--s3)}
.лента__день{border-left:2px solid var(--line-2);padding-left:12px}
.лента__день.плохо{border-left-color:var(--bad)}
.лента__ш{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.лента__ш b{font-size:13px;font-weight:600}
.лента__ш .mut{font-size:11.5px;color:var(--ink-4)}
.лента__знак{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:1px 7px;
border-radius:999px;border:1px solid}
.лента__знак--плохо{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.лента__знак--ждём{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 45%,transparent)}
.лента__ряд{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;overscroll-behavior-x:contain}
.лента__к{flex:none;width:132px;border:1px solid var(--line-2);border-radius:var(--r2);
overflow:hidden;background:var(--sf);cursor:pointer;scroll-snap-align:start;
transition:border-color .15s ease,transform .12s ease}
.лента__к:hover{border-color:var(--ac);transform:translateY(-2px)}
.лента__к img{width:100%;height:88px;object-fit:cover;display:block}
.лента__к span{display:block;padding:4px 7px 5px;font-size:10.5px;color:var(--ink-3);
font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.лента__п{margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.лупа{display:flex;flex-direction:column;gap:11px}
.лупа__и{background:var(--sf-3);border-radius:var(--r2);overflow:hidden;
display:grid;place-items:center;max-height:62vh}
.лупа__и img{max-width:100%;max-height:62vh;display:block;object-fit:contain}
.лупа__н{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.лупа__н b{font-size:14px;font-weight:600}
.лупа__н span{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.лупа__п{color:var(--bad)}
/* ── Перетаскивание …») по строку 1051 включительно —
то есть вместе с висячим селектором «.нав a» и дублем правил за ним. */
/* ── Перетаскивание: приём эталона СГИ 2.0 ─────────────────────────────── */
/* Пока блок в руке, его место в потоке держит слот, а сам блок остаётся тут
же скрытым: поэтому срыв тяги ничего не восстанавливает. */
.ph{display:none !important}
.слот-посадки{border:1.5px dashed var(--ac);border-radius:var(--r2);
background:color-mix(in srgb,var(--ac) 7%,transparent);flex:none;
animation:слот-вход .16s ease}
@keyframes слот-вход{from{opacity:0}to{opacity:1}}
.пилюли .слот-посадки{height:30px}
.нав .слот-посадки,#нав .слот-посадки{height:34px;margin:1px 0}
/* Призрак несёт классы своего ящика: вид плашки и пункта меню держится на
родителе («.пл > div», «.пл b», «.нав a»), и клон, брошенный прямо в body,
остался бы голым текстом под тенью. Поэтому собственные рамки, отступы,
зазоры и минимальную высоту обёртки гасим. contain:layout paint — приём
эталона (.drag-preview): содержимое клона больше не участвует в пересчёте
страницы, и движение идёт ровнее. */
.ghost{position:fixed;z-index:9999;pointer-events:none;margin:0;overflow:hidden;
padding:0;border:0;gap:0;min-height:0;
box-shadow:0 26px 60px -24px rgba(0,0,0,.45);opacity:.96;border-radius:var(--r2);
will-change:transform;contain:layout paint}
/* Обёртка призрака несёт класс ящика ради вида, но раскладку ящика гасим:
с классом «доска» она сама становилась сеткой на три колонки, и блок
в руке сжимался до трети ширины. */
.ghost{display:block !important;grid-template-columns:none !important}
.ghost > *{width:100%}
.ghost *{pointer-events:none}
.ghost > *{margin:0}
.ghost svg{width:13px;height:13px}
.ghost .к2{height:100%}
/* Ручка в руке не нужна: она и так показывается только по наведению. */
.ghost .ручка{display:none}
/* user-select наследуется, звёздочка тут лишняя: на её включение и выключение
браузер пересчитывает стили всего документа — ровно в тот момент, когда
призрак должен пойти за рукой без рывка. */
body.тащим{user-select:none;-webkit-user-select:none;cursor:grabbing}
/* touch-action держим только на ручке. Если запретить жесты на всём блоке,
на планшете страницу нельзя будет пролистать пальцем: пальцем мы и так
тянем только за ручку. */
.тащится{cursor:grab}
.ручка{opacity:0;transition:opacity .15s ease;color:var(--ink-4);display:flex;
cursor:grab;touch-action:none;flex:none}
.ручка svg{width:12px;height:12px}
.пл > *:hover .ручка,.пилюля:hover .ручка,.к2:hover > .к2__ш .ручка,.нав a:hover .ручка{opacity:.6}
.пл > *{position:relative}
.пл .ручка{position:absolute;top:5px;right:6px}
/* ── Раскладка обзора: три равные колонки ──────────────────────────────────
Все плашки одной ширины. Пробовали блоки разной ширины — широкий блок ломал
раскладку: при перетаскивании соседи скакали по колонкам, а блок, заехавший
в широкий ряд, растягивался и обратно не сужался. Равная ширина плюс место
посадки между соседями — механика, которая работает предсказуемо. */
#блоки-проекта{display:grid;gap:var(--s3);align-items:start}
#блоки-проекта.три-колонки{grid-template-columns:repeat(3, minmax(0,1fr))}
#блоки-проекта.две-колонки{grid-template-columns:repeat(2, minmax(0,1fr))}
.колонка-блоков{display:flex;flex-direction:column;gap:var(--s3);min-width:0;min-height:70px}
.колонка-блоков > .бл{min-width:0}
.колонка-блоков > .бл:empty{display:none}
.колонка-блоков > .бл > .к2{margin:0}
/* Линейный график — шапка доски: стоит над колонками во всю ширину и в
перетаскивании не участвует. Пока он был ящиком наравне с колонками, любой
заехавший в него блок растягивался, и вернуть его было нечем. */
.ряд-схемы{margin-bottom:var(--s3)}
body.тащим .колонка-блоков:not(.ghost){outline:1.5px dashed var(--line-2);
outline-offset:6px;border-radius:var(--r2)}
@media (max-width:1280px){#блоки-проекта.три-колонки{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:900px){#блоки-проекта.три-колонки,#блоки-проекта.две-колонки{grid-template-columns:1fr}}
/* Строка уведомления */
.весть-стр{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;
border-bottom:1px solid var(--line)}
.весть-стр:last-child{border-bottom:0}
.весть-стр__м{width:3px;align-self:stretch;border-radius:3px;background:var(--line-2);flex:none}
.весть-стр.новая .весть-стр__м{background:var(--ac)}
.весть-стр__т{flex:1;min-width:0}
/* 26.09.2026: напоминания приходят письмом в несколько строк, и всё
схлопывалось в один абзац. Переводы строк сохраняем, как их написали. */
.весть-стр__т b{display:block;font-size:13px;font-weight:500;line-height:1.45;
white-space:pre-line}
.весть-стр.новая .весть-стр__т b{font-weight:600}
.весть-стр__т span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
/* ── Ход работ: путь проекта сверху вниз ───────────────────────────────── */
.ход{position:relative;padding-left:6px}
.ход::before{content:'';position:absolute;left:11px;top:10px;bottom:10px;width:2px;
background:var(--line-2);border-radius:2px}
.ход__ш{position:relative;display:flex;gap:14px;padding:9px 0}
.ход__т{position:relative;z-index:1;width:12px;height:12px;flex:none;margin-top:4px;
border-radius:50%;background:var(--sf);border:2px solid var(--line-3)}
.ход__ш--готово .ход__т{border-color:var(--ok);background:var(--ok)}
.ход__ш--идёт .ход__т{border-color:var(--ac);background:var(--ac);
box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 18%,transparent)}
.ход__ш--плохо .ход__т{border-color:var(--bad);background:var(--bad)}
.ход__ш--ждёт .ход__т{border-color:var(--line-3);background:var(--sf)}
.ход__б{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.ход__б b{font-size:13.5px;font-weight:600;line-height:1.3}
.ход__б > span{font-size:12px;color:var(--ink-3);line-height:1.4}
.ход__б .бир{align-self:flex-start;margin:2px 0}
.ход__в{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-4);font-variant-numeric:tabular-nums}
/* Направление, где сейчас идут работы, видно сразу */
.ветка--идёт > .ветка__п::before{background:var(--ac);
box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 18%,transparent)}
.ветка__п .бир{text-transform:none;letter-spacing:0}
.ветка:first-of-type{margin-top:var(--s2);padding-top:var(--s2);border-top:0}
/* Направление работ подписано у самой остановки — линия при этом одна */
.ост__п{margin-top:7px;font-size:9.5px;font-weight:600;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink-4);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:100%}
.лнв .ост__п{margin:0 0 2px 0;order:-1;flex-basis:100%;padding-left:0}
.ост.вкл .ост__п{color:var(--ac)}
/* Длинное значение в паре переносится, а не режется тире */
.пара b{white-space:normal;overflow-wrap:anywhere;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.пара{align-items:flex-start}
.пара span{padding-top:1px}
/* Деньги: платежи шире, сводки уже */
.деньги-сетка{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
/* ── Сворачивание блока ────────────────────────────────────────────────── */
.свёртка{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;
color:var(--ink-4);transition:color .15s ease,background .15s ease,transform .18s ease}
.свёртка:hover{color:var(--ink-2);background:var(--sf-3)}
.свёртка svg{width:13px;height:13px}
.к2--свёрнут .свёртка{transform:rotate(-90deg)}
.к2--свёрнут > .к2__тело{display:none}
.к2--свёрнут > .к2__ш{border-bottom:0}
/* ── Фотолента: один ряд по дням ───────────────────────────────────────── */
/* Без scroll-snap: шаг привязки (133 px) больше всего запаса прокрутки,
и лента после каждого движения утягивалась обратно — казалось, что она
вообще не листается. */
.лк-ряд{display:flex;gap:9px;overflow-x:auto;padding:var(--s3);
overscroll-behavior-x:contain;scrollbar-width:thin}
.лк{flex:none;width:124px;display:flex;flex-direction:column;gap:5px;cursor:pointer;
padding-bottom:5px;border-bottom:3px solid transparent;
transition:transform .14s ease}
.лк:hover{transform:translateY(-2px)}
.лк__ф{position:relative;display:block;border:1px solid var(--line-2);border-radius:var(--r2);
overflow:hidden;background:var(--sf-3)}
.лк__ф img{width:100%;height:84px;object-fit:cover;display:block}
.лк__ещё{position:absolute;right:5px;bottom:5px;font-style:normal;font-size:10.5px;font-weight:600;
padding:1px 6px;border-radius:999px;background:rgba(20,24,30,.72);color:#fff}
.лк__д{font-size:11.5px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.лк__п{font-size:10px;text-align:center;color:var(--bad);font-weight:600}
.лк--плохо{border-bottom-color:var(--bad)}
.лк--нет{width:104px;cursor:default}
.лк--нет .лк__и{display:grid;place-items:center;height:84px;border:1.5px dashed var(--line-2);
border-radius:var(--r2);color:var(--ink-4)}
.лк--нет .лк__и svg{width:18px;height:18px}
.лк--нет .лк__п{color:var(--ink-4);font-weight:500}
.лк-заметки{padding:0 var(--s3) var(--s3);display:flex;flex-direction:column;gap:5px}
.лк__стр{display:flex;gap:9px;font-size:12.5px;line-height:1.45}
.лк__стр b{flex:none;color:var(--bad);font-variant-numeric:tabular-nums}
.лк__стр span{color:var(--ink-2)}
/* ── Ход работ: слева путь, справа подробность ─────────────────────────── */
.ход-сетка{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s3);
padding:var(--s3);align-items:start}
.ход__ш{width:100%;text-align:left;cursor:pointer;border-radius:var(--r2);
padding:9px 10px 9px 0;transition:background .14s ease}
.ход__ш:hover{background:var(--sf-3)}
.ход__ш.вкл{background:color-mix(in srgb,var(--ac) 10%,transparent)}
.ход__ш.вкл .ход__б b{color:var(--ac)}
.ход__б{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ход-бок{position:sticky;top:var(--s3)}
.ход-бок .ук{min-height:220px}
@media (max-width:1100px){.ход-сетка{grid-template-columns:1fr}.ход-бок{position:static}}
/* Ориентиры на схеме: без них полоса ничего не говорит */
.ориентир--имя{font-size:12px;font-weight:600;fill:var(--ink-3);
paint-order:stroke;stroke:var(--sf-2);stroke-width:3.5px;stroke-linejoin:round}
.орт .ориентир{paint-order:stroke;stroke:var(--sf-2);stroke-width:3px;stroke-linejoin:round}
/* Шапка блока не должна ломаться по буквам в узкой колонке */
.к2__ш{flex-wrap:wrap;row-gap:5px}
.к2__ш > b{min-width:0;overflow-wrap:anywhere}
.к2__ш .lab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Вид «Столбцом»: точка в своей колонке, весь текст — во второй.
Раньше подписи переносились под вертикальную линию и налезали на неё. */
.лнв .ост{display:grid;grid-template-columns:16px minmax(0,1fr);
column-gap:12px;row-gap:2px;align-items:start;text-align:left}
.лнв .ост__т{grid-column:1;grid-row:1;margin-top:4px}
.лнв .ост__п{grid-column:2;margin:0;text-align:left}
.лнв .ост__н{grid-column:2;margin:0;text-align:left;max-width:none}
.лнв .ост__д{grid-column:2;margin:0;text-align:left}
.лнв .ост__с{grid-column:2;margin:0;text-align:left}
/* Правило: ничего не открывается в новом окне. Снимок — кнопка, которая
раскрывает просмотрщик внутри сайта. */
.снимок-кн{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
border-radius:var(--r2);overflow:hidden}
.снимок-кн img{display:block;width:100%;height:100%;object-fit:cover}
.пасп-фото .снимок-кн{aspect-ratio:4/3;max-height:170px;border:1px solid var(--line-2);
background:var(--sf-3)}
.снимки .снимок-кн,.фото .снимок-кн{aspect-ratio:4/3}
/* Номер блока: место на экране, а не выдумка. Переставил — пересчитался. */
.номер-блока{flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;
font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
color:var(--ink-3);background:var(--sf-3);border:1px solid var(--line)}
/* Кнопки этапа одной строкой внизу карточки */
.ряд-кнопок--плотно{margin-top:0;gap:5px;flex-wrap:nowrap}
.ряд-кнопок--плотно .к{flex:0 1 auto;min-width:0;white-space:nowrap;padding:0 10px;font-size:12px}
@media (max-width:1100px){.ряд-кнопок--плотно{flex-wrap:wrap}}
/* Кто не приложил документы: службы перечислены пилюлями прямо в шапке шага. */
.должники{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
/* Внутри тела карточки блок — отдельная строка flex-колонки с общим gap,
свой отступ там удваивается; во врезке мастера он идёт за текстом и нужен. */
.к2__б > .должники{margin-top:0}
.должник{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
border:1px solid var(--line-2);background:var(--sf);font-size:12px;color:var(--ink-2)}
.должник b{font-weight:600;color:var(--ink)}
/* ── Состав табло: галки видимости плашек ──────────────────────────────── */
/* Кнопка стоит в том же ряду, что и разделы, но читается как настройка,
а не как ещё один раздел: отделена чертой и набрана тише. */
.пилюля--состав{margin-left:6px;padding-left:11px;border-left:1px solid var(--line);
color:var(--ink-3);font-weight:500}
.пилюля--состав svg{width:12px;height:12px;opacity:.6}
.пилюля--состав:hover svg{opacity:1}
.выбор-блоков{position:fixed;z-index:1200;min-width:250px;max-width:320px;max-height:70vh;
overflow:auto;padding:6px;background:var(--sf);border:1px solid var(--line);
border-radius:var(--r3);box-shadow:var(--sh-3);color:var(--ink)}
.выбор-блоков__ш{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-4);padding:6px 8px 5px}
.выбор-блоков__п{display:flex;align-items:center;gap:9px;padding:6px 8px;
border-radius:var(--r1);font-size:12.5px;color:var(--ink-2);cursor:pointer}
.выбор-блоков__п:hover{background:var(--sf-2);color:var(--ink)}
.выбор-блоков__п input{accent-color:var(--ac);width:14px;height:14px;flex:none;cursor:pointer}
/* Выход на случай, если сняли всё: без него табло не вернуть без чистки браузера. */
.выбор-блоков__всё{display:block;width:100%;text-align:left;margin-top:4px;padding:8px;
border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.выбор-блоков__всё:hover{color:var(--ac)}
/* ── Лента снимков: листается вбок ─────────────────────────────────────────
Стрелки появляются только когда ряд шире колонки, и гаснут у краёв —
лишних кнопок на экране не висит. */
.лента-край{position:relative}
.лента-кн{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:26px;height:44px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--line-2);border-radius:var(--r2);cursor:pointer;padding:0;
background:color-mix(in srgb,var(--sf) 92%,transparent);color:var(--ink-2);
font-size:17px;line-height:1;transition:background .14s ease,color .14s ease}
.лента-кн:hover{background:var(--sf);color:var(--ink)}
.лента-кн--н{left:6px}
.лента-кн--в{right:6px}
.лента-край .лк-ряд:focus-visible,.лента-край .снимки:focus-visible{outline:2px solid var(--ac);
outline-offset:-2px;border-radius:var(--r2)}
/* ── Экран куратора и собственника ─────────────────────────────────────────
Тот же проект, собранный под того, кто смотрит, а не вносит. Три колонки
держат ОДНУ заданную высоту на любом этапе: глаз привыкает к рамке и не
пересобирает экран при переключении. Считается от семи плашек:
7 × 54 px + 6 зазоров × 7 px = 420 px. Что не влезло — прокручивается
внутри колонки, снаружи ничего не дрогнет. */
:root{--ку-в:clamp(452px,calc(100vh - 320px),560px)}
.ку-линия{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
padding:18px 18px 15px;margin-bottom:12px}
.ку-линия__л{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:14px}
.ку-линия__п{position:relative;display:grid}
.ку-линия__п::before{content:'';position:absolute;left:7.1%;right:7.1%;top:6px;height:2px;
background:var(--line-2)}
.ку-ост{position:relative;text-align:center;padding:0 7px;cursor:pointer;
background:none;border:0;font:inherit;color:inherit}
.ку-ост i{position:relative;display:block;width:13px;height:13px;margin:0 auto 11px;
border-radius:50%;background:var(--sf);border:2px solid var(--line-3);z-index:1}
.ку-ост.закрыт i{background:var(--ok);border-color:var(--ok)}
.ку-ост.идёт i{background:var(--ac);border-color:var(--ac);
box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent)}
.ку-ост__н{display:block;font-size:9.5px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.ку-ост.идёт .ку-ост__н{color:var(--ac)}
.ку-ост__и{display:block;font-size:11.5px;line-height:1.3;color:var(--ink-2)}
.ку-ост.вкл .ку-ост__и{font-weight:600;color:var(--ink)}
.ку-ост__д{display:block;font-size:10.5px;color:var(--ink-4);margin-top:3px;
font-variant-numeric:tabular-nums}
.ку-ост__с{display:block;font-size:10.5px;margin-top:2px;color:var(--ink-4)}
.ку-ост.закрыт .ку-ост__с{color:var(--ok)}
.ку-ост.идёт .ку-ост__с{color:var(--ac)}
/* Раскладка на flex, а не на сетке: порядок в разметке и есть порядок на
экране, поэтому перетаскивание меняет блоки местами без правки колонок.
На сетке с жёстким grid-column переставленный блок наезжал на соседа. */
.ку-тело{display:flex;gap:12px;align-items:flex-start;
/* Ширина бока одна на оба блока: растёт с экраном, но не съедает ряд плашек. */
--ку-бок:clamp(300px,24%,460px)}
/* Доли flex давали блокам разную ширину на 6 px. Ширина задана явно и одна
на двоих — «Выбранный этап» и «Подробно» равны по определению. */
.ку-виз,.ку-подр{flex:0 0 var(--ку-бок);width:var(--ку-бок);min-width:0}
.ку-виз{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
padding:12px;height:var(--ку-в);box-sizing:border-box;display:flex;flex-direction:column}
.ку-виз__л{flex:none;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:3px}
.ку-виз__э{flex:none;font-size:12.5px;font-weight:600;line-height:1.3;margin-bottom:9px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ку-виз__п{flex:1;min-height:0;display:grid;grid-template-rows:1fr 1fr;gap:8px}
.ку-виз figure{margin:0;position:relative;border-radius:var(--r2);overflow:hidden;
border:1px solid var(--line-2);background:var(--sf-3);min-height:0}
.ку-виз figure .снимок-кн{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.ку-виз img{width:100%;height:100%;object-fit:cover;display:block}
.ку-виз figcaption{position:absolute;left:7px;bottom:7px;font-size:10px;font-weight:600;
padding:2px 8px;border-radius:999px;background:rgba(20,24,30,.68);color:#fff}
/* Хват: за него блок берут пальцем. Мышью тянется весь блок, поэтому на
десктопе хват только подсказывает, что блок переставляется. */
.ку-хват{float:right;width:22px;height:12px;margin-top:-1px;cursor:grab;
background-image:radial-gradient(circle,var(--ink-4) 1.1px,transparent 1.2px);
background-size:5px 5px;background-position:center;opacity:.32;
transition:opacity .14s ease}
.ку-виз:hover .ку-хват,.ку-подр:hover .ку-хват{opacity:.7}
.ку-хват:active{cursor:grabbing}
@media (hover:none){.ку-хват{opacity:.5}}
.ку-пусто{display:grid;place-items:center;border-style:dashed}
.ку-пусто span{font-size:11.5px;color:var(--ink-4);text-align:center;padding:0 12px}
/* Плашка — одна строка: название, три показателя в колонках, метка справа.
Колонки выровнены по всем семи, поэтому цифры читаются столбиком. */
.ку-пл{display:flex;flex-direction:column;gap:7px;height:var(--ку-в);box-sizing:border-box;
flex:1 1 auto;min-width:0}
.кп{flex:1;min-height:0;display:grid;align-items:center;text-align:left;
grid-template-columns:152px repeat(3,minmax(0,1fr)) 70px;gap:10px;
background:var(--sf);border:1px solid var(--line-2);border-radius:var(--r2);
padding:0 13px;cursor:pointer;font:inherit;color:inherit;
transition:border-color .14s ease,background .14s ease}
.кп:hover{border-color:var(--line-3)}
/* Выбранная — только ровная обводка по периметру, без полос и утолщений. */
.кп.вкл{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac);
background:color-mix(in srgb,var(--ac) 4%,var(--sf))}
.кп__и{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.кп__з{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.кп__з i,.кп__з b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.кп__з i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.04em;
text-transform:uppercase;color:var(--ink-4)}
.кп__з b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
line-height:1.2}
.кп__з b small{font-size:11px;font-weight:500;color:var(--ink-3)}
.кп__з b .мелко{font-size:11px;letter-spacing:0}
.з-вним b{color:var(--wait)}
.з-откл b{color:var(--bad)}
.з-ок b{color:var(--ok)}
.кп .метк{justify-self:end;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;
border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap;background:none}
.кп .метк--ок{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.кп .метк--вним{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 45%,transparent)}
.кп .метк--откл{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.ку-подр{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
padding:13px 15px;height:var(--ку-в);box-sizing:border-box;
display:flex;flex-direction:column;min-height:0}
.ку-подр__л{flex:none;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:5px}
.ку-подр h3{flex:none;font-size:13.5px;font-weight:600;margin:0 0 9px;line-height:1.25}
.ку-подр__т{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
padding:0 10px 2px 0;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
/* Текст не гасим: вместо затемнения — тонкая черта, что ниже есть ещё. */
.ку-подр__т.есть-ниже{border-bottom:1px solid var(--line-2)}
.ку-подр__т::-webkit-scrollbar{width:7px;-webkit-appearance:none}
.ку-подр__т::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:999px;
border:2px solid transparent;background-clip:content-box;min-height:34px}
.ку-подр__т:hover::-webkit-scrollbar-thumb{background:var(--ink-4);background-clip:content-box}
.ку-подр__т::-webkit-scrollbar-track{background:transparent}
.ку-подр .пара{display:flex;justify-content:space-between;gap:14px;padding:5px 0;
border-bottom:1px solid var(--line);font-size:12px}
.ку-подр .пара:last-of-type{border-bottom:0}
.ку-подр .пара span{color:var(--ink-3)}
.ку-подр .пара b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ку-подр .пара b small{font-size:11px;font-weight:500;color:var(--ink-3)}
.ку-подр .пара b.откл{color:var(--bad)}
.ку-подр .пара b.вним{color:var(--wait)}
.ку-подр .пара b.ок{color:var(--ok)}
.ку-шаги{margin:9px 0 0;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r2);
background:var(--sf-3)}
.ку-шаги__л{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:6px}
.ку-шаги ol{margin:0;padding-left:16px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.ку-шаги li{margin-bottom:3px}
.ку-шаги p{margin:7px 0 0;font-size:12px;line-height:1.4;color:var(--ink)}
.ку-шаги p b{font-weight:600}
/* Узкий экран: колонки встают друг под друга, высоты отпускаем — иначе
на телефоне картинка и подробность окажутся в щели. */
/* Три колонки требуют около 1550 px: иначе в ячейке остаётся 48 px и цифры
режутся. Ниже колонки встают друг под друга, но плашка остаётся строкой —
ширины ей теперь хватает с запасом. */
@media (max-width:1400px){
.ку-тело{flex-direction:column}
.ку-виз,.ку-подр,.ку-пл{flex:none;width:100%;min-width:0}
.ку-тело{--ку-бок:auto}
.ку-виз,.ку-пл,.ку-подр{height:auto}
.ку-виз__п{grid-template-rows:220px 220px}
.ку-подр__т{max-height:none}
.кп{min-height:56px}
}
/* Телефон у куратора и собственника: боковая колонка с одним пунктом
превращается в верхнюю полосу, экран отдаётся содержимому. */
@media (max-width:760px){
body.смотрю .апп{flex-direction:column;overflow-y:auto}
body.смотрю .сайд{width:100%;flex-direction:row;align-items:center;gap:10px;
padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);
overflow:visible;position:sticky;top:0;z-index:6}
body.смотрю .марка{padding:0;flex:none}
body.смотрю .марка span{display:none}
body.смотрю .нав{flex-direction:row;flex:1;min-width:0;gap:6px}
body.смотрю .нав a{height:32px;padding:0 10px}
body.смотрю .сайд .низ{margin:0;padding:0;border:0;flex:none}
body.смотрю .сайд .низ i,body.смотрю .сайд .низ > span{display:none}
body.смотрю .шапка{height:auto;flex-wrap:wrap;padding:10px 14px;gap:2px 10px}
body.смотрю .шапка h1{white-space:normal;font-size:15px}
body.смотрю .шапка .под{white-space:normal;flex-basis:100%}
body.смотрю .работа{padding:12px;overflow:visible}
/* Линия этапов не помещается в телефон — листается вбок, а не сжимается. */
body.смотрю .ку-линия{overflow-x:auto;overscroll-behavior-x:contain;
scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
body.смотрю .ку-линия__п{grid-template-columns:none!important;
grid-auto-flow:column;grid-auto-columns:128px;width:max-content;padding-bottom:4px}
body.смотрю .ку-линия__л{position:sticky;left:0}
}
/* Телефон: плашка разворачивается в столбик строк «подпись — значение».
Название и метка встают в одну шапку, значения прижаты вправо. */
@media (max-width:760px){
.кп{grid-template-columns:1fr auto;gap:5px 10px;padding:11px 13px;min-height:0;
align-items:center}
.кп__и{grid-column:1;font-size:13.5px}
.кп .метк{grid-column:2;grid-row:1;justify-self:end}
.кп__з{grid-column:1 / -1;flex-direction:row;align-items:baseline;
justify-content:space-between;gap:12px}
.кп__з i{text-transform:none;font-size:11.5px;font-weight:400;letter-spacing:0;
color:var(--ink-3)}
.кп__з b{font-size:13.5px;text-align:right}
}
/* ── Раздел службы эксплуатации ────────────────────────────────────────────
Отдельных «кирпичей» не заводим: берём карточки, таблицы и плашки
основной части сайта. Здесь только раскладка колонок и поля смены. */
.эдве{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
.этри{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);align-items:start}
.эдве > *,.этри > *{min-width:0}
/* Шесть показателей в один ряд читаются лишь на широком экране; ниже —
переносим, а не сжимаем: обрезанное число хуже перенесённого. */
.пл.эпл{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(162px,1fr))}
@media (max-width:1240px){.этри{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.эдве,.этри{grid-template-columns:1fr}}
.эсел{width:100%;height:27px;padding:0 24px 0 7px;font-size:12.5px;
border:1px solid var(--line-2);border-radius:var(--r1);background-color:var(--sf);
background-position:calc(100% - 13px) 11px,calc(100% - 8px) 11px}
.эсел:disabled{background-color:var(--sf-3);color:var(--ink-4);cursor:not-allowed}
.эсмена td{padding:5px 9px}
.эсмена tbody tr{cursor:default}
.эсмена tbody tr:hover td{background:transparent}
.тб tr.эвыкл td.гл{color:var(--ink-3)}
.эполоса{display:block;height:7px;min-width:56px;border-radius:4px;
background:var(--sf-3);border:1px solid var(--line);overflow:hidden}
.эполоса i{display:block;height:100%;background:var(--ac)}
/* Ссылка внутри ячейки: период отсутствия открывается окном. Кнопка здесь
выглядела бы тяжелее самой строки. */
.эссылка{font-size:12.5px;color:var(--ac);text-align:left;padding:0;
border-bottom:1px dashed color-mix(in srgb,var(--ac) 45%,transparent);cursor:pointer}
.эссылка:hover{color:var(--ac-2);border-bottom-color:var(--ac-2)}
/* — главный экран службы — */
.эдом{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);
background:var(--sf-grad);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:var(--sh-1);position:relative;overflow:hidden}
.эдом::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,#2C6E6B 0%,#2F5C93 46%,#8A6516 100%)}
.эдом__и{width:54px;height:54px;flex:none;border-radius:14px;display:grid;place-items:center;
border:1.5px solid var(--ac);color:var(--ac);font-size:17px;font-weight:600;letter-spacing:.02em}
.эдом__т{flex:1;min-width:0}
.эдом__т h2{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.эдом__т p{margin-top:5px;font-size:13px;line-height:1.45;color:var(--ink-2);max-width:62ch}
.эдом__ч{flex:none;display:flex;gap:var(--s4);padding-left:var(--s4);
border-left:1px solid var(--line)}
.эдом__ч div{text-align:right;min-width:82px}
.эдом__ч b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.эдом__ч span{display:block;margin-top:2px;font-size:11px;color:var(--ink-3);line-height:1.3}
@media (max-width:1100px){.эдом{flex-wrap:wrap}
.эдом__ч{padding-left:0;border-left:0;border-top:1px solid var(--line);
padding-top:var(--s3);width:100%;justify-content:space-between}
.эдом__ч div{text-align:left}}
/* — форма смены — */
.эшапка-формы{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
border-bottom:1px solid var(--line)}
.эдата{display:inline-block;width:158px}
.эдата .дп__в{height:30px;font-size:13px}
.эсорт{height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r1);
font-size:12px;color:var(--ink-3);cursor:pointer;transition:border-color var(--t),color var(--t)}
.эсорт:hover{color:var(--ink)}
.эсорт.вкл{border-color:var(--ac);color:var(--ac);
background:color-mix(in srgb,var(--ac) 9%,transparent)}
.эобщее{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px var(--s4);
background:color-mix(in srgb,var(--ac) 7%,var(--sf-2));
border-bottom:1px solid var(--line)}
.эобщее b{font-size:12.5px;font-weight:600;white-space:nowrap}
.эобщее .эсел{width:190px}
.эгалка{width:34px;text-align:center}
.эгалка input{width:15px;height:15px;accent-color:var(--ac);cursor:pointer;margin:0}
.тб tr.эотмечен td{background:color-mix(in srgb,var(--ac) 8%,transparent)}
/* 16.09.2026, приёмка. Должность не переносилась («white-space:nowrap») и
отбирала место у фамилии: на экране 1024 точки колонка ФИО схлопывалась
почти в ноль, и фамилии читать было нельзя. Должность — сведение
второстепенное, ей и уступать. */
.эдолжность{color:var(--ink-2);white-space:normal;max-width:150px;
overflow-wrap:anywhere}
/* Фамилии — главное в этой таблице: даём им место и не даём схлопнуться.
Класс «эсмена» стоит на самой таблице, а не на родителе. */
.тб.эсмена td.гл, .тб.эсмена th:nth-child(3){min-width:190px;white-space:normal}
.тб.эсмена td.эдолжность, .тб.эсмена th:nth-child(4){max-width:130px}
.эузко{width:132px}
.эсмена .эсел[data-efield="присутствие"]{width:124px}
/* — файлы плиткой — */
.эфайлы{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.эфайл{position:relative;width:112px;display:flex;flex-direction:column;gap:4px}
/* 23.09.2026, Раиль: «превью файлов должны быть квадратными». Меняем здесь —
и в «Моём дне», и в анкете плитки становятся одинаковыми. */
.эфайл__о{display:block;width:112px;height:112px;border:1px solid var(--line-2);
border-radius:var(--r2);overflow:hidden;background:var(--sf-3);cursor:zoom-in;padding:0;
transition:border-color var(--t)}
.эфайл__о:hover{border-color:var(--ac)}
/* Крестик «убрать файл»: поверх правого верхнего угла плитки, проявляется
при наведении и всегда виден на телефоне, где наведения нет (23.09.2026). */
.эфайл__снять{position:absolute;top:4px;right:4px;width:22px;height:22px;
border:none;border-radius:50%;background:rgba(26,32,40,.78);color:#FFFFFF;
font-size:15px;line-height:22px;text-align:center;cursor:pointer;padding:0;
opacity:0;transition:opacity .15s ease,background .15s ease}
.эфайл:hover .эфайл__снять,.эфайл__снять:focus-visible{opacity:1}
.эфайл__снять:hover{background:var(--danger,#7A2E2E)}
body.м .эфайл__снять{opacity:1}
.эфайл__о img{width:100%;height:100%;object-fit:cover;display:block}
.эфайл__т{display:grid;place-items:center;width:100%;height:100%;font-size:12px;
font-weight:700;letter-spacing:.04em;color:var(--ink-3)}
.эфайл em{font-style:normal;font-size:10.5px;line-height:1.3;color:var(--ink-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.эфайл__х{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
background:var(--sf);border:1px solid var(--line-2);color:var(--ink-3);font-size:14px;
line-height:1;cursor:pointer;opacity:0;transition:opacity var(--t),color var(--t)}
.эфайл:hover .эфайл__х{opacity:1}
.эфайл__х:hover{color:var(--bad);border-color:var(--bad)}
.эфайл--плюс{width:112px;height:112px;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:4px;border:1.5px dashed var(--line-2);border-radius:var(--r2);
color:var(--ink-3);cursor:pointer;transition:border-color var(--t),color var(--t)}
.эфайл--плюс:hover{border-color:var(--ac);color:var(--ac)}
.эфайл--плюс svg{width:16px;height:16px}
/* — поле со своей кнопкой пополнения — */
.эрядом{display:flex;gap:6px;align-items:center}
.эрядом .эсел-б{flex:1;min-width:0}
.эрядом .к{flex:none;width:30px;padding:0;font-size:15px}
.эисполнители{max-height:none;padding-top:4px}
.окно--в .окно__к{height:92vh;max-height:92vh}
.окно--в .окно__б{flex:1}
.эжурнал{max-height:62vh;overflow-y:auto}
/* — подписи над общими списками смены — */
.эобщее__п{display:flex;flex-direction:column;gap:3px}
.эобщее__п .эсел{width:200px}
/* — исполнители в окнах: список читается, а не щурится — */
.эисполнители label{font-size:13.5px;line-height:1.5;padding:2px 0}
.эисполнители i{width:17px;height:17px}
.эсписок{margin:4px 0 0;padding-left:20px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.эсписок li{margin-bottom:2px}
/* — шкала загрузки файлов — */
.эгрузим{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:210;
min-width:320px;max-width:min(520px,92vw);padding:11px 14px 13px;border-radius:var(--r3);
background:var(--sf);border:1px solid var(--line-2);box-shadow:var(--sh-3)}
.эгрузим b{display:block;font-size:12.5px;font-weight:500;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.эгрузим__ж{display:block;height:6px;margin-top:8px;border-radius:4px;
background:var(--sf-3);border:1px solid var(--line);overflow:hidden}
.эгрузим__ж i{display:block;height:100%;width:0;background:var(--ac);
transition:width .18s linear}
/* — заявки по дням — */
.эгр{display:block;width:100%;height:auto;aspect-ratio:1000/210}
.эгр__с{stroke:var(--line);stroke-width:1}
.эгр__о{fill:var(--ink-3);font-size:11px}
.эгр__л{fill:none;stroke:var(--ac);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.эгр__з{fill:color-mix(in srgb,var(--ac) 12%,transparent);stroke:none}
.эгр__ц{fill:transparent;stroke:none;cursor:default}
.эгр__ц:hover{fill:color-mix(in srgb,var(--ac) 30%,transparent)}
/* — отчёт за день на экране — */
.эотчёт{display:flex;flex-direction:column;gap:var(--s4);background:var(--sf-2);
padding:var(--s3);border-radius:var(--r2)}
.эотчёт .плист{background:#fff;color:#101418;border:1px solid var(--line-2);
border-radius:var(--r2);padding:20px 22px;box-shadow:var(--sh-1)}
.эотчёт .плист h1{font-size:15px;font-weight:700;text-align:center;margin-bottom:14px;
line-height:1.3}
.эотчёт .птаб{width:100%;border-collapse:collapse;font-size:12.5px}
.эотчёт .птаб th,.эотчёт .птаб td{border:1px solid #9AA5B1;padding:5px 8px;text-align:left;
vertical-align:top}
.эотчёт .птаб th{background:#EEF1F5;font-weight:600}
.эотчёт .птаб--пары th{width:150px}
.эотчёт .псписок{margin:0;padding-left:18px}
.эотчёт .пподпись{margin-top:10px;font-size:12px;color:#3D4852;line-height:1.45}
.эотчёт .пснимки{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.эотчёт .пснимки figure{width:calc(50% - 5px);margin:0}
.эотчёт .пснимки img{width:100%;height:190px;object-fit:cover;border:1px solid #9AA5B1;
border-radius:4px;display:block}
.эотчёт .пснимки figcaption{font-size:11px;margin-top:3px;color:#3D4852;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){
.эотчёт{padding:0;background:none}
.эотчёт .плист{padding:14px;border-radius:var(--r2)}
.эотчёт .плист h1{font-size:14px}
.эотчёт .птаб{font-size:12px}
.эотчёт .птаб th,.эотчёт .птаб td{padding:4px 6px}
.эотчёт .пснимки figure{width:100%}
.эотчёт .пснимки img{height:auto;max-height:52vh}
.окно--в .окно__к{height:96vh;max-height:96vh}
}
/* — раздел службы на узком экране —
Сайдбар шириной в половину телефона не оставляет места работе, поэтому
на узком экране он ложится лентой сверху, а список прокручивается вбок. */
@media (max-width:860px){
body.служба .апп{flex-direction:column;overflow:auto}
body.служба .сайд{width:100%;flex:none;flex-direction:row;align-items:center;
gap:10px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line)}
body.служба .марка{padding:0;flex:none}
body.служба .марка span{display:none}
/* Прокручивается только лента пунктов: имя и выход остаются на месте,
иначе они уезжают под пункты меню. */
body.служба .нав{flex-direction:row;gap:5px;flex:1;min-width:0;
overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px}
body.служба .нав a{white-space:nowrap;height:32px;padding:0 11px;flex:none}
body.служба .сайд .низ{margin-top:0;padding-top:0;border-top:0;flex:none;gap:6px}
body.служба .сайд .низ span{display:none}
body.служба .главное{min-height:0}
body.служба .шапка{height:auto;padding:9px var(--s3);flex-wrap:wrap;gap:8px}
body.служба .шапка h1{white-space:normal}
body.служба .работа{padding:var(--s3);overflow:visible}
body.служба .эдом{flex-wrap:wrap}
body.служба .эдом__ч{padding-left:0;border-left:0;width:100%;justify-content:space-between;
border-top:1px solid var(--line);padding-top:var(--s3)}
body.служба .эдве,body.служба .этри{grid-template-columns:1fr}
body.служба .к2__б--0{overflow-x:auto}
/* Широкую таблицу прокручиваем вбок, узкую — оставляем по ширине экрана:
иначе двухколоночная сводка уезжает за край без нужды. */
body.служба .тб:has(th:nth-child(5)){min-width:680px}
body.служба .тб:has(td:nth-child(5)){min-width:680px}
body.служба .эшапка-формы{gap:8px}
}
/* — замки и этапы запуска — */
.нав a.замок{color:var(--ink-3)}
.нав a.замок svg{color:var(--ink-4)}
.зчк{margin-left:auto;display:inline-flex;align-items:center;color:var(--ink-4)}
.зчк svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}
.нав a.замок:hover .зчк{color:var(--ac)}
.эзамок{max-width:760px;margin:0 auto;padding:var(--s5) var(--s4);text-align:center}
.эзамок__и{width:52px;height:52px;margin:0 auto var(--s3);border-radius:16px;
display:grid;place-items:center;border:1px solid var(--line-2);background:var(--sf)}
.эзамок__и .зчк{margin:0;color:var(--ac)}
.эзамок__и .зчк svg{width:22px;height:22px;stroke-width:1.4}
.эзамок h2{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
/* Цель раздела. Подпись «ЦЕЛЬ» отдельной строкой: витрина отвечает на
вопрос «что я с этого получу», а не «на каком мы этапе» (20.09.2026). */
/* Цель — в плашке и крупно: на витрине это главное, ради чего человек
доходит до второго этапа (21.09.2026). */
.эзамок__ц{margin-top:var(--s4);padding:var(--s4) var(--s5);text-align:left;
background:var(--sf);border:1px solid var(--line-2);border-radius:var(--r3);
box-shadow:var(--sh-1),var(--hair)}
.эзамок__ц .lab{display:block;margin-bottom:6px}
.эзамок__ц p{font-size:16px;line-height:1.55;color:var(--ink);font-weight:500;margin:0}
/* Что даёт — тремя равными плашками, а не мелкой серой строкой. */
.эзамок__д{margin-top:var(--s3);display:grid;gap:var(--s2);
grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.эзамок__п{padding:13px 15px;text-align:left;background:var(--sf);
border:1px solid var(--line);border-radius:var(--r2)}
.эзамок__п b{display:block;font-size:13.5px;font-weight:500;line-height:1.45;color:var(--ink-2)}
.эзамок__с{list-style:none;margin:var(--s3) auto 0;padding:0;display:flex;
flex-wrap:wrap;gap:7px;justify-content:center}
.эзамок__с li{font-size:12.5px;color:var(--ink-2);padding:5px 11px;border-radius:999px;
border:1px solid var(--line-2);background:var(--sf)}
.эход{margin-top:var(--s4);padding:var(--s4);text-align:left;border-radius:var(--r3);
border:1px solid var(--line);background:var(--sf-grad);box-shadow:var(--sh-1)}
.эход__ш{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.эход__ш b{font-size:13.5px;font-weight:600}
.эход__ж{display:block;height:8px;margin-top:10px;border-radius:5px;background:var(--sf-3);
border:1px solid var(--line);overflow:hidden}
.эход__ж i{display:block;height:100%;background:var(--ac);transition:width .3s ease}
.эход__п{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
/* — диктовка — */
.эдикт{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.эдикт textarea{width:100%}
/* 25.09.2026, Куштуев: «текст уходил за кнопку "Продиктовать", и не видно было,
что печатаешь и исправляешь». Тогда отвели внизу поля полосу в 44 px.
28.09.2026, Куштуев снова: в длинном тексте строки всё равно проезжают под
кнопкой при прокрутке — полоса спасает только последнюю строку. Поэтому
кнопка больше не лежит поверх поля: она стоит под ним отдельной строкой и
не перекрывает текст ни при какой прокрутке. */
.эмикро{position:static;margin-top:7px;display:inline-flex;align-items:center;gap:6px;
height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);
background:var(--sf);color:var(--ink-2);font-size:12.5px;cursor:pointer;
transition:border-color var(--t),color var(--t),background var(--t)}
.эмикро:hover{border-color:var(--ac);color:var(--ac)}
.эмикро svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.эмикро em{font-style:normal}
.эмикро.идёт{border-color:var(--bad);color:#fff;background:var(--bad)}
.эмикро.идёт svg{animation:эпульс 1.1s ease-in-out infinite}
.эмикро.к--ждём{border-color:var(--wait);color:var(--wait);background:var(--sf)}
@keyframes эпульс{0%,100%{opacity:1}50%{opacity:.45}}
.эчерновик{display:block;min-height:0;margin-top:0;font-size:12px;line-height:1.4;
color:var(--ink-3)}
.поле > span.эчерновик:empty{display:none}
.поле > span.эчерновик--пишем,.поле > span.эчерновик--ждём{margin-top:6px}
/* Идёт запись — строка горит бордо с мигающей точкой; идёт расшифровка —
охра. Видно боковым зрением, но это не сигнальный красный (21.09.2026). */
.поле > span.эчерновик--пишем,.поле > span.эчерновик--ждём{display:flex;align-items:center;
gap:7px;font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.поле > span.эчерновик--пишем{color:var(--bad)}
.поле > span.эчерновик--ждём{color:var(--wait)}
.эчерновик--пишем::before,.эчерновик--ждём::before{content:'';flex:none;
width:8px;height:8px;border-radius:50%;background:currentColor}
.эчерновик--пишем::before{animation:эпульс 1.1s ease-in-out infinite}
/* Расшифровка идёт долго — до полуминуты на минуту речи. Крутящийся кружок
говорит, что процесс жив: «такое ощущение, что экран завис» (21.09.2026). */
.поле > span.эчерновик--ждём::before{border-radius:50%;background:none;
width:13px;height:13px;border:2px solid color-mix(in srgb,var(--wait) 30%,transparent);
border-top-color:var(--wait);animation:эволчок .8s linear infinite}
@keyframes эволчок{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.поле > span.эчерновик--ждём::before{animation:none}}
@media (prefers-reduced-motion:reduce){.эчерновик--пишем::before{animation:none}}
@media (prefers-reduced-motion:reduce){.эмикро.идёт svg{animation:none}}
/* — отклик на время загрузки — */
.эскелет{display:flex;flex-direction:column;gap:11px}
.эскелет i{display:block;height:15px;border-radius:6px;
background:linear-gradient(90deg,var(--sf-3) 0%,var(--sf-2) 50%,var(--sf-3) 100%);
background-size:220% 100%;animation:эмерцание 1.15s ease-in-out infinite}
.эскелет i:nth-child(1){width:38%}
.эскелет i:nth-child(2){width:88%}
.эскелет i:nth-child(3){width:72%}
.эскелет i:nth-child(4){width:80%}
@keyframes эмерцание{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.эскелет i{animation:none}}
/* — печать отчёта — */
#печать{display:none}
@media print{
@page{size:A4 landscape;margin:12mm}
body.печатаем > *:not(#печать){display:none!important}
body.печатаем #печать{display:block}
.плист{break-after:page;page-break-after:always;color:#101418;font-size:11pt}
.плист:last-child{break-after:auto;page-break-after:auto}
.плист h1{font-size:14pt;font-weight:700;margin-bottom:8mm;text-align:center}
.птаб{width:100%;border-collapse:collapse;font-size:10pt}
.птаб th,.птаб td{border:1px solid #4A5568;padding:2mm 3mm;text-align:left}
.птаб th{background:#E2E8F0;font-weight:600}
.птаб--пары th{width:38mm}
.пподпись{margin-top:5mm;font-size:10pt}
.пснимки{display:flex;gap:4mm;flex-wrap:wrap;margin-top:6mm}
.пснимки figure{width:78mm}
.пснимки img{width:100%;height:52mm;object-fit:cover;border:1px solid #4A5568}
.пснимки figcaption{font-size:8pt;margin-top:1mm;color:#4A5568}
}
/* Отметка с подписью в строку: «Учётная запись работает» и подобные
(добавлено 15.09.2026). */
.поле--строка{display:flex;flex-direction:row;align-items:center;gap:9px;cursor:pointer}
.поле--строка input[type="checkbox"]{width:17px;height:17px;margin:0;accent-color:var(--ac)}
.поле--строка span{font-size:13.5px;color:var(--ink)}
/* Спокойная отметка «готово»: приглушённый изумруд, не кричащий зелёный
(добавлено 16.09.2026 для отметки «смена принята»). */
.бир--g{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);
background:color-mix(in srgb,var(--ok) 10%,transparent)}
/* Кто ещё не отмечен в смене: тихая подпись, чтобы экран не спорил сам с собой
(приёмка 16.09.2026). */
.энеотм{display:block;font-size:10.5px;color:var(--ink-4);font-weight:400;margin-top:1px}
tr.энеотмечен td{background:color-mix(in srgb,var(--sf-3) 60%,transparent)}
/* ═══ Доска подразделений для руководства ═════════════════════════════════
20.09.2026, замысел Раиля: слева столбец служб, справа доска выбранной.
Переключаешь службу — меняются данные, раскладка остаётся прежней.
======================================================================== */
.эдоска{display:grid;grid-template-columns:266px minmax(0,1fr);gap:var(--s3);align-items:start}
.эдоска__л{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s2) var(--s3);
background:var(--sf-grad);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:var(--sh-1),var(--hair);position:sticky;top:0}
.эдоска__г{display:flex;align-items:center;gap:8px;padding:2px 9px 8px;
font-size:12px;font-weight:600;letter-spacing:-.01em}
.эдоска__г .lab{margin-left:auto}
.эсл{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;
color:inherit;padding:8px 9px;border-radius:var(--r2);border:1px solid transparent;
transition:background var(--t),border-color var(--t)}
.эсл:hover{background:var(--sf-3)}
.эсл.вкл{background:var(--sf);border-color:var(--line-2);box-shadow:var(--sh-1),var(--hair)}
.эсл__т{flex:1;min-width:0}
.эсл__т b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
.эсл.вкл .эсл__т b{color:var(--ink)}
.эсл__т span{display:block;font-size:11px;color:var(--ink-3);line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Число справа — как счётчики в меню. Непросмотренное темнее, разобранное тихо. */
.эсл__сч{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink);
border:1px solid var(--line-3);border-radius:6px;padding:0 6px;line-height:17px;
min-width:22px;text-align:center;flex:none}
.эсл__сч--тихо{color:var(--ink-4);border-color:var(--line)}
.эдоска__п{padding:10px 9px 0;font-size:11px;line-height:1.4;color:var(--ink-4)}
.эдоска__п2{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
/* 22.09.2026. Это правило (вес 0-2-0) отменяло общий откат «плашки в столбик»
из медиазапроса 1080 px, и три плашки с ФИО оставались в один ряд на любой
ширине. Перестраиваем не по порогу, а по содержимому: колонка уже 200 px не
становится, лишние плашки уходят на вторую строку сами. */
/* 23.09.2026, Раиль (с телефона): «руководитель и в штате — в один уровень,
не друг под другом». Порог снижен: на экране 430 px две плашки ещё
помещаются рядом, а три ФИО по-прежнему переносятся. */
.эдоска__шапка .пл{grid-auto-flow:row;
grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
@media (max-width:1100px){
.эдоска{grid-template-columns:1fr}
.эдоска__л{position:static;flex-direction:row;flex-wrap:wrap;gap:5px}
.эдоска__г,.эдоска__п{width:100%}
.эсл{width:auto;flex:1 1 210px}
/* Плитками идут узлы: сами папки лежат внутри них (28.09.2026). */
.эветвь{flex-direction:row;flex-wrap:wrap;gap:5px;width:100%}
.эузел{flex:1 1 210px}
}
/* Доска: цель, вложения отчёта, ручка перетаскивания */
/* 21.09.2026: было max-width:74ch — цель рвалась на вторую строку при
свободных 400 px справа. Ширину даёт сама колонка. */
.эдоска__цель{font-size:13.5px;line-height:1.5;color:var(--ink-2);
max-width:none;text-wrap:pretty}
.эдоска__цель-л{font-weight:600;color:var(--ink)}
.эотч-пары{margin-bottom:var(--s3)}
/* Подпись «Текст:» и сама плашка с текстом отчёта. */
.эотч{margin-top:var(--s3)}
.эотч__л{display:block;margin-bottom:5px;font-size:11px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.эотч-текст{font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;
overflow-wrap:anywhere}
.эвложения{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px;
margin-top:var(--s4)}
.эвлож{aspect-ratio:1;border:1px solid var(--line-2);border-radius:var(--r2);overflow:hidden;
background:var(--sf-2);display:grid;place-items:center;font-size:10px;font-weight:700;
color:var(--ink-4);cursor:pointer}
.эвлож img{width:100%;height:100%;object-fit:cover;display:block}
.эвлож:hover{border-color:var(--ac)}
/* Ручка перетаскивания плашки: две колонки точек, как принято. */
.тяга{display:inline-flex;color:var(--ink-4);cursor:grab;padding:2px}
.тяга svg{width:15px;height:15px;stroke-width:2.6;stroke-linecap:round}
.тяга:active{cursor:grabbing}
.к2--тащим{opacity:.45}
.к2--цель{outline:2px dashed var(--ac);outline-offset:3px}
/* Полоса между занятиями в меню: проекты — эксплуатация — настройка. */
.нав a[data-semya]+a[data-semya]:not([data-semya=""]){margin-top:1px}
.нав a[data-semya="проекты"]+a[data-semya="служба"],
.нав a[data-semya="служба"]+a[data-semya="настройка"],
.нав a[data-semya="проекты"]+a[data-semya="настройка"]{
margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
/* ═══ Кадры СГИ ═════════════════════════════════════════════════════════
Добавка к app.css. Своих цветов не заводит: всё через переменные сайта,
поэтому обе темы получаются сами. Заливок нет, кроме кнопки действия и
тонкой шкалы укомплектованности — шкала без заливки ничего не показывает.
==================================================================== */
/* ── Обзор служб ───────────────────────────────────────────────────────── */
.к-сетка{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:var(--s2)}
.к-пл{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;
padding:11px 12px 9px;border:1px solid var(--line);border-radius:var(--r3);
background:var(--sf);cursor:pointer;font:inherit;color:inherit;
transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.к-пл:hover{border-color:var(--line-3);background:var(--sf-2);box-shadow:var(--sh-2)}
.к-пл__ш{display:flex;align-items:flex-start;gap:11px}
.к-моно{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
font-size:11.5px;font-weight:700;letter-spacing:.02em;font-style:normal;
color:var(--ink-2);background:var(--sf-3);border:1px solid var(--line-2)}
.к-пл__т{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.к-пл__т b{font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.012em}
.к-пл__т span{font-size:12.5px;color:var(--ink-2);line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.к-пл__т i{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Шкала укомплектованности: цвет берётся только когда он что-то значит. */
.к-шкала{display:flex;align-items:center;gap:9px}
.к-шкала__ж{flex:1;height:6px;border-radius:999px;background:var(--sf-3);
border:1px solid var(--line);overflow:hidden}
.к-шкала__и{display:block;height:100%;border-radius:999px;background:var(--ink-3)}
.к-шкала > b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;
font-variant-numeric:tabular-nums;min-width:40px;text-align:right;color:var(--ink-2)}
.к-шкала--готов .к-шкала__и{background:var(--ok)} .к-шкала--готов > b{color:var(--ok)}
.к-шкала--ждём .к-шкала__и{background:var(--wait)} .к-шкала--ждём > b{color:var(--wait)}
.к-шкала--тревога .к-шкала__и{background:var(--bad)} .к-шкала--тревога > b{color:var(--bad)}
.к-числа{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.к-числа > span{display:flex;flex-direction:column;justify-content:center;gap:3px;
min-height:40px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--r2);
background:var(--bg)}
.к-числа b{font-size:15px;font-weight:600;line-height:1;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;white-space:nowrap}
.к-числа b small{font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-left:1px}
.к-числа i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.к-числа .тревога b{color:var(--bad)}
.к-числа .тревога{border-color:color-mix(in srgb,var(--bad) 38%,var(--line))}
.к-числа .ждём b{color:var(--wait)}
.к-числа .ждём{border-color:color-mix(in srgb,var(--wait) 38%,var(--line))}
.к-числа .готов b{color:var(--ok)}
/* Заместитель и дефицит: подпись сверху, значение под ней. Прижимать
значение вправо в узкой плашке нельзя — длинное ФИО ломает строку. */
.к-подписи{display:flex;flex-direction:column;gap:5px}
.к-подпись > span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
.к-подпись > b{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);line-height:1.35}
.к-подпись > b.к-нет{color:var(--ink-4);font-weight:400;font-style:italic}
.к-подпись > b.нужно{color:var(--wait)}
.к-пл__х{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;
border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-4)}
.к-пл__х > b{margin-left:auto;font-weight:600;color:var(--ac)}
/* ── Карточка службы ───────────────────────────────────────────────────── */
.к-гл{display:flex;flex-direction:column;gap:var(--s2)}
.к-лицо{display:flex;gap:var(--s4);align-items:flex-start;flex-wrap:wrap}
.к-лицо__ч{display:flex;gap:12px;align-items:flex-start;min-width:250px;flex:1 1 250px}
.к-моно--б{width:44px;height:44px;border-radius:12px;font-size:13.5px}
.к-лицо__т{min-width:0}
.к-лицо__т b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.к-лицо__т span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.к-цель-гл{flex:2 1 320px;min-width:250px;padding:10px 13px;border:1px solid var(--line);
border-radius:var(--r2);background:var(--sf-2)}
.к-цель-гл p{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:4px}
/* ── Пары «название — значение» ────────────────────────────────────────── */
.к-пары{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr)}
.к-пары > dt{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-3);padding:7px 16px 7px 0;border-bottom:1px solid var(--line);
display:flex;align-items:center}
.к-пары > dd{font-size:13px;color:var(--ink);padding:7px 0;border-bottom:1px solid var(--line);
line-height:1.4;overflow-wrap:anywhere}
.к-пары > dd.к-нет{color:var(--ink-4);font-style:italic}
.к-пары > dt:nth-last-of-type(1),.к-пары > dd:nth-last-of-type(1){border-bottom:0;padding-bottom:0}
/* ── Цели ──────────────────────────────────────────────────────────────── */
.к-цели{display:flex;flex-direction:column;gap:5px;counter-reset:ц}
.к-цели > li{display:flex;gap:10px;align-items:flex-start;padding:7px 11px;
border:1px solid var(--line);border-radius:var(--r2);background:var(--sf-2);list-style:none}
.к-цели > li::before{counter-increment:ц;content:counter(ц);flex:none;
width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
font-size:10.5px;font-weight:600;color:var(--ink-3);
border:1px solid var(--line-2);background:var(--sf)}
.к-цели > li > span{font-size:13px;line-height:1.45;color:var(--ink-2);padding-top:1px}
/* ── Зоны ответственности: свёрнуто — название, раскрыто — список проверок ─ */
.к-зона{border:1px solid var(--line);border-radius:var(--r2);background:var(--sf);overflow:hidden}
.к-зона + .к-зона{margin-top:6px}
.к-зона > summary{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
list-style:none;transition:background var(--t)}
.к-зона > summary::-webkit-details-marker{display:none}
.к-зона > summary:hover{background:var(--sf-2)}
.к-зона > summary > b{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--ink);line-height:1.35}
.к-зона > summary > svg{width:13px;height:13px;flex:none;color:var(--ink-4);transition:transform var(--t)}
.к-зона[open] > summary > svg{transform:rotate(90deg)}
.к-зона[open] > summary{border-bottom:1px solid var(--line);background:var(--sf-2)}
.к-проверки{padding:9px 12px 11px;display:flex;flex-direction:column;gap:5px}
.к-проверки > li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;
color:var(--ink-2);line-height:1.4;list-style:none}
.к-проверки > li::before{content:'';flex:none;width:11px;height:11px;margin-top:3px;
border:1px solid var(--line-3);border-radius:3px}
/* ── Вкладки карточки ──────────────────────────────────────────────────── */
/* Восемь вкладок в колонку не влезают уже на ноутбуке: панель едет вбок.
Нижняя черта перенесена сюда, иначе она уезжает вместе с пилюлями и
подчёркивание активной вкладки повисает в воздухе. */
.к-вкладки{overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--line);margin-bottom:2px}
.к-вкладки > .пилюли{border-bottom:0;margin-bottom:0;width:max-content;min-width:100%}
.к-вкладки .пилюля.вкл::after{bottom:0}
.к-вкладки::-webkit-scrollbar{height:5px}
.к-вкладки::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:0}
/* ── Что заполнено по службе ───────────────────────────────────────────── */
/* Строкой, а не плашками: «Нормативы и допуски» в узкую ячейку не влезает
и обрезается многоточием — поймано измерением на 1440 (20.09.2026). */
.к-свод{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:0 var(--s5)}
.к-свод__с{display:flex;align-items:baseline;gap:10px;padding:8px 0;
border-bottom:1px solid var(--line);font-size:12.5px}
.к-свод__с > span{color:var(--ink-2);flex:1;min-width:0}
.к-свод__с > b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
letter-spacing:-.01em;white-space:nowrap}
.к-свод__с > i{font-style:normal;font-size:11.5px;color:var(--ink-4);white-space:nowrap}
/* ── Мелочи ────────────────────────────────────────────────────────────── */
.к-ряд{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.к-две{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2);align-items:start}
.к-сноска{font-size:11.5px;color:var(--ink-4);line-height:1.45}
.к-чипы{display:flex;flex-wrap:wrap;gap:6px}
/* Подсказка-врезка. Полоса слева вместо заливки. */
.к-врезка{border-left:2px solid var(--line-3);padding:2px 0 2px 11px;
font-size:12.5px;line-height:1.5;color:var(--ink-3)}
/* Блоки лентой: якорь не должен уезжать под липкую панель вкладок. */
.к-лента > .к2{scroll-margin-top:58px}
.к-панель{position:sticky;top:0;z-index:6;background:var(--bg);
padding-top:2px;margin:calc(var(--s4) * -1) calc(var(--s4) * -1) 0;
padding-left:var(--s4);padding-right:var(--s4)}
@media (max-width:1100px){.к-две{grid-template-columns:1fr}}
@media (max-width:760px){
.к-сетка{grid-template-columns:1fr}
.к-пары{grid-template-columns:1fr}
.к-пары > dt{border-bottom:0;padding:9px 0 0}
.к-пары > dd{padding-top:2px}
}
/* ── Правка под app.css ────────────────────────────────────────────────── */
/* app.css делает ячейке .гл display:-webkit-box ради обрезки в три строки.
У такой ячейки правая граница встаёт по содержимому, а не по колонке:
шапка таблицы и тело расходятся. Измерено 20.09.2026 — «Детализация
фонда» 755 против 683, «Объекты» 734 против 721, «Знания» 816 против 721.
Здесь вставок из Word не бывает, длинное слово и так переносится по
буквам — возвращаем ячейке табличное поведение. */
/* Должностная инструкция в окне: app.css центрирует .док и держит 780 px,
отчего в широком окне слева остаётся пустая полоса. */
.окно .док{max-width:none;margin:0}
.к-ди{display:flex;flex-direction:column;gap:5px;padding-left:17px}
.к-ди > li{font-size:13px;line-height:1.5;color:var(--ink-2)}
/* Незанятая должность в карточке — тем же приглушённым видом, что в плашке. */
.к-лицо__т b.к-нет{color:var(--ink-4);font-weight:500}
/* ── Плотность ──────────────────────────────────────────────────────────
20.09.2026, Раиль: «чтобы не было огромных полупустых плашек, всё
максимально компактное, меньше скролла». Плашка показателя больше не
держит три фиксированные строки: пустая строка пояснения не занимает
место, и ряд сжимается по содержимому. */
.к-гл .пл > div,.к-гл .пл > button{grid-template-rows:12px 21px auto;padding:5px 10px 6px}
.к-гл .пл b{font-size:17px;line-height:21px}
.к-гл .пл em{font-size:10.5px}
.к-гл .пл > div:not(:has(em)){grid-template-rows:12px 21px}
.к-гл .к2__б{padding:11px}
.к-гл .к2__ш{padding:7px 11px}
.к-свод__с{padding:6px 0}
/* Реестр рабочих дней: строки одной высоты — описание в одну строку. */
.тб--ровно td{height:40px}
.тб--ровно .эдень-текст{max-width:0;width:60%;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;color:var(--ink)}
.эсноска{margin-top:12px;font-size:12.5px;color:var(--ink-3)}
/* Колонка по центру: часть чисел жалась вправо, часть влево — читалось
как разнобой (21.09.2026). Название работы остаётся слева. */
.тб th.ц,.тб td.ц{text-align:center}
/* Отметка состояния в шапке формы: та же геометрия, что у кнопки рядом. */
.к--сост-ж{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 45%,var(--line-2));
background:color-mix(in srgb,var(--wait) 7%,var(--sf))}
.к--сост-ж:hover{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 45%,var(--line-2));
background:color-mix(in srgb,var(--wait) 7%,var(--sf))}
/* Номер папки в столбце — тем же весом, что счётчики. */
.эсл__н{flex:none;font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-4);
min-width:18px;text-align:right}
/* ── Звуковая дорожка ──────────────────────────────────────────────────────
Стоит прямо под полем ввода и под текстом отчёта: голосовую запись слушают
сразу, а не ищут среди вложений (21.09.2026). */
.здор{display:flex;align-items:center;gap:11px;margin-top:2px;padding:8px 12px 8px 8px;
border:1px solid var(--line-2);border-radius:var(--r2);background:var(--sf)}
.здор__к{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--ac);color:var(--ac);background:var(--sf);cursor:pointer;
transition:background var(--t),color var(--t)}
.здор__к:hover{background:var(--ac);color:var(--ac-ink)}
.здор__к svg{width:14px;height:14px;fill:currentColor;stroke:none}
.здор.играет .здор__к{background:var(--ac);color:var(--ac-ink)}
.здор__т{flex:1;min-width:0;display:block}
.здор__т b{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.здор__ж{display:block;height:4px;margin-top:6px;border-radius:3px;background:var(--sf-3);
overflow:hidden}
.здор__ж i{display:block;height:100%;width:0;background:var(--ac);transition:width .2s linear}
.здор__ч{flex:none;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;
white-space:nowrap}
/* ── Структура службы ──────────────────────────────────────────────────────
Лист A3 показываем целиком, подгоняя по ширине колонки: он утверждён и
перерисовке не подлежит (21.09.2026). */
.стрлист{padding:0;overflow:hidden;background:var(--sf);border-radius:0 0 var(--r3) var(--r3)}
.стрлист__к{display:block;border:0;transform-origin:0 0;background:#fff}
/* ── Поле пароля с «глазиком» ──────────────────────────────────────────────
Оборачивает любое поле пароля: вход, смена временного пароля, смена своего.
Одно правило на компьютер и телефон (21.09.2026). */
.глаз{position:relative;display:block}
.глаз > input{width:100%;padding-right:42px}
.глаз__к{position:absolute;right:4px;top:50%;transform:translateY(-50%);
width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
color:var(--ink-4);background:transparent;border:0;cursor:pointer;
transition:color var(--t),background var(--t)}
.глаз__к svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round}
.глаз__к:hover{color:var(--ink-2);background:var(--sf-3)}
.глаз__к.вкл{color:var(--ac)}
/* Edge рисует у поля пароля свой значок показа ровно там же — получалось два
глаза подряд. В Chrome и Яндекс.Браузере псевдоэлемента нет, правило им не
мешает. */
input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}
/* Обёртка глазика — прямой потомок .поле, и под неё подпадали правила подписи
поля (.поле > span, 11 px) и раскладка ряда с кнопкой. Возвращаем своё. */
.поле > span.глаз{font-size:inherit;font-weight:inherit;color:inherit}
.поле__скнопкой > .глаз{flex:1;min-width:0}
/* ── Моя учётная запись ───────────────────────────────────────────────── */
/* Одна строка на одно действие: подпись, значение, кнопка. Раиль 21.09.2026 —
«сделай в четыре раза меньше эту табличку». */
.уч__вход{display:flex;flex-direction:column;gap:2px}
.уч__р{display:flex;align-items:center;gap:10px;min-height:34px}
.уч__р + .уч__р{border-top:1px solid var(--line-2)}
.уч__л{flex:none;width:64px;font-size:11px;color:var(--ink-3)}
.уч__з{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);
overflow-wrap:anywhere}
.уч__р .к{flex:none}
/* Плашки «кто вы в системе» — те же, что в админке, только мельче. */
.пл--мелко{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.пл--мелко > div{padding:8px 10px}
/* 22.09.2026, Раиль: «сделал браузер чуть больше половины экрана — ФИО уже не
помещается в плашку». Так и было: «Шундеев Кирилл Александрович» требует
216 px, а колонка при окне 1100 px даёт 192 px. Перестройка плашек в два
столбца включалась только с 1080 px, и полоса 1081–1300 оставалась битой.
Чиним не порогом, а содержимым: в мелких плашках значение переносится на
вторую строку, поэтому ширина колонки перестаёт иметь значение. Строка
значения из фиксированных 24 px становится auto — иначе вторая строка легла
бы поверх пояснения снизу. */
.пл--мелко > div{grid-template-rows:13px auto auto}
.пл--мелко b{font-size:14px;white-space:normal;overflow-wrap:anywhere;
line-height:1.3;min-height:18px}
/* Поле «за какой день» стоит в шапке карточки рядом с названием: оно узкое,
подпись ему не нужна — смысл читается из соседнего слова «Рабочий день». */
.эдень-дп{display:inline-flex;max-width:190px}
.эдень-дп .поле{gap:0}
.эдень-дп .поле > span:empty{display:none}
.эдень-дп .дп__в{height:32px;font-size:13px}
/* ─────────────────────────────────────────────────────────────────────────
22.09.2026. Окно меньше полного экрана — вся раскладка сжимается.
Раиль: «люди могут открыть окно как угодно — маленько, побольше, повыше,
пошире, и всё должно смотреться красиво». До этого дня ширина боковой
панели была намертво 248 px на любой ширине окна, а узкие раскладки
существовали только для двух ролей (body.смотрю ≤760, body.служба ≤860) —
у руководителя проекта и администратора не было ни одной.
Меняем не раскладку, а размеры: панель уступает место работе.
───────────────────────────────────────────────────────────────────────── */
@media (max-width:1280px){ :root{--side:212px} }
@media (max-width:1100px){ :root{--side:190px} }
@media (max-width:920px){ :root{--side:168px} }
/* Подвал панели: имя, роль и три кнопки в одну строку помещались только при
248 px. Как только панель сузилась, имя стало резаться многоточием
(«Шундеев К. …»). Ставим имя отдельной строкой над кнопками — места хватает
на любой ширине, и фамилия видна целиком. Проверено замером: скрыто 0. */
@media (max-width:1280px){
.сайд .низ{flex-wrap:wrap;row-gap:7px}
/* Пустой разрыв посередине: аватар с именем остаются первой строкой,
три кнопки уходят второй. Иначе имя делит слот с кнопками и режется. */
.сайд .низ::after{content:'';flex:1 0 100%;height:0;order:0}
.сайд .низ i{order:-2}
.сайд .низ > span{order:-1;flex:1 1 auto;min-width:0}
.сайд .низ button{order:1}
.сайд .низ b{white-space:normal;overflow-wrap:anywhere}
}
/* Шапка панели: значок и подпись «Автоматизированное рабочее место» в одну
строку перестали помещаться, когда панель сузилась, — подпись резалась.
Даём тексту сжиматься и переноситься: значок остаётся, слова видны целиком. */
@media (max-width:1280px){
.марка{gap:6px;padding:1px var(--s2) var(--s2)}
.марка > div,.марка > span:last-child{min-width:0}
.марка b,.марка span{overflow-wrap:anywhere}
}
/* Ряд разделов проекта не переносился и не прокручивался: на узком окне
последние вкладки просто пропадали. Прокручиваем внутри ряда, как в
«Кадрах» (.к-вкладки), а не всей страницей. */
.пилюли{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.пилюли::-webkit-scrollbar{height:4px}
.пилюли::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:2px}
/* Имя файла в шапке окна просмотра выталкивало кнопки «Скачать» и «Закрыть». */
.окно__ш b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Две раскладки, у которых откат в одну колонку был мёртвым: безусловные
правила стояли НИЖЕ своих медиазапросов и перебивали их одинаковым весом.
Повторяем пороги здесь, в самом низу файла. */
@media (max-width:1080px){
.стб{grid-template-columns:1fr}
.трое--узко{grid-template-columns:1fr}
.трое--узко > *:nth-child(2){grid-column:auto}
}
/* Оцифрованные документы службы: полка внизу левого столбца в «Документах».
23.09.2026. Видна только руководителю проекта и куратору — сервер отдаёт
сам раздел только им. */
.эоцифр{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}
.эоцифр__г{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-3);padding:0 2px 6px}
.эоцифр__к{display:block;padding:8px 10px 9px;border:1px solid var(--line);
border-radius:var(--r2);background:var(--sf);text-decoration:none;color:inherit;
margin-bottom:6px;transition:border-color .16s,transform .16s}
.эоцифр__к:hover{border-color:var(--ac);transform:translateY(-1px)}
.эоцифр__к b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
.эоцифр__к span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px;line-height:1.3}
/* ── Оцифрованные документы ────────────────────────────────────────────────
23.09.2026. Раздел внутри сайта: слева список оцифрованного, посередине
полотно (план завода, схема связей, таблица, годы), справа карточка линии
или подстанции. Полотно всегда тёмное в обеих темах — это чертёж, и белый
фон под цветными трассами читается хуже. */
/* 23.09.2026, Раиль: «мне нужно, чтобы всё помещалось в рамке одного экрана
без скролла». Раздел занимает ровно высоту рабочей области, а прокрутка,
если понадобится, живёт внутри правой колонки. */
.оэкран{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--s3);
align-items:stretch;height:calc(100vh - var(--top) - var(--s4) * 2);min-height:440px}
.оэкран__п{min-width:0;display:flex;flex-direction:column;gap:var(--s3);min-height:0}
.оэкран__карточка{display:flex;flex-direction:column;gap:var(--s3);min-width:0;
min-height:0;overflow-y:auto;padding-right:2px}
/* Опись оцифрованного — лентой над полотном: в колонке слева она съедала
треть ширины плана, и подписи корпусов переставали читаться (23.09.2026). */
.одоки{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.одок{display:inline-flex;flex-direction:column;gap:1px;text-align:left;border:1px solid var(--line);
background:var(--sf);border-radius:var(--r2);padding:7px 14px;font:inherit;cursor:pointer;
transition:var(--t)}
.одок:hover{border-color:var(--line-3);transform:translateY(-1px)}
.одок.вкл{border-color:var(--ac);box-shadow:var(--sh-1)}
.одок b{font-size:12.5px;font-weight:600;color:var(--ink)}
.одок span{font-size:10.5px;color:var(--ink-3)}
.оисточник{font-size:10.5px;color:var(--ink-4);line-height:1.4;flex:1 1 200px;min-width:0}
.одок em{font-style:normal;font-size:10px;color:var(--ink-4);margin-top:2px}
/* ── Климатическое оборудование (25.09.2026) ────────────────────────────────
Три вида на один реестр: плитки цехов, таблица и полосы по типам. Сделано
теми же приёмами, что план кабельных линий: контур вместо заливки, цвет —
смысл (синий у кондиционеров, зелёный у вентиляторов, латунь у установок). */
.кплитки{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px;padding:2px}
.кплитка{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
padding:11px 13px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--sf);
font:inherit;cursor:pointer;transition:var(--t)}
.кплитка:hover{border-color:var(--line-3);transform:translateY(-1px)}
.кплитка.вкл{border-color:var(--ac);box-shadow:var(--sh-1)}
.кплитка b{font-family:var(--f-num);font-size:21px;font-weight:700;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.кплитка span{font-size:11.5px;line-height:1.25;color:var(--ink-2)}
.кплитка em{font-style:normal;font-size:10px;color:var(--ink-4)}
.ктаблица{width:100%;border-collapse:collapse;font-size:12px}
.ктаблица th{position:sticky;top:0;z-index:1;background:var(--sf-2);text-align:left;
padding:7px 9px;font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-3);border-bottom:1px solid var(--line-2);cursor:pointer;white-space:nowrap}
.ктаблица th:hover{color:var(--ink)}
.ктаблица th.вкл{color:var(--ac)}
.ктаблица td{padding:6px 9px;border-bottom:1px solid var(--line);color:var(--ink-2);
line-height:1.3;vertical-align:top}
.ктаблица tbody tr{cursor:pointer;transition:background var(--t)}
.ктаблица tbody tr:hover td{background:var(--sf-2)}
.ктаблица tbody tr.вкл td{background:color-mix(in srgb,var(--ac) 7%,var(--sf))}
.кмоно{font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.кточка{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
vertical-align:middle}
.кпусто{font-style:normal;font-size:11px;color:var(--ink-4)}
.кполосы{display:flex;flex-direction:column;gap:5px;padding:4px 2px}
.кполоса{display:grid;grid-template-columns:minmax(150px,1.1fr) 3fr 42px;align-items:center;gap:11px;
padding:5px 9px;border:1px solid transparent;border-radius:var(--r2);background:none;
font:inherit;text-align:left;cursor:pointer;transition:var(--t)}
.кполоса:hover{background:var(--sf-2)}
.кполоса.вкл{border-color:var(--ac);background:var(--sf)}
.кполоса__и{font-size:12px;color:var(--ink-2)}
.кполоса__п{height:12px;background:var(--sf-3);border-radius:3px;overflow:hidden}
.кполоса__п i{display:block;height:100%;border-radius:3px}
.кполоса__н{font-family:var(--f-num);font-size:13px;font-weight:700;color:var(--ink);
text-align:right;font-variant-numeric:tabular-nums}
.окарт__ш{padding:0 0 9px;border-bottom:1px solid var(--line);margin-bottom:9px}
.окарт__ш b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.окарт__ш span{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
.окарт__п{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
border-bottom:1px solid var(--line);font-size:11.5px}
.окарт__п:last-child{border-bottom:0}
.окарт__п span{color:var(--ink-3);flex:0 0 46%}
.окарт__п b{font-weight:600;color:var(--ink);text-align:right}
.окарт__строки{display:flex;flex-direction:column;gap:5px;max-height:420px;overflow:auto}
.окарт__с{display:flex;flex-direction:column;gap:1px;padding:5px 8px;background:var(--sf-2);
border-radius:8px}
.окарт__с span{font-size:11.5px;color:var(--ink-2)}
.окарт__с em{font-style:normal;font-size:10px;color:var(--ink-4)}
.оисх__и{font-size:10px;color:var(--ink-4);line-height:1.4;padding-top:7px}
/* Анкеты подразделений: свой скролл у столбца и у анкеты, поиск обычной
строкой, идеи — отдельной плашкой, блоки ответов сворачиваются (25.09.2026). */
.эдоска__л--свой-скролл{max-height:calc(100vh - 150px);overflow:hidden}
/* 25.09.2026, Раиль: «скролл сотрудников работает, а правая часть не
скроллится — не могу посмотреть ниже третьего блока». Ограничение стояло на
внешней колонке, а у карточки внутри — overflow:hidden, и содержимое просто
обрезалось. Теперь листается ТЕЛО карточки: шапка с фамилией и кнопкой
«Свернуть блоки» остаётся на месте. */
.эдоска__п2--свой-скролл > .к2{display:flex;flex-direction:column;
max-height:calc(100vh - 150px)}
.эдоска__п2--свой-скролл > .к2 > .к2__ш{flex:none}
.эдоска__п2--свой-скролл > .к2 > .к2__б{flex:1 1 auto;min-height:0;overflow-y:auto}
.астолбец{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
padding-right:2px}
.аидеи{flex:none;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.аидеи__с{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.эдоска__п2--свой-скролл{min-height:0}
/* Тихий счётчик в меню: количество, а не «новое» (26.09.2026). */
.сч--тихо{background:transparent;color:var(--ink-4);border:1px solid var(--line-2);
font-weight:500}
/* Отбор уведомлений: виды и люди строкой кнопок (26.09.2026). */
/* Один ряд: виды писем, черта, фамилии — как на телефоне. Двумя рядами это
занимало лишнюю строку на обоих экранах (26.09.2026). */
.увиды{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:9px}
.увиды__черта{flex:none;width:1px;height:18px;background:var(--line-2);margin:0 3px}
.увид{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
border:1px solid var(--line-2);background:var(--sf);color:var(--ink-2);font:inherit;
font-size:12px;cursor:pointer;transition:var(--t)}
.увид:hover{border-color:var(--line-3);color:var(--ink)}
.увид.вкл{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb,var(--ac) 6%,var(--sf))}
.увид i{font-style:normal;font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.увид em{font-style:normal;min-width:16px;height:16px;display:inline-flex;align-items:center;
justify-content:center;padding:0 4px;border-radius:8px;background:var(--ac);color:#fff;
font-size:10px;font-weight:700}
.увид--чел{font-size:11.5px;padding:4px 9px}
.увид--сброс{border-style:dashed;color:var(--ink-3)}
.увед__поиск{width:100%}
/* Уведомления плашками (26.09.2026, Раиль): каждое письмо — белая карточка на
сером поле, между ними воздух. Непрочитанные наверху и с отметкой, длинный
текст свёрнут до трёх строк и раскрывается нажатием. */
.увед__верх{display:flex;align-items:center;gap:12px;margin-bottom:11px}
/* 26.09.2026, Раиль: «60 — своя плашечка в квадратной окантовочке, и
38 новых — своя окантовочка». Тот же вид, что в сводке телефона. */
.увед__счёт{display:flex;align-items:stretch;gap:8px}
.увед__счёт > span{display:flex;flex-direction:column;justify-content:center;gap:2px;
min-width:124px;min-height:46px;padding:6px 12px;background:var(--sf);
border:1px solid var(--line-2);border-radius:var(--r2)}
.увед__счёт b{font-family:var(--f-num);font-size:19px;font-weight:700;line-height:1.1;
color:var(--ink);font-variant-numeric:tabular-nums}
.увед__счёт i{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.2}
.увед__счёт--тихо b{color:var(--ink-3)}
.увед__верх .к{margin-left:auto}
/* Поиск со своим крестиком: браузерный есть не везде, а сбрасывать запрос
по букве неудобно. */
.упоиск{position:relative;display:block;margin-left:12px;width:260px}
.упоиск .апоиск{margin:0;padding-right:34px}
.упоиск .апоиск::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.упоиск__к{position:absolute;right:3px;top:50%;transform:translateY(-50%);
width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
color:var(--ink-4);background:transparent;border:0;cursor:pointer}
.упоиск__к:hover{background:var(--sf-3);color:var(--ink-2)}
.упоиск__к svg{width:15px;height:15px}
/* Письмо, за которым открывается документ. */
.увед--ведёт{cursor:pointer}
.увед__шеврон{flex:none;display:grid;place-items:center;width:20px;height:20px;
color:var(--ink-4);transition:var(--t)}
.увед__шеврон svg{width:16px;height:16px}
.увед--ведёт:hover .увед__шеврон{color:var(--ac);transform:translateX(2px)}
.уведомления{display:flex;flex-direction:column;gap:9px}
.увед{background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);
padding:12px 14px;cursor:pointer;transition:border-color var(--t),box-shadow var(--t)}
.увед:hover{border-color:var(--line-3);box-shadow:var(--sh-1)}
.увед--новая{border-color:color-mix(in srgb,var(--ac) 34%,var(--line));
box-shadow:var(--sh-1)}
.увед--раскрыта{border-color:var(--line-3)}
.увед__ш{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.увед__з{flex:1 1 auto;min-width:0}
.увед__з b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25}
.увед--новая .увед__з b{color:var(--ink)}
.увед:not(.увед--новая) .увед__з b{color:var(--ink-2);font-weight:500}
.увед__з span{display:block;margin-top:3px;font-size:11px;color:var(--ink-3);line-height:1.3}
.увед__новое{flex:none;min-width:18px;height:18px;display:flex;align-items:center;
justify-content:center;padding:0 5px;border-radius:9px;background:var(--ac);color:#fff;
font-style:normal;font-size:10.5px;font-weight:700;line-height:1}
.увед__т{font-size:12.5px;line-height:1.45;color:var(--ink-2);white-space:pre-line}
.увед__т--кратко{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden}
.увед__кн{margin-top:9px}
.увед:not(.увед--новая) .увед__т{color:var(--ink-3)}
/* Разбор анкеты для руководства (25.09.2026). */
.аразбор{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 var(--s4) var(--s3);
padding:10px 13px;border:1px solid color-mix(in srgb,var(--ac) 30%,var(--line));
border-radius:var(--r2);background:color-mix(in srgb,var(--ac) 5%,var(--sf))}
.аразбор--нет{border-style:dashed;border-color:var(--line-2);background:var(--sf-2)}
.аразбор__т{flex:1 1 200px;min-width:0}
.аразбор__т b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.аразбор__т span{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
/* Между «В чём идея» и «Что это даст» нужен воздух: плашки стояли впритык
и читались как одна (25.09.2026). */
.аитог + .аитог{margin-top:9px}
.аитог__шапка{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;
background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.аитог__шапка b{flex:1 1 auto;min-width:0}
.аитог__стрелка{font-style:normal;font-size:11px;color:var(--ink-4);flex:none}
.аитог__шапка:hover .аитог__стрелка{color:var(--ac)}
.аитог--свёрнут{opacity:.9}
.аитог--свёрнут .аитог__т b{color:var(--ink-2)}
/* Выгрузка пачкой: отметки у документов и полоса действий (25.09.2026). */
.эгалка{width:16px;height:16px;accent-color:var(--ac);cursor:pointer;vertical-align:middle}
tr.эотмечен td{background:color-mix(in srgb,var(--ac) 6%,var(--sf))}
.эотметки{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 14px;
border:1px solid color-mix(in srgb,var(--ac) 28%,var(--line));border-radius:var(--r2);
background:color-mix(in srgb,var(--ac) 4%,var(--sf))}
.эотметки b{font-size:13px;color:var(--ink)}
.эотметки__в{font-size:12px;color:var(--ink-3)}
/* Отметка «не выходить на этом устройстве» на форме входа (25.09.2026). */
.вход__память{display:flex;align-items:center;gap:9px;margin:2px 0 4px;cursor:pointer;
font-size:12.5px;color:var(--ink-3)}
.вход__память input{width:16px;height:16px;accent-color:var(--ac);cursor:pointer;flex:none}
.вход__память span{line-height:1.3}
.вход__память:hover span{color:var(--ink-2)}
/* Предел вложенности: вместо исчезнувшей кнопки — объяснение. */
.кпапка--предел{opacity:.72;cursor:default}
.кпапка--предел .кпапка__т b{color:var(--ink-2)}
/* Движение и цвет в оцифрованных документах. 25.09.2026, Раиль: «никакой
анимации, никаких цветов». Движение здесь служебное: элементы проявляются
по очереди, столбики растут снизу — это показывает порядок и масштаб, а не
развлекает. Всё выключается системной настройкой «меньше движения». */
@keyframes опроявление { from { opacity: 0; transform: translateY(7px) }
to { opacity: 1; transform: none } }
@keyframes орост { from { transform: scaleY(.04) } to { transform: scaleY(1) } }
.кплитка{animation:опроявление .34s cubic-bezier(.2,.8,.25,1) both;
animation-delay:calc(var(--и,0) * 14ms)}
.кплитка__доля{display:block;width:100%;height:5px;margin:7px 0 5px;border-radius:3px;
background:color-mix(in srgb,#1F6B4E 22%,var(--sf-3));overflow:hidden}
.кплитка__доля i{display:block;height:100%;border-radius:3px;
background:linear-gradient(90deg,#2C4470,#3B5A8C)}
.кплитка.вкл .кплитка__доля{background:color-mix(in srgb,#1F6B4E 34%,var(--sf-3))}
.кполоса{animation:опроявление .3s ease-out both;animation-delay:calc(var(--и,0) * 22ms)}
.кполоса__п i{background-image:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,0));
transition:width .45s cubic-bezier(.2,.8,.25,1)}
/* Вода: зона допустимого подсвечена, столбики растут снизу. */
.вдзона{position:absolute;left:0;right:0;bottom:0;border-radius:4px 4px 0 0;
background:linear-gradient(180deg,color-mix(in srgb,#1F6B4E 9%,transparent),
color-mix(in srgb,#1F6B4E 4%,transparent));pointer-events:none}
.вдстолб i{transform-origin:bottom;animation:орост .55s cubic-bezier(.2,.85,.25,1) both;
animation-delay:calc(var(--и,0) * 45ms);
background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0))}
.вдстолб b{animation:опроявление .4s ease-out both;
animation-delay:calc(var(--и,0) * 45ms + 120ms)}
.вдплитка{animation:опроявление .32s ease-out both;animation-delay:calc(var(--и,0) * 40ms)}
.вдплитка__з{transition:color var(--t)}
@media (prefers-reduced-motion:reduce){
.кплитка,.кполоса,.вдстолб i,.вдстолб b,.вдплитка{animation:none}
.кполоса__п i{transition:none}
}
/* ── Качество воды (25.09.2026) ─────────────────────────────────────────────
Превышение норматива — единственное место, где здесь появляется тревожный
цвет, и он приглушённый: охра переходит в бордо только на числе. */
.вдплитки{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:2px}
.вдплитка{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
padding:13px 15px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--sf);
font:inherit;cursor:pointer;transition:var(--t)}
.вдплитка:hover{border-color:var(--line-3);transform:translateY(-1px)}
.вдплитка.вкл{border-color:var(--ac);box-shadow:var(--sh-1)}
.вдплитка__и{font-size:12.5px;font-weight:600;color:var(--ink)}
.вдплитка__з{font-family:var(--f-num);font-size:27px;font-weight:700;line-height:1.05;
color:var(--ink);font-variant-numeric:tabular-nums}
.вдплитка__з.плохо{color:var(--bad)}
.вдплитка__п{font-size:10.5px;color:var(--ink-3)}
.вдплитка__д{margin-top:5px;font-size:10.5px;color:var(--ink-4)}
.вдтаблица td.нм{font-weight:600;color:var(--ink)}
.вдплохо{color:var(--bad);font-weight:700}
.вдплохо em{font-style:normal;font-size:10px;font-weight:600;opacity:.85}
.вдпусто{color:var(--ink-4)}
.вднорма{display:block;font-style:normal;font-size:10px;font-weight:400;color:var(--ink-4);
margin-top:1px}
.вдряд__итог{display:block;margin-top:3px;font-style:normal;font-size:10px;line-height:1.35;
color:var(--ink-4);font-weight:400}
.вдграфик{display:flex;flex-direction:column;gap:16px;padding:6px 2px 2px}
.вдряд{display:grid;grid-template-columns:132px 1fr;align-items:end;gap:12px}
.вдряд__и{font-size:12px;font-weight:600;color:var(--ink-2);padding-bottom:20px}
.вдряд__п{position:relative;display:flex;align-items:flex-end;gap:10px;height:150px;
border-bottom:1px solid var(--line-2)}
.вдряд__п u{position:absolute;left:0;right:0;border-top:1px dashed var(--line-3);text-decoration:none}
.вдряд__п u em{position:absolute;right:0;top:-14px;font-style:normal;font-size:9.5px;color:var(--ink-4)}
.вдстолб{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;
justify-content:flex-end;height:100%;min-width:0}
.вдстолб b{font-family:var(--f-num);font-size:11px;font-weight:700;color:var(--ink-2);
margin-bottom:3px;font-variant-numeric:tabular-nums}
.вдстолб i{display:block;width:100%;max-width:54px;background:color-mix(in srgb,var(--ac) 72%,#fff);
border-radius:3px 3px 0 0}
.вдстолб--плохо i{background:color-mix(in srgb,var(--bad) 74%,#fff)}
.вдстолб--плохо b{color:var(--bad)}
.вдстолб--нет b{color:var(--ink-4)}
.вдстолб span{position:absolute;bottom:-17px;font-size:9.5px;color:var(--ink-4);white-space:nowrap}
@media (max-width:900px){
.кплитки{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.вдплитки{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.вдряд{grid-template-columns:96px 1fr;gap:8px}
.вдряд__и{font-size:11px}
.кполоса{grid-template-columns:minmax(110px,1fr) 2fr 34px;gap:8px}
.ктаблица{font-size:11px}
.ктаблица td{padding:5px 6px}
}
/* Во весь экран: полотно ложится поверх страницы, не пересобираясь. */
.опанель--во-весь{position:fixed;inset:12px;z-index:80;display:flex;flex-direction:column;
box-shadow:0 30px 80px -24px rgba(0,0,0,.55)}
.опанель--во-весь .охолст{flex:1 1 auto;min-height:0}
.опанель--во-весь .оплан{max-height:none;height:100%}
body.опросторно-идёт{overflow:hidden}
.оцифры{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:7px;
flex:none}
.оцифра{background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);
padding:8px 11px 7px;box-shadow:var(--sh-1);opacity:0;
animation:опроявить .5s forwards}
.оцифра:nth-child(2){animation-delay:.05s}.оцифра:nth-child(3){animation-delay:.1s}
.оцифра:nth-child(4){animation-delay:.15s}.оцифра:nth-child(5){animation-delay:.2s}
.оцифра b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.05;
color:var(--ink);font-variant-numeric:tabular-nums}
.оцифра span{display:block;font-size:10px;color:var(--ink-3);margin-top:2px;line-height:1.25}
.опанель{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
overflow:hidden;box-shadow:var(--sh-2);flex:1 1 auto;display:flex;
flex-direction:column;min-height:0}
.опанель__ш{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none;
padding:7px var(--s4);border-bottom:1px solid var(--line);background:var(--sf-2)}
.опанель__имя{font-size:13px;font-weight:600;color:var(--ink)}
.омелко{font-size:10.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.овиды{display:flex;gap:2px;margin-left:auto;background:var(--sf-3);padding:2px;
border-radius:var(--r1);flex-wrap:wrap}
.овид{border:0;background:none;font:inherit;font-size:11.5px;color:var(--ink-3);
padding:5px 11px;border-radius:5px;cursor:pointer;transition:var(--t);white-space:nowrap}
.овид:hover{color:var(--ink)}
.овид.вкл{background:var(--sf);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.оотборы{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:none;
padding:6px var(--s4);border-bottom:1px solid var(--line)}
.ометка{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
margin-right:2px}
.окн{border:1px solid var(--line);background:var(--sf);font:inherit;font-size:11px;
color:var(--ink-2);padding:4px 9px;border-radius:20px;cursor:pointer;transition:var(--t);
white-space:nowrap}
.окн:hover{border-color:var(--line-3);transform:translateY(-1px)}
.окн.вкл{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:600}
.осброс{border:0;background:none;font:inherit;font-size:11px;color:var(--ink-4);
cursor:pointer;text-decoration:underline;text-underline-offset:3px;
opacity:0;pointer-events:none;transition:var(--t)}
.осброс.видна{opacity:1;pointer-events:auto}
.осброс:hover{color:var(--ink-2)}
.охолст{position:relative;min-height:200px;flex:1 1 auto;display:flex;
flex-direction:column;overflow:auto}
.охолст--план{background:#151A22;
background-image:radial-gradient(ellipse at 50% 0%,#222B38 0%,#12161D 100%);
cursor:grab;overflow:hidden}
.охолст--план.тащим{cursor:grabbing}
.оплан{display:block;width:100%;height:100%;max-height:none;touch-action:none;flex:1 1 auto}
.окорпус{fill:rgba(255,255,255,.085);stroke:rgba(200,215,235,.45);stroke-width:1.1}
.окорпус-гр{transition:var(--t)}
.окорпус-гр:hover .окорпус{fill:rgba(255,255,255,.16);stroke:rgba(225,236,250,.85)}
/* 23.09.2026, Раиль: «подписи цехов белыми буквами, иначе плохо видно».
Обводка под буквами держит их читаемыми поверх трасс. */
.окорпус__имя{fill:#FFFFFF;font-size:10px;font-weight:600;pointer-events:none;
font-family:var(--f);paint-order:stroke;stroke:rgba(10,14,20,.85);stroke-width:2.8px;
stroke-linejoin:round}
.отрасса{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,
stroke-width .2s}
.отрасса__клик{fill:none;stroke:transparent;stroke-width:13;cursor:pointer}
.отрасса.гаснет{opacity:.13}
.отрасса.выбрана{stroke-width:4.6;filter:url(#освет)}
.огр:hover .отрасса{stroke-width:4;opacity:1}
.обегунок{opacity:1;pointer-events:none}
.огр .отрасса.гаснет ~ .обегунок,.огр-точка.гаснет{opacity:.08}
.огр-точка{transition:opacity .25s;cursor:pointer}
.оточка__фон{fill:rgba(20,27,37,.92);stroke:rgba(255,255,255,.22)}
.оточка__имя{fill:#FFFFFF;font-size:9px;font-family:var(--f);pointer-events:none;
font-variant-numeric:tabular-nums;paint-order:stroke;stroke:rgba(12,16,22,.92);
stroke-width:2.6px;stroke-linejoin:round}
.огр-точка.выбрана .оточка__имя{fill:#FFFFFF;font-weight:600}
.огр-точка.выбрана .оточка{r:5.4}
.оповодок{stroke:rgba(205,220,240,.5);stroke-width:.9;fill:none;stroke-dasharray:2 2}
.отп{cursor:pointer}
/* Подстанции — главное на плане: плашка светло-синяя, надписи белые и
ощутимо крупнее. 23.09.2026: чертёж показывается примерно в 0,65 масштаба,
и прежние 11,5 единиц давали на экране 7 пикселей — белые буквы «серели»
и читались как тёмные. */
.отп__корпус{fill:#4E7BB4;stroke:#CBDCF2;stroke-width:1.6;transition:var(--t)}
.отп:hover .отп__корпус{fill:#5E8DC8;stroke:#FFFFFF}
.отп.вкл .отп__корпус{fill:#6D9FDB;stroke:#FFFFFF;stroke-width:3}
.отп__имя{fill:#FFFFFF;font-size:15px;font-weight:700;font-family:var(--f);
pointer-events:none;letter-spacing:.01em;paint-order:stroke;
stroke:rgba(16,28,45,.55);stroke-width:2.4px;stroke-linejoin:round}
.отп__сч{fill:#F0F5FC;font-size:10.5px;font-family:var(--f);pointer-events:none;
font-variant-numeric:tabular-nums;paint-order:stroke;stroke:rgba(16,28,45,.5);
stroke-width:2px;stroke-linejoin:round}
.отп__пульс{fill:rgba(160,195,240,.26);animation:опульс 3.4s ease-out infinite}
/* Выбранная подстанция: кольцо вокруг плашки — видно, что она включена,
а не просто наведена мышью (23.09.2026: «я не понимаю, он выбран или нет»). */
.отп.вкл .отп__пульс{fill:rgba(140,185,250,.5);animation:none;r:34}
.отп.вкл{filter:drop-shadow(0 0 10px rgba(120,170,240,.55))}
@keyframes опульс{0%{r:18;opacity:.5}70%{r:42;opacity:0}100%{opacity:0}}
@keyframes опроявить{to{opacity:1}}
@keyframes обег{to{stroke-dashoffset:0}}
.оподсказка{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
font-size:10.5px;color:#93A0B0;background:rgba(14,18,25,.82);padding:5px 12px;
border-radius:20px;border:1px solid rgba(255,255,255,.07);pointer-events:none;
transition:var(--t)}
.оподсказка.скрыть{opacity:0;transform:translateX(-50%) translateY(4px)}
.омасштаб{position:absolute;right:10px;bottom:10px;display:flex;gap:3px}
.омасштаб button{width:27px;height:27px;border-radius:7px;border:1px solid rgba(255,255,255,.1);
background:rgba(20,25,33,.86);color:#C3CCD8;font-size:13px;line-height:1;cursor:pointer;
transition:var(--t)}
.омасштаб button:hover{background:rgba(38,47,60,.95);color:#fff}
.олегенда{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none;
padding:6px var(--s4);border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-3)}
.олегенда b{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
font-weight:600}
.олегенда span{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
padding:2px 7px;border-radius:20px;transition:var(--t)}
.олегенда span:hover{background:var(--sf-3)}
.олегенда span.вкл{background:var(--sf-3);color:var(--ink);font-weight:600}
.олегенда i{width:14px;height:3px;border-radius:2px;display:inline-block}
.олегенда em{font-style:normal;color:var(--ink-4)}
.отаблица-обёртка{overflow:auto;flex:1 1 auto;min-height:0}
/* 23.09.2026, Раиль: «при переключении ТП меняется ширина столбца „объект“,
всё скачет влево-вправо». Фиксируем раскладку: ширины заданы один раз и от
содержимого не зависят. */
.отаблица{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;
min-width:880px}
.отаблица col.о-объект{width:246px}
.отаблица col.о-тп{width:76px}
.отаблица col.о-длина{width:92px}
.отаблица col.о-сечение{width:92px}
.отаблица col.о-марка{width:170px}
.отаблица col.о-ток{width:78px}
.отаблица col.о-год{width:74px}
.отаблица col.о-кабелей{width:84px}
.отаблица col.о-глубина{width:96px}
.отаблица td.огл{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
/* 23.09.2026, Раиль: «в таблице вертикальных границ не хватает». */
.отаблица th{position:sticky;top:0;background:var(--sf-2);text-align:left;
padding:8px var(--s3);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-4);border-bottom:1px solid var(--line-2);
border-right:1px solid var(--line);cursor:pointer;white-space:nowrap;z-index:1}
.отаблица th:last-child,.отаблица td:last-child{border-right:0}
.отаблица th:hover{color:var(--ink-2)}
.отаблица th.по{color:var(--ac)}
.отаблица th.по::after{content:' ↓'}
.отаблица th.по.вверх::after{content:' ↑'}
.отаблица td{padding:7px var(--s3);border-bottom:1px solid var(--line);
border-right:1px solid var(--line);color:var(--ink-2);
white-space:nowrap;font-variant-numeric:tabular-nums}
.отаблица td.огл{font-weight:600;color:var(--ink)}
.отаблица tbody tr{cursor:pointer;transition:background var(--t)}
.отаблица tbody tr:hover{background:var(--sf-2)}
.отаблица tbody tr.вкл{background:var(--sf-3)}
.огоды{display:flex;flex-direction:column;gap:9px;padding:var(--s4)}
.огод{display:grid;grid-template-columns:58px minmax(0,1fr);gap:11px;align-items:center}
.огод__м{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.огод__п{display:flex;gap:3px;flex-wrap:wrap}
.окирпич{height:19px;border-radius:3px;cursor:pointer;transition:var(--t);opacity:.88}
.окирпич:hover{opacity:1;transform:translateY(-2px)}
.окирпич.гаснет{opacity:.16}
/* Выбранная полоса загорается: видно, на что нажали (23.09.2026). */
.окирпич.выбран{opacity:1;transform:translateY(-2px);
box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--ac),0 6px 14px -6px rgba(0,0,0,.4)}
/* 23.09.2026, скрин Раиля: кнопки внизу карточки были срезаны наполовину.
Карточка — элемент колонки с прокруткой, и по умолчанию flex её сжимал,
а «overflow:hidden» обрезал то, что не поместилось. Не сжимаем. */
.окарточка,.оисходник{background:var(--sf);border:1px solid var(--line);
border-radius:var(--r3);box-shadow:var(--sh-2);overflow:hidden;flex:none}
.окарточка__ш{padding:var(--s4);border-bottom:1px solid var(--line);
background:var(--sf-grad)}
.окарточка__над{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-4);font-weight:600}
.окарточка__имя{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
margin-top:3px;line-height:1.15;overflow-wrap:anywhere}
.окарточка__путь{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11.5px;
color:var(--ink-3);flex-wrap:wrap}
.окарточка__путь b{color:var(--ink-2)}
.окарточка__путь i{width:16px;height:1px;background:var(--line-3);display:inline-block}
.ополя{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.ополе{background:var(--sf);padding:10px var(--s4) 11px;min-width:0}
.ополе--ш{grid-column:1/-1}
.ополе__и{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
margin-bottom:4px}
.ополе__з{font-size:17px;font-weight:600;color:var(--ink);line-height:1.2;
font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ополе__з small{font-size:11px;font-weight:500;color:var(--ink-3);margin-left:5px;
white-space:nowrap}
.ополоска{height:3px;border-radius:2px;background:var(--sf-3);margin-top:7px;overflow:hidden}
.ополоска i{display:block;height:100%;border-radius:2px;
animation:оналиться .8s cubic-bezier(.22,1,.36,1)}
@keyframes оналиться{from{width:0 !important}}
.осечения{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink-2)}
.осечения span{display:inline-flex;align-items:center;gap:5px}
.осечения i{width:12px;height:3px;border-radius:2px}
.осписок{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow-y:auto}
.острока{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;
gap:7px;align-items:center;border:0;background:none;font:inherit;text-align:left;
padding:6px 7px;border-radius:var(--r1);cursor:pointer;transition:var(--t);overflow:hidden}
.острока:hover{background:var(--sf-2)}
.острока i{width:10px;height:3px;border-radius:2px}
.острока b{font-size:11.5px;font-weight:600;color:var(--ink);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.острока span{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.острока em{font-style:normal;font-size:10px;color:var(--ink-4)}
.острока u{position:absolute;left:0;bottom:0;height:2px;background:var(--ac-soft);opacity:.35;
text-decoration:none}
/* Кнопки карточки не срезаются: раньше правая колонка прокручивалась, и
нижняя кнопка уезжала под край (23.09.2026, скрин Раиля). */
.окарточка__н{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px var(--s4);
border-top:1px solid var(--line);background:var(--sf-2);flex:none}
.окарточка__н .к{flex:0 1 auto;max-width:100%;white-space:normal;text-align:center;
line-height:1.25}
.опометка{font-size:10px;color:var(--ink-4);line-height:1.35;flex:1 1 140px}
.опусто{padding:26px var(--s4);text-align:center;font-size:11.5px;color:var(--ink-3);
line-height:1.5}
.опусто b{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:5px}
.оисходник__ш{display:flex;align-items:center;gap:8px;padding:9px var(--s4);
border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-4);font-weight:600}
.оисходник__б{padding:var(--s3);font-size:11.5px;color:var(--ink-3);line-height:1.5}
.оисходник__б img{display:block;width:100%;height:auto;border-radius:var(--r1);
border:1px solid var(--line);cursor:zoom-in;background:#fff;transition:var(--t)}
.оисходник__б img:hover{border-color:var(--ac)}
.олупа{position:fixed;inset:0;z-index:90;background:rgba(10,13,18,.9);display:flex;
align-items:center;justify-content:center;padding:26px;cursor:zoom-out;
animation:опроявить .2s forwards;opacity:0}
.олупа img{max-width:100%;max-height:100%;border-radius:var(--r2);background:#fff;
box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.олупа__з{position:absolute;top:16px;right:18px;border:1px solid rgba(255,255,255,.16);
background:rgba(26,32,41,.9);color:#E6EBF1;font:inherit;font-size:12px;padding:7px 15px;
border-radius:20px;cursor:pointer}
.олупа__з:hover{background:rgba(44,53,66,.95)}
@media (max-width:1400px){
.оэкран{grid-template-columns:minmax(0,1fr) 286px}
}
@media (max-width:1180px){
.оэкран{grid-template-columns:minmax(0,1fr) 262px}
.оисточник{flex-basis:100%}
}
@media (max-width:900px){
.оэкран{grid-template-columns:minmax(0,1fr)}
.оэкран__карточка{position:static}
.ополя{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.ополя{grid-template-columns:1fr}
.овиды{margin-left:0;width:100%}
.овид{flex:1 1 auto;text-align:center}
}
/* ── Анкета подразделения ──────────────────────────────────────────────────
23.09.2026. Один вопрос на экране: карточка по центру, ход заполнения
сверху, кнопки внизу. Обложка объясняет, что будет дальше, — человек
должен понимать объём до того, как начнёт. */
.аэкран{display:flex;flex-direction:column;gap:var(--s4)}
.авкладки{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.авкл{border:1px solid var(--line);background:var(--sf);font:inherit;font-size:12.5px;
color:var(--ink-2);padding:7px 15px;border-radius:20px;cursor:pointer;transition:var(--t);
display:inline-flex;align-items:center;gap:7px}
.авкл:hover{border-color:var(--line-3)}
.авкл.вкл{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:600}
.авкл.вкл .бир{background:rgba(255,255,255,.22);color:var(--ac-ink)}
.азамок{margin-left:auto}
.асостояние{font-size:10.5px;color:var(--ink-4);flex:0 1 auto;max-width:280px;line-height:1.35}
.аобложка{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:var(--s4);align-items:start}
.аобложка__л,.аобложка__п{min-width:0}
.аобложка__л{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
padding:26px 28px 22px;box-shadow:var(--sh-2);position:relative;overflow:hidden}
.аобложка__л::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--ac) 0%,var(--brass) 55%,var(--ok) 100%)}
.аобложка__над{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);
font-weight:600}
.аобложка__имя{font-size:27px;font-weight:600;letter-spacing:-.025em;color:var(--ink);
margin:6px 0 9px;line-height:1.1}
.аобложка__о{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:56ch;margin:0}
.асостав{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4);
margin:22px 0 4px}
.асостав__б{border:1px solid var(--line);border-radius:var(--r2);padding:13px 15px 11px;
background:var(--sf-2)}
.асостав__и{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
font-weight:600;margin-bottom:9px}
.асостав__сп{list-style:none;margin:0;padding:0}
.асостав__сп li{display:flex;align-items:flex-start;gap:8px;
font-size:12.5px;color:var(--ink-2);line-height:1.4;padding:5px 0}
.асостав__н{flex:0 0 18px;height:18px;border-radius:50%;background:var(--sf-3);
color:var(--ink-4);font-size:10px;font-weight:600;font-style:normal;
display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.асостав__сп li.есть .асостав__н{background:var(--ok);color:#fff}
.асостав__сп li span{flex:1 1 auto;min-width:0}
.аптичка{font-style:normal;color:var(--ok);font-size:12px}
.аобложка__низ{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
padding-top:16px;border-top:1px solid var(--line)}
.к--б{font-size:14px;padding:11px 24px}
.амелко{font-size:11.5px;color:var(--ink-4)}
.амелко--ждём{color:var(--wait)}
.апамятка{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
padding:18px 20px;box-shadow:var(--sh-1)}
.апамятка b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:11px}
.апамятка ol{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:9px}
.апамятка li{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.авопрос{display:flex;flex-direction:column;gap:var(--s4);max-width:940px;width:100%;
margin:0 auto}
.аход{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
padding:13px var(--s5) 14px;box-shadow:var(--sh-1)}
.аход__ж{height:3px;border-radius:2px;background:var(--sf-3);overflow:hidden;margin-bottom:11px}
.аход__ж i{display:block;height:100%;background:var(--ac);border-radius:2px;
transition:width .35s cubic-bezier(.22,1,.36,1)}
.аход__т{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.аход__т b{font-size:12.5px;color:var(--ink);font-weight:600}
.аход__т span{font-size:11.5px;color:var(--ink-4)}
.аход__ш{display:flex;gap:5px;flex-wrap:wrap}
.ашаг{width:29px;height:29px;border-radius:50%;border:1px solid var(--line-2);
background:var(--sf);color:var(--ink-3);font:inherit;font-size:12px;cursor:pointer;
transition:var(--t)}
.ашаг:hover{border-color:var(--ac);color:var(--ink)}
.ашаг.есть{background:var(--sf-3);color:var(--ink-2);border-color:var(--line-2)}
.ашаг.вкл{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:600}
.акарта{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:var(--sh-2);overflow:hidden;animation:апоявиться .3s cubic-bezier(.22,1,.36,1)}
@keyframes апоявиться{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.акарта__ш{display:flex;gap:15px;padding:20px var(--s5) 17px;border-bottom:1px solid var(--line);
background:var(--sf-grad)}
.акарта__знак{flex:0 0 38px;height:38px;border-radius:50%;background:var(--ac);
color:var(--ac-ink);font-size:17px;font-weight:600;display:flex;align-items:center;
justify-content:center}
.акарта__имя{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
line-height:1.2}
.акарта__т{margin:5px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.акарта__б{padding:18px var(--s5) 20px;display:flex;flex-direction:column;gap:16px}
.апол textarea{min-height:170px;line-height:1.55;font-size:14px}
.аориентир{background:var(--sf-2);border:1px solid var(--line);border-left:3px solid var(--brass);
border-radius:var(--r1);padding:11px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.аориентир b{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:4px}
.афайлы__ш{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:9px;flex-wrap:wrap}
.афайлы__сп{display:flex;flex-wrap:wrap;gap:7px}
.афайл{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
background:var(--sf-2);border-radius:var(--r1);padding:7px 12px;font:inherit;cursor:pointer;
transition:var(--t);max-width:100%}
.афайл:hover{border-color:var(--ac);transform:translateY(-1px)}
.афайл b{font-size:12px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;max-width:240px}
.афайл span{font-size:10.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.афайлы__нет{font-size:11.5px;color:var(--ink-4);line-height:1.45;background:var(--sf-2);
border:1px dashed var(--line-2);border-radius:var(--r1);padding:11px 13px}
.акарта__н{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px var(--s5);
border-top:1px solid var(--line);background:var(--sf-2)}
.акарта__н .к--г{margin-left:auto}
.асохранено{font-size:11px;color:var(--ok);transition:var(--t)}
.асохранено--ждём{color:var(--ink-4)}
.асохранено--плохо{color:var(--bad)}
.апроверка{display:flex;flex-direction:column;gap:var(--s4);max-width:940px;width:100%;
margin:0 auto}
.апроверка__ш h3{margin:0 0 5px;font-size:19px;font-weight:600;letter-spacing:-.02em;
color:var(--ink)}
.апроверка__ш p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.ашапка-полей{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.асводка{display:flex;flex-direction:column;gap:8px}
.аитог{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:13px;align-items:start;
text-align:left;background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);
padding:13px 15px;font:inherit;cursor:pointer;transition:var(--t);width:100%}
.аитог:hover{border-color:var(--ac);box-shadow:var(--sh-1)}
.аитог--чтение{cursor:default}
.аитог--чтение:hover{border-color:var(--line);box-shadow:none}
.аитог--пусто{border-style:dashed}
.аитог__н{width:26px;height:26px;border-radius:50%;background:var(--sf-3);color:var(--ink-3);
font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.аитог__т{min-width:0}
.аитог__т b{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px}
.аитог__т p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5;
overflow-wrap:anywhere}
.аитог__полный{white-space:pre-wrap;color:var(--ink-2) !important}
.аитог__ф{display:inline-block;margin-top:6px;font-size:10.5px;color:var(--ink-4)}
.аитог__п{font-size:11px;color:var(--ac);white-space:nowrap}
.апроверка__н{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding-top:4px}
.аготово{display:flex;align-items:center;gap:15px;background:var(--sf);border:1px solid var(--line);
border-left:3px solid var(--ok);border-radius:var(--r3);padding:17px var(--s5);
box-shadow:var(--sh-1)}
.аготово__знак{flex:0 0 38px;height:38px;border-radius:50%;background:var(--ok);color:#fff;
font-size:19px;display:flex;align-items:center;justify-content:center}
.аготово b{display:block;font-size:15px;color:var(--ink)}
.аготово span{font-size:12px;color:var(--ink-3)}
.асчёт{background:var(--sf-2);border:1px solid var(--line);border-radius:var(--r2);
padding:11px 13px;margin-bottom:9px}
.асчёт b{display:block;font-size:21px;font-weight:600;color:var(--ink);line-height:1}
.асчёт span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:3px;line-height:1.35}
.эсл--тускло{opacity:.62}
/* ── Подпапки (23.09.2026) ─────────────────────────────────────────────
Вложенность показываем сдвигом строки и уголком, а не рамками: столбец
и так узкий, а рамки съели бы место у названия. */
.эсл--вложен{padding-left:calc(12px + var(--вложение,1) * 16px)}
.эсл__ветка{width:14px;flex:none;color:var(--mut);font-size:13px;line-height:1;text-align:center}
.экрошка{border:none;background:none;padding:0;font:inherit;color:var(--mut);
cursor:pointer;text-decoration:none}
.экрошка:hover{color:var(--ac);text-decoration:underline}
.экрошка__з{color:var(--mut);margin:0 6px;font-size:13px}
.эподпапки{display:flex;flex-wrap:wrap;gap:8px}
.эподпапка{display:flex;align-items:center;gap:9px;min-width:190px;flex:1 1 190px;
max-width:280px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;
background:var(--bg-2);font:inherit;text-align:left;cursor:pointer;
transition:border-color .15s ease,background .15s ease}
.эподпапка:hover{border-color:var(--ac);background:var(--bg-1)}
.эподпапка__з{flex:none;width:20px;height:20px;color:var(--ac)}
.эподпапка__з svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.эподпапка__т{display:flex;flex-direction:column;gap:2px;min-width:0}
.эподпапка__т b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.эподпапка__т em{font-style:normal;font-size:12px;color:var(--mut)}
body.м .эподпапка{flex:1 1 100%;max-width:none}
/* Путь к папке на телефоне: строка над сводкой, шаги нажимаются. */
.ккрошка{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 2px 8px;
font-size:12.5px;color:var(--mut)}
.ккрошка button{border:none;background:none;padding:0;font:inherit;color:var(--ac);cursor:pointer}
.ккрошка b{color:var(--ink-1);font-size:12.5px}
/* ── Ход проекта: блоки работы (23.09.2026) ────────────────────────────
Карточка на всю ширину: внутри длинный текст, который читают, а не
просматривают. Номер слева — чтобы на блок можно было сослаться словами
«смотри блок три». */
.лблок{border:1px solid var(--line-2);border-radius:12px;background:var(--bg-1);
padding:14px 16px;margin-bottom:10px}
.лблок:last-child{margin-bottom:0}
.лблок__ш{display:flex;align-items:flex-start;gap:12px}
.лблок__н{flex:none;width:28px;height:28px;border-radius:8px;background:var(--ac);
color:#FFFFFF;font-size:14px;font-weight:600;display:flex;align-items:center;
justify-content:center}
.лблок__з{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.лблок__з b{font-size:15px;line-height:1.3}
.лблок__з span{font-size:12.5px;color:var(--mut)}
.лблок__кн{flex:none;display:flex;gap:6px;align-items:center}
.лблок__т{margin:10px 0 0;font-size:14px;line-height:1.55;white-space:pre-wrap;
word-break:break-word}
.лблок__т--пусто{color:var(--mut);font-style:italic}
/* Свёрнутый блок: видна только шапка — номер, название, дата и счёт файлов. */
.лблок__н{border:none;font:inherit;cursor:pointer}
.лблок__з{border:none;background:none;padding:0;font:inherit;text-align:left;cursor:pointer}
.лблок__з:hover b{color:var(--ac)}
.лблок--свёрнут .лблок__тело{display:none}
.лблок--свёрнут{padding-bottom:12px}
.лблок__п{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-1);
display:flex;flex-direction:column;gap:2px}
.лблок__п span{font-size:12px;color:var(--mut)}
.лблок__п b{font-size:13.5px;font-weight:500;line-height:1.45;white-space:pre-wrap}
.лблок .эфайлы{margin-top:11px}
@media (max-width:860px){
.лблок__ш{flex-wrap:wrap}
.лблок__кн{width:100%;justify-content:flex-start;margin-top:8px}
}
/* Строка «ещё не открывал» — не кнопка: нажимать не на что, анкеты нет. */
.эсл--ровно{cursor:default;background:transparent}
.эсл--ровно:hover{background:transparent}
/* ── Общие папки (23.09.2026) ──────────────────────────────────────────
Список коллег с галочками: выбирают, с кем папка общая. */
.эдоступ{max-height:260px;overflow:auto;border:1px solid var(--line-2);
border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px}
.эдоступ__п{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
cursor:pointer}
.эдоступ__п:hover{background:var(--bg-2)}
.эдоступ__п input{width:16px;height:16px;flex:none;accent-color:var(--ac)}
.эдоступ__п span{display:flex;flex-direction:column;gap:1px;min-width:0}
.эдоступ__п b{font-size:13.5px;font-weight:500}
.эдоступ__п em{font-style:normal;font-size:12px;color:var(--mut)}
.эобщая{display:inline-flex;width:13px;height:13px;margin-left:6px;color:var(--ac);
vertical-align:middle}
.эобщая svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}
/* ── Дерево папок со сворачиванием (23.09.2026) ────────────────────────
Раиль: «нажал — треугольник вниз, открылись подпапки, нажал — свернул».
Треугольник вынесен из строки папки отдельной кнопкой: иначе нажатие на
него открывало бы саму папку. */
/* Дерево папок: узел — папка со своей веткой, ветка — ящик перетаскивания
(28.09.2026). Поток тот же, что был у плоского столбца: колонка с шагом
2 px, иначе строки склеиваются между собой. */
.эветвь,.эузел{display:flex;flex-direction:column;gap:2px;min-width:0}
.эстрока{display:flex;align-items:stretch;gap:0}
.эстрока .эсл{flex:1 1 auto;min-width:0}
.эветка{flex:none;width:22px;border:none;background:none;padding:0;cursor:pointer;
color:var(--mut);font-size:11px;line-height:1;display:flex;align-items:center;
justify-content:center;transition:transform .15s ease,color .15s ease}
.эветка--вниз{transform:rotate(90deg);color:var(--ac)}
.эветка:hover{color:var(--ac)}
.эветка--нет{width:22px;cursor:default}
/* Номер папки — заметный: по нему называют папку вслух и ищут глазами. */
.эсл__н--папка{font-size:13.5px;font-weight:700;color:var(--ac);min-width:20px}
@media (max-width:1180px){
.аобложка{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
.аобложка__л{padding:20px 18px 18px}
.аобложка__имя{font-size:22px}
.акарта__ш,.акарта__б,.акарта__н{padding-left:var(--s4);padding-right:var(--s4)}
.акарта__н .к--г{margin-left:0;width:100%}
.азамок{margin-left:0;width:100%}
.аитог{grid-template-columns:26px minmax(0,1fr)}
.аитог__п{display:none}
}
/* Свои вопросы в анкете: шесть заданных — минимум, дальше человек пишет сам. */
.асвой{border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px 13px;
background:var(--sf-2);display:flex;flex-direction:column;gap:9px}
.асвой__ш{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.асвой__н{flex:0 0 26px;height:26px;border-radius:50%;background:var(--sf-3);color:var(--ink-3);
font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.асвой__в{flex:1 1 220px;min-width:0;font:inherit;font-size:14.5px;font-weight:600;
color:var(--ink);background:var(--sf);border:1px solid var(--line);border-radius:var(--r1);
padding:9px 12px;height:40px}
/* В шапке карточки поле вопроса не должно растягиваться на всю её высоту.
23.09.2026: «flex:1 1 220px» внутри колоночного label задаёт не ширину,
а ВЫСОТУ — поле разъезжалось на 220 пикселей. Здесь флекс снимаем. */
.акарта__ш .апол{align-self:center}
.акарта__ш .асвой__в{flex:none;height:42px;width:100%}
.асвой__в:focus,.асвой__о:focus{outline:none;border-color:var(--ac)}
.асвой__о{width:100%;font:inherit;font-size:13.5px;line-height:1.55;color:var(--ink);
background:var(--sf);border:1px solid var(--line);border-radius:var(--r1);padding:9px 11px;
resize:vertical;min-height:84px}
/* Пояснения простым языком: что показывает вид и что такое подстанция.
23.09.2026, Раиль: «Павлов же не знает, пиши так, чтобы и он понимал». */
.овид-пояснение{padding:6px var(--s4) 7px;border-bottom:1px solid var(--line);
font-size:11px;line-height:1.4;color:var(--ink-3);background:var(--sf);flex:none}
.опояснение{padding:11px var(--s4) 12px;border-bottom:1px solid var(--line);
background:var(--sf-2);font-size:12px;line-height:1.5;color:var(--ink-2)}
.опояснение b{color:var(--ink)}
.опояснение--вид{border-bottom:0;border-radius:var(--r2);margin:var(--s4) var(--s4) 0}
/* Плавное увеличение: рывок был виден, потому что масштаб менялся скачком.
На перетаскивании плавность выключаем — иначе картинка «догоняет» руку. */
#осцена{transition:transform .16s cubic-bezier(.22,1,.36,1)}
.охолст--план.тащим #осцена{transition:none}
/* Реестр анкеты: раздел открывается списком, а не сразу первым вопросом.
23.09.2026, Раиль: «нажимаю „Анкета подразделения“ — пусть будет табличка». */
.ареестр{display:flex;flex-direction:column;gap:var(--s3);max-width:940px;width:100%;
margin:0 auto}
.ареестр__ш h3{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.02em;
color:var(--ink)}
.ареестр__ш p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.атабл{width:100%;border-collapse:collapse;background:var(--sf);border:1px solid var(--line);
border-radius:var(--r3);overflow:hidden;font-size:13px}
.атабл th{background:var(--sf-2);text-align:left;font-size:10px;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-4);font-weight:600;padding:9px var(--s4);
border-bottom:1px solid var(--line-2);border-right:1px solid var(--line)}
.атабл td{padding:12px var(--s4);border-bottom:1px solid var(--line);
border-right:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.атабл th:last-child,.атабл td:last-child{border-right:0}
.атабл tr:last-child td{border-bottom:0}
.атабл td b{color:var(--ink);font-size:13.5px}
.атабл td.ап{text-align:right;white-space:nowrap}
.асост{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.асост::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line-3)}
.асост.идёт{color:var(--wait)}
.асост.идёт::before{background:var(--wait)}
.асост.готово{color:var(--ok)}
.асост.готово::before{background:var(--ok)}
.анеобяз{font-style:normal;font-size:10px;color:var(--ink-4);margin-left:6px;
text-transform:none;letter-spacing:0}
.ашаг--свой{border-style:dashed}
.ашаг--свой.есть{border-style:solid}
.ашаг--плюс{color:var(--ac);font-weight:700}
/* Сортируемая шапка таблицы документов. 23.09.2026, просьба Власенко:
«сортировка по алфавиту к файлам не действует» — раньше по алфавиту шли
только папки. */
.тб--сорт th[data-dsort]{cursor:pointer;user-select:none;transition:color var(--t)}
.тб--сорт th[data-dsort]:hover{color:var(--ink-2)}
.тб--сорт th.по{color:var(--ac)}
.тб--сорт th.по::after{content:' ↓'}
.тб--сорт th.по.вверх::after{content:' ↑'}
/* Переключатель темы в правом верхнем углу: внизу сайдбара он отнимал место
у фамилии, и «Тухфатуллов Р. Р.» не помещался (23.09.2026). */
.ктема{width:34px;height:34px;flex:none;display:grid;place-items:center;
border:1px solid var(--line);background:var(--sf);border-radius:var(--r2);
color:var(--ink-3);cursor:pointer;transition:var(--t)}
.ктема svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.ктема:hover{border-color:var(--line-3);color:var(--ink);transform:translateY(-1px)}
/* Освободившееся место отдаём фамилии. */
.низ b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* Полоска между семьями разделов в мобильном меню — как в компьютерном. */
.мящик__черта{height:1px;background:var(--line);margin:8px 2px}
/* Двойное касание не должно увеличивать экран (23.09.2026). */
body.м,.мтело,.мящик{touch-action:manipulation}
/* Просмотр PDF на телефоне: лист вписан по экрану, масштаб — кнопками.
23.09.2026: системный просмотрщик внутри окна уменьшать не позволял. */
.мпдф{display:flex;flex-direction:column;height:100%;min-height:0}
.мпдф__кн{display:flex;gap:6px;justify-content:center;padding:6px 0 8px;flex:none}
.мпдф__кн .мпросм__л{width:auto;padding:0 12px;height:30px;font-size:12.5px}
.мпдф__окно{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.мпдф__окно iframe{display:block;width:100%;height:100%;min-height:60vh;border:0;
background:#fff}
/* Строка поиска в шапке карточки (люди в админке). */
/* 25.09.2026, Раиль: «сделай как строку поиска обычную, не нужно её вверх
растягивать, чтобы по ширине была как остальные плашки». В колонке поле
растягивалось по высоте, потому что колонка — flex по вертикали, а высота
не была жёсткой. */
.апоиск{flex:0 0 auto;width:100%;min-width:0;height:32px;box-sizing:border-box;
padding:0 11px;font:inherit;font-size:12.5px;color:var(--ink);background:var(--sf);
border:1px solid var(--line-2);border-radius:var(--r2);margin:2px 0 7px}
.апоиск:focus{outline:none;border-color:var(--ac)}
/* Реестр анкеты: две отдельные карточки, у каждой свой смысл и подпись.
23.09.2026, Раиль: «раздели их, чтобы визуально были понятными». */
.акарточки{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
gap:var(--s4)}
.акарточка{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
padding:var(--s4) var(--s4) 13px;box-shadow:var(--sh-2);display:flex;
flex-direction:column;gap:11px}
.акарточка__ш{display:flex;gap:12px;align-items:flex-start}
.акарточка__ш h3{margin:0 0 4px;font-size:16.5px;font-weight:600;letter-spacing:-.02em;
color:var(--ink)}
.акарточка__знак{flex:0 0 38px;height:38px;border-radius:var(--r2);display:grid;
place-items:center;background:var(--sf-3);color:var(--ac)}
.акарточка__знак svg{width:20px;height:20px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.акарточка__знак--идея{color:var(--brass)}
.акарточка__цель{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.акарточка__цель b{color:var(--ink)}
.акарточка__н{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;
padding-top:10px;border-top:1px solid var(--line)}
.акарточка__н .к{margin-left:auto}
/* Подсказка под плитками не должна прилипать к кнопке «Приложить». */
.афайлы .афайлы__нет{margin-top:10px}
/* Стрелка-кнопка: у письма с текстом она ведёт к документу. */
.увед__шеврон--кн{background:transparent;border:0;cursor:pointer;padding:0}
.увед__шеврон--кн:active{color:var(--ac)}
/* Папку и подпапку тянут за всю плашку: курсор показывает это на всей
строке, отдельной ручки нет (29.09.2026). */
.эузел[data-drag-all] .эсл { cursor: grab; }
.эузел[data-drag-all] .эсл:active { cursor: grabbing; }
.эузел[data-drag-all] .эветка { cursor: pointer; }
/* ── Загрузка папки целиком ───────────────────────────────────────────────
01.10.2026, просьба Куштуева. Кнопку «Выбрать папку целиком» держим ВНЕ
блока .бросить--док: правило `.бросить--док span` жёстко красит любой span
внутри в серый и ставит display:block — новая надпись молча теряла бы цвет
и ломала ряд. */
.эбросок__ряд{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
margin-top:var(--s2)}
.эбросок__п{font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.45}
.эпредпоказ{display:grid;gap:var(--s3)}
.эпредпоказ__итог{margin-bottom:2px}
.эпапки{margin-top:var(--s2)}
.эпапки__имя{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:420px}
.эпапки__ч{text-align:right;color:var(--ink-2);white-space:nowrap}
.эпапки__з{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
margin-bottom:var(--s1)}
.эпапки__п{padding:6px 2px 0;font-size:12px;color:var(--ink-3)}
/* Полоса загрузки папки: две строки и кнопка «Остановить» — на тысяче файлов
человек должен иметь право передумать, не закрывая вкладку. */
.эгрузим--папка{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);
align-items:center;min-width:360px;max-width:min(620px,94vw)}
.эгрузим--папка b{grid-column:1}
.эгрузим--папка .к{grid-column:2;grid-row:1 / span 2;align-self:center}
.эгрузим--папка .эгрузим__ж{grid-column:1;margin-top:0}
.эгрузим__ш{display:none}
@media (max-width:760px){
.эпапки__имя{max-width:200px}
.эбросок__ряд{gap:var(--s2)}
.эгрузим--папка{min-width:0;width:92vw}
}
/* Список непринятого: причина стоит ВПЛОТНУЮ к имени, а не улетает к правому
краю через весь лист — иначе глазу приходится возвращаться. */
.эотказы__и{width:1%;white-space:nowrap;max-width:430px;overflow:hidden;
text-overflow:ellipsis;padding-right:var(--s4);color:var(--ink)}
.эотказы__п{color:var(--ink-3);text-align:left}
@media (max-width:760px){ .эотказы__и{max-width:190px} }
/* ═══ Отчёты по проектам ══════════════════════════════════════════════════
02.10.2026. Еженедельный отчёт главного инженера переезжает из Word на
сайт. Вёрстка перенесена из согласованного макета otchet-01-10-2026.html
один в один по конструкции; цвета макета заменены на переменные app.css,
поэтому раздел живёт в обеих темах.
Префикс «оп-» (отчёты по проектам). Проверен грепом по всему фронту:
столкновений нет. Имена .срок, .пл, .тб, .к2, .лист, .полоса, .шапка уже
заняты другими разделами — брать их было нельзя.
КОНТРАКТ РАЗМЕТКИ (на что рассчитаны стили):
.оп-лист лист отчёта
.оп-полоса градиентная полоса канона сверху
.оп-шапка шапка выпуска
.оп-шапка__к .оп-шапка h1 .оп-шапка__д
.оп-пл ряд плиток показателей
> div[.ждём|.тревога|.готов]
ПодписьЧислопояснение
.оп-блок > h2 + table.оп-тб таблица переносов недели
th/td .оп-тб__ч (число, вправо) .оп-тб__пр (№ проекта)
.оп-тб__сдвиг (охра) .оп-тб__мимо (бордо)
.оп-сноска подпись под таблицей
h2.оп-раздел > span заголовок раздела со счётчиком
article.оп-проект
.оп-проект__ш > div > .оп-проект__н + .оп-проект__т
+ span.оп-стадия[--раб|--пр|--стоп]
.оп-проект__о ответственный
.оп-гр группа внутри карточки
.оп-гр__з > текст + span.оп-гр__сч
ul.оп-спис > li (+ span.оп-штамп[--нет])
.оп-подтв строка «подтверждено документом»
.оп-дело
.оп-дело__ш > .оп-дело__т + span.оп-пм[--ровно|--сдвиг|--мимо|--закрыт]
.оп-срок[--ровно|--сдвиг|--просрочен|--закрыт]
.оп-срок__поле
.оп-срок__жёлоб
.оп-срок__обещано style="left:0;width:N%"
.оп-срок__хвост style="left:N%;width:N%"
.оп-срок__мимо style="left:N%;width:N%"
.оп-срок__риска style="left:N%" (по одной на перенос)
.оп-срок__было style="left:N%" > дата
.оп-срок__днесь[--тихо] style="left:N%" > сегодня
.оп-срок__стало style="left:N%" > дата
.оп-цепь 28.09.2026 → 30.09.2026 → 06.10.2026
.оп-безсрока пунктирная плашка «срок не задан»
ЦВЕТ. Своих значений нет ни одного, всё из переменных темы:
жёлоб --sf-3 пустая часть календарной оси
обещано --ink-2 то, что было обещано сразу (слово держали)
хвост --wait штриховка охрой: кусок, который переехали
мимо --bad приглушённый бордо: срок уже прошёл
риска --wait засечка в точке прежнего срока
сегодня --ac спокойный синий, им же подписано
точка срока --ink-2 / --wait / --bad / --ok по состоянию дела
------------------------------------------------------------------------ */
.оп-лист{
background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:var(--sh-1),var(--hair);overflow:hidden;max-width:1080px;
}
.оп-полоса{height:4px;background:linear-gradient(90deg,
var(--ac-3) 0%, color-mix(in srgb,var(--ac) 55%,var(--ok)) 42%, var(--ok) 100%)}
.оп-шапка{padding:var(--s5) var(--s5) var(--s4)}
.оп-шапка__к{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3)}
.оп-шапка h1{font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.2;
margin:7px 0 4px;color:var(--ink)}
.оп-шапка__д{font-size:13px;color:var(--ink-2)}
.оп-шапка__сост{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
/* Плитки показателей. Разметка та же, что у общей плашки .пл, поэтому их
можно ставить вместе: ряд перестраивается по содержимому, а не по порогу,
и на 390 px садится в сетку 2×2 (ниже, в «screen and»). */
.оп-пл{display:grid;gap:var(--s2);padding:0 var(--s5) var(--s3);
grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.оп-пл > div{min-width:0;border:1px solid var(--line);border-radius:var(--r2);
padding:9px 11px 10px;background:var(--sf-2)}
.оп-пл .lab{display:block;margin-bottom:5px;line-height:1.3;min-height:26px;
white-space:normal;overflow-wrap:anywhere;hyphens:auto}
.оп-пл b{display:block;font-size:23px;font-weight:700;letter-spacing:-.03em;
line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.оп-пл i{display:block;font-style:normal;font-size:11px;line-height:1.35;
color:var(--ink-3);margin-top:5px}
.оп-пл > div.ждём{border-color:color-mix(in srgb,var(--wait) 42%,var(--line))}
.оп-пл > div.ждём b{color:var(--wait)}
.оп-пл > div.тревога{border-color:color-mix(in srgb,var(--bad) 42%,var(--line))}
.оп-пл > div.тревога b{color:var(--bad)}
.оп-пл > div.готов{border-color:color-mix(in srgb,var(--ok) 38%,var(--line))}
.оп-пл > div.готов b{color:var(--ok)}
.оп-пл > div.тихо{border-color:var(--line-2)}
.оп-блок{padding:var(--s4) var(--s5) 0}
.оп-блок > h2{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
margin:0 0 var(--s3);padding-bottom:7px;border-bottom:1px solid var(--line)}
/* Заголовок раздела («Проекты приоритетные» и счётчик справа). */
.оп-раздел{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
margin:var(--s5) var(--s5) var(--s3);padding-bottom:7px;
border-bottom:1px solid var(--line);
font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.оп-раздел span{font-size:12px;font-weight:600;color:var(--ink-3);
font-variant-numeric:tabular-nums}
/* Таблица перенесённых сроков. Отдельная от общей .тб: у неё нет заливки
чётных строк и нет вертикальных линий — это выдержка, а не реестр. */
.оп-тб{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:auto}
.оп-тб th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-3);padding:0 10px 6px 0;
border-bottom:1px solid var(--line-2);white-space:nowrap}
.оп-тб td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);
vertical-align:top;color:var(--ink-2);overflow-wrap:anywhere}
.оп-тб tr:last-child td{border-bottom:0}
.оп-тб th:last-child,.оп-тб td:last-child{padding-right:0}
.оп-тб__ч{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.оп-тб__пр{white-space:nowrap;color:var(--ink-3);font-variant-numeric:tabular-nums}
.оп-тб b{color:var(--ink);font-weight:600}
.оп-тб s{color:var(--ink-3)}
.оп-тб__сдвиг{color:var(--wait);font-weight:700}
.оп-тб__мимо{color:var(--bad);font-weight:700}
.оп-сноска{margin:9px var(--s5) 0;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
/* ── Карточка проекта ──────────────────────────────────────────────────── */
.оп-проект{margin:0 var(--s5) var(--s4);padding-bottom:var(--s4);
border-bottom:1px solid var(--line);break-inside:avoid;page-break-inside:avoid}
.оп-проект:last-child{border-bottom:0}
.оп-проект__ш{display:flex;justify-content:space-between;align-items:flex-start;
gap:var(--s4);flex-wrap:wrap}
.оп-проект__н{font-size:12px;font-weight:600;color:var(--ink-3);margin-right:9px;
font-variant-numeric:tabular-nums}
.оп-проект__т{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
overflow-wrap:anywhere}
.оп-проект__о{font-size:11.5px;color:var(--ink-3);margin-top:3px}
/* Бейдж стадии: только обводка, заливок нет — правило продукта. */
.оп-стадия{flex:none;font-size:10px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;white-space:nowrap;line-height:19px;
border:1px solid var(--line-2);border-radius:20px;padding:0 10px;color:var(--ink-2)}
.оп-стадия--раб{border-color:color-mix(in srgb,var(--ok) 46%,var(--line-2));color:var(--ok)}
.оп-стадия--пр{border-color:color-mix(in srgb,var(--ac) 46%,var(--line-2));color:var(--ac)}
.оп-стадия--стоп{border-color:var(--line-2);color:var(--ink-3)}
.оп-гр{margin-top:var(--s4)}
.оп-гр__з{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:7px}
.оп-гр__сч{font-size:11px;letter-spacing:0;color:var(--ink-3);
font-variant-numeric:tabular-nums}
.оп-спис{margin:0;padding:0;list-style:none}
.оп-спис li{position:relative;padding:5px 0 5px 16px;font-size:12.5px;line-height:1.45;
color:var(--ink-2);border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.оп-спис li::before{content:'';position:absolute;left:2px;top:12px;width:4px;height:4px;
border-radius:50%;background:var(--ok)}
.оп-спис li.оп-спис--решение::before{background:var(--ac)}
.оп-спис li:last-child{border-bottom:0}
.оп-подтв{margin-top:8px;padding-left:16px;font-size:11.5px;line-height:1.45;
color:var(--ink-3)}
/* Штамп документа у факта. Пунктир — значит документа ещё нет. */
.оп-штамп{display:inline-block;margin-left:6px;padding:0 7px;line-height:17px;
font-size:10px;letter-spacing:.04em;white-space:nowrap;
border:1px solid var(--line-2);border-radius:5px;color:var(--ink-3)}
.оп-штамп--нет{border-style:dashed}
.оп-дело{padding:var(--s3) 0 5px;border-bottom:1px solid var(--line)}
.оп-дело:last-child{border-bottom:0}
.оп-дело__ш{display:flex;justify-content:space-between;align-items:baseline;
gap:var(--s4);flex-wrap:wrap}
.оп-дело__т{flex:1 1 320px;min-width:0;font-size:12.5px;line-height:1.45;color:var(--ink);
overflow-wrap:anywhere}
.оп-пм{flex:none;font-size:11px;font-weight:600;white-space:nowrap;
font-variant-numeric:tabular-nums}
.оп-пм--ровно{color:var(--ok)}
.оп-пм--сдвиг{color:var(--wait)}
.оп-пм--мимо{color:var(--bad)}
.оп-пм--закрыт{color:var(--ok)}
/* Строка цепочки дат под полосой: весь путь срока в одну строку. */
.оп-цепь{margin-top:18px;font-size:11px;line-height:1.4;color:var(--ink-3);
font-variant-numeric:tabular-nums}
/* Пунктирная плашка «срок не задан»: это не ошибка, а открытый вопрос. */
.оп-безсрока{display:inline-block;margin-top:8px;padding:2px 9px;
font-size:11px;line-height:1.4;color:var(--wait);
border:1px dashed color-mix(in srgb,var(--wait) 60%,var(--line-2));border-radius:5px}
/* ── Полоса срока ──────────────────────────────────────────────────────────
Календарная ось: расстояние равно числу дней. Слева сплошное «обещано»,
дальше штрихованный хвост — то, что переехали, потом точка нынешнего
срока. Засечка стоит в каждой точке прежнего срока. Все слои позиционирует
сборщик инлайновыми left/width в процентах.
------------------------------------------------------------------------ */
/* Поля по бокам: подпись крайней точки центрируется по ней и наполовину
уходила за край листа (замер на 390 px: лист резал 38 px). Самая широкая
подпись — «06.10.2026», 62 px, половина 31. Берём 34 с запасом. */
.оп-срок{margin-top:16px;padding:0 34px}
/* Три яруса: над полосой подпись «сегодня», сама полоса, под ней даты.
В макете «сегодня» стояло в одном ярусе с датой нынешнего срока, и на
просроченном деле (срок 30.09, сегодня 02.10 — два дня на оси в 35)
подписи наезжали друг на друга: «30.09.2026СЕГОДНЯ». Защита сборщика
(гасить подпись, если точки ближе 4 %) такой разрыв не ловит. Разводим
ярусами — наезд становится невозможен при любом расстоянии. */
.оп-срок__поле{position:relative;height:44px;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.оп-срок__жёлоб{position:absolute;left:0;right:0;top:18px;height:8px;border-radius:4px;
background:var(--sf-3)}
.оп-срок__обещано{position:absolute;top:18px;height:8px;border-radius:4px 0 0 4px;
background:var(--ink-2)}
.оп-срок__хвост{position:absolute;top:18px;height:8px;
background:repeating-linear-gradient(135deg,
color-mix(in srgb,var(--wait) 72%,transparent) 0 1.5px,
color-mix(in srgb,var(--wait) 15%,transparent) 1.5px 5px)}
.оп-срок__мимо{position:absolute;top:18px;height:8px;border-radius:0 4px 4px 0;
background:color-mix(in srgb,var(--bad) 84%,transparent)}
.оп-срок__риска{position:absolute;top:14px;width:1px;height:16px;
background:color-mix(in srgb,var(--wait) 62%,transparent)}
.оп-срок__было{position:absolute;top:35px;transform:translateX(-50%)}
.оп-срок__было s{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.оп-срок__днесь{position:absolute;top:15px;width:1px;height:14px;background:var(--ac)}
.оп-срок__днесь i{position:absolute;top:-14px;left:-29px;width:60px;text-align:center;
font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.05em;line-height:13px;
text-transform:uppercase;color:var(--ac)}
.оп-срок__днесь--тихо i{display:none}
.оп-срок__стало{position:absolute;top:18px;width:10px;height:8px;margin-left:-5px}
.оп-срок__стало::before{content:'';position:absolute;left:0;top:-1px;width:10px;height:10px;
border-radius:50%;background:var(--sf);border:2px solid var(--ink-2);box-sizing:border-box}
.оп-срок__стало b{position:absolute;top:13px;left:50%;transform:translateX(-50%);
font-size:10.5px;font-weight:700;white-space:nowrap;color:var(--ink-2);
font-variant-numeric:tabular-nums}
.оп-срок--сдвиг .оп-срок__стало::before{border-color:var(--wait)}
.оп-срок--просрочен .оп-срок__стало::before{border-color:var(--bad)}
/* Закрытое дело: цвет тот же «в срок», но полоса приглушена — история, а не
обязательство. Текст рядом остаётся в полном --ok, чтобы контраст не падал. */
.оп-срок--закрыт .оп-срок__стало::before{border-color:var(--ok)}
.оп-срок--закрыт .оп-срок__обещано{background:color-mix(in srgb,var(--ok) 55%,var(--sf-3))}
.оп-срок--закрыт .оп-срок__хвост{opacity:.5}
.оп-срок--закрыт .оп-срок__стало b{color:var(--ink-3)}
/* ── Узкие экраны ─────────────────────────────────────────────────────────
«screen and» обязательно: лист A4 при печати — это 703 px, без «screen»
он поймал бы телефонные правила и порвал вёрстку на бумаге.
------------------------------------------------------------------------ */
@media screen and (max-width:760px){
.оп-шапка{padding:var(--s4) var(--s4) var(--s3)}
.оп-шапка h1{font-size:20px}
.оп-пл{padding:0 var(--s4) var(--s3)}
.оп-блок{padding:var(--s3) var(--s4) 0}
.оп-раздел{margin:var(--s4) var(--s4) var(--s3)}
.оп-сноска{margin:9px var(--s4) 0}
.оп-проект{margin:0 var(--s4) var(--s3)}
.оп-проект__т{font-size:15px}
.оп-дело__т{flex:1 1 100%}
.оп-пм{margin-top:2px}
/* Таблица переносов в шесть колонок на телефоне не живёт. Разворачиваем
строку в три яруса: номер проекта и счёт переноса, текст дела, даты.
Прокрутки вбок при этом не появляется. */
.оп-тб:has(tr > td:nth-child(6)) thead{display:none}
.оп-тб:has(tr > td:nth-child(6)) tr{display:grid;gap:2px var(--s3);
grid-template-columns:max-content 1fr max-content;
padding:9px 0;border-bottom:1px solid var(--line)}
.оп-тб:has(tr > td:nth-child(6)) tr:last-child{border-bottom:0}
.оп-тб:has(tr > td:nth-child(6)) td{border:0;padding:0}
.оп-тб:has(tr > td:nth-child(6)) td:nth-child(1){grid-area:1/1}
.оп-тб:has(tr > td:nth-child(6)) td:nth-child(6){grid-area:1/3;text-align:right}
.оп-тб:has(tr > td:nth-child(6)) td:nth-child(2){grid-area:2/1/auto/-1;
color:var(--ink);padding:2px 0 4px}
.оп-тб:has(tr > td:nth-child(6)) td:nth-child(3){grid-area:3/1;text-align:left}
.оп-тб:has(tr > td:nth-child(6)) td:nth-child(4){grid-area:3/2;text-align:left}
.оп-тб:has(tr > td:nth-child(6)) td:nth-child(4)::before{content:'→ ';color:var(--ink-3)}
.оп-тб:has(tr > td:nth-child(6)) td:nth-child(5){grid-area:3/3;text-align:right}
}
@media screen and (max-width:430px){
/* Ряд показателей ломается ровно в 2×2. */
.оп-пл{grid-template-columns:repeat(2,minmax(0,1fr))}
.оп-пл b{font-size:20px}
/* Подпись плитки держит два ряда (10 px × 1.3 = 13 px на ряд) даже когда
она в один: иначе «4» и «0» в соседних плитках стоят на разной высоте,
и ряд показателей выглядит разнобоем. */
.оп-пл .lab{min-height:26px}
.оп-шапка h1{font-size:18px}
.оп-проект__т{font-size:14.5px}
/* Полоса срока остаётся читаемой: гасим среднюю подпись «сегодня», первая
(прежний срок) и последняя (нынешний срок) остаются. */
.оп-срок__днесь i{display:none}
/* Полоса на телефоне: верхний ярус не нужен (подпись «сегодня» погашена),
зато прежний и нынешний срок разводим по разным ярусам. Замер на 390 px
поймал наезд «05.10» × «08.10.2026» — три дня на короткой оси дают
48 px, а двум подписям нужно 47. В два яруса наезд невозможен вовсе. */
.оп-срок{padding:0 30px}
.оп-срок__поле{height:46px}
.оп-срок__жёлоб,.оп-срок__обещано,.оп-срок__хвост,.оп-срок__мимо,
.оп-срок__стало{top:4px}
.оп-срок__риска{top:0}
.оп-срок__днесь{top:1px}
.оп-срок__было{top:32px}
.оп-срок__стало b{font-size:10px}
.оп-цепь{margin-top:12px;overflow-wrap:anywhere}
}
/* ── Печать ───────────────────────────────────────────────────────────────
Именованная страница: общий @page в разделе печати стоит landscape, и
трогать его нельзя — он обслуживает другие экраны. Отчёт печатается своим
листом A4 книжной ориентации, карточка проекта не рвётся между страницами.
------------------------------------------------------------------------ */
/* Имя страницы латиницей: кириллический custom-ident в @page
поддерживается не всеми движками, а молчаливый откат на общий landscape
нам не нужен. */
@page oplist{size:A4 portrait;margin:14mm}
@media print{
/* Бумага всегда светлая. Печать из тёмной темы брала --ink (почти белый)
и --line (графит) на белом листе: замер давал контраст 1,51 — текста на
листе фактически не было. Жёсткие цвета тут тоже нельзя: правила ниже
написаны через переменные, и перекрашивать надо их, а не каждое правило.
Поэтому на самом листе переобъявляем набор переменных светлой темы —
весь просчитанный контраст светлой темы переносится на бумагу. */
.оп-лист{
--sf:#FFFFFF; --sf-2:#FFFFFF; --sf-3:#ECEFF3;
--ink:#11151B; --ink-2:#3B4552; --ink-3:#556170; --ink-4:#636D79;
--line:#E3E7EC; --line-2:#CFD5DD; --line-3:#B3BBC5;
--ac:#2F5C93; --ac-3:#254B7A;
--ok:#2C6B52; --wait:#8A6516; --bad:#94413B;
--sh-1:0 1px 2px rgba(16,22,30,.05); --hair:inset 0 1px 0 rgba(255,255,255,.8);
page:oplist;max-width:none;border:0;border-radius:0;box-shadow:none;
background:var(--sf);color:var(--ink)}
.оп-лист *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.оп-шапка,.оп-пл,.оп-блок{padding-left:0;padding-right:0}
.оп-раздел,.оп-проект,.оп-сноска{margin-left:0;margin-right:0}
.оп-пл{grid-template-columns:repeat(5,minmax(0,1fr))}
.оп-пл > div{background:none}
.оп-проект,.оп-дело,.оп-блок,.оп-пл,.оп-срок{break-inside:avoid;page-break-inside:avoid}
.оп-раздел{break-after:avoid;page-break-after:avoid}
.оп-тб thead{display:table-header-group}
.оп-тб tr{break-inside:avoid;page-break-inside:avoid}
}
/* ── Отчёты по проектам: обвязка экрана ───────────────────────────────────
Лист отчёта и полоса срока свёрстаны выше. Здесь то, чего у бумажного
листа нет и быть не может: реестр выпусков, ряд действий над выпуском и
поиск по нему. Отдельным блоком, чтобы правка одного не задевала другое.
Префикс тот же «оп-», имена проверены грепом — столкновений нет.
------------------------------------------------------------------------ */
.оп{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
/* Ряд показателей реестра живёт вне листа, боковые поля листа ему не нужны. */
.оп > .оп-пл{padding:0}
/* Действия над выпуском. Стоят НАД шапкой листа и при печати убираются:
на бумаге кнопок не бывает. */
.оп-дейст{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
padding:var(--s3) var(--s5) 0}
/* Поиск по выпуску: ищет с двух букв, подсвечивает и раскрывает найденное. */
.оп-поиск{position:relative;max-width:430px;margin:var(--s3) var(--s5) 0}
.оп-поиск input{padding-right:34px}
.оп-поиск__к{position:absolute;right:5px;top:5px;width:22px;height:22px;
display:grid;place-items:center;color:var(--ink-3);border-radius:6px;
transition:color var(--t),background var(--t)}
.оп-поиск__к:hover{color:var(--ink);background:var(--sf-3)}
.оп-поиск__к svg{width:13px;height:13px}
.оп-нашлось{margin:6px var(--s5) 0;font-size:11.5px;color:var(--ink-3)}
/* Подсветка найденного: охра приглушённая, текст остаётся своего цвета —
контраст не должен падать ни в светлой теме, ни в тёмной. */
.оп mark{background:color-mix(in srgb,var(--wait) 30%,transparent);color:inherit;
border-radius:3px;padding:0 1px}
.оп-шапка__мелко{font-size:11.5px;color:var(--ink-3);margin-top:2px}
/* Подвал реестра: кнопка «Новый выпуск» внутри списка, а не над ним. */
.оп-подвал{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
padding:10px var(--s4);border-top:1px solid var(--line);background:var(--sf-2)}
.оп-подвал__п{flex:1;min-width:0;font-size:11.5px;color:var(--ink-3)}
.оп-реестр__сдвиг{color:var(--wait);font-weight:600}
.оп-реестр__мимо{color:var(--bad);font-weight:600}
/* Причина переноса — второй строкой под текстом дела: седьмую колонку в
таблицу добавлять нельзя, на телефоне она выпадет из сетки ярусов. */
.оп-причина{display:block;margin-top:3px;font-size:11px;line-height:1.4;
color:var(--ink-3)}
/* Пояснения в окнах раздела. */
.оп-пояс{margin-top:var(--s3);font-size:12px;line-height:1.5;color:var(--ink-3)}
.оп-пояс--дело{margin:0 0 var(--s3);color:var(--ink);font-weight:500}
.оп-пред{margin-top:var(--s3)}
/* ── Выбор формата перед выгрузкой в PDF ──────────────────────────────────
Два формата надо не назвать, а показать: лист A4 и лента под телефон
отличаются прежде всего пропорцией страницы, и набросок говорит об этом
быстрее подписи. Набросок собран из блоков, а не из SVG: ссылка на
градиент по id в двух копиях на одной странице — это ровно тот случай,
когда элемент молча не рисуется вовсе.
Бумага взята цветом поверхности темы, а не белым: в тёмной теме белый
прямоугольник в окне читается как вспышка, а смысл наброска — пропорция
и состав страницы, а не её белизна. */
.оп-форматы{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.оп-формат{display:flex;gap:var(--s3);align-items:flex-start;text-align:left;
padding:var(--s3);border:1px solid var(--line-2);border-radius:var(--r2);
background:var(--sf-2);color:var(--ink);cursor:pointer;min-width:0;width:100%;
font:inherit;transition:border-color var(--t),background var(--t)}
.оп-формат:hover{border-color:var(--ac);background:var(--sf)}
.оп-формат:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.оп-формат__т{min-width:0}
.оп-формат__т b{display:block;font-size:13.5px;font-weight:650;line-height:1.3;
color:var(--ink)}
.оп-формат__т i{display:block;font-style:normal;margin-top:5px;font-size:11.5px;
line-height:1.45;color:var(--ink-3)}
.оп-эскиз{flex:none;display:block;position:relative;overflow:hidden;
background:var(--sf);border:1px solid var(--line-2);border-radius:3px;
box-shadow:0 1px 2px rgba(17,21,27,.08)}
.оп-эскиз--a4{width:61px;height:86px;padding:9px 7px 0}
.оп-эскиз--lenta{width:40px;height:86px;padding:9px 5px 0}
/* Вид каждой части задаём ей самой. Общего «.оп-эскиз i{display:block}»
здесь быть не может: у него вес (0,1,1), он перебивает одиночный класс
«.оп-эскиз__пл{display:flex}» — ряд плиток оставался строчным, плитки
схлопывались в 2 px и ряд читался одной серой полосой (02.10.2026). */
/* Полоса шапки канона: только градиентом, стык двух цветов встык читался бы
как обрез плёнки. Те же цвета, что у .оп-полоса на экране отчёта. */
.оп-эскиз__п{position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--ac-3) 0%,
color-mix(in srgb,var(--ac) 55%,var(--ok)) 42%,var(--ok) 100%)}
.оп-эскиз__з{display:block;height:5px;width:72%;border-radius:1px;
background:var(--ink-2);margin-bottom:7px}
/* Плитки показателей. Зазор 3 px и своя заливка: вплотную они сливались в
одну серую полосу, и ряд показателей читался как ещё одна строка текста. */
.оп-эскиз__пл{display:flex;gap:3px;margin-bottom:8px}
.оп-эскиз__пл b{flex:1;height:12px;border:1px solid var(--line-2);border-radius:2px;
background:var(--sf-2)}
.оп-эскиз__с{display:block;height:2px;border-radius:1px;background:var(--line-2);
margin-bottom:5px}
.оп-эскиз__с:nth-of-type(even){width:80%}
/* Полоса срока — единственное, что в наброске цветное: по ней набросок и
узнаётся как отчёт, а не как «просто страница». */
.оп-эскиз__ср{display:block;height:5px;border-radius:2px;margin-top:4px;
background:linear-gradient(90deg,var(--ink-2) 0 56%,var(--wait) 56% 100%)}
/* Рамка печати стоит за краем экрана: новых вкладок с документом мы не
открываем. Ширина с запасом под лист A4 (794 px), иначе печатный лист
сжимался бы по месту ещё до окна печати. */
.оп-печрамка{position:fixed;left:-10000px;top:0;width:1000px;height:1400px;
border:0;pointer-events:none}
@media screen and (max-width:760px){
/* На 390 px две карточки формата рядом не живут: подпись рвётся по слогам.
Ставим в столбик, набросок остаётся слева от текста. */
.оп-форматы{grid-template-columns:1fr}
.оп-дейст{padding:var(--s3) var(--s4) 0}
.оп-поиск{margin:var(--s3) var(--s4) 0;max-width:none}
.оп-нашлось{margin:6px var(--s4) 0}
.оп-подвал{flex-direction:column;align-items:stretch}
.оп-подвал .к{width:100%}
}
@media screen and (max-width:700px){
/* Реестр на телефоне разворачиваем в ярусы — тем же приёмом, что и таблицу
переносов выше. Боковая прокрутка здесь не годится: «Просрочено» и
«Открыть» уезжают за край, а отчёт обязан открываться с телефона.
Про вес правила. Общая таблица задаёт ширину через
«.тб:has(th:nth-child(6)){min-width:720px}» — из-за :has() вес этого
правила (0,2,1) выше, чем у «.тб.оп-реестр» (0,2,0), и порядок в файле
его не перебивает. Поэтому снимаем ширину селектором потяжелее:
«.оп .тб.оп-реестр» — три класса против двух классов и элемента. */
.оп .тб.оп-реестр{min-width:0}
/* Ярус 1: дата и состояние. Ярус 2: переносы и просрочка подписями.
Колонки «Проектов» и «Пунктов» — справка, на телефоне их прячем.
Кнопка «Открыть» тоже лишняя: по строке и так нажимают (.тб--нажим). */
.оп-реестр thead{display:none}
.оп-реестр tr{display:grid;gap:4px var(--s3);
grid-template-columns:1fr auto;padding:10px var(--s4);
border-bottom:1px solid var(--line)}
.оп-реестр tr:last-child{border-bottom:0}
.оп-реестр td{border:0;padding:0}
/* Полосатая заливка общей таблицы висит на ячейках
(«.тб tbody tr:nth-child(even) td»). В ярусах ячейки превращаются в
клетки сетки, и заливка рвётся кусками с просветами между ними.
Снимаем её с ячеек и кладём на строку целиком — вес берём третьим
классом, как и у ширины выше. */
.оп .тб.оп-реестр tbody tr:nth-child(even) td{background:none}
.оп-реестр tbody tr:nth-child(even){
background:color-mix(in srgb,var(--sf-3) 45%,transparent)}
/* То же и с подсветкой нажимаемой строки: она тоже висит на ячейках
(«.тб--нажим tbody tr:hover td»). На телефоне hover после касания
остаётся висеть, и строка выходит раскрашенной кусками. Снимаем с
ячеек, кладём на строку — и ставим ниже зебры, чтобы перебивала её. */
.оп .тб.оп-реестр tbody tr:hover td,
.оп .тб.оп-реестр tbody tr.вкл td{background:none}
.оп-реестр tbody tr:hover{background:var(--sf-3)}
.оп-реестр tbody tr.вкл{background:color-mix(in srgb,var(--ac) 12%,transparent)}
.оп-реестр td:nth-child(1){grid-area:1/1}
.оп-реестр td:nth-child(2){grid-area:1/2;text-align:right}
.оп-реестр td:nth-child(3),.оп-реестр td:nth-child(4),
.оп-реестр td:nth-child(7){display:none}
/* Переносы и просрочка: значение прижато к названию, а не к краю таблицы. */
.оп-реестр td:nth-child(5),.оп-реестр td:nth-child(6){
text-align:left;font-size:11.5px;color:var(--ink-3)}
.оп-реестр td:nth-child(5){grid-area:2/1}
.оп-реестр td:nth-child(6){grid-area:2/2;text-align:right}
.оп-реестр td:nth-child(5)::before{content:'Переносов: ';color:var(--ink-3)}
.оп-реестр td:nth-child(6)::before{content:'Просрочено: ';color:var(--ink-3)}
.оп-реестр td:nth-child(5) .под{display:inline;margin-left:4px}
/* Пустая строка «выпусков нет» занимает всю ширину яруса. */
.оп-реестр tr.тб__нет td{display:block;grid-area:1/1/auto/-1;text-align:left}
}
@media print{
.оп-дейст,.оп-поиск,.оп-нашлось,.оп-подвал{display:none}
}
/* ── Отчёты по проектам: форма заполнения ─────────────────────────────────
02.10.2026. Отчёт заполняет главный инженер проекта, и заполняет его
неделю. Форма живёт на том же листе, что и готовый отчёт: человек видит
ровно то, что потом уйдёт, а не отдельный «интерфейс ввода».
Префикс тот же «оп-», имена проверены грепом по всему фронту.
Своих цветов нет ни одного: всё из переменных темы, и на бумаге формы не
бывает — при печати её кнопки и поля не участвуют вовсе.
------------------------------------------------------------------------ */
/* Переключатель «Заполнение / Готовый отчёт». Сегментом, а не двумя
кнопками: две кнопки читаются как два разных действия, а здесь один
выбор из двух. */
.к--ладно{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,var(--line-2));
font-weight:600}
.к--ладно:hover{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.оп-вкл{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r2);
overflow:hidden;background:var(--sf-2)}
.оп-вкл__к{height:26px;padding:0 12px;font-size:12px;font-weight:500;
color:var(--ink-3);background:none;border:0;cursor:pointer;
transition:color var(--t),background var(--t)}
.оп-вкл__к + .оп-вкл__к{border-left:1px solid var(--line-2)}
.оп-вкл__к:hover{color:var(--ink);background:var(--sf-3)}
.оп-вкл__к.есть{color:var(--ac-ink);background:var(--ac);font-weight:600}
.оп-вкл__к.есть:hover{background:var(--ac-2)}
/* Выбор даты отчёта: стоит и в шапке списка, и в ряду действий. */
.оп-дата{display:inline-flex;align-items:center;gap:7px;min-width:0}
.оп-дата > span{flex:none;font-size:10px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-4)}
.оп-дата select{height:26px;padding:0 24px 0 9px;font-size:12px;
font-variant-numeric:tabular-nums}
.оп-ф{padding:0 var(--s5) var(--s5)}
/* Шапка формы: проект, поиск по проектам и счётчик пройденного. На широком
экране в ряд, на узком — в столбец. */
.оп-ф__выбор{display:grid;gap:var(--s3);align-items:end;
grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) max-content;
padding:var(--s4) 0 var(--s3);border-bottom:1px solid var(--line)}
.оп-ф__ход{flex:none;text-align:right;padding-bottom:3px}
.оп-ф__ход .lab{display:block;margin-bottom:3px}
.оп-ф__ход b{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
font-variant-numeric:tabular-nums;white-space:nowrap}
.оп-ф__пр{display:flex;justify-content:space-between;align-items:flex-start;
gap:var(--s3);margin-top:var(--s4)}
/* Строка дела в форме. Подтверждённое на этой неделе помечено слева тонкой
полосой изумруда: видно, что дело смотрели, а не забыли. */
.оп-ф__дело{padding:var(--s3) 0 var(--s3) 0;border-bottom:1px solid var(--line)}
.оп-ф__дело:last-child{border-bottom:0}
.оп-ф__дело--есть{border-left:2px solid var(--ok);padding-left:var(--s3);
margin-left:-2px}
.оп-ф__кн{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
margin-top:var(--s3)}
.оп-ф__кн--низ{margin-top:var(--s3)}
.оп-ф__от{font-size:11px;line-height:1.45;color:var(--ink-3)}
.оп-ф__нет{padding:14px 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
/* Уже записанное за неделю: текст слева, действия справа. */
.оп-ф__спис li{display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap}
.оп-ф__тз{flex:1 1 320px;min-width:0}
.оп-ф__ряд{display:flex;gap:6px;flex:none}
/* Что писали в прошлом отчёте. Свёрнуто: открывается тем, кому надо. */
.оп-ф__бы{display:inline-flex;align-items:center;height:26px;padding:0 11px;
margin-top:var(--s3);font-size:11.5px;color:var(--ink-2);background:var(--sf-2);
border:1px dashed var(--line-2);border-radius:var(--r2);cursor:pointer;
transition:color var(--t),border-color var(--t)}
.оп-ф__бы:hover{color:var(--ink);border-color:var(--line-3)}
.оп-ф__было{margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--sf-2);
border:1px solid var(--line);border-radius:var(--r2)}
.оп-ф__з{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
margin-bottom:4px;font-size:10px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-4)}
/* Найденный в тексте срок. Не тревога и не ошибка — находка, поэтому охра
приглушённая и рамка, а не заливка. */
.оп-ф__наш{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.оп-ф__нс{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
padding:9px var(--s4);border:1px solid color-mix(in srgb,var(--wait) 40%,var(--line-2));
border-radius:var(--r2);background:var(--sf-2)}
.оп-ф__нс b{flex:none;font-size:12px;font-weight:600;color:var(--wait);
font-variant-numeric:tabular-nums}
.оп-ф__нс > span{flex:1 1 240px;min-width:0;font-size:12px;line-height:1.45;
color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Окно разбора: строк бывает полтора десятка, таблица прокручивается сама. */
.оп-ф__разбор{max-height:52vh;overflow:auto;margin-top:var(--s3);
border:1px solid var(--line);border-radius:var(--r2)}
.оп-ф__разбор table{width:100%}
.оп-ф__разбор th,.оп-ф__разбор td{padding:7px 10px;vertical-align:top}
.оп-ф__разбор td:nth-child(2),.оп-ф__разбор td:nth-child(3){width:1%;white-space:nowrap}
.оп-ф__разбор select,.оп-ф__разбор input[type=date]{height:26px;font-size:12px}
/* 02.10.2026. Ячейка «Род» стоит в колонке width:1%, и родной список
съёживался до одной стрелки: распознанное слово было не видно вовсе,
хотя окно ровно за тем и открывают — поправить, где не угадал. */
.оп-ф__разбор select{min-width:96px}
.оп-ф__повтор{opacity:.6}
.оп-ф__гал{display:flex;align-items:flex-start;gap:8px;cursor:pointer;
font-size:12.5px;line-height:1.45;color:var(--ink)}
.оп-ф__гал input{margin-top:2px;flex:none}
/* Ряд плиток внутри окна выпуска: три штуки, без боковых полей листа. */
.оп-пл--окно{padding:0;grid-template-columns:repeat(3,minmax(0,1fr))}
@media screen and (max-width:760px){
.оп-ф{padding:0 var(--s4) var(--s4)}
.оп-ф__выбор{grid-template-columns:minmax(0,1fr)}
.оп-ф__ход{text-align:left}
.оп-дата{width:100%}
.оп-дата select{flex:1;min-width:0}
.оп-ф__ряд{flex:1 1 100%}
.оп-ф__нс > span{white-space:normal}
}
@media screen and (max-width:430px){
/* Кнопки дела в один столбец: четыре штуки в ряд на 390 px не помещаются
и дают прокрутку вбок. */
.оп-ф__кн .к{flex:1 1 calc(50% - var(--s2))}
.оп-пл--окно{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Форма на бумаге не печатается: лист отчёта печатается из вида «Готовый
отчёт», а кнопок и полей ввода на бумаге не бывает. */
@media print{
.оп-вкл,.оп-дата,.оп-ф__кн,.оп-ф__наш,.оп-ф__бы{display:none !important}
}
/* ═══ Отчёты по проектам: плашки, выбор проекта, схема сроков ══════════════
02.10.2026, вторая сборка по замечаниям заказчика.
Префикс тот же «оп-». Новые имена проверены грепом по всему фронту:
.оп-пк (плашка проекта), .оп-пкс (ряд плашек — ящик перетаскивания),
.оп-дол (делёная полоса по делам), .оп-грф (столбики по неделям),
.оп-вб (выбор проекта), .оп-мс (схема сроков), .оп-нед (неделя за
неделей), .оп-нетп (пунктир вместо полосы у дела без срока).
Столкновений нет: .оп-пр занято как начало .оп-проект, его не берём.
ЦВЕТ. Своих значений нет: --ok «в срок», --wait «перенесено», --bad
«срок прошёл», --ink-2 «обещано», --sf-3 «жёлоб». Кричащих нет ни одного.
------------------------------------------------------------------------ */
/* Засечный шрифт названия проекта — тот же Spectral, которым набраны
заголовки на листе печати. Файл лежит у нас, из сети ничего не тянем. */
@font-face{font-family:'Spectral СГИ';src:url(../fonts/печать/Spectral-600.woff2) format('woff2');
font-weight:600;font-style:normal;font-display:swap}
/* ── Делёная полоса по делам ───────────────────────────────────────────── */
/* Высота задана жёстко, а flex-basis — НЕТ. Карточка выбора проекта
выложена колонкой, и «flex:1 1 170px» там означал бы высоту 170 px:
полоса раздувалась в заливку на пол-экрана (поймано снимком 02.10). */
.оп-дол{display:flex;gap:2px;height:6px;flex:none}
/* В плашке полоса — короткая мерка справа, а не «шкала готовности» во всю
ширину: длинная заливка читается как процент выполнения, а процентов
готовности мы не считаем вовсе. */
.оп-пк__св .оп-дол{flex:0 0 190px;max-width:190px;margin-left:auto}
.оп-дол i{display:block;min-width:3px;border-radius:2px}
.оп-дол--ровно{background:var(--ok)}
.оп-дол--сдвиг{background:var(--wait)}
.оп-дол--мимо{background:var(--bad)}
/* «Без срока» — не цвет состояния, а его отсутствие: штриховка, не заливка. */
.оп-дол--без{background:repeating-linear-gradient(135deg,
var(--line-3) 0 2px, transparent 2px 5px);
box-shadow:inset 0 0 0 1px var(--line-2);border-radius:2px}
.оп-дол__п{display:flex;flex-wrap:wrap;gap:4px var(--s4);margin-top:9px;
font-size:11px;color:var(--ink-3)}
.оп-дол__п span{display:inline-flex;align-items:center}
.оп-дол__п b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
/* ── Плашка проекта ────────────────────────────────────────────────────── */
.оп-пкс{padding:0 var(--s5)}
.оп-пк{background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);
margin-bottom:var(--s2);overflow:hidden;transition:border-color var(--t)}
.оп-пк:hover{border-color:var(--line-2)}
/* Тревожная плашка: приглушённый бордо рамкой, без заливки и без крика. */
.оп-пк--тревога{border-color:color-mix(in srgb,var(--bad) 34%,var(--line))}
.оп-пк.тащится{cursor:grab}
.оп-пк__ш{display:flex;align-items:center;gap:var(--s3);
padding:10px var(--s4);cursor:pointer;user-select:none;
background:none;border:0;width:100%;text-align:left;color:inherit}
.оп-пк__ш:hover{background:var(--sf-2)}
.оп-пк__ш:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
/* Номер проекта — отдельной меткой: раньше он тонул в одной строке
с названием (02.10.2026, «название чуть посильнее выделять хотелось бы»). */
.оп-пк__н{flex:none;min-width:30px;padding:3px 7px;border-radius:6px;
background:var(--sf-3);border:1px solid var(--line-2);
font-size:12px;font-weight:700;line-height:1.2;text-align:center;
color:var(--ink-2);font-variant-numeric:tabular-nums}
.оп-пк__т{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;
font-family:'Spectral СГИ',Georgia,serif;font-weight:600;
font-size:18px;line-height:1.25;letter-spacing:-.005em;color:var(--ink)}
.оп-пк__г{flex:none;display:flex;color:var(--ink-4)}
.оп-пк__г svg{width:15px;height:15px;transition:transform var(--t)}
.оп-пк.вкл .оп-пк__г svg{transform:rotate(180deg)}
/* Ручку видно и без наведения: перетаскивание плашек — не спрятанная
возможность, а то, ради чего плашки и сделаны (02.10.2026). */
.оп-пк__ш .ручка{flex:none;position:static;margin:0;opacity:.3}
.оп-пк:hover .ручка{opacity:.62}
.оп-пк__св{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
padding:0 var(--s4) 11px}
.оп-пк__сч{display:flex;flex-wrap:wrap;gap:3px var(--s3);min-width:0;
font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.оп-пк__сч > span{white-space:nowrap}
.оп-пк__сч > span + span::before{content:'·';margin-right:var(--s3);color:var(--line-3)}
.оп-пк__сдвиг{color:var(--wait);font-weight:600}
.оп-пк__мимо{color:var(--bad);font-weight:600}
.оп-пк__б{padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--line)}
.оп-пк__б .оп-гр:first-child{margin-top:0}
.оп-пк__хрон{margin-top:var(--s3)}
/* Подвал с возвратом порядка. */
.оп-порядок{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
margin:var(--s3) var(--s5) 0;padding:10px var(--s4);
border:1px solid var(--line);border-radius:var(--r2);background:var(--sf-2)}
/* ── Нажимная плитка показателя ────────────────────────────────────────── */
.оп-пл > div.оп-пл--жмут{cursor:pointer;position:relative;
transition:border-color var(--t),background var(--t)}
.оп-пл > div.оп-пл--жмут:hover{background:var(--sf-2);border-color:var(--line-3)}
.оп-пл > div.оп-пл--жмут:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* Мелкие подписи акцентом берут --ac-2, а не --ac: в тёмной теме --ac на
поверхности давал 4,41 — ниже порога 4,5 для мелкого текста (замер 02.10).
Одно значение на обе темы, в светлой остаётся 5,9. */
.оп-пл__к{display:block;margin-top:6px;font-size:10px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--ac-2)}
/* Короткая вспышка у таблицы, к которой привела плитка: без неё непонятно,
что экран вообще шевельнулся, если таблица уже была на виду. */
@keyframes оп-вспышка{
0%{background:color-mix(in srgb,var(--ac) 14%,transparent)}
100%{background:transparent}
}
.оп-мигнул{animation:оп-вспышка 1.4s ease-out 1;border-radius:var(--r2)}
@media (prefers-reduced-motion:reduce){.оп-мигнул{animation:none}}
/* ── Пунктир у дела без срока ──────────────────────────────────────────── */
.оп-нетп{margin-top:14px}
.оп-нетп__ж{height:8px;border-radius:4px;
border:1px dashed color-mix(in srgb,var(--wait) 48%,var(--line-2));
background:repeating-linear-gradient(135deg,
color-mix(in srgb,var(--wait) 12%,transparent) 0 3px, transparent 3px 8px)}
.оп-нетп .оп-безсрока{margin-top:7px}
/* ── Столбики: переносов по неделям ────────────────────────────────────── */
.оп-грф{margin:var(--s3) var(--s5) 0;padding:12px var(--s4) 10px;
border:1px solid var(--line);border-radius:var(--r2);background:var(--sf)}
.оп > .оп-грф{margin:0}
.оп-грф__з{display:flex;align-items:baseline;justify-content:space-between;
gap:var(--s3);flex-wrap:wrap;margin-bottom:11px}
.оп-грф__з > span:first-child{font-size:10px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3)}
.оп-грф__м{font-size:11px;line-height:1.4;color:var(--ink-4);flex:1 1 260px;
text-align:right}
.оп-грф__п{display:flex;align-items:flex-end;gap:3px}
.оп-грф__с{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
align-items:stretch;gap:5px;background:none;border:0;padding:0;cursor:pointer;
font:inherit;color:inherit}
.оп-грф__ж{display:block;height:46px;position:relative;border-radius:3px;
background:var(--sf-3)}
.оп-грф__ж i{position:absolute;left:0;right:0;bottom:0;display:block;
min-height:2px;border-radius:3px;background:var(--wait);opacity:.62;
transition:opacity var(--t)}
.оп-грф__с:hover .оп-грф__ж i{opacity:.92}
.оп-грф__с.вкл .оп-грф__ж i{opacity:1;background:var(--ac)}
.оп-грф__с.вкл .оп-грф__ж{box-shadow:0 0 0 1px var(--ac)}
.оп-грф__с em{font-style:normal;font-size:9px;line-height:1.1;text-align:center;
color:var(--ink-4);font-variant-numeric:tabular-nums;visibility:hidden;
white-space:nowrap;overflow:hidden}
.оп-грф__с--п em{visibility:visible}
.оп-грф__с.вкл em{visibility:visible;color:var(--ac-2);font-weight:700}
/* ── Выбор проекта ─────────────────────────────────────────────────────── */
.оп-вб{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:var(--sh-1);padding:13px var(--s4) var(--s4)}
.оп-вб--узкий{box-shadow:none}
.оп-вб__з{display:flex;align-items:baseline;justify-content:space-between;
gap:var(--s3);flex-wrap:wrap;margin-bottom:10px}
.оп-вб__зт{font-size:13px;color:var(--ink-3)}
.оп-вб__зт b{color:var(--ink);font-weight:600}
.оп-вб__сч{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.оп-вб__поиск{position:relative;max-width:430px;margin-bottom:11px}
.оп-вб__поиск input{padding-right:34px}
/* Шесть рядов влезают без прокрутки страницы; дальше прокручивается сам
список, а не весь экран — реестр отчётов остаётся на виду. */
.оп-вб__сетка{display:grid;gap:var(--s2);
grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
max-height:272px;overflow-y:auto;padding-right:2px}
.оп-вб--узкий .оп-вб__сетка{max-height:186px}
.оп-вб__к{display:flex;flex-direction:column;align-items:stretch;gap:5px;
padding:9px 11px 10px;text-align:left;background:var(--sf-2);
border:1px solid var(--line);border-radius:var(--r2);cursor:pointer;
font:inherit;color:inherit;transition:border-color var(--t),background var(--t)}
.оп-вб__к:hover{background:var(--sf);border-color:var(--line-3)}
.оп-вб__к.вкл{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,var(--sf))}
.оп-вб__ш{display:flex;align-items:baseline;gap:8px;min-width:0}
.оп-вб__н{flex:none;font-size:11px;font-weight:700;color:var(--ink-3);
font-variant-numeric:tabular-nums}
.оп-вб__т{flex:1 1 auto;min-width:0;font-family:'Spectral СГИ',Georgia,serif;
font-weight:600;font-size:14px;line-height:1.3;color:var(--ink);
overflow-wrap:anywhere}
.оп-вб__м{font-size:10.5px;line-height:1.4;color:var(--ink-4)}
.оп-вб__нет{padding:14px 2px;font-size:12px;line-height:1.5;color:var(--ink-3)}
/* ── Схема сроков: общая ось на все дела проекта ───────────────────────── */
.оп-мс{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
background:var(--sf)}
.оп-мс__шк,.оп-мс__ряд{display:grid;align-items:center;
grid-template-columns:minmax(0,258px) minmax(0,1fr) minmax(0,132px);
gap:0 var(--s3);padding:0 var(--s4)}
/* Два яруса: подпись «сегодня» сверху, месяцы снизу. В один ярус они
наезжали: вертикаль сегодня приходится на октябрь, и подпись месяца
пропадала под плашкой (замер 02.10). */
.оп-мс__шк{height:36px;background:var(--sf-2);border-bottom:1px solid var(--line)}
.оп-мс__шк .оп-мс__шп{height:36px}
.оп-мс__мес{position:absolute;top:20px;transform:translateX(-50%);
font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);
white-space:nowrap}
.оп-мс__ряд{padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.оп-мс__ряд:last-child{border-bottom:0}
.оп-мс__ряд:hover{background:var(--sf-2)}
.оп-мс__ряд--закрыт .оп-мс__тк{color:var(--ink-3)}
.оп-мс__им{min-width:0}
.оп-мс__тк{display:block;font-size:12px;line-height:1.35;color:var(--ink);
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.оп-мс__дт{display:block;margin-top:2px;font-size:10px;color:var(--ink-4);
font-variant-numeric:tabular-nums}
.оп-мс__шп{position:relative;height:22px;min-width:0}
.оп-мс__ит{text-align:right;min-width:0}
.оп-мс__жёлоб{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;
background:var(--sf-3)}
.оп-мс__обещано{position:absolute;top:9px;height:4px;border-radius:2px 0 0 2px;
background:var(--ink-2)}
.оп-мс__хвост{position:absolute;top:9px;height:4px;
background:repeating-linear-gradient(135deg,
color-mix(in srgb,var(--wait) 78%,transparent) 0 1.5px,
color-mix(in srgb,var(--wait) 16%,transparent) 1.5px 5px)}
.оп-мс__мимо{position:absolute;top:9px;height:4px;border-radius:0 2px 2px 0;
background:color-mix(in srgb,var(--bad) 86%,transparent)}
.оп-мс__пунктир{position:absolute;top:9px;height:4px;border-radius:2px;
border:1px dashed color-mix(in srgb,var(--wait) 52%,var(--line-2));
box-sizing:border-box}
/* Станция: кружок в точке прежнего срока. Тот же приём, что в метро — по
кружкам читается, сколько раз линию перекладывали. */
.оп-мс__ст{position:absolute;top:7px;width:8px;height:8px;margin-left:-4px;
border-radius:50%;box-sizing:border-box;background:var(--sf);
border:1.6px solid var(--wait)}
.оп-мс__ст--нач{border-color:var(--ink-3)}
.оп-мс__кон{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;
border-radius:50%;box-sizing:border-box;background:var(--sf);border:2.4px solid var(--ink-2)}
.оп-мс__кон--ровно{border-color:var(--ok)}
.оп-мс__кон--сдвиг{border-color:var(--wait)}
.оп-мс__кон--мимо{border-color:var(--bad);background:var(--bad)}
.оп-мс__кон--закрыт{border-color:var(--ok);background:var(--ok)}
/* Вертикаль «сегодня» идёт через все ряды: ряды стоят вплотную, и отрезки
читаются одной линией. Накладкой на всю таблицу её сделать нельзя —
колонка названий у каждого ряда своя. */
.оп-мс__днесь{position:absolute;top:-10px;bottom:-10px;width:1px;
background:color-mix(in srgb,var(--ac) 62%,transparent)}
.оп-мс__днесь--шк{top:0;bottom:0;background:var(--ac)}
.оп-мс__днесь--шк i{position:absolute;top:3px;left:-27px;width:54px;text-align:center;
font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--ac-2);line-height:13px}
.оп-мс__ещё{margin-top:var(--s3)}
.оп-пм--без{color:var(--ink-4);font-weight:500}
/* ── Неделя за неделей ─────────────────────────────────────────────────── */
.оп-нед{list-style:none;margin:0;padding:0 0 0 var(--s4);position:relative}
/* Линия идёт по ЦЕНТРУ кружков: кружок стоит на 4..16 px от края списка,
значит середина — 10 px, а не 4, иначе линии не видно вовсе. */
.оп-нед::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;
border-radius:1px;background:var(--line-2)}
.оп-нед__у{position:relative;padding:0 0 var(--s4) var(--s4)}
.оп-нед__у::before{content:'';position:absolute;left:-10px;top:5px;
width:12px;height:12px;border-radius:50%;box-sizing:border-box;
background:var(--sf);border:2.4px solid var(--line-3)}
.оп-нед__у--тяж::before{border-color:var(--wait)}
.оп-нед__у:last-child{padding-bottom:0}
.оп-нед__д{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.оп-нед__дк{padding:0;background:none;border:0;cursor:pointer;font:inherit;
font-size:13.5px;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;border-bottom:1px dashed var(--line-3)}
.оп-нед__дк:hover{color:var(--ac);border-bottom-color:var(--ac)}
.оп-нед__нн{font-size:10.5px;color:var(--ink-4)}
.оп-нед__мт{font-size:10px;font-weight:600;letter-spacing:.03em;padding:1px 7px;
border-radius:5px;border:1px solid var(--line-2);color:var(--ink-3)}
.оп-нед__мт--нов{border-color:color-mix(in srgb,var(--ac) 44%,var(--line-2));color:var(--ac-2)}
.оп-нед__мт--гот{border-color:color-mix(in srgb,var(--ok) 44%,var(--line-2));color:var(--ok)}
.оп-нед__к{border:1px solid var(--line);border-radius:var(--r2);background:var(--sf);
padding:11px var(--s4) 12px}
.оп-нед__гр + .оп-нед__гр{margin-top:var(--s4);padding-top:var(--s3);
border-top:1px solid var(--line)}
.оп-нед__гз{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:7px}
.оп-нед__гз--сдвиг{color:var(--wait)}
.оп-нед__гз span{letter-spacing:0;font-size:11px;font-variant-numeric:tabular-nums}
.оп-нед__сд{padding:6px 0;border-bottom:1px solid var(--line)}
.оп-нед__сд:last-child{border-bottom:0}
.оп-нед__сдт{display:block;font-size:12.5px;line-height:1.45;color:var(--ink);
overflow-wrap:anywhere}
.оп-нед__сдд{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3);
font-variant-numeric:tabular-nums}
.оп-нед__сдд s{color:var(--ink-4)}
.оп-нед__сдд b{color:var(--ink);font-weight:700;margin-left:6px}
.оп-нед__сдд em{font-style:normal;color:var(--wait);font-weight:700;margin-left:8px}
.оп-нед__тихо{font-size:12px;line-height:1.5;color:var(--ink-4)}
.оп-спис--план li::before{background:var(--line-3)}
.оп-шапка__проект{font-family:'Spectral СГИ',Georgia,serif;font-weight:600;
font-size:25px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);
margin:5px 0 7px}
.оп-шапка__н{display:inline-block;margin-right:11px;padding:2px 9px;
border-radius:7px;background:var(--sf-3);border:1px solid var(--line-2);
font-family:var(--f);font-size:13px;font-weight:700;color:var(--ink-2);
vertical-align:middle;font-variant-numeric:tabular-nums}
.оп-сноска--верх{margin-top:0;margin-bottom:11px;margin-left:0;margin-right:0}
/* ── Узкие экраны ──────────────────────────────────────────────────────── */
@media screen and (max-width:760px){
.оп-пкс{padding:0 var(--s4)}
.оп-порядок{margin:var(--s3) var(--s4) 0;flex-direction:column;align-items:stretch}
.оп-порядок .к{width:100%}
.оп-грф{margin:var(--s3) var(--s4) 0}
.оп-грф__м{text-align:left;flex:1 1 100%}
.оп-грф__с em{display:none}
.оп-вб__сетка{grid-template-columns:1fr;max-height:230px}
.оп-вб--узкий .оп-вб__сетка{max-height:170px}
/* Схема сроков на телефоне: название над полосой, итог под ней. Прокрутки
вбок нет — колонка названий просто перестаёт быть колонкой. Шкалу
месяцев оставляем: без неё вертикаль «сегодня» ничем не подписана и
читается как случайная черта. */
.оп-мс__шк{grid-template-columns:1fr;padding:0 var(--s3)}
.оп-мс__шк .оп-мс__им,.оп-мс__шк .оп-мс__ит{display:none}
.оп-мс__ряд{grid-template-columns:1fr;gap:6px;padding:11px var(--s3)}
.оп-мс__ит{text-align:left}
.оп-мс__тк{-webkit-line-clamp:3}
.оп-нед{padding-left:var(--s3)}
.оп-нед__у{padding-left:var(--s4)}
.оп-нед__к{padding:10px var(--s3) 11px}
.оп-шапка__проект{font-size:20px}
}
@media screen and (max-width:430px){
/* Шапка плашки в два яруса: сверху номер, стадия и кнопки, под ними
название во всю ширину. В одну строку название сжималось до двух-пяти
обрывков, и «посильнее выделить» превращалось в обратное (замер 390 px). */
.оп-пк__ш{flex-wrap:wrap;row-gap:7px}
.оп-пк__н{order:1}
.оп-пк__ш .оп-стадия{order:2}
.оп-пк__ш .ручка{order:3;margin-left:auto}
.оп-пк__г{order:4}
.оп-пк__т{order:5;flex:1 1 100%;font-size:16.5px}
/* Точка-разделитель между счётчиками на узком экране уезжала в начало
следующей строки и читалась как маркер списка. */
.оп-пк__сч > span + span::before{content:none}
.оп-пк__сч{gap:2px var(--s3)}
.оп-пк__св{gap:var(--s3)}
/* Полосу во всю ширину разворачиваем только в шапке плашки. Правило без
предка доставало и карточку выбора проекта: там флекс колоночный, и
flex-basis:100% со сжатием гасил полосу в ноль пикселей — на телефоне
графика на карточках не было вовсе (замер 390 px, 02.10.2026). */
.оп-пк__св .оп-дол{flex:1 1 100%;max-width:none}
.оп-грф__ж{height:38px}
.оп-шапка__проект{font-size:18px}
.оп-шапка__н{font-size:12px;margin-right:8px}
}
/* ── Печать ────────────────────────────────────────────────────────────── */
@media print{
.оп-вб,.оп-грф,.оп-порядок,.оп-пк__г,.оп-пк__ш .ручка,.оп-пк__хрон,
.оп-мс__ещё,.оп-пл__к{display:none}
.оп-пк{border:0;border-radius:0;margin:0;border-bottom:1px solid var(--line)}
.оп-пк__ш,.оп-пк__св,.оп-пк__б{padding-left:0;padding-right:0}
.оп-пкс{padding:0}
.оп-пк,.оп-мс__ряд,.оп-нед__у{break-inside:avoid;page-break-inside:avoid}
}
/* 14.10.2026 · Альбом подразделений: две карточки документов */
.альбв{display:flex;flex-direction:column;gap:var(--s3);max-width:920px}
.альбв__л{margin:0 0 4px;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.альбк{display:grid;grid-template-columns:96px 1fr;gap:var(--s4);padding:var(--s4);align-items:start}
.альбк__о{position:relative;height:136px;padding:0;overflow:hidden;cursor:pointer;
border:1px solid var(--line);border-radius:var(--r2);background:#fff;box-shadow:var(--sh-1);
transition:transform .18s ease,box-shadow .18s ease}
.альбк__о img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.альбк__о:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.альбк__о:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.альбк__з{position:absolute;left:6px;bottom:6px;font:700 10.5px/1 var(--f-num,inherit);letter-spacing:.06em;
color:#fff;background:#8E2626;padding:4px 6px;border-radius:4px}
.альбк__т b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.альбк__м{display:block;margin-top:4px;font-size:12px;color:var(--ink-3)}
.альбк__т p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.альбк__кн{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media screen and (max-width:640px){
.альбк{grid-template-columns:64px 1fr;gap:12px;padding:14px}
.альбк__о{height:90px}
}
/* 14.10.2026 · Альбом: раздача по подразделениям (руководство) */
.альбр{padding:0;overflow:hidden}
.альбр__з{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:var(--s4) var(--s4) var(--s3)}
.альбр__з b{font-size:16px;font-weight:600}
.альбр__з span{font-size:12.5px;color:var(--ink-3)}
.альбр__обёртка{overflow-x:auto}
.альбр table{width:100%;border-collapse:collapse;font-size:13.5px}
.альбр th,.альбр td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:middle}
.альбр thead th{background:var(--sf-2);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.альбр tbody th{font-weight:600;color:var(--ink)}
.альбр tr>*:first-child{border-left:0}.альбр tr>*:last-child{border-right:0}
.альбр tbody tr:last-child>*{border-bottom:0}
.альбр__н{width:36px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.альбр__д{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.альбр__д .к{padding:5px 12px;font-size:12.5px}
.альбр__д .альбр__ск{padding:5px 7px}
.альбр__ск svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.альбр__к{font-size:12.5px;color:var(--ink-2);min-width:140px}
.альбр__нет{font-size:12px;color:var(--ink-3)}
body.м .альбр__ск svg,.альбр__ск svg{max-width:none;flex:none}
/* Узкий экран: строка таблицы складывается в карточку подразделения */
@media screen and (max-width:640px){
.альбр thead{display:none}
.альбр table,.альбр tbody{display:block}
.альбр tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px 14px;border-top:1px solid var(--line)}
.альбр th,.альбр td{border:0;padding:0}
.альбр__н{display:none}
.альбр tbody th{grid-column:1/-1;font-size:14.5px}
.альбр__ч::before,.альбр__к::before{content:attr(data-cap);display:block;margin-bottom:4px;
font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.альбр__к{grid-column:1/-1;min-width:0}
.альбр__обёртка{overflow:visible}
}
/* 14.10.2026 · Оцифрованный альбом: листы, точки замечаний, отправка */
.ац{display:flex;flex-direction:column;gap:10px}
.ац-шапка{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;position:sticky;top:0;z-index:4;
padding:10px 12px;background:var(--sf);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh-1)}
.ац-шапка .к svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ац-шапка__т{display:flex;flex-direction:column;line-height:1.25}
.ац-шапка__т b{font-size:15px;font-weight:600}
.ац-шапка__т span{font-size:12px;color:var(--ink-3)}
.ац-вкладки{display:flex;gap:4px;padding:3px;background:var(--sf-2);border:1px solid var(--line);border-radius:10px}
.ац-вкл{border:0;background:transparent;padding:6px 12px;border-radius:7px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.ац-вкл:hover{color:var(--ink)}
.ац-вкл.вкл{background:var(--sf);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.ац-итог{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ац-счёт{font-size:13px;color:var(--ink-2)}
.ац-счёт b{color:var(--wait);font-weight:600}
.ац-подсказка{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);padding:0 4px}
.ац-подсказка svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round}
.ац-лента{background:var(--sf);border:1px solid var(--line);border-radius:var(--r3)}
.ац-лента summary{cursor:pointer;padding:10px 14px;font-size:13.5px;font-weight:600}
.ац-лента ol{list-style:none;margin:0;padding:0 8px 8px;border-top:1px solid var(--line)}
.ац-лента li+li{border-top:1px solid var(--line)}
.ац-лента li{padding:2px 0}
.ац-лента li button{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:start;width:100%;
text-align:left;border:0;background:transparent;padding:8px;border-radius:8px;font:inherit;color:inherit;cursor:pointer}
.ац-лента li button:hover{background:var(--sf-2)}
.ац-лента__т{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.4;min-width:0}
.ац-лента__т b{font-size:12px;font-weight:600;color:var(--ink-3)}
.ац-лента em{font-style:normal;font-size:12px;color:var(--ink-3);white-space:nowrap}
.альбв__л--строки span{display:block}
.ац-м{position:relative;display:inline-block;width:26px;height:26px;flex:none;font-style:normal}
.ац-м svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ац-м path{stroke:var(--sf);stroke-width:1.4;stroke-linejoin:round}
.ац-м span{position:absolute;left:0;right:0;top:8.5px;text-align:center;font:700 9.5px/1 var(--f);color:#fff}
.ац-м--мал{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.ац-сост{display:inline-flex;align-items:center;white-space:nowrap}
.ац-з--черновик{fill:#8A6A1F}.ац-з--отправлено{fill:#7A2632}.ац-з--в-работе{fill:#2F4A6B}.ац-з--отработано{fill:#1E5E45}
/* плитки файлов: замечания и реестр */
.фпл{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.фпл:empty{display:none}
.фпл-ф{position:relative;width:84px;height:84px}
.фпл-ф__л{width:100%;height:100%;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
background:var(--sf-2);cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.фпл-ф__л img{width:100%;height:100%;object-fit:cover;display:block}
.фпл-ф__л b{font:700 12px/1 var(--f);letter-spacing:.05em;color:var(--ink-2)}
.фпл-ф__х{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);
background:var(--sf);color:var(--ink-2);font:600 15px/1 var(--f);cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:var(--sh-1)}
.фпл-ф__х:hover{color:var(--bad);border-color:var(--bad)}
.фпл--мелко .фпл-ф{width:44px;height:44px}
.фпл-выбор{cursor:pointer;align-self:flex-start;margin-top:2px}
.фпл-выбор svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body.м .фпл-ф__л img,body.м .фпл-выбор svg,body.м .ац-м svg{max-width:none}
.ац-поле{background:#E6EAF0;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden}
.ац-лист{display:block;width:100%;height:1400px;border:0;background:#E6EAF0}
.ац-меню{position:fixed;z-index:60;min-width:220px;padding:5px;background:var(--sf);border:1px solid var(--line-2);
border-radius:10px;box-shadow:var(--sh-3)}
.ац-меню button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;padding:9px 11px;
border-radius:7px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.ац-меню button:hover,.ац-меню button:focus-visible{background:var(--sf-2);outline:none}
.ац-меню svg,.к svg.ац-з{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.альбк__кн .к svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ац-ф{display:flex;flex-direction:column;gap:12px}
.ац-ф__где{padding:10px 12px;background:var(--sf-2);border-left:3px solid #7A2632;border-radius:6px;font-size:13px;line-height:1.45}
.ац-ф__где b{display:block;font-weight:600;margin-bottom:2px}
.ац-ф__где q{color:var(--ink-2);quotes:'«' '»'}
.ац-ф__заг{display:flex;flex-wrap:wrap;gap:6px}
.ац-ф__заг button{border:1px solid var(--line-2);background:var(--sf);border-radius:999px;padding:6px 11px;
font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.ац-ф__заг button:hover{border-color:var(--ink-3);color:var(--ink)}
.ац-ф__текст{font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.ац-ф__мета{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.ац-ф__ответ{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;white-space:pre-wrap}
.ац-ф__ответ b{display:block;font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:3px}
.ац-отр td{font-size:13px;vertical-align:top}
.ац-отр td span{display:block;font-size:12px;color:var(--ink-3)}
.ац-отр td q{display:block;font-size:12px;color:var(--ink-3);margin-bottom:3px;quotes:'«' '»'}
.ац-отр td p{margin:0}
@media screen and (max-width:640px){
.ац-шапка{position:static}
.ац-лента li button{grid-template-columns:24px 1fr}
.ац-лента em{grid-column:2}
}
/* 14.10.2026 · Реестр оборудования — раскладка «Документов службы» (эдоска) */
.об .к svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.об .эсл__н--знак svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.об-заг{font-size:15px;font-weight:600}
.об-т tbody tr[data-alb="eq-edit"]{cursor:pointer}
.об-яч-мин{width:104px}
.об-кол-фото{width:104px}.об-кол-кат{width:130px}.об-кол-ф{width:60px}.об-кол-д{width:84px}
.об-т td.об-дата span{display:block;line-height:1.35}
.об-т td.об-кат{font-size:12.5px;line-height:1.35}
.об-т td.ц{white-space:nowrap}
.об-мин{display:block;width:84px;height:64px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
background:var(--sf-2);cursor:zoom-in}
.об-мин img{width:100%;height:100%;object-fit:cover;display:block}
.об-мин--нет{display:flex;align-items:center;justify-content:center;cursor:default;color:var(--ink-4)}
.об-мин--нет svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}
.об-имя{display:block;font-weight:600}
.об-опис{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;
font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.об-подск{display:flex;flex-direction:column;gap:6px;padding:10px 9px 2px}
.об-подск span{font-size:12px;color:var(--ink-3)}
.об-чип{text-align:left;border:1px dashed var(--line-2);background:transparent;border-radius:8px;padding:7px 10px;
font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.об-чип:hover{border-style:solid;border-color:var(--ink-3);color:var(--ink)}
.об-ф-окно{display:flex;flex-direction:column;gap:12px}
.об-ф-окно select{width:100%}
body.м .об-мин img,body.м .об .к svg,body.м .об-мин--нет svg{max-width:none}
@media screen and (max-width:640px){
.об-т thead{display:none}
.об-т,.об-т tbody{display:block}
.об-т tr{display:grid;grid-template-columns:64px 1fr;gap:4px 12px;padding:10px 12px;border-top:1px solid var(--line)}
.об-т td{border:0;padding:0}
.об-т .н,.об-т td.ц,.об-т td.mut{display:none}
.об-т .об-яч-мин{grid-row:1/3;width:auto}
.об-т,body.м .об-т{width:100%;min-width:0}
.об-т tr,body.м .об-т tr{grid-template-columns:64px minmax(0,1fr)}
.об-т td.гл,body.м .об-т td.гл{display:block;min-width:0;width:auto;white-space:normal;overflow-wrap:anywhere;background:none}
.об-т .об-опис,body.м .об-т .об-опис{max-width:none}
.об-т .об-яч-мин,body.м .об-т .об-яч-мин{background:none}
.об .к2__ш,body.м .об .к2 > .к2__ш{flex-wrap:wrap;row-gap:8px}
.об-заг{white-space:nowrap}
.об .к2__ш .sp,body.м .об .к2__ш .sp{display:none}
.об .к2__ш .амелко,body.м .об .к2__ш .амелко{flex-basis:100%;order:3}
}
/* 14.10.2026, вечер · плашки статуса замечаний */
.ац-пл{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;
line-height:1.2;border:1px solid var(--line-2);background:var(--sf-2);color:var(--ink-2);white-space:nowrap}
.ац-пл b{display:inline;font-size:inherit;letter-spacing:0;font-weight:700;color:var(--ink)}
.ац-пл svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ац-пл--ждёт{background:#8A6A1F;border-color:#8A6A1F;color:#fff}
.ац-пл--ждёт b{color:#fff}
.ац-пл--ок{background:#1E5E45;border-color:#1E5E45;color:#fff}
.ац-пл--тих{background:transparent}
.ац-статус{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
body.м .ац-пл svg{max-width:none}
@media screen and (max-width:640px){.ац-пл{white-space:normal}}
/* 14.10.2026 · поиск в реестре оборудования */
.об-поиск{position:relative;display:flex;align-items:center;flex:1 1 220px;max-width:340px;margin-left:auto}
.об-поиск svg{position:absolute;left:10px;width:15px;height:15px;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.об-поиск input{width:100%;height:32px;padding:0 10px 0 32px;border:1px solid var(--line-2);border-radius:8px;
background:var(--sf);color:var(--ink);font:inherit;font-size:13px}
.об-поиск input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.об-т mark{background:#E9D9A6;color:inherit;border-radius:2px;padding:0 1px}
html[data-theme="dark"] .об-т mark{background:#6B5520;color:#fff}
.об-т tr.об-пусто td{padding:18px;text-align:center;color:var(--ink-3)}
body.м .об-поиск svg{max-width:none}
@media screen and (max-width:640px){.об-поиск,body.м .об .об-поиск{flex-basis:100%;max-width:none;order:4}}
/* 14.10.2026 · отметка позиций реестра и удаление оптом */
.об-т td.об-н{cursor:pointer;user-select:none;position:relative}
.об-т td.об-н span{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:6px;
border:1px solid transparent;font-variant-numeric:tabular-nums}
.об-т td.об-н:hover span{border-color:var(--line-2);background:var(--sf)}
.об-т td.об-н--вкл span{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:700}
/* Подсветка мягкая и одна на все строки: полосатая таблица перебивала заливку через строку */
.об-т tbody tr.об-стр--вкл>td,.об-т tbody tr.об-стр--вкл>th,
.тб.об-т tbody tr.об-стр--вкл:nth-child(n)>td,.тб.об-т tbody tr.об-стр--вкл:nth-child(n)>th{background:#E8EEF6;color:var(--ink)}
.тб.об-т tbody tr.об-стр--вкл .об-опис{color:#3E4A5A}
html[data-theme="dark"] .тб.об-т tbody tr.об-стр--вкл:nth-child(n)>td,
html[data-theme="dark"] .тб.об-т tbody tr.об-стр--вкл:nth-child(n)>th{background:#26364B;color:#F1F4F8}
html[data-theme="dark"] .тб.об-т tbody tr.об-стр--вкл .об-опис{color:#C9D3DF}
.об-полоса{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px var(--s4);border-bottom:1px solid var(--line);
background:var(--sf-2)}
.об-полоса b{font-size:13.5px;margin-right:4px}
.об-полоса .sp{flex:1}
/* ═══ Документы службы, 15.10.2026 (замечания Власенко И. В.) ═══════════════
Столбец папок листается сам: у Власенко 80 папок, и прокрутка всей страницы
уводила столбец, а перерисовка сбрасывала его наверх. Подпапки — строками
таблицы над документами, как в Проводнике. */
@media (min-width:1101px){
.эдоска__л--папки{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
}
.эпстрока{cursor:pointer}
.эпстрока td.гл b{font-weight:600;color:var(--ink)}
.эпстрока__з{color:var(--ac)}
.эпстрока__з svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:-3px}
.эвид{display:inline-flex;gap:4px}
.эвид .чип{height:26px;padding:0 9px;font-size:11.5px}
/* overflow:hidden у карточки отключает прилипание панели; clip режет углы так же,
но прокрутку не заводит. */
.к2.к2--док{overflow:clip}
.эотметки--низ{position:sticky;bottom:12px;z-index:3;margin:0 12px 12px;
box-shadow:var(--sh-2, 0 6px 22px rgba(20,30,45,.16))}
/* ═══ Обращения к руководству (15.10.2026) ═══════════════════════════════
Раскладка — как у «Документов службы»: слева отбор по статусу, справа
реестр. На телефоне вместо таблицы карточки. */
.обр-т td{vertical-align:top}
.обр-т .обр-дата span{display:block;white-space:nowrap;line-height:1.35}
.обр-т .обр-кто b{display:block;font-weight:600;color:var(--ink)}
.обр-т .обр-кто span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.обр-т .обр-тема{display:block;font-weight:600;color:var(--ink);line-height:1.35}
.обр-т .обр-суть{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--ink-3)}
.обр-т .обр-кому-т{white-space:nowrap;color:var(--ink-2)}
.обр-т mark,.обр-карта mark{background:color-mix(in srgb,var(--wait) 26%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.обр-карты{display:flex;flex-direction:column;gap:8px;padding:12px}
.обр-карта{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;font:inherit;color:inherit;
padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--sf);
box-shadow:var(--sh-1),var(--hair);transition:border-color var(--t)}
.обр-карта:hover{border-color:var(--line-3)}
.обр-карта__в{display:flex;align-items:center;justify-content:space-between;gap:8px}
.обр-карта__в i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.обр-карта b{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.обр-карта__к{font-size:12px;color:var(--ink-2)}
.обр-карта__с{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
/* Форма и окно обращения */
.обр-ф{display:flex;flex-direction:column;gap:12px}
.обр-ф textarea{min-height:140px}
.обр-кому{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.обр-кому__в{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;
border:1px solid var(--line-2);border-radius:var(--r2);background:var(--sf);transition:border-color var(--t),background var(--t)}
.обр-кому__в:hover{border-color:var(--line-3)}
.обр-кому__в input{accent-color:var(--ac);width:16px;height:16px;margin:0}
.обр-кому__в b{font-size:13.5px;font-weight:600;color:var(--ink)}
.обр-кому__в:has(input:checked){border-color:var(--ac);background:color-mix(in srgb,var(--ac) 7%,var(--sf))}
.обр-кому__в:has(input:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.обр-ш{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.обр-ш b{font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.обр-мета td{padding:6px 10px}
.обр-мета td:first-child{width:120px;color:var(--ink-3);font-size:12px}
.обр-мета td b{font-weight:600;color:var(--ink)}
.обр-мета td span{display:block;font-size:11.5px;color:var(--ink-3)}
.обр-текст{white-space:pre-wrap;font-size:13.5px;line-height:1.55;color:var(--ink)}
.обр-ответ{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r2);
border:1px solid color-mix(in srgb,var(--ok) 36%,var(--line-2));background:color-mix(in srgb,var(--ok) 5%,var(--sf))}
.обр-ответ > b{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ok)}
body.м .обр-кому{grid-template-columns:1fr}
/* Телефон: поиск отдельной строкой — рядом с ним заголовок рвался по слогам. */
body.м .обр .к2 > .к2__ш{flex-wrap:wrap;row-gap:8px}
body.м .обр .к2__ш .sp{display:none}
body.м .обр .об-поиск{flex:1 1 100%;max-width:none}
/* ═══ Перенос документов и файлы рабочего дня в папку проекта (15.10.2026) ═══ */
.эфайл__п{display:flex;align-items:center;gap:4px;width:100%;min-height:22px;padding:2px 6px;font:inherit;
font-size:10.5px;line-height:1.25;text-align:left;color:var(--ink-3);border:1px dashed var(--line-2);
border-radius:6px;background:transparent;cursor:pointer;transition:color var(--t),border-color var(--t)}
.эфайл__п:hover{color:var(--ac);border-color:var(--ac)}
.эфайл__п svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.эфайл__п span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.эфайл__п--есть{border-style:solid;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line-2))}
.эдень-папка{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 2px;padding:8px 10px;
border:1px solid var(--line-2);border-radius:var(--r2);background:var(--sf-2);font-size:12px;color:var(--ink-2)}
.эдень-папка b{color:var(--ink);font-weight:600}
.эдень-папка .к svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:-2px}
.эдень--над{outline:2px dashed var(--ac);outline-offset:-4px}
.эвыбор{display:flex;flex-direction:column;gap:10px}
.эвыбор__поиск{flex:none;max-width:none;margin:0}
.эвыбор__список{display:flex;flex-direction:column;gap:2px;max-height:min(58vh,520px);overflow-y:auto;
border:1px solid var(--line-2);border-radius:var(--r2);padding:4px}
.эвыбор-п{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;font:inherit;text-align:left;
color:var(--ink-2);border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer}
.эвыбор-п:hover{background:var(--sf-3)}
.эвыбор-п.вкл{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--sf));color:var(--ink)}
.эвыбор-п svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;color:var(--ac)}
.эвыбор-п b{font-weight:500;font-size:13px}
.эвыбор-п i{margin-left:auto;font-style:normal;font-size:11px;color:var(--ink-4)}
.эвыбор-п--тут{opacity:.55;cursor:default}
.эвыбор-п__т{display:flex;flex-direction:column;min-width:0}
.эвыбор-п__т em{font-style:normal;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ═══ Обращения как поддержка: категории, переписка, «новое» (15.10.2026) ═══ */
.обр-чипы{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.обр-чипы .чип{height:26px;padding:0 10px;font-size:11.5px}
.обр-новое{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-style:normal;
font-size:10.5px;font-weight:600;letter-spacing:.02em;vertical-align:1px;color:var(--ac);
border:1px solid color-mix(in srgb,var(--ac) 45%,transparent)}
.обр-стр--новое td{background:color-mix(in srgb,var(--ac) 5%,var(--sf))}
.обр-карта--новое{border-color:color-mix(in srgb,var(--ac) 45%,var(--line-2))}
.обр-т .обр-кат-т{white-space:nowrap;color:var(--ink-2);font-size:12px}
.обр-кат{display:flex;flex-wrap:wrap;gap:6px}
.обр-кат .чип{height:30px}
.обр-фпл{margin-bottom:2px}
.обр-над{outline:2px dashed var(--ac);outline-offset:4px;border-radius:var(--r2)}
.обр-мета-строка{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-3)}
.обр-мета-строка b{color:var(--ink-2);font-weight:600}
.обр-лента{display:flex;flex-direction:column;gap:10px;max-height:min(46vh,460px);overflow-y:auto;
padding:12px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--sf-2)}
.обр-сооб{max-width:82%;padding:10px 13px;border:1px solid var(--line-2);border-radius:12px;background:var(--sf);
box-shadow:var(--hair)}
.обр-сооб--ответ{align-self:flex-start;border-color:color-mix(in srgb,var(--ok) 34%,var(--line-2))}
.обр-сооб--моё{align-self:flex-end;border-color:color-mix(in srgb,var(--ac) 34%,var(--line-2));
background:color-mix(in srgb,var(--ac) 5%,var(--sf))}
.обр-сооб__ш{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.обр-сооб__ш b{font-size:12px;font-weight:600;color:var(--ink)}
.обр-сооб__ш span{font-size:11px;color:var(--ink-3)}
.обр-сооб .фпл{margin-top:8px}
body.м .обр-сооб{max-width:94%}
body.м .обр-лента{max-height:none}
/* Обращения: свои категории, отказы загрузки, отступы (15.10.2026, вечер) */
.обр .пусто .к{margin-top:16px}
.обр .к2__ш .к svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;vertical-align:-2px}
.обр-кат__плюс{border-style:dashed}
.обр-отказы:empty{display:none}
.обр-отказы{display:flex;flex-direction:column;gap:3px;margin:6px 0 2px;padding:8px 10px;border-radius:8px;font-size:12px;
color:var(--ink-2);border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line-2));background:color-mix(in srgb,var(--bad) 4%,var(--sf))}
.обр-отказы b{color:var(--bad);font-weight:600}
.обр-переложить{display:inline-flex;align-items:center;gap:6px}
.обр-переложить select{font:inherit;font-size:12px;padding:2px 6px;border:1px solid var(--line-2);border-radius:6px;
background:var(--sf);color:var(--ink)}
/* Обращения: тема — выпадающий список с поиском и «Создать тему»,
категория — обычный список (15.10.2026). Панель раскрывается в потоке
формы: в окне с прокруткой плавающую срезало бы. */
.обр-ф__ряд{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:start}
.обр-ф__ряд--один{grid-template-columns:minmax(0,1fr)}
.обр-выбор{display:flex;flex-direction:column;min-width:0}
.обр-выбор__п{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;width:100%;text-align:left;
border:1px solid var(--line-2);border-radius:var(--r2);background:var(--sf);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;
transition:border-color var(--t),box-shadow var(--t)}
.обр-выбор__п:hover{border-color:var(--line-3)}
.обр-выбор__п:focus-visible,.обр-выбор.откр .обр-выбор__п{outline:none;border-color:var(--ac);
box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.обр-выбор__з{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.обр-выбор__з.пуст{color:var(--ink-4)}
/* Стрелка — та же, что у обычного списка рядом («Категория»). */
.обр-выбор__п{padding-right:26px;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.обр-выбор.откр .обр-выбор__п{
background-image:linear-gradient(135deg,transparent 50%,currentColor 50%),linear-gradient(45deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px}
.обр-выбор__м{margin-top:6px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--sf);
box-shadow:var(--sh-2);overflow:hidden}
.обр-выбор__м[hidden]{display:none}
.обр-выбор__м .об-поиск{flex:none;max-width:none;margin:0;padding:8px;border-bottom:1px solid var(--line)}
.обр-выбор__м .об-поиск svg{left:18px}
.обр-выбор__м .об-поиск input:focus{box-shadow:none}
.обр-выбор__сп{max-height:232px;overflow-y:auto;padding:4px;display:flex;flex-direction:column}
.обр-выбор__г{padding:8px 10px 4px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.обр-выбор__пт{display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:6px;background:none;
font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.обр-выбор__пт:hover,.обр-выбор__пт.акт{background:color-mix(in srgb,var(--ac) 8%,var(--sf))}
.обр-выбор__пт.вкл{font-weight:600;color:var(--ac)}
.обр-выбор__пт.вкл::after{content:'✓';float:right;font-weight:600}
.обр-выбор__пт mark{background:color-mix(in srgb,var(--wait) 26%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.обр-выбор__пусто{padding:10px;font-size:12.5px;color:var(--ink-3)}
.обр-выбор__нов{display:block;width:100%;text-align:left;padding:10px 14px;border:0;border-top:1px solid var(--line);
background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ac);cursor:pointer}
.обр-выбор__нов b{font-weight:700;margin-right:4px}
.обр-выбор__нов:hover{background:color-mix(in srgb,var(--ac) 6%,var(--sf))}
.обр-выбор__нов[hidden]{display:none}
.обр-выбор__нов:disabled{opacity:.6;cursor:progress}
body.м .обр-ф__ряд{grid-template-columns:minmax(0,1fr)}
.обр-т .обр-кто{min-width:150px}
.обр-т .обр-кто b{overflow-wrap:normal;word-break:normal}
/* ═══ Столбец категорий и папок — как на сайте склада (15.10.2026) ═══════
Раиль: «столбец некрасиво оформлен — на складе красиво, сделай так же или
лучше». Строки лежат в одной карточке через тонкие разделители: значок,
название, подпись, число в рамке, стрелка у папок с подпапками. Выбранная
строка — мягкая заливка и полоса главного цвета слева. */
.эсл-гр{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:12px;
background:var(--sf);overflow:hidden;box-shadow:var(--hair)}
.эсл-гр--низ{margin-top:8px}
.эсл-гр .эсл{gap:12px;min-height:54px;padding:10px 12px 10px 14px;border:0;border-radius:0;
background:transparent;box-shadow:none;transition:background var(--t)}
.эсл-гр > .эсл + .эсл{border-top:1px solid var(--line)}
.эсл-гр > .эсл:hover{background:var(--sf-2)}
.эсл-гр > .эсл.вкл{background:color-mix(in srgb,var(--ac) 7%,var(--sf));box-shadow:inset 3px 0 0 var(--ac)}
.эсл-гр .эсл__т b{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink);letter-spacing:-.005em}
.эсл-гр .эсл.вкл .эсл__т b{font-weight:600}
.эсл-гр .эсл__т span{font-size:12px;line-height:1.35;margin-top:2px;color:var(--ink-3)}
.эсл-гр .эсл__т .эсл__нов{color:var(--ac);font-weight:600}
.эсл__з{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--ink-2)}
.эсл__з svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.эсл.вкл .эсл__з{color:var(--ac)}
.эсл-гр .эсл__сч{min-width:32px;height:26px;padding:0 8px;line-height:24px;border-radius:8px;
font-size:12.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-3);background:var(--sf);
font-variant-numeric:tabular-nums}
.эсл-гр .эсл.вкл .эсл__сч{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 45%,var(--line-3))}
.эсл-гр .эсл__сч--тихо{color:var(--ink-3)}
.эсл-гр .эсл--убранное{margin:0;border:0;border-radius:0}
/* Дерево папок: строка — .эстрока (папка + стрелка подпапок справа). */
.эсл-гр--дерево .эветвь,.эсл-гр--дерево .эузел{gap:0}
.эсл-гр--дерево .эстрока{border-top:1px solid var(--line);transition:background var(--t)}
.эсл-гр--дерево > .эветвь > .эузел:first-child > .эстрока{border-top:0}
.эсл-гр--дерево .эстрока:hover{background:var(--sf-2)}
.эсл-гр--дерево .эстрока:has(.эсл.вкл){background:color-mix(in srgb,var(--ac) 7%,var(--sf));box-shadow:inset 3px 0 0 var(--ac)}
.эсл-гр--дерево .эсл{padding-right:4px}
.эсл-гр--дерево .эсл--вложен{padding-left:calc(14px + var(--вложение,1) * 18px)}
.эсл-гр--дерево .эсл--вложен .эсл__з{width:18px}
.эсл-гр--дерево .эсл--вложен .эсл__з svg{width:17px;height:17px}
.эсл-гр--дерево .эветка{order:2;width:32px;font-size:0;color:var(--ink-3)}
.эсл-гр--дерево .эветка::before{content:'';width:7px;height:7px;border-right:1.7px solid currentColor;
border-bottom:1.7px solid currentColor;transform:rotate(-45deg);margin-left:-3px}
.эсл-гр--дерево .эветка--нет{width:12px}
.эсл-гр--дерево .эветка--нет::before{display:none}
.эсл-гр--дерево .эветка--вниз{color:var(--ac)}
@media (max-width:1100px){
.эсл-гр{width:100%}
.эсл-гр .эсл{width:100%;flex:none}
.эсл-гр--дерево .эветвь{flex-direction:column;flex-wrap:nowrap}
.эсл-гр--дерево .эузел{flex:none}
}
/* ═══ Обращение: плашки, текст, переписка, ответ по кнопке (15.10.2026) ══ */
.обр-окно{gap:16px}
.обр-окно .обр-ш b{font-size:18px}
.обр-плашки{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.обр-пл{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border:1px solid var(--line-2);
border-radius:10px;background:var(--sf-2)}
.обр-пл span{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.обр-пл b{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.обр-пл i{font-style:normal;font-size:12px;color:var(--ink-3)}
.обр-пл--выбор select{height:28px;margin-top:1px;font-size:13px;font-weight:500;background-color:var(--sf)}
.обр-исх{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line-2);
border-radius:12px;background:var(--sf);box-shadow:inset 3px 0 0 var(--ac),var(--hair)}
.обр-исх__з{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.обр-исх__з span{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ac)}
.обр-исх__з b{font-size:13px;font-weight:600;color:var(--ink)}
.обр-исх__з i{font-style:normal;font-size:12px;color:var(--ink-3)}
.обр-исх .обр-текст{font-size:14px;line-height:1.6}
.обр-переписка{display:flex;flex-direction:column;gap:8px}
.обр-переписка__з{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink-2)}
.обр-окно .обр-лента{max-height:none}
.обр-пусто{padding:14px 16px;border:1px dashed var(--line-2);border-radius:10px;font-size:13px;color:var(--ink-3)}
.обр-отв-панель{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line-2));
border-radius:12px;background:color-mix(in srgb,var(--ac) 4%,var(--sf));animation:обр-появ .18s ease-out}
.обр-отв-панель[hidden]{display:none}
@keyframes обр-появ{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.обр-низ{align-items:center}
.обр-низ .обр-низ__тихо{margin-right:auto}
/* Форма нового обращения — постоянной высоты: окно не прыгает. */
.обр-окно-ф .окно__к{height:min(880px,92vh)}
.обр-окно-ф .окно__б{flex:1}
/* «Создать тему»: название набрано — кнопка горит главным цветом. */
.обр-выбор__нов.гот{background:var(--ac);color:var(--ac-ink)}
.обр-выбор__нов.гот:hover{background:var(--ac-2)}
.обр-выбор__нов i{float:right;font-style:normal;font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;
border:1px solid color-mix(in srgb,currentColor 45%,transparent);opacity:.85}
.обр-выбор--новая .об-поиск input{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
/* Телефон: плашки по две, кнопки — главное во всю ширину, остальные рядом. */
body.м .обр-плашки{grid-template-columns:1fr 1fr}
body.м .обр-пл{padding:9px 11px}
body.м .обр-окно .обр-ш b{font-size:17px}
body.м .обр-окно-ф .окно__к{height:92dvh}
@media (max-width:600px){
.обр-низ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex-direction:row}
.обр-низ .к{width:100%;margin:0}
.обр-низ .обр-низ__гл{grid-column:1/-1;order:-1}
.обр-низ .к:nth-child(1):nth-last-child(2){grid-column:1/-1}
.обр-окно-ф .окно__к{height:92vh;height:92dvh}
}
/* Столбец со строками-карточками шире: длинные названия папок не ломаются
по слову в строку, подпись переносится, а не обрезается. */
@media (min-width:1101px){ .эдоска:has(.эсл-гр){grid-template-columns:304px minmax(0,1fr)} }
.эсл-гр .эсл__т span{white-space:normal}
.эсл-гр--дерево .эсл--вложен{padding-left:calc(12px + var(--вложение,1) * 14px)}
.эсл-гр .эобщая{margin-left:5px;vertical-align:-1px}
/* ═══ 15.10.2026: компактнее — строки столбца, плашки обращения, крестик ═══ */
/* Строки столбца ниже: «категории стали интересней, но слишком высокие». */
.эсл-гр .эсл{min-height:42px;padding:7px 10px 7px 12px;gap:10px}
.эсл-гр .эсл__т b{font-size:13px}
.эсл-гр .эсл__т span{font-size:11.5px;margin-top:1px}
.эсл__з{width:18px;height:18px}
.эсл__з svg{width:17px;height:17px}
.эсл-гр .эсл__сч{min-width:28px;height:22px;line-height:20px;padding:0 7px;border-radius:7px;font-size:12px}
.эсл-гр--дерево .эветка{width:28px}
/* Крестик в квадрате вместо слова «Закрыть» — во всех окнах. */
.окно__х{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;cursor:pointer;
border:1px solid var(--line-2);border-radius:8px;background:var(--sf);color:var(--ink-2);
transition:border-color var(--t),color var(--t),background var(--t)}
.окно__х:hover{border-color:var(--line-3);color:var(--ink);background:var(--sf-2)}
.окно__х:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.окно__х svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body.м .окно__х{width:38px;height:38px;border-radius:10px}
body.м .окно__х svg{width:18px;height:18px}
/* Обращение: плашки короткие, в одну строку на компьютере. */
.обр-окно{gap:12px}
.обр-плашки{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}
.обр-пл{gap:1px;padding:6px 10px;border-radius:8px}
.обр-пл span{font-size:10px;letter-spacing:.04em}
.обр-пл b{font-size:13px;line-height:1.3}
.обр-пл i{font-size:11.5px;line-height:1.3}
.обр-исх{padding:12px 14px;gap:6px}
.обр-исх .обр-текст{font-size:14px;line-height:1.55}
.обр-файлы{display:flex;flex-direction:column;gap:8px}
.обр-голос{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:-4px}
.обр-голос .эмикро{margin-top:0}
.обр-голос .эчерновик:empty{display:none}
body.м .обр-пл{padding:6px 9px}
body.м .обр-окно .обр-ш b{font-size:16px}
/* «Уведомления на компьютер» — рядом с «Отметить все прочитанными». */
.увед-комп{font-size:12px;color:var(--ink-3);white-space:nowrap}
.увед-комп--вкл{color:var(--ok)}
/* Строка задания открывает карточку (16.10.2026). */
.зад--откр{cursor:pointer;transition:background var(--t)}
.зад--откр:hover{background:var(--sf-2)}
.зад--откр:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.зад__стр{display:grid;place-items:center;width:18px;color:var(--ink-3)}
.зад__стр svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.зкарт__ещё{font-size:11.5px;font-weight:400;color:var(--ink-3)}
/* Раскладка файлов дня по подпапкам (16.10.2026). */
.эдень-авто{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.эдень-авто input{width:15px;height:15px;margin:0;accent-color:var(--ac)}
.эфайл__п--авто i{font-style:normal;font-size:10px;font-weight:600;margin-left:4px;padding:0 5px;border-radius:5px;
color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent)}
.эраскл td{vertical-align:top}
.эраскл .эраскл__п{min-width:220px}
.эраскл__путь{display:block;font-weight:600;color:var(--ink)}
.эраскл__п em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px}
.эраскл__п em.эраскл__нет{color:var(--wait)}
.эраскл__п em.эраскл__руч{color:var(--ok)}
/* Обращения: архив и исходы. */
.обр-чип-архив{border-style:dashed}
/* 16.10.2026, обращение Власенко № 8: «видны первые 6 папок, пролистать
вниз нельзя». Столбец папок — колонка с потолком высоты и своей прокруткой;
карточка строк с overflow:hidden в ней СЖИМАЛАСЬ и обрезала остальное.
Карточка не сжимается — прокручивается столбец. */
.эсл-гр{flex:none}
/* Плашка «Сайт обновлён» (16.10.2026). */
.сайт-обновлён{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:12px;
padding:10px 12px 10px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--sf);box-shadow:var(--sh-3);
font-size:13px;color:var(--ink);max-width:calc(100vw - 32px)}
body.м .сайт-обновлён{bottom:calc(env(safe-area-inset-bottom) + 76px);flex-wrap:wrap}
/* Сортируемые заголовки обращений. */
.обр-т th.обр-сорт{cursor:pointer;user-select:none}
.обр-т th.обр-сорт:hover{color:var(--ink)}
.обр-т th.обр-сорт.вкл{color:var(--ac)}
.обр-карта__в > span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2)}
/* Блоки меню с подписями (16.10.2026): Входящие · Проекты / Моя работа ·
Эксплуатация / Подразделение · Настройки. */
.нав__г{padding:12px 8px 4px;margin-top:6px;border-top:1px solid var(--line);
font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);user-select:none}
.нав__блок{display:flex;flex-direction:column;gap:1px}
.нав__блок:first-child > .нав__г{margin-top:0;padding-top:2px;border-top:0}
/* ═══ Без заливок (16.10.2026) ═══════════════════════════════════════════
Раиль: «убирай все заливки: только цвет букв и тем же цветом обводка по
контуру, круглая или прямоугольная; в пилюлях — тоже только контур».
Счётчики «нового», метки и выбранные пилюли — текст и рамка одного цвета.
Кнопки действий («Отправить», «Создать») здесь не трогаем. */
.нав .сч:not(.сч--тихо){background:transparent;color:var(--ac);border:1px solid currentColor;font-weight:700}
.нав a.вкл .сч:not(.сч--тихо){background:transparent}
.увед__новое,.увид em{background:transparent;color:var(--ac);border:1px solid currentColor}
.обр-новое{border-color:currentColor}
.чип.вкл{background:transparent;border-color:var(--ac);color:var(--ac)}
.кал__д.вкл,.окн.вкл,.авкл.вкл,.ашаг.вкл{background:transparent;color:var(--ac);border-color:var(--ac)}
.асостав__сп li.есть .асостав__н{background:transparent;color:var(--ok);border:1px solid currentColor}
.мнав__сч--нов{color:var(--ac);border-color:currentColor;font-weight:700}
/* ── Документы: обзор, порядок папок, выбор папки деревом (16.10.2026) ── */
.эсорт-папок{margin-left:auto;height:24px;width:auto;max-width:150px;padding:0 22px 0 7px;font-size:11.5px;font-weight:500;
background-position:calc(100% - 12px) 10px,calc(100% - 7px) 10px}
.эсл-гр--дерево > .эсл--все + .эветвь > .эузел:first-child > .эстрока{border-top:1px solid var(--line)}
.эсл-гр--дерево > .эсл--все{padding-right:42px}
.эсл-гр--без-тяги .эсл,.эсл-гр--без-тяги .эузел[data-drag-all] .эсл{cursor:pointer}
.эобзор .эобзор__п{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.эобзор td{vertical-align:middle}
.эвыбор-р{display:flex;align-items:stretch;gap:2px}
.эвыбор-р .эвыбор-п{flex:1;min-width:0}
.эвыбор-ст{flex:none;width:26px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;color:var(--ink-3);border-radius:6px}
.эвыбор-ст:hover{color:var(--ac);background:var(--sf-3)}
.эвыбор-ст svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t)}
.эвыбор-ст--вниз svg{transform:rotate(90deg)}
.эвыбор-ст--вниз{color:var(--ac)}
.эвыбор-ст--нет{cursor:default}
.эвыбор-п.вкл{background:transparent}
/* Столбец папок с потолком высоты: ни подпись, ни кнопка «Создать папку» не
сжимаются — прокручивается сам столбец (16.10.2026). */
.эдоска__л > *{flex:none}