/* ═══════════════════════════════════════════════════════════════
   Project Passport 3+1 — токены, wizard, read-view, tech-step
   Извлечено из checklist_operational.css строки 6308–8314
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ПАСПОРТ ПРОЕКТА 3+1 — палитра и стили (Этап 4)
   Перенос дизайн-токенов и сеток из прототипа _design_source/
   passport-app/. Без inline-стилей: всё через классы. Шрифты —
   системный stack (Inter-эстетика) + ui-monospace для блоков
   с моноширинной типографикой (номера видов, технологии,
   репозиторий, версии vN).
   ════════════════════════════════════════════════════════════ */

/* ── Дизайн-токены прототипа ────────────────────────────────── */
.passport-root {
    /* ── Калибровка под эталон Stitch (Executive Suite), СВЕТЛАЯ тема ──
       Значения точь-в-точь из Stitch tailwind.config: приглушённые
       «исполнительные» статусы (шалфей/индиго/кирпич), холодная бумага
       #F8F9FB и серый текст #6A7180. Тёмные значения — в блоке
       [data-theme="dark"] .passport-root ниже. Палитра scoped к паспорту,
       чтобы не задеть остальной апп. */
    --p-ink:    #181B26;            /* text-primary */
    --p-ink-2:  #181B26;
    --p-muted:  #6A7180;            /* text-secondary */
    --p-muted-2: #9AA1AE;           /* status-not-started — мягкий серый */
    --p-line:   #E3E7EE;            /* border */
    --p-line-2: #ECEEF3;
    --p-bg:     #F8F9FB;            /* page-bg */
    --p-bg-2:   #FFFFFF;            /* surface */
    --p-white:  #FFFFFF;            /* surface-container-lowest */

    --p-fn:   #4E8A6A;   /* status-completed — шалфейный */
    --p-tech: #4E5180;   /* primary-container — индиго */
    --p-vis:  #6E709C;   /* accent-medium */
    --p-scn:  #353659;   /* accent-dark */

    --p-fn-bg:   #E4F0EA;
    --p-tech-bg: #ECECF5;           /* accent-tint */
    --p-vis-bg:  #ECECF5;
    --p-scn-bg:  #ECECF5;

    --p-warn:      #9AA1AE;          /* status-not-started — «draft» */
    --p-warn-bg:   #F3EFF4;
    --p-warn-line: #E3E7EE;
    --p-danger:    #9A3324;          /* status-overdue — кирпичный */
    --p-success:   #4E8A6A;

    /* Brand-акцент Stitch (primary) + serif-заголовок (Instrument Serif). */
    --p-accent:       #373A67;       /* primary */
    --p-accent-strong:#353659;       /* accent-dark */
    --p-accent-tint:  #ECECF5;       /* accent-tint */
    --p-serif: "Instrument Serif", "Fraunces", Georgia, "Times New Roman", serif;

    --p-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    color: var(--p-ink);
    font-size: var(--text-base);
    line-height: 1.4;
}

/* ── Калибровка под эталон Stitch, ТЁМНАЯ тема ──
   Значения точь-в-точь из Stitch dark tailwind.config: фон #161826,
   поверхность #1F2233, граница #343852, текст #E8E9F0/#9CA1B4,
   статусы — осветлённые (шалфей #6FB089, кирпич #CF5B45). */
[data-theme="dark"] .passport-root {
    --p-ink:    #E8E9F0;
    --p-ink-2:  #E8E9F0;
    --p-muted:  #9CA1B4;
    --p-muted-2: #7E8398;
    --p-line:   #343852;
    --p-line-2: #2A2E45;
    --p-bg:     #161826;
    --p-bg-2:   #1F2233;
    --p-white:  #1F2233;

    --p-fn:   #6FB089;
    --p-tech: #8589C7;
    --p-vis:  #9FA1D0;
    --p-scn:  #8589C7;

    --p-fn-bg:   rgba(111, 176, 137, 0.14);
    --p-tech-bg: #24263A;
    --p-vis-bg:  #24263A;
    --p-scn-bg:  #24263A;

    --p-warn:      #9CA1B4;
    --p-warn-bg:   #1F2233;
    --p-warn-line: #343852;
    --p-danger:    #CF5B45;
    --p-success:   #6FB089;

    --p-accent:       #8589C7;
    --p-accent-strong:#6E709C;
    --p-accent-tint:  #24263A;
}

/* Семантические view-классы — подставляют цвет вида */
.passport-root .v-fn { --p-c: var(--p-fn);   --p-cb: var(--p-fn-bg); }
.passport-root .v-tech { --p-c: var(--p-tech); --p-cb: var(--p-tech-bg); }
.passport-root .v-vis { --p-c: var(--p-vis);  --p-cb: var(--p-vis-bg); }
.passport-root .v-scn { --p-c: var(--p-scn);  --p-cb: var(--p-scn-bg); }

/* Общие примитивы (eyebrow, pill) */
.passport-root .passport-eyebrow {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--p-muted);
}
.passport-pill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
    padding: 4px 8px; border-radius: var(--radius-pill);
    text-transform: uppercase;
}
.passport-pill--draft { background: var(--p-warn-bg); color: var(--p-warn); }
.passport-pill--review { background: var(--p-tech-bg); color: var(--p-tech); }
.passport-pill--approved { background: var(--p-fn-bg); color: var(--p-fn); }

/* Скелетон загрузки */
.passport-skeleton { padding: 20px 0; }


/* ════════════════════════════════════════════════════════════
   EMPTY STATE — паспорт ещё не создан
   ════════════════════════════════════════════════════════════ */
.passport-empty {
    max-width: 1240px;
    margin: 0 auto;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    padding: 64px 80px 56px;
    text-align: center;
}

/* Иллюстрация: 4 цветных чипа с номерами */
.passport-empty-illu {
    display: flex; justify-content: center; gap: var(--space-4);
    margin-bottom: 6px;
}
.passport-empty-chip {
    width: 76px; height: 76px;
    border-radius: var(--radius-xl);
    border: 1.5px solid var(--p-c, var(--p-line));
    background: var(--p-white);
    color: var(--p-c, var(--p-ink));
    display: flex; align-items: center; justify-content: center;
}
.passport-empty-chip:nth-child(odd) { transform: translateY(-6px); }
.passport-empty-chip:nth-child(even) { transform: translateY(6px); }
.passport-empty-chip-num {
    font-family: var(--p-mono);
    font-size: 26px; font-weight: 600;
}

.passport-empty-eyebrow {
    color: var(--p-muted);
    margin-top: 28px;
}
.passport-empty-title {
    font-size: 32px; letter-spacing: -0.02em;
    margin: 12px auto 12px; max-width: 720px;
    font-weight: 600; color: var(--p-ink);
}
.passport-empty-title em {
    color: var(--p-ink-2); font-style: normal;
}
.passport-empty-sub {
    font-size: var(--text-base); color: var(--p-muted);
    line-height: 1.55; max-width: 640px;
    margin: 0 auto 32px;
}

/* Сетка 2x2 видов */
.passport-views-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
    max-width: 820px; margin: 0 auto 32px;
    text-align: left;
}
.passport-view-card {
    display: flex; gap: var(--space-3); padding: var(--space-4);
    background: var(--p-bg);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
}
.passport-view-mark {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: var(--p-c, var(--p-ink));
    color: var(--p-white);
    font-family: var(--p-mono);
    font-weight: 600; font-size: var(--text-base);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.passport-view-card-title {
    font-weight: 600; font-size: var(--text-base); margin-bottom: 3px;
    color: var(--p-ink);
}
.passport-view-card-desc {
    font-size: var(--text-sm); color: var(--p-muted); line-height: 1.45;
}

/* Действия (создать) */
.passport-empty-actions {
    display: flex; gap: var(--space-2); justify-content: center;
    margin-bottom: 36px;
}
.passport-btn {
    border: 1px solid var(--p-line); background: var(--p-white);
    color: var(--p-ink);
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: var(--text-sm); font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--space-2);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.passport-btn:hover { background: var(--p-bg); }
.passport-btn--primary {
    background: var(--p-ink-2); color: var(--p-white);
    border-color: var(--p-ink-2);
}
.passport-btn--primary:hover { background: #1F1F37; }
.passport-btn--ghost {
    background: transparent; border-color: transparent; color: var(--p-muted);
}
.passport-btn--ghost:hover { background: var(--p-bg); color: var(--p-ink); }

/* Шаблоны */
.passport-templates-block { margin-top: 0; }
.passport-templates-label {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--p-muted-2);
    margin-bottom: 14px;
}
.passport-templates-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
    max-width: 820px; margin: 0 auto;
}
.passport-template-card {
    border: 1px solid var(--p-line);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    text-align: left;
    cursor: pointer;
    background: var(--p-white);
    color: var(--p-ink);
    font-family: inherit;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.passport-template-card:hover {
    border-color: var(--p-tech);
    background: var(--p-bg-2);
}
.passport-template-card-title {
    font-size: var(--text-sm); font-weight: 600; margin-bottom: 3px;
}
.passport-template-card-hint {
    font-size: var(--text-xs); color: var(--p-muted); line-height: 1.4;
}

@media (max-width: 900px) {
    .passport-empty { padding: 32px 20px; }
    .passport-empty-title { font-size: var(--text-2xl); }
    .passport-views-grid { grid-template-columns: 1fr; }
    .passport-templates-grid { grid-template-columns: repeat(2, 1fr); }
    .passport-empty-illu { flex-wrap: wrap; }
}


/* ════════════════════════════════════════════════════════════
   NO-PLAN / ERROR — служебные экраны
   ════════════════════════════════════════════════════════════ */
.passport-empty-state {
    max-width: 520px; margin: 60px auto;
    text-align: center;
    padding: 32px 24px;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-xl);
}
.passport-empty-state--error { border-color: var(--p-danger); }
.passport-error-msg {
    color: var(--p-danger); font-weight: 500;
}
.passport-error-debug {
    margin-top: 14px; text-align: left;
    background: var(--p-bg);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    padding: 8px 12px;
}
.passport-error-debug summary {
    cursor: pointer; font-size: var(--text-xs); font-weight: 500;
    color: var(--p-muted); user-select: none;
}
.passport-error-debug[open] summary { margin-bottom: 8px; }
.passport-error-debug code {
    font-family: var(--p-mono); font-size: var(--text-xs);
    background: var(--p-line-2); padding: 1px 4px; border-radius: var(--radius-xs);
}


/* ════════════════════════════════════════════════════════════
   WIZARD — мастер заполнения (заглушка для Этапа 5)
   Сетка прототипа: 1fr + 320px rail
   ════════════════════════════════════════════════════════════ */
