/* ═══════════════════════════════════════════════════════════════
   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: приглушённые
       «исполнительные» статусы (шалфей/индиго/кирпич), холодная бумага
       холодная светлая поверхность и спокойный серый текст. Тёмные значения — в блоке
       [data-theme="dark"] .passport-root ниже. Палитра scoped к паспорту,
       чтобы не задеть остальной апп. */
    /* ── Этап 2: --p-* переотображены на ГЛОБАЛЬНЫЕ токены тем ──
       Раньше тут был хардкод (свет) + отдельный [data-theme=dark] блок.
       Теперь паспорт следует общим токенам → автоматически работает во всех
       3 темах (модный белый / тёплая бумага / тёмная), хардкод убран.
       Фолбэки = прежние значения на случай отсутствия токена. */
    --p-ink: var(--color-text-primary);
    --p-ink-2: var(--color-text-primary);
    --p-muted: var(--color-text-secondary);
    --p-muted-2: var(--color-text-muted);
    --p-line: var(--color-border-default);
    --p-line-2: var(--color-divider);
    --p-bg: var(--color-background);
    --p-bg-2: var(--color-surface);
    --p-white: var(--color-surface-raised);
    --p-card: var(--color-surface-raised);

    --p-fn: var(--color-success);
    --p-tech: var(--color-action-primary);
    --p-vis: var(--color-approval);
    --p-scn: var(--color-info);

    --p-fn-bg: var(--color-success-background);
    --p-tech-bg: var(--color-info-background);
    --p-vis-bg: var(--color-approval-background);
    --p-scn-bg: var(--color-surface-selected);

    --p-warn: var(--color-neutral);
    --p-warn-bg: var(--color-neutral-background);
    --p-warn-line: var(--color-neutral-border);
    --p-danger: var(--color-danger);
    --p-success: var(--color-success);

    --p-accent: var(--color-action-primary);
    --p-accent-strong: var(--color-action-primary-active);
    --p-accent-tint: var(--color-surface-selected);
    --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;
}

/* Семантические 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: var(--color-action-primary-hover); }
.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 32px;
}
.passport-section::before {
    /* Тонкая боковая полоса цвета вида (как в Stitch — без тяжёлого
       углового блока, только деликатный цветовой акцент слева). */
    content: "";
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--p-c, var(--p-ink));
}
.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> заголовка
       секции и в тёмной теме светится отдельной белой плашкой.
       Оно же навязывает justify-content:space-between — из-за чего бейдж и
       заголовок разлетались по краям; группируем их слева как в Stitch. */
    justify-content: flex-start;
    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);
    border-color: var(--p-danger);
}

/* Inline-палитра блоков для пустых секций — карточки видны сразу,
   без необходимости открывать popover. */
.passport-block-picker {
    margin-top: 6px;
    padding: var(--space-4);
    background: var(--p-bg);
    border: 1px dashed var(--p-line);
    border-radius: var(--radius-xl);
}
.passport-block-picker-title {
    font-size: var(--text-xs); color: var(--p-muted);
    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);
    border: 1px solid var(--p-line);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    cursor: pointer;
    font: inherit;
    color: var(--p-ink);
    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);
    box-shadow: var(--shadow-raised);
}
.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);
    color: var(--p-fn);
    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); color: var(--color-text-inverse);
}
.passport-block-picker-label {
    font-weight: 600; font-size: var(--text-sm);
    color: var(--p-ink);
    flex: 1; min-width: 0;
}
.passport-block-picker-hint {
    font-size: var(--text-xs); color: var(--p-muted);
    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);
    background: var(--p-vis-bg);
    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(--color-text-inverse);
}
.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);
}
.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);
    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);
    color: var(--p-ink);
    box-shadow: var(--shadow-surface);
}

