/* ====================================================================
   ПРОЦЕССЫ (Process Studio) — стили окна подсистемы.
   T1.1 ТЗ_ПОДСИСТЕМА_БИЗНЕС_ПРОЦЕССОВ, волна 1.

   Оформление по Docs/PERPLEXITY_STYLE_GUIDE.md и
   .github/instructions/ui_style.instructions.md (§9 — отдельный файл на
   модуль, §10 — чек-лист). Все классы заскоуплены префиксом .proc-*:
   глобальные .btn/.modal/.input заняты легаси и трогать их нельзя.
   ==================================================================== */

/* ---------- подложка и окно ---------- */

.proc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10050;
}
.proc-overlay.show { display: flex; }

/* Во весь экран: сама геометрия ставится inline (её же ставит WindowControls),
   здесь только вид — окно во весь экран не круглит углов и не отбрасывает тень
   на несуществующий фон. */
.proc-modal.maximized {
    border-radius: 0;
    box-shadow: none;
    border-color: transparent;
}

.proc-modal {
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 92%;
    /* 1040 → 1280 по решению заказчика (приёмка этапа 3): паспорт и списки
       жались. Панель схемы при этом осталась 380 px — она стоит ПОВЕРХ холста,
       и шире мешала бы смотреть схему, ради которой холст и открыт. */
    max-width: 1280px;
    height: 78vh;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    animation: procModalIn 0.2s ease-out;
}
@keyframes procModalIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- шапка ---------- */

.proc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
    cursor: move;
    user-select: none;
}
.proc-header-titles { flex: 1 1 auto; min-width: 0; }
.proc-title    { font-size: 19px; font-weight: 500; line-height: 1.3; }
.proc-subtitle { font-size: 12px; line-height: 1.4; color: rgba(19, 52, 59, 0.62); margin-top: 2px; }