.passport-wizard {
    max-width: 1400px; margin: 0 auto;
}
.passport-wizard-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-4);
    align-items: start;
}
.passport-wizard-rail {
    display: flex; flex-direction: column; gap: var(--space-3);
}
@media (max-width: 1100px) {
    .passport-wizard-layout { grid-template-columns: 1fr; }
    .passport-wizard-rail { position: static; }
}


/* ════════════════════════════════════════════════════════════
   READ — готовый паспорт
   Сетка: 220px (anchor menu) + 1fr (контент)
   ════════════════════════════════════════════════════════════ */
.passport-read {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* Якорное меню слева — фиксированной позиции НЕТ, прокручивается вместе
   с контентом, чтобы шапка не «убегала» при скролле. */
.passport-anchor-menu {
    padding: 16px 12px;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column; gap: var(--space-1);
}
.passport-anchor {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 8px 12px;
    border: 0;
    border-left: 2px solid transparent;
    text-decoration: none;
    font-size: var(--text-sm); font-weight: 500;
    color: var(--p-ink);
    background: transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    font-family: inherit;
}
.passport-anchor:focus-visible {
    outline: 2px solid var(--p-c, var(--p-ink));
    outline-offset: 2px;
}
.passport-anchor:hover { background: var(--p-bg); }
.passport-anchor.is-active {
    color: var(--p-c, var(--p-ink));
    border-left-color: var(--p-c, var(--p-ink));
    background: var(--p-cb, var(--p-bg));
}
.passport-anchor-num {
    font-family: var(--p-mono);
    font-size: var(--text-xs); font-weight: 600;
    width: 22px;
    color: var(--p-c, var(--p-muted));
}

/* Главная колонка чтения */
.passport-read-main {
    display: flex; flex-direction: column;
    min-width: 0;
}

/* Шапка: статус + версия + действия */
.passport-read-head {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 14px;
}
.passport-read-meta {
    display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}
.passport-read-title {
    margin: 8px 0 12px;
    font-size: 28px; font-weight: 600;
    letter-spacing: -0.02em;
    max-width: 760px;
    color: var(--p-ink);
}
.passport-read-actions {
    display: flex; gap: var(--space-2); flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.passport-read-actions .passport-btn { pointer-events: auto; }
.passport-version-tag {
    font-family: var(--p-mono);
    font-size: var(--text-xs); font-weight: 600;
    color: var(--p-muted);
}

/* Секция вида (FN/TECH/VIS/SCN) */
.passport-section {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    padding: 24px 32px 32px 60px;
}
.passport-section::before {
    /* Угловая «марка» цвета вида */
    content: "";
    position: absolute; top: 0; left: 0;
    width: 44px; height: 44px;
    background: var(--p-c, var(--p-ink));
    border-radius: 10px 0 10px 0;
}
.passport-section-head {
    display: flex; align-items: center; gap: var(--space-3); margin-bottom: 18px;
    margin-left: -6px;
    /* Нейтрализуем глобальное правило header{} (frosted app-bar из
       checklist_operational.css), которое протекает на <header> заголовка
       секции и в тёмной теме светится белой плашкой rgba(255,255,255,.78). */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    position: static;
    min-height: 0;
    padding: 0;
    z-index: auto;
}
.passport-section-tag {
    font-family: var(--p-mono);
    background: var(--p-cb, var(--p-bg));
    color: var(--p-c, var(--p-ink));
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em;
    padding: 3px 8px; border-radius: var(--radius-xs);
}
.passport-section-eyebrow {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--p-muted);
}
.passport-section-title {
    margin: 4px 0 0;
    font-size: var(--text-2xl); font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--p-ink);
}
.passport-section-empty {
    color: var(--p-muted-2); font-style: italic; font-size: var(--text-sm);
    padding: 8px 0;
}
.passport-section-pre {
    font-family: var(--p-mono);
    font-size: var(--text-xs); line-height: 1.5;
    background: var(--p-bg);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    overflow-x: auto;
    white-space: pre-wrap; word-break: break-word;
    margin: var(--space-0);
    color: var(--p-ink);
}

/* Подблоки внутри секции (Этап 5: сущности, стек, палитра, экраны...) */
.passport-sub-block { margin-bottom: 26px; }
.passport-sub-block:last-child { margin-bottom: 0; }

/* ── Опциональные блоки (Этап 6+: пользователь сам решает, что показывать) ── */
/* Шапка блока: заголовок + кнопка скрытия. Появляется на hover, чтобы
   не мозолила глаза при просмотре. */