/* 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);
    background: var(--p-vis-bg);
}
.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);
}
.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: var(--color-overlay);
    display: flex; align-items: stretch; justify-content: center;
    padding: var(--space-6);
}
.passport-schema-modal-card {
    background: var(--p-card);
    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: var(--shadow-overlay);
}
.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);
    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);
    color: var(--p-ink);
    border-color: var(--p-line);
    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-accent-strong);
    color: var(--color-action-primary-text);
    border-color: var(--p-accent-strong);
}
.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);
    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: 3px; height: auto; bottom: 0; border-radius: 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;
    /* Сброс утечки глобального header{} (см. .passport-section-head). */
    position: static !important; min-height: 0 !important; height: auto !important;
    top: auto !important; z-index: auto !important;
    background: transparent !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important; box-shadow: none !important;
}
.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 32px; }
.passport-wizard-section .passport-section-head { margin-left: 0; }

.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: 11px 14px;            /* воздух, чтобы текст не прилипал к рамке */
    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.55;             /* строки не липнут к верх/низ рамки */
    min-height: 56px;
    padding: 12px 14px;
    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, color-mix(in srgb, var(--color-text-primary) 6%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--color-text-primary) 6%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-text-primary) 6%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-text-primary) 6%, transparent) 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); }
.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); }
.passport-validation-section.is-warn .passport-validation-h { color: var(--p-warn); }
.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);
    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-background); }
.passport-validation-item.is-warn:hover { background: var(--color-warning-background); }
.passport-validation-item:active { transform: translateX(2px) scale(.99); }

/* Flash-подсветка поля при переходе по issue */
@keyframes passport-flash-kf {
    0%   { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 35%, transparent); }
    100% { box-shadow: 0 0 0 4px transparent; }
}
.passport-flash {
    animation: passport-flash-kf 1.4s ease-out;
    border-radius: var(--radius-sm);
}
.passport-validation-item.is-err { background: var(--color-danger-background); }
.passport-validation-item.is-warn { background: var(--color-warning-background); }
.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); }
.passport-validation-item.is-warn .passport-validation-bullet { color: var(--p-warn); }
.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,
        color-mix(in srgb, var(--color-text-primary) 6%, transparent) 0%,
        color-mix(in srgb, var(--color-text-primary) 10%, transparent) 50%,
        color-mix(in srgb, var(--color-text-primary) 6%, transparent) 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);
                   border: 1px solid var(--color-border-default); 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-default);
    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-raised);
    color: inherit;
    box-sizing: border-box;
    display: inline-block;
    /* Выделение текста внутри draggable-строки (dragstart исключает textarea). */
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
/* Кнопка-«стрелка наружу»: появляется только если в примечании больше
   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);
    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-surface-hover); color: var(--color-text-primary); }
.task-note-expand[hidden] { display: none !important; }

/* ── Popup «Полное примечание» ───────────────────────────────────── */
.task-note-popup-overlay {
    position: fixed; inset: 0;
    background: var(--scrim);
    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-raised);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
    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-divider);
    gap: var(--space-3);
}
.task-note-popup-title {
    margin: var(--space-0);
    font-size: var(--text-base); font-weight: 600;
    color: var(--color-text-primary);
    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);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.task-note-popup-close:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.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-surface-secondary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-family: inherit; font-size: var(--text-sm); line-height: 1.55;
    color: var(--color-text-primary);
    box-sizing: border-box;
}
.task-note-popup-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    background: var(--color-surface-raised);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.task-note-popup-status {
    text-align: right;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    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);
    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-surface-hover); color: var(--color-text-primary); }
.task-note-more[aria-expanded="true"] {
    background: var(--color-surface-selected);
    color: var(--color-text-primary);
    border-color: var(--color-border-focus);
}

