/* styles.css — «Проектный офис» TCM. Палитра и шрифт по стандарту TCM. */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/inter-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+25A0-25FF, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/inter-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+25A0-25FF, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/inter-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+25A0-25FF, U+FEFF, U+FFFD; }

:root {
  --navy: #1B2A4A;
  --navy-2: #4A5D7E;
  --copper: #C0703A;
  --text: #2D2D2D;
  --muted: #6B7280;
  --line: #E5E7EB;
  --line-2: #EEF0F3;
  --bg: #F4F6FA;
  --card: #FFFFFF;

  --ph-init: #D5DBE6;
  --ph-plan: #9AA8C0;
  --ph-exec: #4A5D7E;
  --ph-launch: #1B2A4A;

  --g: #2E7D52;
  --y: #C9862B;
  --r: #C0392B;

  --name-w: 290px;
  --eol-w: 250px;
  --st-w: 64px;
  --num-w: 30px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px; line-height: 1.45; color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy); }

/* ---------- шапка ---------- */
.top {
  display: flex; align-items: center; gap: 32px;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 12px 24px; position: sticky; top: 0; z-index: 20;
}
.top-title h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.top-sub { font-size: 12px; color: var(--muted); }
.tabs { display: flex; gap: 4px; flex: 1; align-self: stretch; align-items: flex-end; }
.tabs a {
  text-decoration: none; color: var(--muted); font-weight: 600;
  padding: 8px 14px 12px; border-bottom: 2px solid transparent; margin-bottom: -13px;
}
.tabs a:hover { color: var(--navy); }
.tabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
.top-logo { height: 52px; width: auto; display: block; }

main { padding: 20px 24px 32px; }