.proc-note {
    display: inline-flex;
    align-items: center;
    max-width: 42%;
    background: rgba(19, 52, 59, 0.04);
    color: #13343B;
    border-radius: 9999px;
    padding: 0 14px;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.proc-note.warning { background: rgba(237, 137, 54, 0.12); color: #c05621; }
.proc-note.danger  { background: rgba(229, 62, 62, 0.10);  color: #c53030; }

.proc-icon-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    width: 32px;
    height: 32px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.proc-icon-btn:hover  { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.proc-icon-btn:active { background: rgba(31, 184, 205, 0.12); color: #1FB8CD; transform: scale(0.97); }
.proc-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

/* ---------- переключатель видов и состояние обмена с rBase ---------- */

.proc-tabs { display: flex; gap: 4px; flex: 0 0 auto; }
.proc-tab {
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 32px;
    padding: 0 14px;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.proc-tab:hover  { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.proc-tab.active { background: rgba(31, 184, 205, 0.08); color: #20808D; }
.proc-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

.proc-sync {
    flex: 0 0 auto;
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 28px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.proc-sync:hover         { background: rgba(19, 52, 59, 0.08); }
.proc-sync.pending       { background: rgba(237, 137, 54, 0.12); color: #c05621; }
.proc-sync.off           { background: rgba(19, 52, 59, 0.04); color: rgba(19, 52, 59, 0.45); }

/* Фактическое списание за сеанс (долг № 13). Спокойный вид: это сведение, а не
   тревога. Оранжевым становится только когда часть сумм посчитана по знакам —
   провайдер не прислал счётчики, и сверять такие копейки нельзя. */
.proc-spend {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 28px;
    white-space: nowrap;
    cursor: default;
}
.proc-spend.estimated { background: rgba(237, 137, 54, 0.12); color: #c05621; }

/* ---------- тело: реестр слева, карточка справа ---------- */

.proc-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.proc-view {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    min-height: 0;
}
.proc-units-view { flex-direction: column; overflow-y: auto; padding: 18px 22px; gap: 12px; }

.proc-pane {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid rgba(19, 52, 59, 0.08);
    background: #FBFBF9;
}
.proc-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
}
.proc-pane-title { font-size: 13px; font-weight: 500; color: rgba(19, 52, 59, 0.62); }

.proc-list { flex: 1 1 auto; overflow-y: auto; padding: 0 8px 12px; }

.proc-item {
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.proc-item:hover  { background: rgba(19, 52, 59, 0.05); }
.proc-item.active { background: rgba(31, 184, 205, 0.08); }
.proc-item-name {
    font-size: 14px;
    line-height: 1.35;
    color: #13343B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.proc-item.active .proc-item-name { color: #20808D; }
.proc-item-meta { font-size: 11px; line-height: 1.4; color: rgba(19, 52, 59, 0.55); margin-top: 2px; }

.proc-create {
    padding: 10px;
    margin: 2px 0 8px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
}
.proc-create-btns { display: flex; gap: 8px; margin-top: 8px; }

.proc-empty, .proc-detail-empty { padding: 18px 14px; }
.proc-empty-title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.proc-empty-text  { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.62); }

/* ---------- карточка процесса ---------- */

.proc-detail {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.proc-card-head { display: flex; align-items: center; gap: 12px; }
.proc-name-input { flex: 1 1 auto; font-size: 16px; }

.proc-chip {
    flex: 0 0 auto;
    background: rgba(19, 52, 59, 0.04);
    color: #13343B;
    border-radius: 9999px;
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 28px;
}

.proc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.proc-fact {
    background: rgba(19, 52, 59, 0.04);
    border-radius: 8px;
    padding: 10px 12px;
}
.proc-fact-label { font-size: 11px; line-height: 1.4; color: rgba(19, 52, 59, 0.55); }
.proc-fact-value { font-size: 15px; line-height: 1.3; margin-top: 3px; }

/* ---------- модели ИИ этого процесса (долги № 15 и № 16) ----------
   С 2026-09-06 это не блок карточки, а своё окно поверх (требование заказчика:
   «блок мешается»). Кнопка запуска стоит в шапке ПЕРЕД разворотом на весь
   экран; слой окна — тот же приём и тот же z-index, что у вопроса о цене. */

.proc-models-btn {
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.proc-models-ask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10090;
}
.proc-models-dialog {
    width: 92%;
    max-width: 640px;
    max-height: 84vh;
    overflow: auto;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 18px 20px 20px;
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
}
.proc-models-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.proc-models-dialog-head .proc-cost-title { margin-bottom: 0; }
.proc-models-dialog-body { display: flex; flex-direction: column; }

/* Внутри своего окна рамка блоку не нужна — она была бы рамкой в рамке. */
.proc-models {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.proc-models-head { display: flex; flex-direction: column; gap: 3px; }
.proc-models-title { font-size: 13px; font-weight: 500; }
.proc-models-sub   { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.55); }

.proc-model-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(200px, 320px);
    gap: 12px;
    align-items: start;
}
.proc-model-left { display: flex; flex-direction: column; gap: 3px; }
.proc-model-name { font-size: 13px; }
.proc-model-hint { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.55); }
.proc-model-select { width: 100%; }

.proc-models-wait,
.proc-models-foot { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.55); }
.proc-models-warn {
    font-size: 12px;
    line-height: 1.45;
    color: #c05621;
    background: rgba(237, 137, 54, 0.10);
    border-radius: 8px;
    padding: 8px 10px;
}

@media (max-width: 900px) {
    .proc-model-row { grid-template-columns: 1fr; }
}

.proc-next {
    border: 1px solid rgba(19, 52, 59, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
}
.proc-next-title { font-size: 13px; font-weight: 500; color: rgba(19, 52, 59, 0.62); margin-bottom: 10px; }
.proc-next-why   { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.62); margin-top: 10px; }

.proc-card-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(19, 52, 59, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.proc-confirm-text { font-size: 13px; color: #13343B; margin-right: auto; }

/* ---------- вопрос о цене (§0.2 п. 9) ----------
   Стоит ПОВЕРХ всего своего: окно модуля 10050, панель схемы над канвасом
   10070. Правку словами человек запускает и оттуда, и оттуда — вопрос о цене
   обязан быть виден в обоих местах, иначе он выглядит как зависший запрос. */

.proc-cost-ask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10090;
}
.proc-cost-box {
    width: 92%;
    max-width: 440px;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 18px 20px;
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
}
.proc-cost-title { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.proc-cost-line  { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.72); margin-bottom: 4px; }
.proc-cost-acts  { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ---------- варианты рядом (требование заказчика № 24) ----------
   «Пусть видит рядом два или более варианта (подсвечены цветами) и выбирает из
   них сам до принятия модели». Цвет — происхождение варианта, а не украшение:
   синий — то, что уже в модели (работа человека), дальше документы по порядку.
   Один источник — один цвет во всём экране сверки. */

.proc-variants { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.proc-variants-hint,
.proc-variants-note { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.55); }

.proc-variants-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
.proc-variant {
    flex: 1 1 220px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-left-width: 4px;
    border-radius: 10px;
    background: #FFFFFF;
}
.proc-variant.chosen { box-shadow: 0 0 0 2px rgba(32, 184, 205, 0.22); }
.proc-variant-src  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(19, 52, 59, 0.55); }
.proc-variant-name { font-size: 13px; line-height: 1.4; }
.proc-variant-line { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.62); }
.proc-variant button { margin-top: auto; align-self: flex-start; }

/* Синий — работа человека, уже стоящая в модели. Дальше документы: зелёный,
   оранжевый, фиолетовый, бирюзовый. Пятый документ снова берёт зелёный —
   больше четырёх цветов человек всё равно не различает. */
.proc-variant.proc-var-model { border-left-color: #2F6FED; background: rgba(47, 111, 237, 0.04); }
.proc-variant.proc-var-src0  { border-left-color: #2E7D5B; background: rgba(46, 125, 91, 0.04); }
.proc-variant.proc-var-src1  { border-left-color: #C05621; background: rgba(192, 86, 33, 0.05); }
.proc-variant.proc-var-src2  { border-left-color: #7C4DBE; background: rgba(124, 77, 190, 0.05); }
.proc-variant.proc-var-src3  { border-left-color: #20808D; background: rgba(32, 128, 141, 0.05); }

/* Перечень значений из ОДНОГО файла — не выбор из вариантов. Вид карточки
   читался как кнопка, и человек тянулся по ней мышью (приёмка этапа 6, шаг А3).
   Остаётся только цветная черта источника; действие — отдельной кнопкой внутри.
   Цвет черты приходит от классов выше и здесь намеренно не переопределяется. */
.proc-variant.proc-variant-flat {
    flex: 0 1 auto;
    min-width: 0;
    padding: 4px 0 4px 10px;
    border-width: 0 0 0 3px;
    border-style: solid;
    border-radius: 0;
    background: transparent;
    gap: 2px;
}
.proc-variant.proc-variant-flat button {
    margin-top: 2px;
    padding: 2px 8px;
    font-size: 11px;
}

/* ---------- справочник служб ---------- */

.proc-units-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proc-units-hint { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.62); }
.proc-units-list { display: flex; flex-direction: column; gap: 8px; }

.proc-unit-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(19, 52, 59, 0.08);
    border-radius: 8px;
    background: #FFFFFF;
    transition: border-color 150ms ease, background 150ms ease;
}
.proc-unit-card.merging { border-color: #1FB8CD; background: rgba(31, 184, 205, 0.08); }
.proc-unit-name { flex: 1 1 auto; min-width: 0; }
.proc-unit-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.proc-unit-hint { font-size: 12px; color: rgba(19, 52, 59, 0.62); }
/* Долг № 9: кандидат назван должностью. Подсказка, а не запрет — цвет
   предупреждения, но без красного: человек вправе завести как сказал. */
.proc-unit-warn {
    font-size: 12px;
    line-height: 1.45;
    color: #c05621;
    background: rgba(237, 137, 54, 0.10);
    border-radius: 8px;
    padding: 8px 10px;
}

.proc-kind-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.proc-chip-btn {
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.62);
    border: none;
    border-radius: 9999px;
    height: 28px;
    padding: 0 14px;
    font: 500 12px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.proc-chip-btn:hover  { background: rgba(19, 52, 59, 0.08); color: #20808D; }
.proc-chip-btn:active { transform: scale(0.97); }
.proc-chip-btn.active { background: rgba(31, 184, 205, 0.12); color: #20808D; }
.proc-chip-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

/* ---------- паспорт процесса ---------- */

.proc-passport {
    border: 1px solid rgba(19, 52, 59, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.proc-field { display: flex; flex-direction: column; gap: 6px; }
.proc-field-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(19, 52, 59, 0.62);
    display: flex;
    align-items: center;
    gap: 8px;
}
.proc-field-need {
    background: rgba(237, 137, 54, 0.12);
    color: #c05621;
    border-radius: 9999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 500;
}
.proc-textarea { resize: vertical; min-height: 64px; font-family: inherit; }
.proc-select { appearance: auto; }
.proc-checks { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- кнопки и поля ---------- */

/* Кнопка второго ряда: обводка вместо заливки.
   Это самостоятельный вид, а не «primary без фона»: ею помечены действия,
   которых на экране много и которые равнозначны между собой — выбрать
   документ, ответить по службе, выгрузить файл, записать редакцию. Заливка у
   каждой сделала бы экран пёстрым, а `.proc-btn-ghost` без рамки в плотном
   ряду не читается как кнопка вовсе.
   Рамка тут обязательна, а не декоративна: модификатор `.active` в рядах
   документов и служб красит именно её (см. `.proc-paper-row .proc-btn.active`).
   ЗАВЕДЕНО 2026-09-07 на приёмке этапа 7, шаг А1: класс использовался
   четырнадцатью местами волны 8, а правила под него не было — все новые
   кнопки выходили нативными кнопками браузера. Стенд `studio_test.js`,
   блок «оформление», теперь сверяет каждый класс кнопки с этим файлом. */
.proc-btn {
    background: #FFFFFF;
    color: rgba(19, 52, 59, 0.78);
    border: 1px solid rgba(19, 52, 59, 0.14);
    border-radius: 9999px;
    padding: 8px 16px;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.proc-btn:hover {
    background: rgba(32, 128, 141, 0.08);
    border-color: rgba(32, 128, 141, 0.35);
    color: #20808D;
}
.proc-btn:active { transform: scale(0.97); }
.proc-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.proc-btn:disabled {
    background: rgba(19, 52, 59, 0.06);
    color: rgba(19, 52, 59, 0.38);
    border-color: rgba(19, 52, 59, 0.10);
    cursor: not-allowed;
}

.proc-btn-primary {
    background: #20808D;
    color: #F3F3EE;
    border: none;
    border-radius: 9999px;
    padding: 9px 18px;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}
.proc-btn-primary:hover  { background: #1FB8CD; }
.proc-btn-primary:active { transform: scale(0.97); }
.proc-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.proc-btn-primary:disabled {
    background: rgba(19, 52, 59, 0.15);
    color: rgba(19, 52, 59, 0.45);
    cursor: not-allowed;
}
/* Приглушённая, но ЖИВАЯ кнопка: `disabled` не даёт кликнуть, а недоступное
   действие обязано по нажатию назвать причину (образец presActionBlockReason). */
.proc-btn-blocked {
    background: rgba(19, 52, 59, 0.15);
    color: rgba(19, 52, 59, 0.45);
}
.proc-btn-blocked:hover { background: rgba(19, 52, 59, 0.20); }

.proc-btn-ghost {
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    border: none;
    border-radius: 9999px;
    padding: 9px 16px;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.proc-btn-ghost:hover  { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.proc-btn-ghost:active { transform: scale(0.97); }
.proc-btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
/* Мелкое действие внутри строки: «вернуть», «убрать», «сравнить с текущей»,
   «таблица … → CSV». Читается как ссылка, потому что стоит В ТЕКСТЕ строки, а
   не в ряду кнопок: пилюля здесь разорвала бы строку матрицы или истории.
   ЗАВЕДЕНО 2026-09-07 на приёмке этапа 7 вместе с `.proc-btn` — класс жил в
   пяти местах волны 8 без единого правила, и эти кнопки тоже выходили
   нативными. Нашла его проверка блока 12 `studio_test.js`, а не глаз. */
.proc-btn-link {
    background: none;
    border: none;
    padding: 2px 0;
    color: #20808D;
    font: 500 12px/1.3 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 150ms ease;
}
.proc-btn-link:hover { color: #1FB8CD; }
.proc-btn-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); border-radius: 4px; }
.proc-btn-link:disabled { color: rgba(19, 52, 59, 0.38); cursor: not-allowed; text-decoration: none; }

/* Кнопка, которая ждёт нажатия: расположение подвинуто, но в модель не забрано.
   Без пометки человек двигает блоки, закрывает схему — и работа пропадает. */
.proc-btn-attention {
    background: rgba(237, 137, 54, 0.12);
    color: #c05621;
}
.proc-btn-attention:hover { background: rgba(237, 137, 54, 0.20); color: #c05621; }

.proc-btn-quiet { color: rgba(19, 52, 59, 0.45); }
.proc-btn-quiet:hover { background: rgba(229, 62, 62, 0.10); color: #c53030; }

.proc-btn-danger {
    background: rgba(229, 62, 62, 0.10);
    color: #c53030;
    border: none;
    border-radius: 9999px;
    padding: 9px 18px;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}
.proc-btn-danger:hover  { background: rgba(229, 62, 62, 0.16); }
.proc-btn-danger:active { transform: scale(0.97); }

.proc-input {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    padding: 10px 14px;
    font: 400 14px/1.4 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.proc-input:focus {
    outline: none;
    border-color: #1FB8CD;
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.18);
}
.proc-input::placeholder { color: rgba(19, 52, 59, 0.45); }

/* ---------- панель редактора схемы (поверх канваса) ----------
   Своей вкладки в канвасе подсистема не заводит: это была бы правка чужого
   файла ради того, что решается собственным блоком с большим z-index.
   У канваса .pres-overlay = 10000, у окна модуля 10050. */

/* Панель модуля стоит СЛЕВА, и это не вкусовщина. Справа канвас открывает свою
   панель оформления блока: наша накрывала её, шапки не было видно, а попытка
   сдвинуть чужую панель стилем ломала её перетаскивание — она пересчитывает
   позицию от фактических координат и прыгала при захвате (обе беды нашла
   приёмка этапа 2). Чужую геометрию не трогаем вовсе, расходимся по сторонам. */
.proc-panel {
    position: fixed;
    top: 64px;
    left: 16px;
    width: 380px;
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    z-index: 10070;
    overflow: hidden;
}
.proc-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
    cursor: move;
    user-select: none;
}

/* Свёрнутая панель: остаётся одна шапка, холст открыт. Закрывать ради обзора
   всю схему — терять место, куда панель поставили (приёмка этапа 2). */
/* `!important` здесь не от лени: WindowControls запоминает размер панели и
   применяет его inline-стилем, а inline перебивает обычное правило — панель
   пряталась содержимым, но оставалась прежней коробкой (приёмка этапа 2).
   Ширину намеренно не трогаем: при разворачивании панель не должна прыгать. */
.proc-panel.collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    resize: none;
}
.proc-panel.collapsed .proc-panel-content { display: none; }
.proc-panel.collapsed .proc-panel-head { border-bottom: none; }
.proc-panel-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Содержимое отделено от шапки: шапка — ручка перетаскивания и живёт весь сеанс,
   а всё остальное перерисовывается при каждой правке модели. */
.proc-panel-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.proc-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.proc-panel-foot {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(19, 52, 59, 0.08);
    flex-wrap: wrap;
}
.proc-panel-section { font-size: 12px; font-weight: 500; color: rgba(19, 52, 59, 0.62); }
.proc-panel-ask {
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(237, 137, 54, 0.12);
    color: #c05621;
    font-size: 13px;
    line-height: 1.45;
}

.proc-steps { display: flex; flex-direction: column; gap: 4px; }
.proc-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 150ms ease;
}
.proc-step:hover  { background: rgba(19, 52, 59, 0.05); }
.proc-step.active { background: rgba(31, 184, 205, 0.08); }
.proc-step-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.proc-step-name {
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.proc-step-kind { font-size: 11px; color: rgba(19, 52, 59, 0.55); margin-top: 1px; }
.proc-step-acts { flex: 0 0 auto; display: flex; gap: 4px; }
.proc-step-acts .proc-chip-btn { height: 24px; padding: 0 8px; font-size: 11px; }
.proc-chip-btn.danger { color: #c53030; }
.proc-chip-btn.danger:hover { background: rgba(229, 62, 62, 0.10); color: #c53030; }

.proc-props { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid rgba(19, 52, 59, 0.08); }
.proc-lanes { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid rgba(19, 52, 59, 0.08); }
.proc-lane-row { display: flex; align-items: center; gap: 6px; }

/* Слой значков нотации поверх блоков холста. Событий мыши не ловит — иначе
   перетаскивание блоков перестало бы работать под ним. */
.proc-markers-layer { pointer-events: none; }

/* Шлюз — это ромб, и прямоугольных рамок вокруг него быть не должно ни при
   наведении, ни при выделении: рамка читается как ещё один элемент схемы
   (замечено приёмкой этапа 2). Выделенный шлюз показывается толстым ромбом
   акцентного цвета — его рисует слой значков. */
body.proc-schema-mode .pres-block.proc-gateway,
body.proc-schema-mode .pres-block.proc-gateway:hover,
body.proc-schema-mode .pres-block.proc-gateway.selected {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Шаг, выбранный в панели, — подсвечен на холсте. Своя подсветка, а не
   выделение канваса: то заодно открывает свою панель свойств, и она встала бы
   поверх нашей — две панели об одном элементе с разными полями. */
.pres-block.proc-highlight {
    outline: 3px solid #1FB8CD;
    outline-offset: 3px;
    box-shadow: 0 0 0 8px rgba(32, 184, 205, 0.16);
    z-index: 6;
}

/* ---------- очередь вопросов и допущения (T3.2, T3.3) ----------
   Один и тот же вид в карточке процесса и в панели редактора: пока открыт
   холст, карточка спрятана, и вопросы должны быть под рукой там, где человек
   работает. Панель узкая (380px), поэтому всё складывается в колонку, а
   кнопки переносятся. Образец ленты — .pres-schema-chat-* канваса. */

.proc-ask {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.proc-ask:empty { display: none; }

.proc-ask-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.proc-ask-title { font-size: 13px; font-weight: 500; color: #13343B; flex: 1 1 auto; }
.proc-ask-badge {
    background: rgba(19, 52, 59, 0.06);
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 500;
}
/* Обязательный вопрос виден с первого взгляда: он останавливает переход
   к следующей стадии, и путать его с необязательным нельзя. */
.proc-ask-badge.blocking { background: rgba(237, 137, 54, 0.12); color: #c05621; }
.proc-ask-quiet { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.55); }

.proc-ask-list { display: flex; flex-direction: column; gap: 8px; }

.proc-ask-item {
    border: 1px solid rgba(19, 52, 59, 0.08);
    border-left: 3px solid rgba(19, 52, 59, 0.12);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #FFFFFF;
}
.proc-ask-item.blocking { border-left-color: #c05621; }

.proc-ask-q {
    font-size: 13px;
    line-height: 1.4;
    color: #13343B;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* «Зачем спрашиваю» — не украшение: вопрос без последствия не задаётся, и
   последствие обязано быть написано рядом с вопросом. */
.proc-ask-why { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.62); }

.proc-ask-control { display: flex; flex-direction: column; gap: 6px; }
.proc-ask-branch { display: flex; flex-direction: column; gap: 4px; }
.proc-ask-branch-to { font-size: 11px; color: rgba(19, 52, 59, 0.55); }

.proc-ask-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.proc-ask-acts .proc-btn-primary,
.proc-ask-acts .proc-btn-ghost { padding: 7px 14px; font-size: 12px; }

.proc-ask-conflict {
    border: 1px solid rgba(237, 137, 54, 0.35);
    border-radius: 8px;
    background: rgba(237, 137, 54, 0.08);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Очередь на время расхождения: вопросы видно, но они приглушены и без кнопок —
   счётчик в шапке обязан сходиться с тем, что на экране. */
.proc-ask-waiting { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.proc-ask-item.quiet {
    background: rgba(19, 52, 59, 0.02);
    border-style: dashed;
    padding: 8px 12px;
}
.proc-ask-item.quiet .proc-ask-q { color: rgba(19, 52, 59, 0.55); }

/* Обе развязки расхождения — равноправный выбор человека, и вторая обязана
   читаться кнопкой. Плоский «призрак» на заливке блока выглядит подписью:
   на приёмке этапа 3 заказчик спросил, где вообще нажимать. «Отменить ответ»
   остаётся плоским — это отказ от выбора, а не третий ответ. */
.proc-ask-conflict .proc-btn-ghost:not(.proc-btn-quiet) {
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.22);
    color: #13343B;
}
.proc-ask-conflict .proc-btn-ghost:not(.proc-btn-quiet):hover {
    background: #FFFFFF;
    border-color: #20808D;
    color: #20808D;
}

.proc-ask-closed { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(19, 52, 59, 0.08); }
.proc-ask-closed-row { display: flex; align-items: center; gap: 8px; }
.proc-ask-closed-q {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: rgba(19, 52, 59, 0.45);
    text-decoration: line-through;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proc-assume-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(19, 52, 59, 0.04);
}
.proc-assume-text { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.45; }

/* Поле паспорта, помеченное «неприменимо»: переход к схеме оно больше не
   держит, и подписано это честно — не «нужно для схемы» при работающей кнопке. */
.proc-field-na {
    background: rgba(19, 52, 59, 0.06);
    color: rgba(19, 52, 59, 0.45);
    border-radius: 9999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 500;
}

/* ---------- правка словами и предпросмотр правок (T4.2, T4.6) ----------
   Тот же вид в карточке процесса и в панели редактора: один построитель в двух
   местах, как у очереди вопросов. Предпросмотр отделён рамкой и цветом —
   человек обязан видеть, что схема ЕЩЁ НЕ изменилась и решение за ним. */

.proc-speech-input {
    width: 100%;
    min-height: 56px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.45;
}

/* Ответ модели без правок и отказ — короткой строкой под полем: своего места
   в окне у них нет, а молчать о них нельзя. */
.proc-speech-note {
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(32, 184, 205, 0.08);
    color: #13343B;
}
.proc-speech-note.bad {
    background: rgba(229, 62, 62, 0.10);
    color: #c53030;
}

/* «Сбойных случаев не описано» (T4.5) — своя пометка, а не общая с ответами
   модели: поводы разные, и путать их не надо ни человеку, ни стенду. */
/* «Это ещё черновик» — сообщение спокойное, а не тревожное: допущения
   нормальны, ненормально принять их за описание работы компании. */
/* Ход разбора ответа — у самого вопроса: человек нажал «Ответить» здесь, и
   ждать он должен здесь же, видя свои слова. */
.proc-ask-busy {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(32, 128, 141, 0.07);
    border: 1px solid rgba(32, 128, 141, 0.18);
}
.proc-ask-busy-title { font-size: 13px; font-weight: 500; color: #20808D; }
.proc-ask-busy-said {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #13343B;
    white-space: pre-wrap;
    word-break: break-word;
}

.proc-story-assumed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(49, 151, 149, 0.10);
    color: #285e61;
}

.proc-story-warn {
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(237, 137, 54, 0.12);
    color: #c05621;
}

.proc-speech-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(32, 184, 205, 0.35);
    border-left: 3px solid #20808D;
    border-radius: 8px;
    padding: 10px 12px;
    background: #FFFFFF;
}
.proc-speech-said {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(19, 52, 59, 0.62);
    font-style: italic;
}
.proc-speech-lines { display: flex; flex-direction: column; gap: 4px; }
/* Строка списка несёт кнопку подтверждения: подтверждают там же, где читают
   (требование приёмки этапа 4). Кнопка прижата вправо и не давит текст. */
.proc-speech-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #13343B;
    word-break: break-word;
}
.proc-speech-line-text { flex: 1 1 auto; }
/* Подсветка по кнопке «Показать» у замечания: схема закрыта, и единственное
   место карточки, где виден сам шаг, — этот список (приёмка этапа 6, шаг Б1). */
.proc-speech-line.spot {
    background: rgba(32, 184, 205, 0.16);
    box-shadow: 0 0 0 2px rgba(32, 184, 205, 0.30);
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -6px;
}
.proc-chip-inline {
    flex: 0 0 auto;
    height: 24px;
    padding: 0 10px;
    font-size: 11px;
}
/* Каркас типового процесса (T4.1): это ЧЕРНОВИК, и выглядеть он должен как
   предложение, а не как готовая модель — отсюда та же рамка предпросмотра. */
.proc-frame-name {
    font-size: 14px;
    font-weight: 600;
    color: #13343B;
    line-height: 1.35;
}
.proc-frame-sub {
    font-size: 12px;
    font-weight: 500;
    color: rgba(19, 52, 59, 0.62);
    padding-top: 4px;
}

.proc-speech-unclear {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(19, 52, 59, 0.08);
}

/* ---------- мастер: четыре раздела работы (приёмка этапа 3) ----------
   Заказчик: «я совсем не понимаю, что делаю; всё в одном потоке». Причина была
   не в числе блоков, а в том, что семь блоков одного вида и веса лежали лентой,
   а занятий в них три разных. Теперь у разделов есть номер, итог и рамка, и
   раскрыт ровно один — тот, которым сейчас занимаются. */

.proc-wizard {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.proc-wiz-sec {
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
}
.proc-wiz-sec.open { border-color: rgba(32, 184, 205, 0.45); }

.proc-wiz-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s ease;
}
.proc-wiz-head:hover { background: rgba(19, 52, 59, 0.03); }
.proc-wiz-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(32, 184, 205, 0.35); }

/* Номер — это порядок работы, а не украшение: он отвечает на «с чего начать». */
.proc-wiz-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(19, 52, 59, 0.08);
    color: rgba(19, 52, 59, 0.62);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.proc-wiz-sec.open .proc-wiz-num { background: #20808D; color: #FFFFFF; }

.proc-wiz-title { flex: 1 1 auto; font-size: 14px; font-weight: 500; color: #13343B; }
.proc-wiz-sum { font-size: 12px; color: rgba(19, 52, 59, 0.55); white-space: nowrap; }
.proc-wiz-sum.need { color: #c05621; font-weight: 500; }
.proc-wiz-chev { font-size: 11px; color: rgba(19, 52, 59, 0.45); }

.proc-wiz-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 14px 16px;
    border-top: 1px solid rgba(19, 52, 59, 0.06);
}

/* «Что сейчас делать» — не описание раздела, а инструкция на один шаг вперёд. */
.proc-wiz-hint {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(19, 52, 59, 0.62);
    padding-top: 10px;
}

/* ---------- вкладки панели схемы ----------
   Панель узкая, а занятий четыре. Свойства выбранного шага раньше вставали
   между списком шагов и дорожками и читались как продолжение списка. */

.proc-panel-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
}

.proc-panel-tab {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    font-family: inherit;
    font-size: 12px;
    color: rgba(19, 52, 59, 0.62);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.proc-panel-tab:hover { background: rgba(19, 52, 59, 0.04); color: #13343B; }
.proc-panel-tab.active {
    color: #20808D;
    font-weight: 500;
    border-bottom-color: #20808D;
}
/* Приглушённая вкладка — не запрещённая: «Свойства» без выбранного шага
   объясняют, что нужно сделать, а не молчат. */
.proc-panel-tab.quiet { color: rgba(19, 52, 59, 0.38); }

.proc-tab-badge {
    background: rgba(19, 52, 59, 0.10);
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
}
.proc-tab-badge.need { background: rgba(237, 137, 54, 0.16); color: #c05621; }

/* Место панели оформления — чужой панели, в которую нам нельзя добавить
   кнопку: строка возврата к расстановке «рядом с фигурой» живёт у нас. */
.proc-props-place {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding-top: 10px;
    border-top: 1px solid rgba(19, 52, 59, 0.08);
}

/* ---------- документы как материал (Этап 5) ---------- */

/* Короткая строка-пояснение. Заведена здесь, а не в общем месте: у карточки
   источников их много, и все они объясняют, ЧТО сейчас произойдёт. */
.proc-hint {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(19, 52, 59, 0.62);
}

.proc-note-line {
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(32, 184, 205, 0.08);
    color: #13343B;
}
.proc-note-line.bad { background: rgba(229, 62, 62, 0.10); color: #c53030; }

.proc-sources { display: flex; flex-direction: column; gap: 10px; }

.proc-src-list { display: flex; flex-direction: column; gap: 6px; }
.proc-src-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 8px;
    background: #FFFFFF;
}
.proc-src-row.bad { border-color: rgba(229, 62, 62, 0.35); }
.proc-src-main { flex: 1 1 auto; min-width: 0; }
.proc-src-name { font-size: 13px; color: #13343B; }
.proc-src-meta { font-size: 11px; line-height: 1.45; color: rgba(19, 52, 59, 0.55); }

.proc-src-run { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Шкала разбора: пять отрезков — четыре прохода по документу и сведение.
   Человек не знает наших проходов, поэтому важно не название этапа само по
   себе, а видно ли, сколько пройдено и сколько осталось. */
.proc-src-progress {
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(32, 184, 205, 0.08);
    color: #13343B;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.proc-progress-head { font-weight: 500; }
.proc-progress-bar { display: flex; gap: 4px; align-items: flex-start; }
.proc-progress-seg { flex: 1 1 0; min-width: 0; }
.proc-progress-fill {
    height: 6px;
    border-radius: 3px;
    background: rgba(19, 52, 59, 0.12);
    transition: background 200ms ease;
}
.proc-progress-seg.done .proc-progress-fill { background: #1FB8CD; }
.proc-progress-seg.now .proc-progress-fill {
    background: #1FB8CD;
    animation: proc-progress-pulse 1200ms ease-in-out infinite;
}
@keyframes proc-progress-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.proc-progress-label {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(19, 52, 59, 0.55);
    overflow-wrap: break-word;
}
.proc-progress-seg.done .proc-progress-label { color: rgba(19, 52, 59, 0.75); }
.proc-progress-seg.now .proc-progress-label { color: #13343B; font-weight: 500; }
.proc-progress-now { font-size: 11px; line-height: 1.45; color: rgba(19, 52, 59, 0.62); }

/* Диалог добавления — внутри карточки, а не вторым окном поверх окна: два
   наложенных модальных слоя человек читает как «что-то сломалось». */
.proc-src-dialog {
    border: 1px solid rgba(19, 52, 59, 0.12);
    border-radius: 8px;
    background: rgba(19, 52, 59, 0.02);
    overflow: hidden;
}
/* Диалог, вызванный кнопкой «Добавить ещё документ» из вопроса о
   неоднозначности. Он появляется В НАЧАЛЕ карточки, а нажимают его внизу
   длинного экрана сверки: страницу к нему подкручивают, но и найти его глазами
   человек должен сразу. Отсюда розовая заливка и заметный контур — на
   приёмке долга № 17 этот диалог был признан «не приводящим к действию»
   именно потому, что не бросался в глаза. */
.proc-src-dialog.called-out {
    border: 2px solid #E8829E;
    background: #FDF0F4;
    box-shadow: 0 0 0 4px rgba(232, 130, 158, 0.14);
}
.proc-src-dialog.called-out .proc-src-tabs { border-bottom-color: rgba(232, 130, 158, 0.35); }
.proc-src-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
}
.proc-src-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 12px;
    color: rgba(19, 52, 59, 0.62);
    cursor: pointer;
}
.proc-src-tab:hover { color: #13343B; }
.proc-src-tab.active { color: #20808D; font-weight: 500; border-bottom-color: #20808D; }
.proc-src-tabs .proc-icon-btn { margin-left: auto; }

.proc-src-tabbody { display: flex; flex-direction: column; gap: 8px; padding: 10px; }

.proc-src-path { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proc-src-path-text {
    font-size: 12px;
    color: rgba(19, 52, 59, 0.62);
    word-break: break-all;
}

.proc-src-picklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid rgba(19, 52, 59, 0.08);
    border-radius: 6px;
    background: #FFFFFF;
}
.proc-src-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.proc-src-pick:hover { background: rgba(19, 52, 59, 0.04); }
.proc-src-pick-name { flex: 1 1 auto; font-size: 12px; color: #13343B; }
.proc-src-pick-meta { font-size: 11px; color: rgba(19, 52, 59, 0.50); }
.proc-src-folder { cursor: default; }
.proc-src-folder.locked { opacity: 0.55; }

.proc-src-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Экран сверки (T5.7). Его нельзя пропустить настройкой — это единственная
   защита от «модель уверенно выдумала» на входе «документ». */
.proc-review {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(32, 184, 205, 0.35);
    border-radius: 8px;
    background: rgba(32, 184, 205, 0.05);
}
.proc-review-subtitle { font-size: 12px; font-weight: 500; color: #c05621; }
.proc-review-div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(237, 137, 54, 0.10);
}
.proc-review-div-row { display: flex; flex-direction: column; gap: 4px; }
.proc-review-div-topic { font-size: 12px; color: #13343B; }
/* Долг № 17: один документ говорит по-разному. Это не спор, и цвет тут не
   тревожный, а вопросительный: человека не заставляют выбирать — его
   спрашивают. */
.proc-review-amb {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(32, 184, 205, 0.08);
}
.proc-review-amb-subtitle { font-size: 12px; font-weight: 500; color: #13343B; }
.proc-review-amb-row { display: flex; flex-direction: column; gap: 5px; }
.proc-review-amb-q { font-size: 12px; line-height: 1.45; color: #13343B; }
.proc-review-amb-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.proc-review-amb-form .proc-input { flex: 1 1 220px; width: auto; padding: 6px 10px; font-size: 12px; }
.proc-review-amb-said {
    font-size: 12px;
    line-height: 1.45;
    color: #13343B;
    background: rgba(32, 184, 205, 0.12);
    border-radius: 4px;
    padding: 4px 8px;
}
.proc-review-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 300px;
    overflow-y: auto;
}
.proc-review-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.proc-review-row:hover { background: rgba(19, 52, 59, 0.04); }
.proc-review-row.off { opacity: 0.45; }
.proc-review-main { flex: 1 1 auto; min-width: 0; }
.proc-review-title { font-size: 12px; color: #13343B; }
.proc-review-note { font-size: 11px; line-height: 1.45; color: rgba(19, 52, 59, 0.55); }
/* Шаг узнан в уже построенном (долг № 19): совпадение видно, решение — за
   человеком. Отказ от совпадения гасится, но не прячется. */
.proc-review-same {
    font-size: 11px;
    line-height: 1.45;
    color: #13343B;
    background: rgba(32, 184, 205, 0.12);
    border-radius: 4px;
    padding: 3px 7px;
    margin-top: 3px;
}
.proc-review-same.off { background: rgba(217, 119, 6, 0.14); }
.proc-review-same + .proc-btn-ghost { margin-top: 4px; }

/* «Откуда это взялось» — обратный переход от шага к источнику. */
.proc-origin {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(19, 52, 59, 0.08);
}
.proc-origin-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(19, 52, 59, 0.03);
}
.proc-origin-row.bad { background: rgba(229, 62, 62, 0.08); }
.proc-origin-title { font-size: 12px; color: #13343B; }
.proc-origin-ref { font-size: 11px; color: rgba(19, 52, 59, 0.55); }
.proc-origin-quote {
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 160px;
    overflow-y: auto;
    padding: 6px 8px;
    border-left: 2px solid rgba(32, 184, 205, 0.45);
    background: #FFFFFF;
    color: rgba(19, 52, 59, 0.75);
}

/* ---------- проверка схемы: замечания валидатора (T6.3) ----------
   Тот же вид в карточке процесса и в панели рядом с холстом: один построитель
   в двух местах, как у очереди вопросов и у правки словами. Цвет несёт ровно
   одно — строгость: красный это нарушение, песочный — замечание. */

.proc-check-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.proc-check-sum { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.proc-check-count {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
}
.proc-check-count.bad  { background: rgba(229, 62, 62, 0.12); color: #c53030; }
.proc-check-count.warn { background: rgba(237, 137, 54, 0.16); color: #c05621; }

.proc-check-clean {
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(56, 161, 105, 0.10);
    color: #276749;
}

.proc-check-filter { display: flex; gap: 6px; flex-wrap: wrap; }

.proc-checks { display: flex; flex-direction: column; gap: 8px; }

.proc-check-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(19, 52, 59, 0.03);
    border-left: 3px solid rgba(19, 52, 59, 0.18);
}
.proc-check-item.bad  { border-left-color: #c53030; background: rgba(229, 62, 62, 0.06); }
.proc-check-item.warn { border-left-color: #dd6b20; background: rgba(237, 137, 54, 0.08); }

.proc-check-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.proc-check-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: rgba(19, 52, 59, 0.55);
}
.proc-check-title { font-size: 12px; font-weight: 500; color: #13343B; }
.proc-check-text { font-size: 12px; line-height: 1.5; color: rgba(19, 52, 59, 0.80); }
.proc-check-item .proc-ask-acts .proc-btn-primary,
.proc-check-item .proc-ask-acts .proc-btn-ghost { padding: 5px 11px; font-size: 11px; }

/* ---------- взгляд со стороны: практика (T6.4) и ревизия (T6.7) ----------
   Цвет у них СВОЙ, не красный и не песочный: замечание практики — не ошибка, и
   выглядеть ошибкой оно не должно. Отклонённое не прячется, а гаснет: человек
   должен видеть, что он уже решил, и с чем именно. */

.proc-check-item.practice { border-left-color: #3182ce; background: rgba(49, 130, 206, 0.07); }
.proc-check-item.practice.off { opacity: 0.55; border-left-color: rgba(49, 130, 206, 0.35); }
.proc-check-item.review { border-left-color: #805ad5; background: rgba(128, 90, 213, 0.07); }
.proc-check-item.practice .proc-check-code { color: #2c5282; }
.proc-check-item.review .proc-check-code { color: #553c9a; }

/* ---------- расчёты по модели (T6.5) ----------
   Числа крупно и с подписью под ними: цифра без подписи через неделю не
   объясняется никем. Предупреждения о неполноте — не серым мелким шрифтом, а
   тем же кеглем, что и числа: они и есть часть ответа. */

.proc-analyze-ask {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(32, 128, 141, 0.06);
    border: 1px solid rgba(32, 128, 141, 0.16);
}
.proc-analyze-why { display: flex; flex-direction: column; gap: 4px; }
.proc-analyze-why-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.proc-analyze-why-name { font-size: 12px; font-weight: 500; color: #13343B; flex: 0 0 auto; }
.proc-analyze-why-text { font-size: 11px; line-height: 1.45; color: rgba(19, 52, 59, 0.65); flex: 1 1 180px; }

.proc-analyze-table,
.proc-analyze-load,
.proc-analyze-paths { display: flex; flex-direction: column; gap: 4px; }

.proc-analyze-row {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(19, 52, 59, 0.03);
}
.proc-analyze-row.head { background: transparent; font-size: 11px; color: rgba(19, 52, 59, 0.55); }
.proc-analyze-cell { flex: 1 1 0; font-size: 12px; color: #13343B; min-width: 0; }
.proc-analyze-cell.name { flex: 2 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-analyze-input { width: 100%; padding: 3px 6px; font-size: 12px; }
.proc-analyze-input.need { border-color: rgba(237, 137, 54, 0.55); background: rgba(237, 137, 54, 0.06); }

.proc-analyze-out { display: flex; flex-direction: column; gap: 10px; }
.proc-analyze-warn {
    font-size: 12px;
    line-height: 1.45;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(237, 137, 54, 0.12);
    color: #c05621;
}

.proc-analyze-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.proc-analyze-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(32, 184, 205, 0.08);
}
.proc-analyze-tile-val { font-size: 16px; font-weight: 600; color: #13343B; }
.proc-analyze-tile-title { font-size: 11px; color: rgba(19, 52, 59, 0.60); }

.proc-analyze-loss { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #13343B; }

/* ---------- риски и контроли (T7.1) ----------
   Матрица широкая — семь колонок, — и на узком окне она обязана прокручиваться
   сама, а не растягивать карточку. Незаполненная клетка помечается тем же
   оранжевым, что и незаполненное число расчёта: человек уже знает этот цвет. */

.proc-risk-offers { display: flex; flex-direction: column; gap: 8px; }
.proc-risk-offer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(237, 137, 54, 0.08);
    border: 1px solid rgba(237, 137, 54, 0.22);
}
.proc-risk-where { font-size: 11px; color: rgba(19, 52, 59, 0.55); }
.proc-risk-text { font-size: 13px; line-height: 1.45; color: #13343B; }
.proc-risk-ctl { font-size: 12px; color: rgba(19, 52, 59, 0.70); }
.proc-risk-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.proc-risk-why { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.proc-risk-why .proc-input { flex: 1 1 220px; }

/* ---------- матрица рисков: НАСТОЯЩАЯ таблица ----------
   Требование заказчика на приёмке этапа 7. Ряды из блоков выравнивались
   вручную и разъехались с подписями шапки: ответ, легший в «Доказательство»,
   читался стоящим в «Частоте» — дефект вёрстки выглядел дефектом данных.
   У таблицы колонки держит браузер, и разойтись им нечем. Ширины заданы
   долями по номеру колонки, чтобы разметка оставалась чистой: восемь клеток,
   восьмая — под кнопку «убрать». */
.proc-risk-scroll { overflow-x: auto; }
.proc-risk-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}
.proc-risk-table th,
.proc-risk-table td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
    color: #13343B;
    word-break: break-word;
}
/* Тонкая линия между колонками: по ней и видно, к какой колонке относится
   значение, — ради этого таблица и заводилась. */
.proc-risk-table th + th,
.proc-risk-table td + td { border-left: 1px solid rgba(19, 52, 59, 0.07); }
.proc-risk-row.head th {
    font-size: 11px;
    font-weight: 500;
    color: rgba(19, 52, 59, 0.55);
    border-bottom: 1px solid rgba(19, 52, 59, 0.14);
    white-space: nowrap;
}
.proc-risk-table tbody .proc-risk-row td { border-top: 1px solid rgba(19, 52, 59, 0.07); background: rgba(19, 52, 59, 0.03); }
.proc-risk-table tbody .proc-risk-row.need td { background: rgba(237, 137, 54, 0.07); }
.proc-risk-table th:nth-child(1), .proc-risk-table td:nth-child(1) { width: 22%; }
.proc-risk-table th:nth-child(2), .proc-risk-table td:nth-child(2) { width: 12%; }
.proc-risk-table th:nth-child(3), .proc-risk-table td:nth-child(3) { width: 17%; }
.proc-risk-table th:nth-child(4), .proc-risk-table td:nth-child(4) { width: 11%; }
.proc-risk-table th:nth-child(5), .proc-risk-table td:nth-child(5) { width: 13%; }
.proc-risk-table th:nth-child(6), .proc-risk-table td:nth-child(6) { width: 13%; }
.proc-risk-table th:nth-child(7), .proc-risk-table td:nth-child(7) { width: 12%; }
.proc-risk-table th:nth-child(8), .proc-risk-table td:nth-child(8) { width: 56px; text-align: right; }
.proc-risk-cell .proc-input { width: 100%; padding: 3px 6px; font-size: 12px; }
.proc-risk-cell .proc-input.need { border-color: rgba(237, 137, 54, 0.55); background: rgba(237, 137, 54, 0.06); }

/* Карандаш правки пункта в «Процессе словами» (требование заказчика, приёмка
   этапа 7). Виден всегда, а не по наведению: кнопка, которую надо найти
   мышью, для неподготовленного пользователя не существует. */
.proc-speech-pen {
    flex: 0 0 auto;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    opacity: 0.55;
}
.proc-speech-pen:hover { opacity: 1; text-decoration: none; }
.proc-speech-edit { flex: 1 1 220px; min-width: 0; }

/* Отклонённые — не таблица, а список: колонок у них две и сверять нечего. */
.proc-risk-dismissed { display: flex; flex-direction: column; gap: 4px; }
.proc-risk-dismissed .proc-risk-row {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(19, 52, 59, 0.03);
}
.proc-risk-dismissed .proc-risk-row.dim { opacity: 0.65; }
.proc-risk-dismissed .proc-risk-cell { flex: 1 1 0; font-size: 12px; color: #13343B; min-width: 0; }
.proc-risk-dismissed .proc-risk-cell.name { flex: 2 1 0; }
.proc-risk-cell .proc-input { width: 100%; padding: 3px 6px; font-size: 12px; }
.proc-risk-cell .proc-input.need { border-color: rgba(237, 137, 54, 0.55); background: rgba(237, 137, 54, 0.06); }

.proc-risk-own { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.proc-risk-own .proc-input { flex: 1 1 220px; }

/* ---------- соответствие нормативу (T7.2) и приём .proc (T7.4) ----------
   Непокрытое требование — оранжевым, как и всё остальное «надо посмотреть»;
   красный тут неуместен: норматив может касаться другого процесса. */

.proc-compliance-list { display: flex; flex-direction: column; gap: 6px; }
.proc-compliance-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(19, 52, 59, 0.03);
    font-size: 12px;
    line-height: 1.45;
    color: #13343B;
}
.proc-compliance-item.need { background: rgba(237, 137, 54, 0.09); border: 1px solid rgba(237, 137, 54, 0.20); }
.proc-compliance-done,
.proc-compliance-extra { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.proc-import-units { display: flex; flex-direction: column; gap: 8px; }
.proc-import-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(32, 128, 141, 0.06);
    border: 1px solid rgba(32, 128, 141, 0.16);
}
.proc-import-row .proc-btn.active { border-color: rgba(32, 128, 141, 0.55); background: rgba(32, 128, 141, 0.12); }

/* ---------- редакции, статусы и реестр (T7.7) ----------
   Строка редакции — над мастером и одной лентой: это свойство всего процесса.
   Просроченный пересмотр красится тем же оранжевым, что и остальные «надо
   посмотреть», а не красным: срок пересмотра — не авария. */

.proc-release { display: flex; flex-direction: column; gap: 8px; }
.proc-release-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proc-release-title { font-size: 12px; font-weight: 600; color: #13343B; }
.proc-release-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proc-release-form .proc-input { flex: 1 1 240px; }
.proc-release-review { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proc-release-label { font-size: 12px; color: rgba(19, 52, 59, 0.65); }
.proc-release-date { flex: 0 0 150px; }
.proc-release-note { font-size: 11px; color: rgba(19, 52, 59, 0.55); }
.proc-release-warn { font-size: 11px; color: #c05621; font-weight: 500; }

.proc-release-hist { display: flex; flex-direction: column; gap: 3px; }
.proc-release-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.proc-release-num { flex: 0 0 auto; font-weight: 500; color: #13343B; }
.proc-release-sum { flex: 1 1 160px; color: rgba(19, 52, 59, 0.75); }
.proc-release-date-text { flex: 0 0 auto; font-size: 11px; color: rgba(19, 52, 59, 0.55); }

.proc-release-diff { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.proc-release-diff-head { font-size: 12px; font-weight: 500; color: #13343B; margin-top: 4px; }
.proc-release-diff-row { font-size: 12px; color: rgba(19, 52, 59, 0.75); }

.proc-registry-links { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.proc-registry-link { font-size: 11px; line-height: 1.45; color: rgba(19, 52, 59, 0.70); }
.proc-registry-gap {
    font-size: 11px;
    line-height: 1.45;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(237, 137, 54, 0.10);
    color: #c05621;
}
.proc-item-due { font-size: 11px; color: rgba(19, 52, 59, 0.55); }
.proc-item-due.bad { color: #c05621; }

/* ---------- выходные документы (T7.3) ----------
   Предпросмотр читается как документ, а не как форма: заголовки крупнее,
   таблицы со своей прокруткой, пустой связный текст — приглушённым курсивом,
   чтобы его нельзя было принять за написанный. */

.proc-paper-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.proc-paper-pick-title { font-size: 12px; color: rgba(19, 52, 59, 0.65); }
.proc-paper-pick .proc-select { flex: 1 1 200px; }

.proc-paper-list { display: flex; flex-direction: column; gap: 4px; }
.proc-paper-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.proc-paper-row .proc-btn { flex: 0 0 auto; }
.proc-paper-row .proc-btn.active { border-color: rgba(32, 128, 141, 0.55); background: rgba(32, 128, 141, 0.10); }
.proc-paper-hint { font-size: 11px; line-height: 1.45; color: rgba(19, 52, 59, 0.60); flex: 1 1 200px; }

.proc-paper-head { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.proc-paper-title { font-size: 13px; font-weight: 600; color: #13343B; }

.proc-paper-view {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.12);
    max-height: 460px;
    overflow-y: auto;
}
.proc-paper-h1 { font-size: 15px; font-weight: 600; color: #13343B; margin-top: 4px; }
.proc-paper-h2 { font-size: 13px; font-weight: 600; color: #13343B; margin-top: 8px; }
.proc-paper-p { font-size: 12px; line-height: 1.5; color: #13343B; }
.proc-paper-p.empty { color: rgba(19, 52, 59, 0.45); font-style: italic; }
.proc-paper-note {
    font-size: 12px;
    line-height: 1.45;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(237, 137, 54, 0.12);
    color: #c05621;
}
.proc-paper-list-block { display: flex; flex-direction: column; gap: 2px; }
.proc-paper-li { font-size: 12px; line-height: 1.45; color: #13343B; }

/* Содержимое документа НЕ сжимается по высоте.
   `.proc-paper-view` — колонка-флекс с потолком высоты, а дети флекса по
   умолчанию сжимаемы: таблицы схлопывались до одной обрезанной строки со
   своим ползунком сбоку, и человек не видел ни одной строки данных. Найдено
   приёмкой этапа 7, шаг А4. */
.proc-paper-view > * { flex: 0 0 auto; }

/* Таблицы документа — настоящие таблицы, тем же порядком, что матрица рисков:
   колонки держит браузер, подписи стоят над своими значениями. */
.proc-paper-scroll { overflow-x: auto; }
.proc-paper-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.proc-paper-table th,
.proc-paper-table td {
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    font-size: 12px;
    color: #13343B;
    word-break: break-word;
}
.proc-paper-table th + th,
.proc-paper-table td + td { border-left: 1px solid rgba(19, 52, 59, 0.06); }
.proc-paper-tr.head th {
    font-size: 11px;
    font-weight: 500;
    color: rgba(19, 52, 59, 0.55);
    border-bottom: 1px solid rgba(19, 52, 59, 0.10);
    white-space: nowrap;
}
.proc-paper-table tbody tr:nth-child(even) td { background: rgba(19, 52, 59, 0.03); }

/* ---------- скроллбары ---------- */

.proc-modal ::-webkit-scrollbar { width: 8px; height: 8px; }
.proc-modal ::-webkit-scrollbar-track { background: transparent; }
.proc-modal ::-webkit-scrollbar-thumb { background: rgba(19, 52, 59, 0.18); border-radius: 4px; }
.proc-modal ::-webkit-scrollbar-thumb:hover { background: rgba(19, 52, 59, 0.30); }