.passport-block { position: relative; }
.passport-block-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-bottom: 8px;
}
.passport-block-remove {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid var(--p-line);
    background: var(--p-bg);
    color: var(--p-muted-2);
    font-size: var(--text-md); line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s, color .12s, border-color .12s;
}
.passport-block:hover .passport-block-remove,
.passport-block-remove:focus-visible { opacity: 1; }
.passport-block-remove:hover {
    color: var(--p-danger, #B83553);
    border-color: var(--p-danger, #B83553);
}

/* Inline-палитра блоков для пустых секций — карточки видны сразу,
   без необходимости открывать popover. */
.passport-block-picker {
    margin-top: 6px;
    padding: var(--space-4);
    background: var(--p-bg, #F5F5F7);
    border: 1px dashed var(--p-line, #E8E8EE);
    border-radius: var(--radius-xl);
}
.passport-block-picker-title {
    font-size: var(--text-xs); color: var(--p-muted, #6E6E83);
    margin-bottom: 12px;
    font-weight: 500;
}
.passport-block-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2);
}
.passport-block-picker-card {
    text-align: left;
    background: var(--p-card, #FFFFFF);
    border: 1px solid var(--p-line, #E8E8EE);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    cursor: pointer;
    font: inherit;
    color: var(--p-ink, #1A1A2E);
    display: flex; flex-direction: column; gap: var(--space-2);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.passport-block-picker-card:hover {
    transform: translateY(-1px);
    border-color: var(--p-fn, #2E7D43);
    box-shadow: 0 4px 12px rgba(15,16,32,0.08);
}
.passport-block-picker-head {
    display: flex; align-items: center; gap: var(--space-2);
}
.passport-block-picker-plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--p-bg, #F5F5F7);
    color: var(--p-fn, #2E7D43);
    font-size: var(--text-md); font-weight: 600; line-height: 1;
    flex: 0 0 auto;
}
.passport-block-picker-card:hover .passport-block-picker-plus {
    background: var(--p-fn, #2E7D43); color: #fff;
}
.passport-block-picker-label {
    font-weight: 600; font-size: var(--text-sm);
    color: var(--p-ink, #1A1A2E);
    flex: 1; min-width: 0;
}
.passport-block-picker-hint {
    font-size: var(--text-xs); color: var(--p-muted, #6E6E83);
    line-height: 1.45;
}

/* Кнопка «+ Ещё блок» + inline-палитра доступных блоков.
   Палитра НЕ в popover — она в потоке DOM, выше кнопки, поэтому
   физически толкает футер вниз и не клиппится. */
.passport-add-block-wrap {
    margin-top: 16px;
    display: flex; flex-direction: column; gap: var(--space-3);
    align-items: flex-start;
}
.passport-add-block-wrap .passport-block-picker {
    align-self: stretch;
    margin-top: 0;
}
.passport-add-block-btn {
    border-style: dashed;
    color: var(--p-muted);
}
.passport-add-block-wrap.is-expanded .passport-add-block-btn {
    border-style: solid;
}
.passport-add-block-multi {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
    color: var(--p-vis, #B83553);
    background: rgba(184, 53, 83, 0.08);
    padding: 1px 8px; border-radius: var(--radius-xs);
}

/* Блок-схема (Vis): превью + кнопки */
.passport-block--schema { }
.passport-schema-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--space-3); align-items: stretch;
}
.passport-schema-meta { display: flex; flex-direction: column; gap: var(--space-2); }
.passport-schema-actions { display: flex; gap: var(--space-2); }
/* Кнопка «Открыть редактор» / «Редактировать» в карточке блок-схемы:
   inversion на hover — обычно тёмный текст на белом, при наведении
   тёмный фон с белым текстом (как «нажми меня, я главное действие»). */
.passport-schema-actions .passport-btn {
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.passport-schema-actions .passport-btn:hover,
.passport-schema-actions .passport-btn:focus-visible {
    background: var(--p-ink-2);
    border-color: var(--p-ink-2);
    color: var(--p-white, #FFFFFF);
}
.passport-schema-name-static {
    font-weight: 600; font-size: var(--text-sm); color: var(--p-ink);
}
.passport-schema-thumb {
    width: 100%; max-height: 220px;
    border: 1px solid var(--p-line); border-radius: var(--radius-md);
    background: var(--p-bg);
    object-fit: contain;
}
.passport-schema-thumb--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--p-muted-2); font-size: var(--text-sm); font-style: italic;
    min-height: 140px;
    padding: var(--space-3);
    text-align: center;
}
.passport-schemas-read {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}
.passport-schema-figure {
    margin: var(--space-0); padding: var(--space-2);
    border: 1px solid var(--p-line); border-radius: var(--radius-md);
    background: var(--p-card, #fff);
}
.passport-schema-img {
    display: block; width: 100%;
    max-height: 360px; object-fit: contain;
    background: var(--p-bg);
    border-radius: var(--radius-sm);
}
.passport-schema-caption {
    margin-top: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--p-ink);
    text-align: center;
}

/* ── Ключевые экраны: media-вложения (скриншот / HTML) ───────── */
.passport-screen-card.passport-list-row--col {
    background: var(--p-card, #fff);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    gap: var(--space-2);
}
.passport-screen-head {
    display: flex; align-items: center; gap: var(--space-2);
}
.passport-screen-head .passport-input { flex: 1; min-width: 0; }

/* Toggle «Скриншот / HTML» — pill-сегментный переключатель */
.passport-screen-mode-toggle {
    display: inline-flex; gap: var(--space-0);
    background: var(--p-bg);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    padding: 3px;
    align-self: flex-start;
}
.passport-screen-mode-btn {
    background: transparent; border: 0; cursor: pointer;
    padding: 8px 12px; border-radius: var(--radius-sm);
    font: inherit; font-size: var(--text-xs); font-weight: 500;
    color: var(--p-muted);
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.passport-screen-mode-btn:hover { color: var(--p-ink); }
.passport-screen-mode-btn.is-active {
    background: var(--p-white, #fff);
    color: var(--p-ink);
    box-shadow: 0 1px 2px rgba(15,16,32,0.06);
}

/* Drop-zone для скриншота */
.passport-screen-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-1);
    padding: 32px 16px;
    border: 1.5px dashed var(--p-line);
    border-radius: var(--radius-lg);
    background: var(--p-bg);
    cursor: pointer;
    color: var(--p-muted);
    transition: border-color 0.12s, background 0.12s;
}
.passport-screen-dropzone:hover,
.passport-screen-dropzone.is-dragover {
    border-color: var(--p-vis, #B83553);
    background: rgba(184, 53, 83, 0.04);
}
.passport-screen-dropzone-icon { font-size: var(--text-2xl); line-height: 1; }
.passport-screen-dropzone-title {
    font-weight: 600; font-size: var(--text-sm); color: var(--p-ink);
}
.passport-screen-dropzone-hint {
    font-size: var(--text-xs); color: var(--p-muted-2);
}

/* Превью прикреплённой картинки */
.passport-screen-media--image { display: flex; flex-direction: column; gap: var(--space-2); }
.passport-screen-img {
    display: block;
    width: 100%; max-height: 320px;
    object-fit: contain;
    background: var(--p-bg);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
}
.passport-screen-media-actions { display: flex; gap: var(--space-2); }
.passport-screen-media-actions .passport-btn { cursor: pointer; }

/* HTML-режим: iframe-превью сверху, textarea с кодом снизу */
.passport-screen-media--html {
    display: flex; flex-direction: column; gap: var(--space-2);
}
.passport-screen-html-preview {
    width: 100%; height: 260px;
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    background: var(--p-white, #fff);
}
.passport-screen-html-empty {
    display: flex; align-items: center; justify-content: center;
    height: 90px;
    border: 1px dashed var(--p-line);
    border-radius: var(--radius-md);
    color: var(--p-muted-2);
    font-size: var(--text-xs); font-style: italic;
    background: var(--p-bg);
}
.passport-textarea--mono {
    font-family: var(--p-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
    font-size: var(--text-xs);
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
    overflow-x: auto;
}
.passport-screen-html-input {
    min-height: 140px;
    resize: vertical;
}

/* В read-view: картинка/HTML — на всю ширину карточки */
.passport-screen-img--read { max-height: 260px; }
.passport-screen-html-preview--read { height: 220px; }

/* Модал редактора drawio для блок-схемы */
.passport-schema-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    z-index: 1000;
    background: rgba(15, 16, 32, 0.55);
    display: flex; align-items: stretch; justify-content: center;
    padding: var(--space-6);
}
.passport-schema-modal-card {
    background: var(--p-card, #fff);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 1280px;
    min-width: min(720px, calc(100vw - 48px));
    height: 100%;
    min-height: 480px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.passport-schema-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--space-4);
    padding: 16px 20px;
    border-bottom: 1px solid var(--p-line);
    background: var(--p-white);
    flex: 0 0 auto;
}
.passport-schema-modal-title-wrap {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.passport-schema-modal-eyebrow {
    font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--p-muted-2, #9999AC);
    font-weight: 600;
}
.passport-schema-modal-title {
    margin: var(--space-0);
    font-weight: 600; font-size: var(--text-md);
    letter-spacing: -0.01em;
    color: var(--p-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.passport-schema-modal-actions {
    display: flex; gap: var(--space-2);
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.passport-schema-modal-actions .passport-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Кнопки в шапке модала: inversion-стиль.
   Обычное состояние — белый фон + чёрный текст (как «Отмена»).
   Hover/focus — тёмный фон + белый текст. */
.passport-schema-modal-actions .passport-btn svg { flex: 0 0 auto; }
.passport-schema-modal-actions .passport-btn,
.passport-schema-modal-actions .passport-btn--primary {
    background: var(--p-white, #FFFFFF);
    color: var(--p-ink, #1A1A2E);
    border-color: var(--p-line, #E8E8EE);
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.passport-schema-modal-actions .passport-btn:hover,
.passport-schema-modal-actions .passport-btn:focus-visible,
.passport-schema-modal-actions .passport-btn--primary:hover,
.passport-schema-modal-actions .passport-btn--primary:focus-visible {
    background: var(--p-ink-2, #2D2D4A);
    color: var(--p-white, #FFFFFF);
    border-color: var(--p-ink-2, #2D2D4A);
}
.passport-schema-modal-body {
    flex: 1 1 auto; min-height: 0;
    background: var(--p-bg);
}
.passport-schema-iframe {
    width: 100%; height: 100%;
    border: 0; display: block;
}
.passport-para {
    margin: var(--space-0); font-size: var(--text-base); color: var(--p-ink); line-height: 1.6;
    max-width: 780px;
}

/* Сущности (FN) */
.passport-entity-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
}
.passport-entity {
    padding: 8px 12px;
    border: 1px solid var(--p-line);
    border-radius: var(--radius-sm);
    background: var(--p-bg-2);
}
.passport-entity-name {
    font-family: var(--p-mono);
    font-size: var(--text-sm); font-weight: 600;
    color: var(--p-fn);
}
.passport-entity-desc {
    font-size: var(--text-xs); color: var(--p-muted);
    margin-top: 4px; line-height: 1.45;
}

/* Стек (TECH) */
.passport-stack-list { display: flex; flex-direction: column; gap: var(--space-2); }
.passport-stack-row {
    display: grid; grid-template-columns: 230px 1fr; gap: var(--space-4);
    padding: 12px 16px;
    background: var(--p-bg-2);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-sm);
    align-items: center;
}
.passport-stack-tech {
    font-family: var(--p-mono);
    font-size: var(--text-sm); color: var(--p-tech); font-weight: 600;
}
.passport-stack-why {
    font-size: var(--text-sm); color: var(--p-ink); line-height: 1.5;
}
.passport-stack-warn {
    color: var(--p-warn); font-style: italic;
}

/* Дерево репозитория */
.passport-tree {
    margin: var(--space-0); padding: 16px 20px;
    background: var(--p-ink);
    color: var(--p-line);
    border-radius: var(--radius-md);
    font-family: var(--p-mono);
    font-size: var(--text-sm); line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

/* Палитра (VIS) */
.passport-palette {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
    margin-bottom: 18px;
}
.passport-swatch {
    height: 92px;
    border-radius: var(--radius-sm);
    color: white;
    padding: var(--space-3);
    display: flex; align-items: flex-end;
    font-size: var(--text-xs); font-weight: 500;
}

/* Скриншоты экранов (VIS) */
.passport-screens {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
}
.passport-screen-card {
    border: 1px solid var(--p-line);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--p-white);
}
.passport-screen-stub {
    min-height: 110px;
    background: linear-gradient(180deg, var(--p-vis-bg) 0%, var(--p-bg-2) 100%);
    border-radius: var(--radius-xs);
    margin-bottom: 10px;
    border: 1px dashed var(--p-vis, #E8B5C2);
    display: flex; align-items: center; justify-content: center;
    color: var(--p-vis); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    text-align: center;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Сценарии (SCN) */
.passport-scn-list { display: flex; flex-direction: column; gap: var(--space-2); }
.passport-scn-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 12px 16px;
    background: var(--p-bg-2);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-sm);
}
.passport-scn-num {
    font-family: var(--p-mono);
    font-size: var(--text-base); font-weight: 600;
    color: var(--p-scn);
    background: var(--p-scn-bg);
    padding: 4px 8px; border-radius: var(--radius-xs);
    flex-shrink: 0;
}
.passport-scn-title {
    font-weight: 600; font-size: var(--text-base);
    margin-bottom: 4px;
}
.passport-scn-meta {
    font-size: var(--text-xs); color: var(--p-muted);
}

/* Не входит / not_in (FN) */
.passport-not-in {
    padding: 12px 16px;
    background: var(--p-fn-bg);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--p-ink); line-height: 1.55;
}

/* Read-адаптив */
@media (max-width: 1100px) {
    .passport-read { grid-template-columns: 1fr; }
    .passport-anchor-menu {
        position: static;
        flex-direction: row; flex-wrap: wrap;
        background: var(--p-bg);
        border: none; border-radius: var(--radius-md);
        padding: var(--space-2);
    }
    .passport-anchor { border-left: none; border-bottom: 2px solid transparent; }
    .passport-anchor.is-active { border-left: none; border-bottom-color: var(--p-c); }
}
@media (max-width: 900px) {
    .passport-section { padding: 20px 16px 20px 16px; }
    .passport-section::before { width: 30px; height: 30px; border-radius: 10px 0 8px 0; }
    .passport-read-title { font-size: var(--text-2xl); }
    .passport-entity-grid,
.passport-stack-row { grid-template-columns: 1fr; }
    .passport-palette,
.passport-screens { grid-template-columns: repeat(2, 1fr); }
}


/* ════════════════════════════════════════════════════════════
   HISTORY — список версий
   ════════════════════════════════════════════════════════════ */
.passport-history { max-width: 720px; margin: 0 auto; padding: 20px 0; }
.passport-history-head {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: 16px;
}
.passport-history-title-h1 {
    font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em;
    margin: var(--space-0); color: var(--p-ink);
}
.passport-history-list {
    list-style: none; padding: var(--space-0); margin: var(--space-0);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.passport-history-item {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-3);
    align-items: center;
}
.passport-history-version {
    font-family: var(--p-mono);
    font-size: var(--text-base); font-weight: 700;
    color: var(--p-tech);
    background: var(--p-tech-bg);
    padding: 4px 8px; border-radius: var(--radius-xs);
    text-align: center;
}
.passport-history-meta {
    display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
    font-size: var(--text-xs); color: var(--p-muted);
}
.passport-history-author { font-weight: 500; color: var(--p-ink); }
.passport-history-empty {
    color: var(--p-muted-2); font-style: italic;
    padding: var(--space-5); text-align: center;
}
.passport-history-loading {
    padding: var(--space-10); text-align: center; color: var(--p-muted);
}
.passport-history-title {
    font-size: var(--text-sm); color: var(--p-ink); margin-top: 4px;
}


/* ════════════════════════════════════════════════════════════
   CONFLICT — баннер «раздел редактирует X» (для Этапа 5)
   ════════════════════════════════════════════════════════════ */
.passport-conflict-banner {
    background: var(--p-warn-bg);
    border: 1px solid var(--p-warn-line);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 14px;
}
.passport-conflict-text {
    font-size: var(--text-sm); color: var(--p-ink); line-height: 1.45;
}
.passport-conflict-strong {
    font-weight: 600; color: var(--p-warn);
}


/* ════════════════════════════════════════════════════════════
   ПАСПОРТ — стили мастера (Этап 5)
   Степпер,
формы,
поля,
кнопки шагов,
lock-баннер.
   ════════════════════════════════════════════════════════════ */

/* Цвет «без вида» — для шага head */
.passport-root .v-muted { --p-c: var(--p-muted); --p-cb: var(--p-line-2); }

/* ── Степпер ── */
.passport-stepper {
    display: flex; align-items: stretch;
    background: var(--p-white);
    padding: 20px 32px 16px;
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
}
.passport-step {
    display: flex; flex-direction: column; align-items: center;
    min-width: 0; flex-shrink: 0;
    background: transparent; border: none;
    cursor: pointer; padding: var(--space-0);
    font-family: inherit;
}
.passport-step-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--p-white);
    border: 1.5px solid var(--p-line);
    color: var(--p-muted-2);
    font-family: var(--p-mono);
    font-weight: 600; font-size: var(--text-xs);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.passport-step-label {
    margin-top: 8px;
    font-size: var(--text-xs); font-weight: 500;
    color: var(--p-muted-2);
    text-align: center;
}
.passport-step.is-active .passport-step-circle {
    background: var(--p-c, var(--p-ink));
    border-color: var(--p-c, var(--p-ink));
    color: var(--p-white);
}
.passport-step.is-active .passport-step-label {
    color: var(--p-ink);
}
.passport-step.is-done .passport-step-circle {
    background: var(--p-c, var(--p-fn));
    border-color: var(--p-c, var(--p-fn));
    color: var(--p-white);
}
.passport-step.is-done .passport-step-label {
    color: var(--p-ink);
}
.passport-step:hover:not(.is-active):not(.is-done) .passport-step-circle {
    border-color: var(--p-muted);
    color: var(--p-ink);
}
.passport-step-conn {
    flex: 1; height: 2px;
    margin: 16px 4px 0;
    background: var(--p-line);
    align-self: flex-start;
}
.passport-step-conn.is-done {
    background: var(--p-fn); opacity: 0.5;
}

/* ── Wizard layout / main / footer ── */
.passport-wizard-main { display: flex; flex-direction: column; min-width: 0; }
.passport-wizard-section { padding: 24px 32px 32px 60px; }
.passport-wizard-section .passport-section-head { margin-left: -6px; }

.passport-wizard-footer {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    margin-top: 4px;
}
.passport-wizard-footer-right { display: flex; gap: var(--space-2); align-items: center; }

/* ── Поля формы ── */
.passport-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
@media (max-width: 768px) {
    .passport-form-grid { grid-template-columns: 1fr; }
}
.passport-field { display: flex; flex-direction: column; }
.passport-field-label {
    font-size: var(--text-xs); color: var(--p-muted); font-weight: 500;
    margin-bottom: 5px;
    letter-spacing: 0.02em;
}
.passport-input,
.passport-textarea {
    border: 1px solid var(--p-line);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-family: inherit; font-size: var(--text-sm); font-weight: 500;
    color: var(--p-ink);
    background: var(--p-white);
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.passport-textarea {
    line-height: 1.45;
    min-height: 56px;
    resize: vertical;
    font-weight: 400;
}
.passport-textarea--code {
    font-family: var(--p-mono);
    font-size: var(--text-xs);
    min-height: 120px;
    background: var(--p-bg);
}
/* Авто-расширяющиеся textarea: ручной resize отключён,
JS подгоняет
   высоту по содержимому. В современных браузерах (Chrome 123+, Edge 123+)
   field-sizing:content делает то же нативно. */
.passport-textarea--auto {
    resize: none;
    overflow: hidden;
    field-sizing: content;
    min-height: 56px;
    /* field-sizing:content по умолчанию подгоняет и ширину тоже —
       длинное слово без пробелов растягивает textarea горизонтально
       вместо переноса. Фиксируем ширину 100%, оставляя автогорст
       только по высоте. */
    width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.passport-textarea--code.passport-textarea--auto { min-height: 120px; }
/* Stack-карточки: textarea «обоснование» по умолчанию повыше */
.passport-stack-card-grid .passport-textarea--auto { min-height: 80px; }
/* Сценарии: список шагов — стартует от 4 строк */
.passport-scn-edit .passport-textarea--auto { min-height: 100px; }
/* VIS-экраны: при двух полях в строке — desc как textarea растёт под текст */
.passport-list-row--col {
    display: flex; flex-direction: column; gap: var(--space-2);
    align-items: stretch;
}
.passport-list-row--col .passport-btn--ghost {
    align-self: flex-end;
}
.passport-input--small { font-size: var(--text-xs); padding: var(--space-2); }
.passport-input:focus,
.passport-textarea:focus {
    border-color: var(--p-tech);
    box-shadow: 0 0 0 3px var(--p-tech-bg);
}
.passport-input.is-warn,
.passport-textarea.is-warn {
    border-color: var(--p-warn);
    background: var(--p-warn-bg);
}
.passport-input:disabled,
.passport-textarea:disabled,
.passport-input[readonly],
.passport-textarea[readonly] {
    opacity: 0.7; cursor: default;
    background: var(--p-bg-2);
}

/* Динамические списки (entities/roles/rules/screens/etc) */
.passport-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: 8px; }
.passport-list-row {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: start;
}
.passport-list-row > .passport-input:first-child:nth-last-child(2),
.passport-list-row > .passport-textarea:first-child:nth-last-child(2) {
    grid-column: 1 / -2;
}
.passport-list-row > .passport-textarea {
    grid-column: 1 / -2;
}

/* ── Стек: карточки слоёв ── */
.passport-stack-card {
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--p-bg-2);
    margin-bottom: 10px;
}
.passport-stack-card.is-warn {
    border-color: var(--p-warn-line);
    background: var(--p-warn-bg);
}
.passport-stack-card-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.passport-stack-card-eyebrow { color: var(--p-tech); }
/* Редактируемое имя слоя стека: не привлекает внимание в покое, но
   подсвечивается при фокусе как обычный input. */
.passport-stack-card-name {
    flex: 1; min-width: 0; max-width: 360px;
    font-size: var(--text-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--p-tech);
    background: transparent;
    border-color: transparent;
    padding: 4px 8px;
}
.passport-stack-card-name::placeholder {
    color: var(--p-tech);
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.passport-stack-card-name:hover { border-color: var(--p-line); background: var(--p-white); }
.passport-stack-card-name:focus { border-color: var(--p-tech); background: var(--p-white); }
/* Read-вид: подпись слоя над технологией */
.passport-stack-layer {
    font-size: var(--text-xs); font-weight: 600;
    color: var(--p-tech);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.passport-stack-card-grid {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-3);
}
@media (max-width: 768px) {
    .passport-stack-card-grid { grid-template-columns: 1fr; }
}
.passport-warn-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-left: 6px;
    font-size: var(--text-xs); font-weight: 600;
    color: var(--p-warn);
    background: var(--p-white);
    padding: 2px 8px; border-radius: var(--radius-xs);
    border: 1px solid var(--p-warn-line);
    text-transform: none; letter-spacing: 0;
}

/* ── Палитра редактор ── */
.passport-palette-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: 8px; }
.passport-palette-row {
    display: grid; grid-template-columns: 1fr 130px 36px auto;
    gap: var(--space-2); align-items: center;
}
.passport-palette-swatch {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--p-line);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    /* Шахматный фон под полупрозрачные цвета — пригодится в будущем,
       сейчас не мешает: непрозрачный фон цвета закрашивает его. */
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.06) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.06) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.passport-palette-swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--p-tech-bg);
    border-color: var(--p-tech);
}
.passport-palette-swatch:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--p-tech-bg);
    border-color: var(--p-tech);
}
.passport-palette-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: var(--space-0);
    background: transparent;
}
.passport-palette-color-input:disabled { cursor: not-allowed; }
/* hex-инпут: моноширинный для удобства чтения */
.passport-palette-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
}

/* ── Сценарии редактор ── */
.passport-scn-list { display: flex; flex-direction: column; gap: var(--space-2); }
.passport-scn-edit {
    background: var(--p-bg-2);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.passport-scn-edit-head {
    display: flex; justify-content: space-between; align-items: center;
}

/* ── Bullet lists в read ── */
.passport-bullet-list { margin: var(--space-0); padding-left: 20px; color: var(--p-ink); line-height: 1.7; }
.passport-bullet-list li { font-size: var(--text-sm); }
.passport-scn-steps {
    margin: 8px 0 0; padding-left: 20px;
    font-size: var(--text-xs); color: var(--p-ink); line-height: 1.6;
}

/* ── Rail (правая колонка мастера) ── */
.passport-rail-card {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.passport-rail-head {
    display: flex; justify-content: space-between; align-items: center;
}
.passport-rail-reviewers { display: flex; flex-direction: column; gap: var(--space-2); }
.passport-rail-reviewer { display: flex; align-items: center; gap: var(--space-2); }
.passport-rail-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    color: var(--p-white); font-size: var(--text-xs); font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.passport-rail-reviewer-info { flex: 1; min-width: 0; }
.passport-rail-reviewer-name { font-size: var(--text-sm); font-weight: 500; color: var(--p-ink); }
.passport-rail-reviewer-decision { font-size: var(--text-xs); font-weight: 500; }
.passport-rail-hint { font-size: var(--text-sm); color: var(--p-muted); line-height: 1.5; }
.passport-rail-version {
    display: flex; align-items: center; gap: var(--space-2);
}
.passport-rail-version-meta { font-size: var(--text-xs); color: var(--p-muted); }
.passport-rail-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: 4px; }
.passport-rail-decide { display: flex; flex-direction: column; gap: var(--space-2); }

/* «Сохранено» / «Сохранить черновик» — выделяем dirty */
.passport-btn.is-dirty { background: var(--p-warn-bg); border-color: var(--p-warn-line); color: var(--p-warn); }

/* ── Lock / conflict баннер уже определён в Этапе 4 ── */

/* ── Панель live-валидации модели 3+1 в правом rail wizard'а ── */
.passport-rail-card.is-ok { border-color: var(--p-fn); background: var(--p-fn-bg, #ECF6EE); }
.passport-validation-ok {
    color: var(--p-fn);
    font-size: var(--text-sm); font-weight: 500;
    line-height: 1.5;
}
.passport-validation-section { display: flex; flex-direction: column; gap: var(--space-2); }
.passport-validation-section + .passport-validation-section { margin-top: 4px; }
.passport-validation-h {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--p-muted);
}
.passport-validation-section.is-err  .passport-validation-h { color: var(--p-danger, #B83553); }
.passport-validation-section.is-warn .passport-validation-h { color: var(--p-warn,   #B8821F); }
.passport-validation-list {
    list-style: none; padding: var(--space-0); margin: var(--space-0);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.passport-validation-item {
    display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--text-sm); line-height: 1.45; color: var(--p-ink);
    padding: var(--space-2); border-radius: var(--radius-sm);
    background: var(--p-bg, #F7F7FA);
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
    user-select: none;
}
.passport-validation-item:hover { transform: translateX(2px); }
.passport-validation-item.is-err:hover { background: var(--color-danger-soft, #F4DEE0); }
.passport-validation-item.is-warn:hover { background: var(--color-warning-soft, #F4ECD6); }
.passport-validation-item:active { transform: translateX(2px) scale(.99); }

/* Flash-подсветка поля при переходе по issue */
@keyframes passport-flash-kf {
    0%   { box-shadow: 0 0 0 4px rgba(184, 53, 83, .35); }
    100% { box-shadow: 0 0 0 4px rgba(184, 53, 83, 0); }
}
.passport-flash {
    animation: passport-flash-kf 1.4s ease-out;
    border-radius: var(--radius-sm);
}
.passport-validation-item.is-err { background: #FAEEEF; }
.passport-validation-item.is-warn { background: #FAF4E8; }
.passport-validation-bullet {
    width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
    background: currentColor;
}
.passport-validation-item.is-err  .passport-validation-bullet { color: var(--p-danger, #B83553); }
.passport-validation-item.is-warn .passport-validation-bullet { color: var(--p-warn,   #B8821F); }
.passport-validation-text { flex: 1; min-width: 0; }
.passport-validation-more { font-size: var(--text-xs); color: var(--p-muted); padding: 0 8px; }

/* Disabled-state для кнопки «Отправить на согласование» — приглушённо */
.passport-btn[disabled],
.passport-btn--primary[disabled] {
    opacity: .55; cursor: not-allowed;
    box-shadow: none;
}

/* ──────────────────────────────────────────────────────────────
   Skeleton-загрузчики (вместо спиннеров).
   Используется как `<div class="skeleton skeleton-text">` и т.п.
   Pulse-анимация даёт ощущение «контент уже почти тут», в отличие
   от крутящегося спиннера, который воспринимается как ожидание сети.
   ────────────────────────────────────────────────────────────── */
@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    display: inline-block;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.06) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm, 4px);
    color: transparent;
    user-select: none;
    pointer-events: none;
}
.skeleton-text   { height: 12px; width: 100%; border-radius: var(--radius-sm); }
.skeleton-title  { height: 18px; width: 50%; border-radius: var(--radius-sm); }
.skeleton-row    { display: flex; gap: var(--space-3); align-items: center; padding: 8px 12px; }
.skeleton-row .skeleton-text { flex: 1; }
.skeleton-circle { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.skeleton-bar    { height: 8px; width: 100%; border-radius: var(--radius-xs); }
.skeleton-card   { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface, #fff);
                   border: 1px solid var(--color-border, #e8e8eb); display: flex;
                   flex-direction: column; gap: var(--space-2); }

/* Конфетти при закрытии последней задачи фазы.
   Используется через JS: `confettiBurst(rect)`. */
.confetti-piece {
    position: fixed;
    width: 8px; height: 8px;
    pointer-events: none;
    z-index: 9999;
    border-radius: 2px;
    will-change: transform, opacity;
    animation: confetti-fall 1.6s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes confetti-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--cx, 0), var(--cy, 80px)) rotate(540deg); opacity: 0; }
}

/* Поле «Примечание» в таблице дорожной карты: textarea вместо input,
высота растёт по контенту,
ширина фиксированная (110px) — длинный
   текст переносится на следующую строку,
ячейка увеличивается в высоту. */
.task-note-input {
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-xs);
    padding: 3px 8px;
    font-size: var(--text-xs);
    font-family: inherit;
    line-height: 1.45;
    /* ~110px ширина и до 3 строк по высоте (≈60px). Что не уместилось —
       видно полностью в popup-окне «Полное примечание» (.task-note-expand). */
    width: 110px;
    flex: 0 0 110px;
    min-width: 0;
    min-height: 22px;
    max-height: 60px;
    resize: none;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    vertical-align: top;
    background: var(--color-surface, #fff);
    color: inherit;
    box-sizing: border-box;
    display: inline-block;
}
/* Кнопка-«стрелка наружу»: появляется только если в примечании больше
   50 символов. По клику открывает popup-окно с полным текстом. */
.task-note-expand {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s ease, color .12s ease;
    padding: var(--space-0);
    line-height: 1;
}
.task-note-expand:hover { background: var(--color-bg-subtle, #f3f4f6); color: var(--color-text, #1f2937); }
.task-note-expand[hidden] { display: none !important; }

/* ── Popup «Полное примечание» ───────────────────────────────────── */
.task-note-popup-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1400;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.task-note-popup-overlay[hidden] { display: none; }
.task-note-popup-overlay.is-open { opacity: 1; }
.task-note-popup {
    background: var(--color-surface, #fff);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
    display: flex; flex-direction: column;
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: transform 180ms ease-out, opacity 180ms ease-out;
}
.task-note-popup-overlay.is-open .task-note-popup {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.task-note-popup-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    gap: var(--space-3);
}
.task-note-popup-title {
    margin: var(--space-0);
    font-size: var(--text-base); font-weight: 600;
    color: var(--color-text, #1f2937);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-note-popup-close {
    background: transparent; border: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--radius-md);
    font-size: var(--text-xl); line-height: 1;
    color: var(--color-text-secondary, #6b7280);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.task-note-popup-close:hover { background: var(--color-bg-subtle, #f3f4f6); color: var(--color-text, #1f2937); }
.task-note-popup-body {
    padding: 12px 16px 16px;
    overflow-y: auto;
    flex: 1;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.task-note-popup-input {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    background: var(--color-bg-faint, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-family: inherit; font-size: var(--text-sm); line-height: 1.55;
    color: var(--color-text, #1f2937);
    box-sizing: border-box;
}
.task-note-popup-input:focus {
    outline: none;
    border-color: var(--color-primary, #4A3D9A);
    background: var(--color-surface, #fff);
    box-shadow: 0 0 0 2px var(--color-primary-25, rgba(74,61,154,0.18));
}
.task-note-popup-status {
    text-align: right;
    font-size: var(--text-xs);
    color: var(--color-text-secondary, #6b7280);
    min-height: 14px;
}

/* Ячейка «Примечание»: textarea — flex:1, ⋯-кнопка справа. */
.task-note-td { vertical-align: top; }
.task-note-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.task-note-hidden-actions { display: none !important; }

/* ⋯-триггер */
.task-note-more {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    padding: var(--space-0);
}
.task-note-more:hover { background: var(--color-bg-subtle, #f3f4f6); color: var(--color-text, #1f2937); }
.task-note-more[aria-expanded="true"] {
    background: var(--color-bg-subtle, #f3f4f6);
    color: var(--color-text, #1f2937);
    border-color: var(--color-border, #e5e7eb);
}

/* Поповер-меню «⋯» */
.task-note-menu {
    position: absolute;
    z-index: 1400;
    min-width: 220px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: var(--space-2);
    display: flex; flex-direction: column;
}
.task-note-menu-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 8px 12px;
    background: transparent; border: none; border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit; font-size: var(--text-sm);
    color: var(--color-text, #1f2937);
    text-align: left;
}
.task-note-menu-item:hover { background: var(--color-bg-subtle, #f3f4f6); }
.task-note-menu-item svg { color: var(--color-text-secondary, #6b7280); flex-shrink: 0; }
.task-note-menu-item:hover svg { color: var(--color-text, #1f2937); }
.task-note-menu-item > span:first-of-type { flex: 1; }
.task-note-menu-item.has-note { color: var(--color-primary, #4A3D9A); font-weight: 600; }
.task-note-menu-item.has-note svg { color: var(--color-primary, #4A3D9A); }
.task-note-menu-count {
    font-size: var(--text-xs);
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-bg-subtle, #f3f4f6);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    min-width: 22px; text-align: center;
}
.task-note-menu-count:empty { display: none; }
.task-note-input:focus {
    outline: none;
    border-color: var(--color-primary, #4A3D9A);
    box-shadow: 0 0 0 2px rgba(74, 61, 154, 0.18);
}
.task-note-input::placeholder { color: #aaa; }

/* ── Авто-отметка «Выполнено» на этапе/фазе и действия этапа ────────
   .is-complete ставится из updateAllProgress, когда все задачи задачи
   реально done. Показываем тонкий зелёный бейдж рядом с названием и
   подкрашиваем заливку прогресса в зелёный. */
.phase-row .done-badge,
.step-row .done-badge {
    display: none;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success, #2e7d32);
    background: var(--color-success-soft, #e8f5e9);
    border: 1px solid var(--color-success-soft, #c8e6c9);
    border-radius: var(--radius-lg);
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.phase-row.is-complete .done-badge,
.step-row.is-complete .done-badge { display: inline-block; }
.phase-row.is-complete .phase-progress-fill,
.step-row.is-complete  .step-progress-fill {
    background: var(--color-success, #4caf50);
    opacity: 0.85;
}

/* ── Кнопки этапа: файлы и комментарии ────────────────────────────── */
.step-row .btn-step-attach,
.step-row .btn-step-comment {
    margin-left: 4px;
    vertical-align: middle;
}
.step-row .btn-step-comment .btn-comment-count {
    font-size: var(--text-xs);
    font-weight: 600;
    margin-left: 2px;
    color: var(--color-text-secondary);
}
.step-row .btn-step-comment.has-comments .btn-comment-count { color: var(--color-primary); }

/* ── Инлайн-иконки вместо эмодзи (единый минималистичный набор) ──── */
.emoji-ico {
    display: inline-block;
    flex: none;
    vertical-align: -0.14em;
}

/* ── Сроки этапа (start/end на строке этапа) ─────────────────────── */
.step-dates {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-xs);
    vertical-align: middle;
}
.step-date-input {
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-xs);
    padding: 2px 4px;
    font-size: var(--text-xs);
    font-family: inherit;
    width: 84px;
    color: var(--color-text, #1f2937);
}
.step-date-input::placeholder { color: var(--color-text-muted, #cbd5e1); }
.step-date-input:hover {
    border-color: var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
}
.step-date-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 2px var(--color-primary-25);
}
.step-dates-sep {
    color: var(--color-text-secondary, #94a3b8);
    font-size: var(--text-xs);
    user-select: none;
}

/* ════════════════════════════════════════════════════════════════════
   ПАСПОРТ · TECH STEP — конструкторы инфраструктуры и структуры
   Использует токены паспорта: --p-tech, --p-tech-bg, --p-line,
   --p-bg-2, --p-white. Цель — единый визуальный язык со stack-card.
   ════════════════════════════════════════════════════════════════════ */

.passport-field-hint {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-secondary, #64748b);
    margin: -2px 0 8px;
}

/* ── Конструктор «Структура проекта» ──────────────────────────────── */
.passport-tree-builder {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    background: var(--p-bg-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--p-line);
}
.passport-tree-row {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) minmax(160px, 1.7fr) auto;
    gap: var(--space-2);
    align-items: center;
    padding: 4px 4px 4px calc(var(--passport-depth, 0) * 24px + 4px);
    border-radius: var(--radius-sm);
    position: relative;
    transition: background .12s ease;
}
.passport-tree-row:hover { background: var(--p-white); }
/* Тонкая вертикальная направляющая для уровней вложенности */
.passport-tree-row[style*="--passport-depth:1"]::before,
.passport-tree-row[style*="--passport-depth:2"]::before,
.passport-tree-row[style*="--passport-depth:3"]::before,
.passport-tree-row[style*="--passport-depth:4"]::before,
.passport-tree-row[style*="--passport-depth:5"]::before,
.passport-tree-row[style*="--passport-depth:6"]::before,
.passport-tree-row[style*="--passport-depth:7"]::before,
.passport-tree-row[style*="--passport-depth:8"]::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--passport-depth, 0) * 24px - 8px);
    width: 1px;
    background: var(--p-line);
}
.passport-tree-controls {
    display: inline-flex;
    gap: 1px;
    flex-shrink: 0;
    padding: 2px;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-sm);
}
.passport-tree-btn {
    width: 22px; height: 22px;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--color-text-secondary, #64748b);
    padding: var(--space-0);
    font-size: var(--text-xs);
    line-height: 1;
    transition: background .12s ease, color .12s ease;
}
.passport-tree-btn:hover {
    background: var(--p-tech-bg);
    color: var(--p-tech);
}
.passport-tree-btn--danger {
    margin-left: 2px;
    border: 1px solid var(--p-line);
    background: var(--p-white);
}
.passport-tree-btn--danger:hover {
    color: var(--color-danger, #c62828);
    border-color: var(--color-danger, #c62828);
    background: var(--color-danger-soft, #fff5f5);
}
.passport-tree-name {
    font-family: var(--p-mono, var(--font-mono));
    font-size: var(--text-sm);
    font-weight: 500;
}
.passport-tree-comment {
    font-size: var(--text-sm);
    color: var(--color-text-secondary, #64748b);
}
.passport-tree-actions {
    margin-top: 10px;
    display: flex;
    gap: var(--space-2);
}
.passport-tree-empty {
    text-align: center;
    color: var(--color-text-secondary, #64748b);
    font-size: var(--text-sm);
    padding: 16px 12px;
    font-style: italic;
    background: var(--p-white);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--p-line);
}

/* ── Markdown-preview (стиль терминала / VS Code) ────────────────── */
.passport-tree-preview-wrap {
    margin-top: 16px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #1e1e2e;
    border: 1px solid #2d2d44;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08),
                0 1px 2px rgba(15, 23, 42, 0.06);
}
.passport-tree-preview-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    background: linear-gradient(to bottom, #2d2d44, #28283d);
    border-bottom: 1px solid #1a1a2a;
}
.passport-tree-preview-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #6b6b85;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.passport-tree-preview-dot:nth-child(1) { background: #ff5f56; }
.passport-tree-preview-dot:nth-child(2) { background: #ffbd2e; }
.passport-tree-preview-dot:nth-child(3) { background: #27c93f; }
.passport-tree-preview-label {
    margin-left: 10px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
    font-weight: 500;
}
.passport-tree-preview {
    margin: var(--space-0);
    padding: var(--space-4);
    color: #e2e8f0;
    background: #1e1e2e;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm);
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
}
.passport-md-fence {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-style: italic;
}

/* ── Конструктор «Инфраструктура» ─────────────────────────────────── */
.passport-infra-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.passport-infra-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.7fr) 1fr auto;
    gap: var(--space-2);
    align-items: stretch;
    padding: 8px 12px;
    background: var(--p-bg-2);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    transition: border-color .12s ease, background .12s ease;
}
.passport-infra-row:hover {
    border-color: var(--p-tech);
    background: var(--p-white);
}
.passport-infra-row:focus-within {
    border-color: var(--p-tech);
    background: var(--p-white);
    box-shadow: 0 0 0 3px var(--p-tech-bg);
}
.passport-infra-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p-tech);
    background: transparent;
    border-color: transparent;
    padding: var(--space-2);
    align-self: start;
}
.passport-infra-label::placeholder {
    color: var(--p-tech);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.passport-infra-label:hover { border-color: var(--p-line); background: var(--p-white); }
.passport-infra-label:focus { border-color: var(--p-tech); background: var(--p-white); }
.passport-infra-row .passport-textarea {
    min-height: 38px;
    line-height: 1.5;
}
.passport-infra-row .passport-tree-btn--danger {
    align-self: center;
    width: 26px; height: 26px;
}

@media (max-width: 720px) {
    .passport-infra-row {
        grid-template-columns: 1fr auto;
    }
    .passport-infra-row .passport-textarea {
        grid-column: 1 / -1;
    }
    .passport-tree-row {
        grid-template-columns: auto 1fr auto;
    }
    .passport-tree-row .passport-tree-comment {
        grid-column: 1 / -1;
        padding-left: calc(var(--passport-depth, 0) * 24px + 4px);
    }
}

/* ── Редизайн: редакционная подача (one-pager) ──────────────────────
   Крупные заголовки документа — серифным Fraunces (var(--font-display));
   секционные заголовки остаются на гротеске. Палитра — токены PRD выше. */
.passport-root .passport-empty-title,
.passport-root .passport-read-title {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.passport-root .passport-empty-title em,
.passport-root .passport-read-title em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--dusk);
}

/* ═══════════════════════════════════════════════════════════════
   READ-ВИД «Адаптивный 1:1» под эталон Stitch (Executive Suite)
   Serif-заголовок + бейдж модели · мета-строка с точками-статусами ·
   горизонтальный сегмент-свитчер 3+1 (один вид за раз) · карточная
   сетка контента. Палитра — scoped --p-* выше (light + dark).
   ═══════════════════════════════════════════════════════════════ */
.passport-root .passport-read--stitch {
    display: block;
    background: var(--p-bg);
    border-radius: var(--radius-2xl, 16px);
    padding: clamp(16px, 1.6vw, 28px);
}

/* ── Sub-header: serif-заголовок, бейдж, мета, действия ── */
.passport-root .passport-rhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    margin-bottom: clamp(14px, 1.4vw, 22px);
}
.passport-root .passport-rhead-main { min-width: 0; flex: 1 1 420px; }
.passport-root .passport-rhead-titlerow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 10px;
}
.passport-root .passport-rtitle {
    font-family: var(--p-serif);
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--p-ink);
    margin: 0;
}
.passport-root .passport-rbadge {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--p-accent-tint);
    color: var(--p-tech);
    border: 1px solid color-mix(in srgb, var(--p-tech) 22%, transparent);
    border-radius: var(--radius-sm, 6px);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.passport-root .passport-rpill { align-self: center; }
.passport-root .passport-rhead-titlerow .passport-version-tag {
    align-self: center;
    font-family: var(--p-mono);
    font-size: 12px;
    color: var(--p-muted);
}
.passport-root .passport-rmeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    color: var(--p-muted);
    font-size: 13px;
}
.passport-root .passport-rmeta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.passport-root .passport-rmeta-ico { width: 16px; height: 16px; opacity: 0.85; }
.passport-root .passport-rmeta-dots {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-left: 4px;
}
.passport-root .passport-rmeta-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
}
.passport-root .passport-rmeta-dot.is-filled { color: var(--p-fn); }
.passport-root .passport-rmeta-dot.is-empty  { color: var(--p-muted-2); }
.passport-root .passport-rdot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.passport-root .passport-rhead-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Сегмент-свитчер 3+1 (горизонтальный, grid-4) ── */
.passport-root .passport-seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    background: var(--p-bg-2);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-xl, 12px);
    padding: 8px;
    box-shadow: var(--shadow-sm);
    margin-bottom: clamp(14px, 1.4vw, 22px);
}
.passport-root .passport-seg-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 12px 14px;
    border: none;
    border-left: 3px solid transparent;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast, .15s), border-color var(--transition-fast, .15s);
}
.passport-root .passport-seg-btn:hover { background: var(--p-bg); }
.passport-root .passport-seg-btn.is-active {
    background: var(--p-accent-tint);
    border-left-color: var(--p-accent);
}
.passport-root .passport-seg-num {
    font-family: var(--p-mono);
    font-size: 11px;
    color: var(--p-muted-2);
}
.passport-root .passport-seg-btn.is-active .passport-seg-num { color: var(--p-accent); }
.passport-root .passport-seg-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--p-muted);
    line-height: 1.2;
}
.passport-root .passport-seg-btn.is-active .passport-seg-label { color: var(--p-accent); }
.passport-root .passport-seg-btn:hover .passport-seg-label { color: var(--p-ink); }
.passport-root .passport-seg-sub {
    font-size: 11px;
    font-style: italic;
}
.passport-root .passport-seg-sub.is-filled { color: var(--p-fn); }
.passport-root .passport-seg-sub.is-empty  { color: var(--p-muted-2); }

/* ── Панели видов: показываем только активную ── */
.passport-root .passport-vpanel { display: none; }
.passport-root .passport-vpanel.is-active { display: block; }
.passport-root .passport-vpanel[hidden] { display: none; }

/* ── Карточная сетка контента ── */
.passport-root .passport-cardgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 20px);
    align-items: start;
}
.passport-root .vpanel-tech .passport-cardgrid,
.passport-root .vpanel-vis  .passport-cardgrid,
.passport-root .vpanel-scn  .passport-cardgrid {
    grid-template-columns: minmax(0, 1fr);
}
/* Каждый sub-block внутри read-панели — карточка в стиле Stitch */
.passport-root .passport-vpanel .passport-sub-block {
    background: var(--p-bg-2);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-xl, 12px);
    padding: clamp(14px, 1.3vw, 22px);
    box-shadow: var(--shadow-sm);
    margin: 0;
}
.passport-root .passport-vpanel .passport-sub-block .passport-eyebrow {
    color: var(--p-tech);
    margin-bottom: 10px;
}
.passport-root .passport-vpanel .passport-section-empty {
    grid-column: 1 / -1;
    padding: clamp(20px, 3vw, 40px);
    text-align: center;
    color: var(--p-muted-2);
    background: var(--p-bg-2);
    border: 1px dashed var(--p-line);
    border-radius: var(--radius-xl, 12px);
}
@media (max-width: 860px) {
    .passport-root .passport-cardgrid { grid-template-columns: minmax(0, 1fr); }
    .passport-root .passport-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .passport-root .passport-rhead-actions { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   МОДЕЛЬ 3+1 — ДОСТРОЙКА: готовность видов, аудитория, плашки
   «чего здесь быть не должно», таблица сценариев, обоснования.
   ════════════════════════════════════════════════════════════════════ */

/* Готовность видов: сегменты и мета-точки (empty / in_progress / ready) */
.passport-root .passport-seg-sub.is-ready    { color: var(--p-success); }
.passport-root .passport-seg-sub.is-progress { color: var(--p-tech); }
.passport-root .passport-rmeta-dot.is-ready    { color: var(--p-success); }
.passport-root .passport-rmeta-dot.is-progress { color: var(--p-tech); }

/* «Кто заполняет» — на сегменте и в шапках панелей/шагов */
.passport-root .passport-seg-audience {
    display: block;
    font-size: 10.5px;
    color: var(--p-muted-2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.passport-audience {
    font-size: 12px;
    color: var(--p-muted, #6A7180);
    margin-top: 2px;
}
.passport-vpanel-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.passport-vpanel-meta {
    font-size: 12px;
    color: var(--p-muted-2, #9AA1AE);
}

/* Плашка «Чего здесь быть не должно» — приглушённая, не кричит */
.passport-antiscope {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px dashed var(--p-line, #E3E7EE);
    border-radius: 8px;
    background: var(--p-bg, #F8F9FB);
    color: var(--p-muted, #6A7180);
    font-size: 12px;
    line-height: 1.5;
}
.passport-antiscope svg { flex: none; margin-top: 2px; opacity: 0.7; }
.passport-antiscope strong { font-weight: 600; color: inherit; }

/* Обязательное «почему»: пустое поле подсвечивается статусом failed */
.passport-input.is-why-missing,
.passport-textarea.is-why-missing {
    border-color: var(--status-failed, var(--p-danger, #9A3324)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-failed, var(--p-danger, #9A3324)) 14%, transparent);
}
.passport-palette-row--col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.passport-palette-row-main {
    display: flex;
    gap: 8px;
    align-items: center;
}
.passport-palette-why { width: 100%; }

/* Палитра в read: цвет + роль + «почему» */
.passport-root .passport-swatch-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.passport-root .passport-swatch-why {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--p-muted, #6A7180);
}
.passport-root .passport-swatch-why.is-missing {
    color: var(--p-danger, #9A3324);
    font-style: italic;
}

/* Таблица сценария (read): Шаг · Действие · Функц · Тех · Виз.
   Пустая ячейка/колонка = вид недоработан. */
.passport-scn-table-wrap {
    overflow-x: auto;
    margin-top: 10px;
    border: 1px solid var(--p-line, #E3E7EE);
    border-radius: 8px;
}
.passport-scn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 640px;
}
.passport-scn-table th,
.passport-scn-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--p-line-2, #ECEEF3);
    border-right: 1px solid var(--p-line-2, #ECEEF3);
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}
.passport-scn-table th:last-child,
.passport-scn-table td:last-child { border-right: none; }
.passport-scn-table tbody tr:last-child td { border-bottom: none; }
.passport-scn-table thead th {
    background: var(--p-bg, #F8F9FB);
    color: var(--p-muted, #6A7180);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
/* Липкие «Шаг» и «Действие» при горизонтальном скролле */
.passport-scn-table .passport-scn-th-step,
.passport-scn-table .passport-scn-td-step {
    position: sticky; left: 0; z-index: 1;
    background: var(--p-bg-2, #fff);
    width: 40px; min-width: 40px;
    color: var(--p-muted-2, #9AA1AE);
    font-variant-numeric: tabular-nums;
}
.passport-scn-table thead .passport-scn-th-step { background: var(--p-bg, #F8F9FB); }
.passport-scn-table .passport-scn-td-action { min-width: 180px; }
.passport-scn-table td.is-cell-empty {
    color: var(--p-muted-2, #9AA1AE);
    text-align: center;
}
.passport-scn-table td.is-col-empty,
.passport-scn-table th.is-col-empty {
    background: color-mix(in srgb, var(--status-failed, var(--p-danger, #9A3324)) 7%, transparent);
}
.passport-scn-colwarn {
    margin-top: 8px;
    font-size: 12px;
    color: var(--status-failed, var(--p-danger, #9A3324));
}

/* Редактор таблицы сценария в мастере */
.passport-scnrows {
    margin-top: 10px;
    border: 1px solid var(--p-line, #E3E7EE);
    border-radius: 8px;
    overflow: hidden;
}
.passport-scnrow {
    display: grid;
    grid-template-columns: 36px 1.4fr 1fr 1fr 1fr 30px;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--p-line-2, #ECEEF3);
}
.passport-scnrow:last-child { border-bottom: none; }
.passport-scnrow--head {
    background: var(--p-bg, #F8F9FB);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--p-muted, #6A7180);
}
.passport-scnrow--head > span { padding: 7px 8px; }
.passport-scnrow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    color: var(--p-muted-2, #9AA1AE);
    font-variant-numeric: tabular-nums;
}
.passport-scnrow .passport-scnrow-cell {
    border: none;
    border-left: 1px solid var(--p-line-2, #ECEEF3);
    border-radius: 0;
    min-height: 38px;
    font-size: 12.5px;
    padding: 8px;
    resize: none;
    background: transparent;
}
.passport-scnrow .passport-scnrow-cell:focus {
    outline: none;
    background: var(--p-accent-tint, #ECECF5);
}
.passport-scnrow .passport-scnrow-cell.is-col-empty {
    background: color-mix(in srgb, var(--status-failed, var(--p-danger, #9A3324)) 6%, transparent);
}
.passport-scnrow-del {
    border: none;
    border-left: 1px solid var(--p-line-2, #ECEEF3);
    border-radius: 0;
    align-self: stretch;
}

/* Мобильный: редактор сценария складывается в колонку */
@media (max-width: 860px) {
    .passport-scnrow { grid-template-columns: 28px 1fr 30px; }
    .passport-scnrow--head { display: none; }
    .passport-scnrow .passport-scnrow-cell { grid-column: 2; }
    .passport-scnrow-del { grid-column: 3; grid-row: 1; }
    .passport-scnrow-num { grid-row: 1; }
}

/* ── Стек как карточки (эталон Stitch «Стек и обоснование») ──────────
   В read-виде стек рендерится сеткой карточек: слой + технология +
   обоснование «Почему». Заменяет плоский список passport-stack-list. */
.passport-root .passport-vpanel .passport-stack-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(10px, 1vw, 16px);
}
.passport-root .passport-stack-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--p-bg);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg, 10px);
    padding: 14px 16px;
}
.passport-root .passport-stack-card-layer {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-tech);
}
.passport-root .passport-stack-card-tech {
    font-family: var(--p-mono);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--p-ink);
    word-break: break-word;
}
.passport-root .passport-stack-card-why {
    font-size: var(--text-sm);
    color: var(--p-muted);
    line-height: 1.45;
}
.passport-root .passport-stack-card-whlabel {
    font-weight: 600;
    color: var(--p-ink-2);
}
.passport-root .passport-stack-card-why.is-missing {
    color: var(--p-danger);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   МАСТЕР под эталон Stitch — serif-заголовок шага + сегмент-степпер.
   Мастер визуально рифмуется с read-видом: тот же serif и тот же
   сегмент-бар 3+1 (активный = accent-tint + левый бордюр-акцент),
   вместо «кружков с коннекторами». Только CSS, разметка/логика те же.
   ═══════════════════════════════════════════════════════════════ */
.passport-root .passport-wizard-section .passport-section-title {
    font-family: var(--p-serif);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 38px);
    letter-spacing: -0.01em;
    line-height: 1.08;
}

/* Степпер → сегмент-бар (как read .passport-seg) */
.passport-root .passport-stepper {
    gap: 8px;
    padding: 8px;
    align-items: stretch;
    background: var(--p-bg-2);
    box-shadow: var(--shadow-sm);
}
.passport-root .passport-stepper .passport-step {
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    border-left: 3px solid transparent;
    text-align: left;
    transition: background var(--transition-fast, .15s), border-color var(--transition-fast, .15s);
}
.passport-root .passport-stepper .passport-step.is-active {
    background: var(--p-accent-tint);
    border-left-color: var(--p-accent);
}
.passport-root .passport-stepper .passport-step:hover:not(.is-active) {
    background: var(--p-bg);
}
.passport-root .passport-stepper .passport-step-circle {
    width: 24px; height: 24px;
    flex-shrink: 0;
}
.passport-root .passport-stepper .passport-step.is-active .passport-step-circle {
    background: var(--p-accent);
    border-color: var(--p-accent);
    color: var(--p-white);
}
.passport-root .passport-stepper .passport-step-label {
    margin-top: 0;
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--p-muted);
    line-height: 1.2;
}
.passport-root .passport-stepper .passport-step.is-active .passport-step-label {
    color: var(--p-accent);
}
.passport-root .passport-stepper .passport-step.is-done .passport-step-label {
    color: var(--p-ink);
}
/* Коннекторы в сегмент-баре не нужны */
.passport-root .passport-stepper .passport-step-conn { display: none; }

@media (max-width: 760px) {
    .passport-root .passport-stepper { flex-wrap: wrap; }
    .passport-root .passport-stepper .passport-step { flex-basis: 45%; }
}

/* ═══════════════════════════════════════════════════════════════
   МАСТЕР — раскладка с ЛЕВЫМ progress-рейлом (эталон Stitch «Мастер»)
   [степпер-рейл слева | контент | рейл валидации справа]. Степпер
   становится вертикальным; на узких — рейлы сворачиваются под контент.
   ═══════════════════════════════════════════════════════════════ */
.passport-root .passport-wizard--stitch .passport-wizard-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr) 296px;
    gap: clamp(12px, 1.4vw, 24px);
    align-items: start;
}
.passport-root .passport-wizard-steprail {
    position: sticky;
    top: 12px;
    align-self: start;
    background: var(--p-bg-2);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-xl, 12px);
    padding: 14px 12px;
    box-shadow: var(--shadow-sm);
}
.passport-root .passport-wizard-steprail-head {
    padding: 4px 10px 12px;
    border-bottom: 1px solid var(--p-line);
    margin-bottom: 10px;
}
.passport-root .passport-wizard-steprail-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p-tech);
}
.passport-root .passport-wizard-steprail-title {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--p-muted);
}
/* Вертикальный степпер внутри левого рейла */
.passport-root .passport-wizard-steprail .passport-stepper {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.passport-root .passport-wizard-steprail .passport-step {
    flex: 0 0 auto;
    width: 100%;
    padding: 11px 12px;
}
.passport-root .passport-wizard-steprail .passport-step-conn { display: none; }

@media (max-width: 1240px) {
    .passport-root .passport-wizard--stitch .passport-wizard-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .passport-root .passport-wizard--stitch .passport-wizard-rail {
        grid-column: 1 / -1;
    }
}
@media (max-width: 820px) {
    .passport-root .passport-wizard--stitch .passport-wizard-layout {
        grid-template-columns: 1fr;
    }
    .passport-root .passport-wizard-steprail { position: static; }
    .passport-root .passport-wizard-steprail .passport-stepper {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .passport-root .passport-wizard-steprail .passport-step { flex: 1 1 40%; }
}

/* ── Пять принципов 3+1 — тонкая сноска под видами (read-экран) ──────── */
.passport-root .passport-principles {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--p-line);
}
.passport-root .passport-principles-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p-muted-2);
    margin-bottom: 12px;
}
.passport-root .passport-principles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.passport-root .passport-principle {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.passport-root .passport-principle-n {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--p-accent-tint);
    color: var(--p-accent);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 1px;
}
.passport-root .passport-principle-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.passport-root .passport-principle-t {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p-ink);
    line-height: 1.3;
}
.passport-root .passport-principle-d {
    font-size: 11.5px;
    color: var(--p-muted);
    line-height: 1.35;
}
@media (max-width: 1100px) {
    .passport-root .passport-principles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .passport-root .passport-principles-list { grid-template-columns: 1fr; }
}

/* ── Сценарии (+1): per-cell подсветка пробела + чипы 01..05 (Stitch) ──── */
.passport-root .passport-scnrow-cell.is-cell-empty {
    border-color: var(--status-failed, var(--p-danger, #9A3324)) !important;
    background: color-mix(in srgb, var(--status-failed, var(--p-danger, #9A3324)) 6%, transparent);
}
.passport-root .passport-scnrow-cell.is-cell-empty::placeholder {
    color: var(--status-failed, var(--p-danger, #9A3324));
    opacity: 0.9;
}
.passport-root .passport-scn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--p-line);
}
.passport-root .passport-scn-chip {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--p-line);
    background: var(--p-bg-2, var(--p-white));
    color: var(--p-muted);
    font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.passport-root .passport-scn-chip:hover {
    border-color: var(--p-accent);
    color: var(--p-accent);
}
.passport-root .passport-scn-chip--add {
    border-style: dashed;
    color: var(--p-accent);
    font-size: 18px; font-weight: 400;
}
.passport-root .passport-scn-chip--add:hover {
    background: var(--p-accent-tint);
}

/* ── Технический вид: секции-блоки, стек 3 колонки, runtime, бар нагрузки ── */
.passport-root .passport-tech-block { margin-top: 22px; }
.passport-root .passport-tech-block:first-of-type { margin-top: 4px; }
.passport-root .passport-tech-block-title {
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--p-muted);
    margin: 0 0 12px;
}
.passport-root .passport-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.passport-root .passport-stack-add { margin-top: 12px; }
.passport-root .passport-tech-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.passport-root .passport-load-bar {
    margin-top: 12px;
    height: 8px;
    border-radius: 999px;
    background: var(--p-line-2, var(--p-line));
    overflow: hidden;
}
.passport-root .passport-load-fill {
    display: block;
    height: 100%;
    width: 62%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--p-tech, var(--p-accent)), var(--p-accent));
}
@media (max-width: 1100px) {
    .passport-root .passport-stack-grid { grid-template-columns: 1fr; }
    .passport-root .passport-tech-two { grid-template-columns: 1fr; }
}

/* ── Визуальный вид: палитра-грид + карточки состояний (Stitch) ────────── */
.passport-root .passport-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.passport-root .passport-palette-grid .passport-palette-row {
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg, 12px);
    padding: 12px;
    background: var(--p-bg-2, var(--p-white));
}
.passport-root .passport-states-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.passport-root .passport-state-card {
    border: 1px solid var(--p-line);
    border-left-width: 3px;
    border-radius: var(--radius-lg, 12px);
    padding: 12px 14px;
    background: var(--p-bg-2, var(--p-white));
    display: flex; flex-direction: column; gap: 8px;
}
.passport-root .passport-state-card-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--p-ink);
}
.passport-root .passport-state-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--p-muted-2);
}
.passport-root .passport-state-card.is-danger  { border-left-color: var(--p-danger,  #9A3324); }
.passport-root .passport-state-card.is-danger  .passport-state-dot { background: var(--p-danger,  #9A3324); }
.passport-root .passport-state-card.is-success { border-left-color: var(--p-success, #2E7D43); }
.passport-root .passport-state-card.is-success .passport-state-dot { background: var(--p-success, #2E7D43); }
.passport-root .passport-state-card.is-info    { border-left-color: var(--p-tech, var(--p-accent)); }
.passport-root .passport-state-card.is-info    .passport-state-dot { background: var(--p-tech, var(--p-accent)); }
.passport-root .passport-state-card.is-neut    { border-left-color: var(--p-muted-2); }
@media (max-width: 1100px) {
    .passport-root .passport-palette-grid { grid-template-columns: 1fr; }
    .passport-root .passport-states-grid  { grid-template-columns: 1fr; }
}

/* ── Функциональный вид: карточки сущностей + границы in/out (Stitch) ──── */
.passport-root .passport-fn-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.passport-root .passport-fn-card {
    position: relative;
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg, 12px);
    padding: 12px 12px 12px 34px;
    background: var(--p-bg-2, var(--p-white));
}
.passport-root .passport-fn-card-num {
    position: absolute; left: 12px; top: 13px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--p-accent-tint); color: var(--p-accent);
    font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}
.passport-root .passport-fn-card .passport-textarea { border: none; padding: 0; background: transparent; min-height: 48px; }
.passport-root .passport-fn-card-del { position: absolute; right: 6px; top: 8px; }
.passport-root .passport-fn-scope {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.passport-root .passport-fn-scope-col {
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg, 12px);
    padding: 14px;
    background: var(--p-bg-2, var(--p-white));
}
.passport-root .passport-fn-scope-head {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--p-ink);
    margin-bottom: 10px;
}
.passport-root .passport-fn-scope-mark {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; line-height: 1;
    background: color-mix(in srgb, var(--p-success, #2E7D43) 16%, transparent);
    color: var(--p-success, #2E7D43);
}
.passport-root .passport-fn-scope-mark.is-out {
    background: color-mix(in srgb, var(--p-danger, #9A3324) 14%, transparent);
    color: var(--p-danger, #9A3324);
}
@media (max-width: 1100px) {
    .passport-root .passport-fn-cards { grid-template-columns: 1fr; }
    .passport-root .passport-fn-scope { grid-template-columns: 1fr; }
}

/* ── Анти-наложение: гриды паспорта не должны давать детям растягивать
   ячейку (min-width:auto → текст вылезал за карту в узкой колонке мастера).
   Поля внутри карт — всегда по ширине ячейки. ── */
.passport-root .passport-stack-grid > *,
.passport-root .passport-fn-cards > *,
.passport-root .passport-palette-grid > *,
.passport-root .passport-states-grid > *,
.passport-root .passport-fn-scope > *,
.passport-root .passport-tech-two > * { min-width: 0; }
.passport-root .passport-stack-card,
.passport-root .passport-fn-card,
.passport-root .passport-palette-row,
.passport-root .passport-state-card,
.passport-root .passport-fn-scope-col { box-sizing: border-box; max-width: 100%; }
.passport-root .passport-stack-card .passport-input,
.passport-root .passport-stack-card .passport-textarea,
.passport-root .passport-fn-card .passport-textarea,
.passport-root .passport-palette-row .passport-input,
.passport-root .passport-state-card .passport-textarea,
.passport-root .passport-fn-scope-col .passport-input,
.passport-root .passport-tech-two .passport-textarea {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
/* Внутренняя сетка карты стека (технология + почему) тоже в одну колонку,
   когда карта узкая. */
.passport-root .passport-stack-card-grid { grid-template-columns: 1fr; }

/* ── Плоско, без «коробок» (по просьбе): у карточек мастера убираем границы
   и фон, разделяем воздухом + тонкой линией. Stitch рисует карты, но здесь
   в узкой колонке столбик коробок выглядел тяжело. ── */
.passport-root .passport-stack-card,
.passport-root .passport-fn-card,
.passport-root .passport-palette-grid .passport-palette-row,
.passport-root .passport-fn-scope-col {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 12px 0;
}
.passport-root .passport-stack-card.is-warn { background: transparent !important; }
/* Разделитель между плоскими карточками в одноколоночном столбике */
.passport-root .passport-stack-grid,
.passport-root .passport-fn-cards,
.passport-root .passport-palette-grid {
    gap: 0;
}
.passport-root .passport-stack-card + .passport-stack-card,
.passport-root .passport-fn-cards .passport-fn-card:not(:first-child),
.passport-root .passport-palette-grid .passport-palette-row:not(:first-child) {
    border-top: 1px solid var(--p-line-2, var(--p-line)) !important;
}
/* Сущности: убрать левый отступ под номер-кружок, номер делаем строчным */
.passport-root .passport-fn-card { padding-left: 0; }
.passport-root .passport-fn-card-num {
    position: static; margin-right: 8px; vertical-align: middle;
}
/* Состояния: без коробки, только цветная левая черта + точка */
.passport-root .passport-state-card {
    border: none !important;
    border-left: 3px solid var(--p-line) !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 4px 0 12px 12px;
}
/* Границы системы: две колонки без коробок, разделены только воздухом */
.passport-root .passport-fn-scope { gap: 24px; }

/* ── Мастер паспорта — СТРОГО одна колонка. Многоколоночные auto-fit гриды
   на широком экране делали ячейки ~240px, и поля палитры/состояний/сущностей
   в них кромсались. Read-вид (full width, своя разметка) не затронут. ── */
.passport-root .passport-wizard-section .passport-stack-grid,
.passport-root .passport-wizard-section .passport-fn-cards,
.passport-root .passport-wizard-section .passport-palette-grid,
.passport-root .passport-wizard-section .passport-states-grid,
.passport-root .passport-wizard-section .passport-fn-scope,
.passport-root .passport-wizard-section .passport-tech-two {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}
/* в одноколоночном виде вертикальные отступы дают воздух вместо gap */
.passport-root .passport-wizard-section .passport-tech-two > * { padding: 6px 0; }
.passport-root .passport-wizard-section .passport-states-grid .passport-state-card { margin-bottom: 4px; }
.passport-root .passport-wizard-section .passport-fn-scope { gap: 20px !important; }

/* ── Мобильная плотность паспорта (≤768px): крупные serif-заголовки
   уменьшаем до масштаба экрана (спек: заголовок 18–20). ── */
@media (max-width: 768px) {
    .passport-root .passport-section-title,
    .passport-root .passport-wizard-section .passport-section-title { font-size: 20px !important; line-height: 1.2 !important; }
    .passport-root .passport-rtitle { font-size: 22px !important; line-height: 1.15 !important; }
    .passport-root .passport-wizard-section { padding: 16px 14px !important; }
    .passport-root .passport-section-eyebrow { font-size: 11px !important; }
}