/* ---------- общие элементы ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.card + .card { margin-top: 16px; }
.card-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--navy); }
.card-h .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; flex: none; align-self: center;
}
.card-h .hint { color: var(--muted); font-size: 12px; }
.card-h .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.btn {
  border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 7px 14px; font-weight: 600; cursor: pointer; color: var(--navy);
}
.btn:hover { border-color: var(--navy-2); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: #24375f; }
.btn.primary:disabled { background: #AEB6C6; border-color: #AEB6C6; cursor: not-allowed; }
.btn.link { border: none; background: none; padding: 4px 6px; color: var(--muted); font-weight: 500; text-decoration: underline; }
.btn.link:hover { color: var(--navy); }
.btn.small { padding: 4px 10px; font-size: 12px; }

.banner {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy-2);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; color: var(--muted); font-size: 12px;
}
.banner b { color: var(--text); }

.tag {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--navy-2);
  background: #EEF1F6; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.tag.demo { color: #fff; background: var(--muted); letter-spacing: .04em; }

.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; flex: none; }
.dot.g { background: var(--g); }
.dot.y { background: var(--y); }
.dot.r { background: var(--r); }
.dot.none { background: #fff; border: 2px solid #C5CAD3; }

.muted { color: var(--muted); }
.warn { color: var(--r); }

/* ---------- KPI ---------- */
.kpis { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; min-width: 150px; }
.kpi .v { font-size: 20px; font-weight: 700; color: var(--navy); }
.kpi .v small { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi .l { font-size: 12px; color: var(--muted); }
.kpi .rag { display: flex; gap: 14px; align-items: center; font-size: 20px; font-weight: 700; color: var(--navy); }
.kpi .rag span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- дорожная карта ---------- */
.rm-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.rm-head h2 { margin: 0; font-size: 18px; color: var(--navy); }
.rm-head .sub { color: var(--muted); font-size: 12px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); margin-left: auto; }
.legend .it { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .sw { width: 18px; height: 9px; border-radius: 2px; display: inline-block; }
.legend .today-sw { width: 2px; height: 12px; background: var(--copper); display: inline-block; }

.rm { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.rm > .rm-row { min-width: calc(var(--num-w) + var(--name-w) + var(--eol-w) + var(--st-w) + 560px); }
.rm-row { display: flex; align-items: stretch; border-top: 1px solid var(--line-2); min-height: 34px; }
.rm-row.proj { cursor: pointer; }
.rm-row.proj:hover { background: #F8F9FB; }
.rm-row.hdr { border-top: none; background: #fff; min-height: 0; }
.rm-row.blk { background: var(--bg); min-height: 26px; border-top: 1px solid var(--line); }
.rm-row.blk .c-name { font-weight: 700; color: var(--navy); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.rm-row.blk .c-name small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); margin-left: 6px; }

.c-num, .c-name, .c-eol, .c-st { display: flex; align-items: center; padding: 4px 8px; flex: none; }
.c-num { width: var(--num-w); justify-content: flex-end; color: var(--muted); font-size: 12px; padding-right: 4px; }
.c-name { width: var(--name-w); gap: 6px; font-weight: 600; min-width: 0; }
.c-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-eol { width: var(--eol-w); font-size: 12px; min-width: 0; }
.c-eol span { overflow: hidden; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.c-eol .tbd { color: var(--muted); font-style: italic; }
.eol-d { font-style: italic; color: #4B5563; }
/* ЕОЛ в портфеле: текст «Фамилия (Служба)», стрелка подсказывает, что можно выбрать; сам список — прозрачный поверх */
.eol-wrap { position: relative; display: flex; align-items: center; min-width: 0; width: 100%;
  height: min(22px, calc(var(--row-h, 34px) - 2px)); padding: 0 18px 0 4px; margin-left: -4px; cursor: pointer;
  border: 1px solid transparent; border-radius: 4px; background: transparent no-repeat right 5px center / 9px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23AEB6C6' stroke-width='1.5'/%3E%3C/svg%3E"); }
.eol-wrap:hover, .eol-wrap:focus-within { border-color: #D5D9E0; background-color: #fff; }
.c-eol .eol-txt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--text); }
.eol-wrap.draft .eol-txt { font-style: italic; color: #4B5563; }
.eol-wrap.empty .eol-txt { color: var(--muted); font-style: italic; }
.eol-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 0; font: inherit; font-size: 12px; }
.eol-sel option { font-style: normal; color: var(--text); }
.ceo .btn.link { padding: 0 2px; font-size: inherit; color: var(--navy); font-weight: 600; }
.c-st { width: var(--st-w); justify-content: center; }
.c-tl { flex: 1; position: relative; min-width: 560px; }
.rm-row.blk .c-name { width: calc(var(--name-w) + var(--eol-w) + var(--st-w)); }

.hdr .c-num, .hdr .c-name, .hdr .c-eol, .hdr .c-st {
  font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; align-items: flex-end; padding-bottom: 6px;
}
.tl-years { display: flex; height: 22px; }
.tl-years div { border-left: 1px solid var(--line); font-weight: 700; color: var(--navy); font-size: 12px; padding: 3px 6px; overflow: hidden; white-space: nowrap; }
.tl-months { display: flex; height: 22px; border-top: 1px solid var(--line-2); }
.tl-months div { flex: 1; text-align: center; font-size: 11px; color: var(--muted); border-left: 1px solid var(--line-2); padding-top: 3px; white-space: nowrap; overflow: hidden; }
.tl-months div.q { border-left-color: var(--line); }

.grid-v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.grid-v.q { background: var(--line); }
.today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--copper); z-index: 3; margin-left: -1px; }
.today.from-badge { top: 50%; }
/* плашка с датой в первой строке под шапкой шкалы; линия «сегодня» идёт через её середину */
.today-badge { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 4; background: var(--copper); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; padding: 0 6px; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prm-row.today-row { min-height: 22px; }
.today-lbl { position: absolute; top: 2px; font-size: 10px; font-weight: 700; color: var(--copper); transform: translateX(-50%); background: #fff; padding: 0 3px; z-index: 4; white-space: nowrap; }

.seg { position: absolute; top: 50%; height: 12px; margin-top: -6px; z-index: 2; }
.seg.first { border-radius: 3px 0 0 3px; }
.seg.last { border-radius: 0 3px 3px 0; }
.seg.first.last { border-radius: 3px; }
.seg.init { background: var(--ph-init); }
.seg.plan { background: var(--ph-plan); }
.seg.exec { background: var(--ph-exec); }
.seg.launch { background: var(--ph-launch); }
.seg:not(.first) { border-left: 2px solid #fff; }   /* белый разделитель между соседними этапами */
.seg.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.seg.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* вехи — объёмные ромбы с бликом: предстоит — бледно-жёлтый, выполнена — зелёный, просрочена — красный с пульсацией */
.ms { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); z-index: 5;
  border-radius: 2px; border: 1px solid #CDB15A;
  background: linear-gradient(135deg, #FFFBEA 0%, #F8E9AE 45%, #E2C56E 100%);
  box-shadow: 1px 1px 2px rgba(27, 42, 74, .35), inset -1px -1px 1px rgba(0, 0, 0, .12); }
.ms::after { content: ''; position: absolute; left: 1px; top: 1px; width: 60%; height: 60%; border-radius: 1px; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .4) 40%, rgba(255, 255, 255, 0) 75%); }
.ms.done { border-color: #23683F; background: linear-gradient(135deg, #A6E0BD 0%, #44A26C 50%, #22663E 100%); }
.ms.late { border-color: #9C2A25; background: linear-gradient(135deg, #F7B4B0 0%, #D9534F 50%, #9C2A25 100%); }
.ms.late::before { content: ''; position: absolute; inset: -2px; border: 2px solid rgba(192, 57, 43, .75); border-radius: 2px;
  pointer-events: none; animation: ms-pulse 1.6s ease-out infinite; }
@keyframes ms-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ms.late::before { animation: none; opacity: .5; } }

.slip { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--y); white-space: nowrap; z-index: 2; }
.empty-plan { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: #A0A6B1; font-style: italic; z-index: 2; }

/* портфель на один экран: строки подгоняются под окно (--row-h задаёт fitPortfolio) */
.pf main { padding: 10px 24px 8px; }
.pf .foot { display: none; }
.pf-top { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.pf-title h2 { margin: 0; font-size: 18px; line-height: 1.2; color: var(--navy); }
.pf-title .sub { color: var(--muted); font-size: 12px; line-height: 1.3; }
.kchips { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.kc { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 3px 12px; }
.kc b { font-size: 18px; color: var(--navy); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.kc b small { font-size: 12px; color: var(--muted); font-weight: 600; }
.kc b.rag .dot { width: 10px; height: 10px; margin-left: 4px; }
.kc b.rag .dot:first-child { margin-left: 0; }
.kc span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.rm { --row-h: 34px; }
/* полосы портфеля выше — ромбы вех помещаются внутри полосы; размеры следуют за высотой строки */
.rm .seg { height: min(20px, calc(var(--row-h) - 4px)); margin-top: 0; transform: translateY(-50%); }
.rm .ms { width: min(10px, calc((var(--row-h) - 9px) * .7)); height: min(10px, calc((var(--row-h) - 9px) * .7));
  margin: 0; transform: translate(-50%, -50%) rotate(45deg); }
.rm-row.proj { min-height: var(--row-h); }
.rm-row.proj .c-num, .rm-row.proj .c-name, .rm-row.proj .c-eol, .rm-row.proj .c-st { padding-top: 0; padding-bottom: 0; line-height: 1.25; }
.pf .rm-row.blk { min-height: 20px; }
.pf .tl-years, .pf .tl-months { height: 20px; }
.pf .tl-years div, .pf .tl-months div { padding-top: 2px; }
.pf-foot { padding-top: 4px; }
.pf-line { display: flex; align-items: center; gap: 16px; }
.pf-line .legend { margin-left: 0; }
.pf-line .src { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.pf-notes { font-size: 11px; color: var(--muted); margin-top: 3px; }
.pf-notes i { font-style: normal; margin: 0 6px; }
.pf-notes .btn.link { padding: 0; font-size: inherit; }
.rm-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; padding: 8px 2px 0; }
.rm-foot b { color: var(--y); }
.legend .ms { position: relative; top: auto; margin: 0 3px; display: inline-block; }
.legend .dot { width: 10px; height: 10px; margin-right: -3px; }
.tx { white-space: pre-line; }

/* ---------- страница проекта ---------- */
.back { display: inline-block; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 12.5px; padding-right: 12px; border-right: 1px solid var(--line); white-space: nowrap; }
.back:hover { color: var(--navy); }
.p-head { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 6px; flex-wrap: wrap; }
.p-head h2 { margin: 0; font-size: 20px; line-height: 1.2; color: var(--navy); white-space: nowrap; }
.p-head .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-left: 4px; min-width: 0; }
.p-head .meta .full { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-head .st { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.p-head .st b { font-size: 13px; color: var(--text); }

.p-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.p-grid .full { grid-column: 1 / -1; }
.p-grid .card + .card { margin-top: 0; }
.p-grid .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.fld { margin-bottom: 12px; }
.fld:last-child { margin-bottom: 0; }
.fld label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }
.fld .h { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.fld .ceo { font-size: 11.5px; color: var(--navy-2); background: #EEF1F6; border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; }
.fld .ceo b { font-weight: 600; }
.fld input[type=text], .fld textarea, .fld select, .tbl input[type=text] {
  width: 100%; border: 1px solid #D5D9E0; border-radius: 6px; padding: 6px 9px; background: #fff;
}
.fld textarea { min-height: 54px; resize: vertical; }
.fld input:focus, .fld textarea:focus, .fld select:focus, .tbl input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(74, 93, 126, .14); }
.fld-row { display: flex; gap: 10px; }
.fld-row > * { flex: 1; }
.money { display: flex; gap: 6px; }
.money input { flex: 1; text-align: right; }
.money select { width: 84px; flex: none; }
.pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 28px; gap: 8px; align-items: center; margin-bottom: 6px; }
/* служба — в скобках после ФИО (Олег 30.10.2026) */
.pair .paren { display: flex; align-items: center; gap: 3px; min-width: 0; }
.pair .paren::before, .pair .paren::after { color: var(--muted, #6B7280); font-size: 16px; line-height: 1; }
.pair .paren input { flex: 1; min-width: 0; }
.pair .paren::before { content: "("; }
.pair .paren::after { content: ")"; }
.pair input { width: 100%; border: 1px solid #D5D9E0; border-radius: 6px; padding: 6px 9px; background: #fff; }
.pair input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(74, 93, 126, .14); }
.fld .pair + .ceo { margin-top: 6px; }
.money .cur { flex: none; align-self: center; font-weight: 600; color: var(--muted); width: 40px; }
.draft-note { font-size: 12px; color: #7A4A1F; background: #FBF1E8; border: 1px solid #F0D5BD; border-radius: 6px; padding: 8px 10px; }
.draft-note .btn.link { padding: 0 2px; font-size: inherit; color: var(--navy); font-weight: 600; }

/* таблицы этапов и вех */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 8px 6px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .ph-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tbl .ph-name i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.tbl .ph-hint { font-size: 11.5px; color: var(--muted); }
.tbl .ro { color: var(--muted); white-space: nowrap; }
.tbl .shift { font-size: 11px; font-weight: 700; color: var(--y); white-space: nowrap; }
.tbl .shift.ok { color: var(--g); }
.tbl td.w-date { width: 150px; }
.tbl td.w-chk { width: 70px; text-align: center; }
.tbl td.w-del { width: 30px; text-align: center; }
.tbl .ms-n { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #EEF1F6; color: var(--navy); font-size: 11px; font-weight: 700; align-items: center; justify-content: center; }
.del { border: none; background: none; color: #A0A6B1; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
.del:hover { color: var(--r); }

/* план: этапы с вложенными вехами */
.phase { border: 1px solid var(--line); border-left: 4px solid var(--phc); border-radius: 8px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.phase.ph-init { --phc: var(--ph-init); }
.phase.ph-plan { --phc: var(--ph-plan); }
.phase.ph-exec { --phc: var(--ph-exec); }
.phase.ph-launch { --phc: var(--ph-launch); }
.phase-h { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: #F8F9FB; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.ph-title { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 260px; }
.ph-title i { width: 14px; height: 10px; border-radius: 2px; background: var(--phc); flex: none; margin-top: 4px; }
.ph-title b { font-size: 14px; color: var(--navy); }
.ph-title .ph-hint { font-size: 11.5px; color: var(--muted); }
.ph-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-l { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ph-dates .ro { min-width: 76px; }
.ph-dates .shift { display: inline-block; min-width: 52px; }
.ph-dates .pd-l + .ro, .ph-dates .pd-l + .df { margin-right: 6px; }
.phase .ms-tbl { table-layout: fixed; margin: 4px 0 0; }
.phase .ms-tbl th { padding-top: 6px; }
.phase .ms-tbl td:first-child, .phase .ms-tbl th:first-child { padding-left: 14px; }
.ph-empty { padding: 10px 14px 4px; font-size: 12px; color: var(--muted); font-style: italic; }
.ph-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px 12px; }
.ph-add .pd-l { margin-right: 4px; }
.chip { border: 1px dashed #AEB6C6; border-radius: 14px; padding: 3px 11px; font-size: 12px; background: #fff; color: var(--navy); cursor: pointer; }
.chip:hover { border-style: solid; border-color: var(--navy-2); background: #EEF1F6; }
.chip.own { border-style: solid; color: var(--muted); }
.ms-warn { font-size: 11px; color: var(--y); font-weight: 600; margin-top: 2px; }
.ms-warn:empty { display: none; }

/* дорожная карта проекта остаётся на месте при прокрутке страницы (под шапкой приложения) */
.p-top { position: sticky; top: var(--top-h, 77px); z-index: 12; background: var(--bg); margin: -20px -24px 0; padding: 14px 24px 12px; }
.p-top .ptabs { margin-bottom: 0; }
.p-grid > .rm-sticky { position: sticky; top: calc(var(--top-h, 77px) + var(--ptop-h, 80px)); z-index: 10; box-shadow: 0 8px 14px -10px rgba(27, 42, 74, .35); }
.p-grid > .rm-sticky.no-stick { position: static; box-shadow: none; }

/* сворачиваемый раздел «План проекта» */
.collapsible .card-h.toggle { cursor: pointer; margin-bottom: 0; user-select: none; }
.collapsible.open .card-h.toggle { margin-bottom: 12px; }
.collapsible:not(.open) .plan-inner { display: none; }
.collapsible .card-h.toggle:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.tgl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--navy-2); white-space: nowrap; }
.tgl i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .15s; }
.collapsible.open .tgl i { transform: rotate(-135deg); margin-top: 3px; }

/* вкладки страницы проекта */
.ptabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.ptabs a { text-decoration: none; color: var(--muted); font-weight: 600; padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.ptabs a:hover { color: var(--navy); }
.ptabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
.ptabs .cnt { background: var(--y); color: #fff; border-radius: 9px; font-size: 10.5px; font-weight: 700; padding: 0 6px; line-height: 16px; }
.ptabs .cnt[hidden] { display: none; }

/* базовый план и журнал */
.bl-tbl td, .log-tbl td { font-size: 12.5px; }
.bl-tbl .c, .log-tbl .c { text-align: center; }
.bl-tbl .ph-row td { font-weight: 600; }
.bl-tbl .sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.bl-tbl .ms-c { padding-left: 34px; }
.bl-tbl tr.extra td { background: #FBFBFD; }
td.dev { font-weight: 700; white-space: nowrap; color: var(--muted); }
td.dev.late { color: var(--y); }
td.dev.early { color: var(--g); }
td.dev.over { color: var(--r); }
.rm-foot b.late { color: var(--r); }
.ms-tbl .shift { font-size: 10.5px; margin-top: 2px; }
/* переносы сроков */
.moved { font-size: 11.5px; color: var(--y); font-weight: 600; white-space: nowrap; }
.moved b, .moved-t { color: var(--y); }
.ph-dates .moved { margin-left: 4px; }
.mv-btn { font-size: 11.5px; padding: 0; margin-top: 2px; }
.ms-lbl .dt .mv { color: var(--y); font-weight: 700; }
.moved.early, .moved.early b, .ms-lbl .dt .mv.early, .slip .early { color: var(--g); }
.slip .late { color: var(--r); }
.modal.mid { max-width: 640px; }
.modal.wide { max-width: 1180px; }
.pass-btn.need { border-color: var(--copper); }
.pass-btn .pc.late { color: var(--r); font-weight: 600; }
.mv-dates { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 14px; }
.mv-dates .pd-l { margin-bottom: 4px; }
.mv-from { font-size: 15px; font-weight: 600; padding: 6px 0; font-variant-numeric: tabular-nums; }
.mv-x .shift { font-size: 14px; }
#mv-list { border: 1px solid var(--line); border-radius: 8px; max-height: 210px; overflow-y: auto; }
.mv-it { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--line-2); cursor: pointer; font-size: 12.5px; }
.mv-it:first-child { border-top: none; }
.mv-it .nm { flex: 1; font-weight: 600; }
.mv-it .ro { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mv-it .ro b { color: var(--y); }
.mv-phases { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.mv-phases b { color: var(--y); }
.mv-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.mv-btn.undo { color: var(--r); margin-left: 10px; }
.log-tbl .mv-btn.undo { margin-left: 0; }
.cancelled { text-decoration: line-through; color: var(--muted); }
.log-tbl .nw { white-space: nowrap; }
.tag.ok { color: #fff; background: var(--g); }
.modal.small { max-width: 520px; }
.rs-change { font-size: 15px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.shift { font-size: 11px; font-weight: 700; color: var(--y); white-space: nowrap; }
.shift.ok { color: var(--g); }
.rs-change .shift { margin-left: 6px; font-size: 13px; }
.card .kpis { margin-bottom: 14px; }
.card .kpi { background: #F8F9FB; }

/* кнопка и окно паспорта */
.pass-btn { display: inline-flex; align-items: center; gap: 8px; }
.ptabs-r { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-bottom: 5px; }
.pass-btn .pc { font-weight: 500; color: var(--g); font-size: 12px; }
.pass-btn .pc.part { color: var(--muted); }
.modal-bg { position: fixed; inset: 0; background: rgba(27, 42, 74, .35); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; }
.modal-bg[hidden] { display: none; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 760px; box-shadow: 0 12px 40px rgba(27, 42, 74, .25); }
.modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.modal-h h2 { margin: 0; font-size: 18px; color: var(--navy); }
.modal-h .hint { font-size: 12px; color: var(--muted); }
.modal-h .x { margin-left: auto; border: none; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.modal-h .x:hover { color: var(--navy); }
.modal-b { padding: 16px 22px; }
.modal-f { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 22px 18px; border-top: 1px solid var(--line); }

.fix-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.fix-bar .lock { color: var(--navy); font-weight: 600; }

/* поле даты ДД.ММ.ГГГГ + календарь */
.df { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 140px; }
.df input.df-t { width: 100%; border: 1px solid #D5D9E0; border-radius: 6px; padding: 6px 30px 6px 9px; background: #fff; font-variant-numeric: tabular-nums; }
.df input.df-t:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(74, 93, 126, .14); }
.df input.df-t.bad { border-color: var(--r); background: #FDF3F2; }
.df input.df-t.out { border-color: var(--y); background: #FCF6EC; }
.df .df-b { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; padding: 4px; color: var(--muted); display: flex; }
.df .df-b:hover { color: var(--navy); }
.df input.df-n { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

.chk { width: 16px; height: 16px; accent-color: var(--g); cursor: pointer; }

.check-msg { margin-top: 10px; font-size: 12px; color: var(--r); }
.check-msg:empty { display: none; }

/* мини-карта проекта */
.prm { position: relative; }
.prm-row { display: flex; align-items: stretch; min-height: 34px; border-top: 1px solid var(--line-2); }
.prm-row.hdr { border-top: none; }
.prm-row .lbl { width: 150px; flex: none; display: flex; align-items: center; font-size: 12px; color: var(--muted); font-weight: 600; padding-right: 10px; }
.prm-row .c-tl { min-width: 480px; }
.prm .seg { height: 18px; margin-top: -9px; font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.prm .seg.init, .prm .seg.plan { color: var(--navy); }
.prm .seg.exec, .prm .seg.launch { color: #fff; }
.prm .base .seg { height: 8px; margin-top: -4px; opacity: .55; font-size: 0; padding: 0; }
.prm .seg.nolbl { color: transparent !important; }
.prm .ms { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.prm-row.ms-row { min-height: 46px; }
.prm-row.ms-row .ms { top: 14px; }
.prm-row.ms-row .lbl { align-items: flex-start; padding-top: 7px; }
.ms-lead { position: absolute; top: 23px; width: 1px; height: 13px; margin-left: -.5px; background: #AEB6C6; z-index: 4; }
.ms-lbl { position: absolute; left: 0; top: 24px; z-index: 5; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px 3px; text-align: center;
  max-width: 150px; display: flex; flex-direction: column; align-items: center; cursor: default; }
.ms-lbl .nm { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ms-lbl .dt { font-size: 10px; font-weight: 500; line-height: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-lbl.done { color: var(--g); border-color: #CDE5D6; }
.ms-lbl.done .dt { color: var(--g); }
.ms-lbl.late { color: var(--r); border-color: #F0CFCB; }
.ms-lbl.late .dt { color: var(--r); font-weight: 700; }

/* статус */
.rag-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rag-pick button {
  border: 1.5px solid var(--line); border-radius: 8px; background: #fff; text-align: left; padding: 8px 10px; cursor: pointer;
}
.rag-pick button b { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 2px; }
.rag-pick button span { font-size: 11.5px; color: var(--muted); display: block; line-height: 1.35; }
.rag-pick button:hover { border-color: #AEB6C6; }
.rag-pick button.on.g { border-color: var(--g); background: #F1F8F4; }
.rag-pick button.on.y { border-color: var(--y); background: #FCF6EC; }
.rag-pick button.on.r { border-color: var(--r); background: #FCF1F0; }
.st-next { font-size: 12px; color: var(--muted); }
.st-next.late { color: var(--r); font-weight: 600; }

.hist { margin-top: 4px; }
.hist-it { display: grid; grid-template-columns: 110px 1fr 1fr 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; }
.hist-it:first-child { border-top: none; }
.hist-it .d { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.hist-it .d .dot { margin-top: 3px; }
.hist-it .k { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.hist-empty { color: var(--muted); font-style: italic; padding: 6px 0; }

/* ---------- контроль статусов ---------- */
.st-tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.st-tbl th { background: var(--navy); color: #fff; text-align: left; font-size: 11.5px; font-weight: 600; padding: 9px 12px; }
.st-tbl td { padding: 9px 12px; border-top: 1px solid var(--line-2); vertical-align: top; }
.st-tbl tr:nth-child(even) td { background: #FAFBFC; }
.st-tbl tr.click { cursor: pointer; }
.st-tbl tr.click:hover td { background: #F1F3F7; }
.st-tbl .nm { font-weight: 600; }
.st-tbl .late { color: var(--r); font-weight: 600; }

/* ---------- как работать ---------- */
.guide { max-width: 1180px; }
.guide .lead { font-size: 14px; color: var(--text); margin: 0 0 16px; max-width: 860px; }
.g-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.g-role { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.g-role h3 { margin: 0 0 4px; font-size: 14px; color: var(--navy); }
.g-role p { margin: 0; color: var(--muted); font-size: 12.5px; }
.g-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 16px; }
.g-rule { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.g-rule h3 { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; font-size: 14px; color: var(--navy); }
.g-rule h3 .num { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; align-items: center; justify-content: center; flex: none; }
.g-rule p { margin: 0 0 6px; font-size: 12.5px; }
.g-rule p:last-child { margin-bottom: 0; }
.g-rule .ex { font-size: 12px; color: var(--muted); }
.g-rule .ex b.ok { color: var(--g); }
.g-rule .ex b.no { color: var(--r); }
.g-rule ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.g-rule li { margin-bottom: 3px; }
.g-rhythm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.g-rhythm .it { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.g-rhythm .when { font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.g-rhythm .what { font-size: 12.5px; color: var(--muted); }
.g-h { font-size: 15px; color: var(--navy); margin: 20px 0 10px; }
.g-note { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 12.5px; color: var(--muted); }

/* ---------- подвал, подсказки ---------- */
.foot { padding: 0 24px 20px; color: var(--muted); font-size: 11.5px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tip {
  position: fixed; z-index: 50; pointer-events: none; display: none;
  background: var(--navy); color: #fff; border-radius: 6px; padding: 6px 9px; font-size: 12px; max-width: 280px; line-height: 1.4;
}
.tip b { font-weight: 700; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 8px; font-weight: 600; transition: all .2s; z-index: 60; pointer-events: none;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.saved { font-size: 11.5px; color: var(--g); font-weight: 600; opacity: 0; transition: opacity .3s; }
.saved.on { opacity: 1; }

/* ---------- печать: слайд для CEO (A4 альбом) ---------- */
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  .ms.late::before { display: none; }
  .p-grid > .rm-sticky, .p-top { position: static; box-shadow: none; }
  body { background: #fff; font-size: 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .top { position: static; padding: 0 0 6px; border: none; gap: 0; justify-content: space-between; }
  .tag { font-size: 8.5px; padding: 0 4px; }
  .c-eol { font-size: 10px; }
  .rm-head { margin-bottom: 6px; }
  .tabs, .foot, .no-print, .banner, .kpis, .tip, .toast { display: none !important; }
  .top-title h1 { font-size: 16px; }
  .top-sub { font-size: 9px; }
  .top-logo { height: 34px; }
  .rm-foot { padding-top: 4px; font-size: 9px; }
  main { padding: 0; }
  :root { --name-w: 230px; --eol-w: 215px; --st-w: 48px; --num-w: 22px; }
  .rm { border-radius: 0; overflow: visible; }
  .rm > .rm-row { min-width: 0; }
  .rm-row { min-height: 21px; }
  .rm-row.proj { min-height: 21px !important; }
  .rm { --row-h: 21px !important; }
  .eol-wrap { background-image: none !important; border: none; padding-right: 0; }
  .pf main { padding: 0; }
  .pf-title h2 { font-size: 14px; }
  .pf-notes, .pf-line .src { font-size: 9px; }
  .legend { font-size: 9.5px; }
  .rm-row.blk { min-height: 17px; }
  .c-num, .c-name, .c-eol, .c-st { padding-top: 2px; padding-bottom: 2px; }
  .c-tl { min-width: 0; }
  .rm-head h2 { font-size: 14px; }  .rm-row.proj:hover { background: none; }
}

/* ---------- серверный режим (sync.js, 03.11.2026): вход, «Кто вы», плашка пользователя, только просмотр ---------- */
#srv-gate, .srv-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center;
  padding: 9vh 16px 24px; overflow-y: auto; background: var(--bg); }
#srv-gate[hidden] { display: none; }
.srv-modal { background: rgba(27, 42, 74, .35); }
.srv-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 26px; box-shadow: 0 12px 40px rgba(27, 42, 74, .12); }
.srv-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.srv-brand img { height: 46px; }
.srv-brand b { display: block; font-size: 19px; color: var(--navy); }
.srv-brand span { font-size: 12px; color: var(--muted); }
.srv-f { display: flex; flex-direction: column; gap: 10px; }
.srv-f label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--navy); }
.srv-f input[type="password"] { border: 1px solid #D5D9E0; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px; }
.srv-f input[type="password"]:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(74, 93, 126, .14); }
.srv-f .btn { justify-content: center; padding: 8px 14px; }
.srv-card > .btn { width: 100%; justify-content: center; margin-top: 10px; }
.srv-q { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.srv-h { font-size: 12px; color: var(--muted); line-height: 1.45; }
.srv-card > .srv-h { margin-top: 4px; }
.srv-err { min-height: 16px; font-size: 12.5px; color: var(--r); font-weight: 600; }
.srv-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; margin: 4px 0; }
.srv-f .srv-opt { flex-direction: row; align-items: flex-start; gap: 10px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; font-weight: 400; color: var(--text); }
.srv-opt:hover { border-color: var(--navy-2); }
.srv-opt:has(input:checked) { border-color: var(--navy); background: #F4F6FA; }
.srv-opt input { margin-top: 3px; }
.srv-opt b { display: block; font-size: 13.5px; color: var(--navy); }
.srv-opt small { display: block; font-size: 11.5px; color: var(--muted); }
.srv-opt.adm { margin-top: 6px; border-style: dashed; }
.srv-apw[hidden] { display: none !important; }
.srv-me { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.srv-me .srv-u b { color: var(--navy); }
.srv-st { margin-right: 10px; padding-left: 12px; position: relative; }
.srv-st::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--g); }
.srv-st.busy::before { background: var(--y); }
.srv-st.err { color: var(--r); font-weight: 600; }
.srv-st.err::before { background: var(--r); }
.ro-note { margin: 6px 0 2px; padding: 5px 10px; border-radius: 6px; background: #F8F0E4; color: #8A5A1C; font-size: 12px; font-weight: 600; }
.upd-note { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 61; padding: 8px 10px 8px 16px;
  border-radius: 8px; background: var(--navy); color: #fff; font-size: 12.5px; box-shadow: 0 6px 20px rgba(27, 42, 74, .25); }
.upd-note .btn.link { color: #fff; font-weight: 700; }
body.ro #view input:disabled, body.ro #view textarea:disabled, body.ro #view select:disabled { color: var(--text); background-color: #F7F8FA; cursor: default; }
body.ro #view button:disabled, #view .pair input:disabled { cursor: not-allowed; }
body.ro #view button:disabled:not(.btn.link) { opacity: .45; }
#view .pair input:disabled { color: var(--text); background: #F7F8FA; }
.eol-wrap:has(.eol-sel:disabled) { background-image: none; cursor: pointer; }
.eol-wrap:has(.eol-sel:disabled):hover { border-color: transparent; background-color: transparent; }
.eol-sel:disabled { pointer-events: none; }

/* ---------- печать паспорта проекта: бланк A4 книжный (Олег 01.11.2026; лист задаёт passPrintOn) ---------- */
.modal-f .pp-btn { margin-right: auto; }
#pass-print { display: none; }
@media print {
  body.print-pass > :not(#pass-print) { display: none !important; }
  body.print-pass #pass-print { display: block; }
}
#pass-print { font-size: 10.5pt; line-height: 1.4; color: var(--text); }
#pass-print .pp-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 9mm; }
#pass-print .pp-logo { height: 18mm; }
#pass-print .pp-ok { flex: none; min-width: 80mm; font-size: 9.5pt; }   /* ширина — по строке подписи и даты */
#pass-print .pp-ok b { display: block; margin-bottom: 8mm; color: var(--navy); text-transform: uppercase; letter-spacing: .08em; }
#pass-print .pp-ln { display: block; border-bottom: 1px solid var(--text); }
#pass-print .pp-cap { margin-top: 1mm; font-size: 7.5pt; color: var(--muted); text-align: center; }
#pass-print .pp-sig { display: flex; align-items: flex-start; gap: 5mm; margin-top: 7mm; font-size: 9.5pt; white-space: nowrap; }
#pass-print .pp-sl { width: 30mm; padding-top: 1.1em; flex: none; }
#pass-print h1 { margin: 0 0 1.5mm; font-size: 17pt; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; }
#pass-print .pp-draft { margin-left: 3mm; padding: .4mm 2mm; border: 1px solid var(--copper); border-radius: 1mm;
  font-size: 8pt; color: var(--copper); letter-spacing: .06em; vertical-align: middle; }
#pass-print .pp-name { font-size: 13pt; font-weight: 600; color: var(--navy); }
#pass-print .pp-meta { margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 2px solid var(--copper); font-size: 9.5pt; color: var(--muted); }
#pass-print .pp-s { margin-bottom: 4.5mm; break-inside: avoid; }
#pass-print .pp-s h3 { margin: 0 0 1.2mm; font-size: 9.5pt; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; }
#pass-print .pp-s h3 span { color: var(--copper); }
#pass-print .pp-t { white-space: pre-wrap; }
#pass-print .pp-no { color: var(--muted); font-style: italic; }
#pass-print .pp-ceo { margin-bottom: 1.5mm; padding-left: 2.5mm; border-left: 2px solid var(--copper); font-size: 9pt; color: var(--muted); }
#pass-print .pp-team { margin: 0; padding-left: 6mm; }
#pass-print .pp-team li { padding: .3mm 0; }
#pass-print .pp-blank { display: inline-block; width: 62mm; border-bottom: 1px solid var(--text); vertical-align: baseline; }
#pass-print .pp-by { margin-top: 9mm; break-inside: avoid; }
#pass-print .pp-foot { margin-top: 8mm; padding-top: 2mm; border-top: 1px solid var(--line); font-size: 7.5pt; color: var(--muted); }