/* Поповер-меню «⋯» */
.task-note-menu {
    position: absolute;
    z-index: 1400;
    min-width: 220px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    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-primary);
    text-align: left;
}
.task-note-menu-item:hover { background: var(--color-surface-hover); }
.task-note-menu-item svg { color: var(--color-text-secondary); flex-shrink: 0; }
.task-note-menu-item:hover svg { color: var(--color-text-primary); }
.task-note-menu-item > span:first-of-type { flex: 1; }
.task-note-menu-item.has-note { color: var(--color-text-link); font-weight: 600; }
.task-note-menu-item.has-note svg { color: var(--color-text-link); }
.task-note-menu-count {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    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-border-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.task-note-input::placeholder { color: var(--color-text-muted); }

/* ── Авто-отметка «Выполнено» на этапе/фазе и действия этапа ────────
   .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);
    background: var(--color-success-background);
    border: 1px solid var(--color-success-border);
    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);
    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: var(--color-surface-secondary);
    border: 1px solid var(--color-border-default);
    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-primary);
}
.step-date-input::placeholder { color: var(--color-text-muted); }
.step-date-input:hover {
    border-color: var(--color-border-default);
    background: var(--color-surface-raised);
}
.step-date-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface-raised);
    box-shadow: 0 0 0 2px var(--color-primary-25);
}
.step-dates-sep {
    color: var(--color-text-secondary);
    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);
    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);
    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);
    border-color: var(--color-danger-border);
    background: var(--color-danger-background);
}
.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);
}
.passport-tree-actions {
    margin-top: 10px;
    display: flex;
    gap: var(--space-2);
}
.passport-tree-empty {
    text-align: center;
    color: var(--color-text-secondary);
    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 в общей иерархии поверхностей ─────────────── */
.passport-tree-preview-wrap {
    margin-top: 16px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-raised);
}
.passport-tree-preview-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    background: var(--color-surface-active);
    border-bottom: 1px solid var(--color-divider);
}
.passport-tree-preview-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-neutral);
    box-shadow: inset 0 0 0 1px var(--color-neutral-border);
}
.passport-tree-preview-dot:nth-child(1) { background: var(--color-danger); }
.passport-tree-preview-dot:nth-child(2) { background: var(--color-warning); }
.passport-tree-preview-dot:nth-child(3) { background: var(--color-success); }
.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: var(--color-text-primary);
    background: var(--color-surface-secondary);
    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;
    /* Этап 5: без обрамляющей «коробки» — контент стыкуется с панелью
       проекта/подвкладками, без фоновой рамки и скруглений. */
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* ── 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);
    /* Сброс утечки глобального header{} (position:sticky + min-height:52px +
       frosted-фон) на <header class="passport-rhead"> — из-за неё высота шапки
       схлопывалась до 52px, а дети (заголовок+действия) наезжали на
       переключатель видов, особенно на мобильном. */
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}
.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: inherit;
    font-weight: 600 !important;
    font-size: clamp(22px, 1.6vw, 28px);
    line-height: 1.15;
    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;
    /* Этап 4/5: без обрамляющей рамки вокруг блока — 4 плоские карточки-сегмента. */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    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: 1px solid var(--p-line);
    border-left: 3px solid transparent;
    border-radius: var(--radius-lg, 10px);
    background: var(--p-bg-2);
    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); border-color: var(--p-muted-2); }
.passport-root .passport-seg-btn.is-active {
    background: var(--p-accent-tint);
    border-color: color-mix(in srgb, var(--p-accent) 40%, var(--p-line));
    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: normal;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* Точка-статус готовности вида (цвет берётся из is-ready/-progress/-empty). */
.passport-root .passport-seg-sub::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.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);
    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);
}

/* Плашка «Чего здесь быть не должно» — приглушённая, не кричит */
.passport-antiscope {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px dashed var(--p-line);
    border-radius: 8px;
    background: var(--p-bg);
    color: var(--p-muted);
    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(--p-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-danger) 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);
}
.passport-root .passport-swatch-why.is-missing {
    color: var(--p-danger);
    font-style: italic;
}

/* Таблица сценария (read): Шаг · Действие · Функц · Тех · Виз.
   Пустая ячейка/колонка = вид недоработан. */
.passport-scn-table-wrap {
    overflow-x: auto;
    margin-top: 10px;
    border: 1px solid var(--p-line);
    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);
    border-right: 1px solid var(--p-line-2);
    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);
    color: var(--p-muted);
    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);
    width: 40px; min-width: 40px;
    color: var(--p-muted-2);
    font-variant-numeric: tabular-nums;
}
.passport-scn-table thead .passport-scn-th-step { background: var(--p-bg); }
.passport-scn-table .passport-scn-td-action { min-width: 180px; }
.passport-scn-table td.is-cell-empty {
    color: var(--p-muted-2);
    text-align: center;
}
.passport-scn-table td.is-col-empty,
.passport-scn-table th.is-col-empty {
    background: color-mix(in srgb, var(--p-danger) 7%, transparent);
}
.passport-scn-colwarn {
    margin-top: 8px;
    font-size: 12px;
    color: var(--p-danger);
}

/* Готовые сценарии: один цельный блок с отдельной шапкой.
   На широком экране шаги остаются сравнительной таблицей, на мобильном
   финальный каскад превращает их в последовательность читаемых шагов. */
.passport-root .passport-scn-item--ready {
    display: block;
    padding: 0;
    overflow: hidden;
    background: var(--p-white);
    border-radius: var(--radius-lg, 10px);
}
.passport-root .passport-scn-ready-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--p-bg-2);
}
.passport-root .passport-scn-ready-heading {
    flex: 1 1 auto;
    min-width: 0;
}
.passport-root .passport-scn-item--ready .passport-scn-title {
    margin: 0 0 2px;
    line-height: 1.35;
}
.passport-root .passport-scn-item--ready .passport-scn-table-wrap {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--p-line);
    border-radius: 0;
}
.passport-root .passport-scn-item--ready .passport-scn-colwarn {
    margin: 0;
    padding: 9px 14px;
    border-top: 1px solid color-mix(in srgb, var(--p-danger) 18%, var(--p-line));
    background: color-mix(in srgb, var(--p-danger) 5%, transparent);
}

/* Редактор таблицы сценария в мастере */
.passport-scnrows {
    margin-top: 10px;
    border: 1px solid var(--p-line);
    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);
}
.passport-scnrow:last-child { border-bottom: none; }
.passport-scnrow--head {
    background: var(--p-bg);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--p-muted);
}
.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);
    font-variant-numeric: tabular-nums;
}
.passport-scnrow .passport-scnrow-cell {
    border: none;
    border-left: 1px solid var(--p-line-2);
    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);
}
.passport-scnrow .passport-scnrow-cell.is-col-empty {
    background: color-mix(in srgb, var(--p-danger) 6%, transparent);
}
.passport-scnrow-del {
    border: none;
    border-left: 1px solid var(--p-line-2);
    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: inherit;
    font-weight: 600 !important;
    font-size: clamp(20px, 1.4vw, 24px);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Степпер → сегмент-бар (как 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;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.passport-root .passport-wizard-readbtn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
    white-space: nowrap;
    border: 1px solid var(--p-accent, var(--accent)) !important;
    color: var(--p-accent, var(--accent)) !important;
    background: var(--p-accent-tint, var(--accent-tint)) !important;
}
.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; }
    /* Колонки раскладки должны сжиматься до вьюпорта (иначе nowrap-степпер/кнопка
       раздували колонку до min-content и всё вылезало вправо). */
    .passport-root .passport-wizard--stitch .passport-wizard-layout > * { min-width: 0; }
    /* Мобильный: «Готовый вид» — полоса во всю ширину под заголовком (видно сразу). */
    .passport-root .passport-wizard-steprail-head {
        flex-direction: column;
        align-items: stretch;
    }
    .passport-root .passport-wizard-readbtn {
        width: 100%;
        justify-content: center;
    }
    /* Мобильный: шаги мастера — горизонтальный скролл-таб (компактно). */
    .passport-root .passport-wizard-steprail .passport-stepper {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 4px;
    }
    .passport-root .passport-wizard-steprail .passport-step {
        flex: 0 0 auto;
        width: auto;
        padding: 9px 12px;
    }
}

/* ── Пять принципов 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(--p-danger) !important;
    background: color-mix(in srgb, var(--p-danger) 6%, transparent);
}
.passport-root .passport-scnrow-cell.is-cell-empty::placeholder {
    color: var(--p-danger);
    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); }
.passport-root .passport-state-card.is-danger  .passport-state-dot { background: var(--p-danger); }
.passport-root .passport-state-card.is-success { border-left-color: var(--p-success); }
.passport-root .passport-state-card.is-success .passport-state-dot { background: var(--p-success); }
.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) 16%, transparent);
    color: var(--p-success);
}
.passport-root .passport-fn-scope-mark.is-out {
    background: color-mix(in srgb, var(--p-danger) 14%, transparent);
    color: var(--p-danger);
}
@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; }
    /* Этап 7: кнопки шапки не вылезают за экран — на всю ширину, переносом. */
    .passport-root .passport-rhead-actions { width: 100%; flex-wrap: wrap; }
    .passport-root .passport-rhead-actions .passport-btn {
        flex: 1 1 auto; justify-content: center; min-height: 44px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Этап 8: «дорого/без рамок» — лайтбокс экранов, миниатюры (img + HTML),
   мельче свотчи палитры. Только токены.
   ════════════════════════════════════════════════════════════════════ */

/* Кликабельная миниатюра экрана (read-вид) — единый размер, открывает лайтбокс */
.passport-root .passport-screen-media-btn {
    display: block;
    width: 100%;
    height: 150px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--p-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--p-bg-2);
    cursor: zoom-in;
    position: relative;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.passport-root .passport-screen-media-btn:hover {
    border-color: var(--p-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--p-accent) 18%, transparent);
}
.passport-root .passport-screen-media-btn .passport-screen-img--read {
    width: 100%; height: 100%; max-height: none;
    object-fit: cover; display: block;
}
/* HTML-страница как уменьшенная миниатюра (рендер шире, потом масштаб). */
.passport-root .passport-screen-media-btn--html .passport-screen-html-preview--read {
    width: 333.33%; height: 333.33%;
    transform: scale(0.30);
    transform-origin: top left;
    pointer-events: none;
    border: 0;
    background: var(--color-surface-raised);
}

/* Лайтбокс — диалоговое окно с крупным изображением/HTML */
.passport-lightbox {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: var(--color-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.passport-lightbox-body { position: relative; max-width: 92vw; max-height: 90vh; }
.passport-lightbox-media {
    display: block;
    border-radius: 12px;
    box-shadow: var(--shadow-overlay);
    background: var(--color-surface-raised);
}
img.passport-lightbox-media { max-width: 92vw; max-height: 88vh; object-fit: contain; }
iframe.passport-lightbox-media { width: min(1100px, 92vw); height: 84vh; border: 0; }
.passport-lightbox-close {
    position: absolute; top: -14px; right: -14px;
    width: 36px; height: 36px; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--color-surface-raised); color: var(--color-text-primary);
    font-size: 22px; line-height: 1;
    box-shadow: var(--shadow-raised);
}

/* Мельче свотчи палитры (read-вид) */
.passport-root .passport-palette {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 12px;
}
.passport-root .passport-swatch {
    height: 52px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
}

/* Состояния системы — редактируемый список (добавить/убрать) */
.passport-root .passport-state-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.passport-root .passport-state-name {
    flex: 1 1 auto; min-width: 0;
    border: none; background: transparent;
    font-weight: 600; padding: 2px 0;
}
.passport-root .passport-state-name:focus { outline: none; }
.passport-root .passport-state-del {
    flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 6px;
    border: none; background: transparent; cursor: pointer;
    color: var(--p-muted); font-size: 18px; line-height: 1;
}
.passport-root .passport-state-del:hover { background: var(--p-bg); color: var(--p-danger); }
.passport-root .passport-states-add { margin-top: 10px; }

/* Карточка сущности (Функциональный вид) — чистая строка вместо разъезда:
   номер · поле ввода · кнопка удаления в один ряд. */
.passport-root .passport-fn-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
}
.passport-root .passport-fn-card-num {
    position: static;
    flex: 0 0 18px;
    margin: 7px 0 0;
}
.passport-root .passport-fn-card .passport-textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
}
.passport-root .passport-fn-card-del {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    align-self: flex-start;
}

/* Сущности (Функциональный вид): у textarea есть рамка (1px), но ранее
   padding:0 (правило flex-строки) → текст липнул к верх/левому краю рамки.
   Возвращаем внутренний воздух. Правило в конце файла перебивает padding:0. */
.passport-root .passport-fn-card .passport-textarea {
    padding: 9px 12px;
}