/* FLUORITE · Проекты. Дизайн-система T002 по 02-UI-SPEC (§0..§4, §5.1, §5.2) и UI-UX-ТЗ §2, §3.1, §13.
   Канон: B2B «Azure Depths» (/var/www/html/local/templates/fluorite_b2b/assets/css/b2b-azure.css,
   sha256 408f2b70d2329f33...) и блок входа Stitch/mirror в конце b2b.css (sha256 3fceca50a75305b8...),
   только чтение. Все классы, переменные и keyframes с префиксом cmp; z-index только из шкалы --cmp-z-*.
   Движение: только transform/opacity (исключение max-height аккордеона), объявлено под
   prefers-reduced-motion: no-preference, переходы гасятся в reduce. Компоненты админки добавят 02-10/02-11.
   Наведение: любое правило с :hover только внутри @media (hover: hover), чтобы на сенсорных экранах цвет, рамка
   или сдвиг не «залипали» после касания; :focus-visible и :active вне этого условия. */

/* ---------- шрифт (T001, self-host, без CDN) ---------- */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-cyr.woff2') format('woff2');
    font-weight: 300 800;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-lat.woff2') format('woff2');
    font-weight: 300 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+20BD;
}

/* ---------- токены UI-SPEC §2 (дословно) ---------- */
:root {
    color-scheme: dark;
    --cmp-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* полотно */
    --cmp-bg: #050506;
    --cmp-deep: #010133;

    /* текст */
    --cmp-text: #ffffff;
    --cmp-text-2: rgba(255, 255, 255, .72);
    --cmp-muted: rgba(255, 255, 255, .64);
    --cmp-text-3: rgba(255, 255, 255, .5);

    /* линии */
    --cmp-line-soft: rgba(255, 255, 255, .1);
    --cmp-line: rgba(255, 255, 255, .15);
    --cmp-line-strong: rgba(255, 255, 255, .2);
    --cmp-line-hover: rgba(255, 255, 255, .4);
    --cmp-line-focus: rgba(255, 255, 255, .85);

    /* Owner canonical black glass: live #milana-chat-widget on bx.veo, 04.11.2026. */
    --cmp-black-glass-bg: rgba(0, 0, 0, .82);
    --cmp-black-glass-blur: 25px;
    --cmp-black-glass-line: rgba(255, 255, 255, .1);
    --cmp-black-glass-shadow: -10px 0 50px rgba(0, 0, 0, .8);

    /* поверхности */
    --cmp-panel: rgba(0, 0, 0, .4);
    --cmp-row-hover: rgba(255, 255, 255, .04);
    --cmp-fill-soft: rgba(255, 255, 255, .06);
    --cmp-fill-hover: rgba(255, 255, 255, .08);
    --cmp-solid: #0B0B12;
    --cmp-solid-side: #0A0B0E;
    --cmp-side: rgba(8, 9, 12, .5);
    --cmp-option-bg: #0A0A14;

    /* действие и акцент */
    --cmp-action: #ffffff;
    --cmp-action-ink: #050506;
    --cmp-action-hover: rgba(255, 255, 255, .85);
    --cmp-accent: #ffffff;

    /* семантика */
    --cmp-ok: #4ADE80;   --cmp-ok-line: rgba(74, 222, 128, .4);
    --cmp-warn: #FB923C; --cmp-warn-line: rgba(251, 146, 60, .4);
    --cmp-err: #F87171;  --cmp-err-line: rgba(248, 113, 113, .4); --cmp-err-fill: rgba(248, 113, 113, .08);
    --cmp-danger: #C93636; --cmp-danger-hover: #B32F2F;

    /* радиусы: панели 16, карточка входа 24, контролы 12, пункты меню 8, чипы pill */
    --cmp-radius: 16px;
    --cmp-r-xl: 24px;
    --cmp-r-ctl: 12px;
    --cmp-r-nav: 8px;
    --cmp-r-pill: 999px;

    /* отступы */
    --cmp-s-1: 4px; --cmp-s-2: 8px; --cmp-s-3: 12px; --cmp-s-4: 16px;
    --cmp-s-6: 24px; --cmp-s-8: 32px; --cmp-s-12: 48px; --cmp-s-16: 64px;

    /* размеры */
    --cmp-ctl-h: 40px; --cmp-ctl-h-sm: 32px; --cmp-ctl-h-lg: 48px;
    --cmp-side-w: 248px; --cmp-top-h: 64px; --cmp-content-max: 1152px;

    /* типографика */
    --cmp-fs-label: 12px; --cmp-fs-body: 14px; --cmp-fs-heading: 16px; --cmp-fs-display: 32px;

    /* движение */
    --cmp-ease: cubic-bezier(.2, .7, .2, 1);
    --cmp-ease-out: cubic-bezier(.16, 1, .3, 1);
    --cmp-dur-fast: 150ms; --cmp-dur: 200ms; --cmp-dur-slow: 300ms;

    /* слои */
    --cmp-z-bg: 0; --cmp-z-content: 1; --cmp-z-sticky: 10; --cmp-z-top: 20; --cmp-z-side: 30;
    --cmp-z-scrim: 40; --cmp-z-drawer: 50; --cmp-z-toast: 70; --cmp-z-skip: 80;

    /* фокус */
    --cmp-focus: 2px solid #ffffff;
    --cmp-ring: 0 0 0 3px rgba(255, 255, 255, .12);
}
@media (max-width: 640px), (pointer: coarse) {
    :root { --cmp-ctl-h: 44px; --cmp-ctl-h-sm: 44px; }
}
::selection { background: #ffffff; color: #050506; }

*, *::before, *::after { box-sizing: border-box; }

/* ---------- полотно ---------- */
html { background: var(--cmp-bg); }
.cmp-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--cmp-bg);
    color: var(--cmp-text);
    font: 400 var(--cmp-fs-body)/1.5 var(--cmp-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* The login has a black first frame while Chroma initializes. */
body.cmp-body[data-cmp-initial="login"] { background: #000; }
body.cmp-body .cmp-login-chroma {
    position: fixed; inset: 0; z-index: var(--cmp-z-bg, 0);
    overflow: hidden; pointer-events: none; background: #000;
}
body.cmp-body .cmp-login-chroma.cmp-chroma-fallback { background: #000 !important; }
.cmp-body.is-locked { overflow: hidden; }
.cmp-body [hidden] { display: none !important; }
.cmp-body :focus-visible { outline: var(--cmp-focus); outline-offset: 2px; }
/* The router focuses this heading for screen readers after navigation. */
.cmp-main h1[tabindex="-1"]:focus { outline: none; }

.cmp-help__button {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cmp-text-2);
    font: inherit;
    cursor: help;
}
.cmp-help__button > .cmp-icon { display: block; opacity: .78; }
.cmp-help__button:is(:hover, :focus-visible, [aria-expanded="true"]) { color: var(--cmp-text); }
.cmp-help__button:is(:hover, :focus-visible, [aria-expanded="true"]) > .cmp-icon { opacity: 1; }
.cmp-help__text {
    position: absolute;
    z-index: 5;
    inset-block-start: 100%;
    inset-inline-end: 0;
    width: min(224px, calc(100vw - 88px));
    padding: 10px 12px;
    border: 1px solid var(--cmp-black-glass-line);
    border-radius: 12px;
    background: var(--cmp-black-glass-bg);
    backdrop-filter: blur(var(--cmp-black-glass-blur));
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
    color: var(--cmp-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    visibility: hidden;
}
.cmp-help:not([data-dismissed]):has(.cmp-help__button:is(:focus-visible, [aria-expanded="true"])) .cmp-help__text { visibility: visible; }
.cmp-help-heading { display: flex; align-items: center; position: relative; width: fit-content; max-width: 100%; }
.cmp-help-heading > h1 { min-width: 0; overflow-wrap: anywhere; }
.cmp-help-heading .cmp-help__text { width: min(224px, 100%); }
@media (hover: hover) {
    .cmp-help:not([data-dismissed]):hover .cmp-help__text { visibility: visible; }
}
/* T023: top-layer bubble (Popover API). Shown/hidden by helpHint; coordinates set inline from the trigger. */
.cmp-help[data-layer="top"] .cmp-help__text { position: fixed; inset: auto; margin: 0; overflow: visible; visibility: visible; }
.cmp-help[data-layer="top"] .cmp-help__text:not(:popover-open) { display: none; }
.cmp-help__text.cmp-help__text--long { width: min(320px, calc(100vw - 24px)); }
.cmp-body h1, .cmp-body h2, .cmp-body h3 { text-wrap: balance; }

.cmp-vh {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

.cmp-icon { width: 20px; height: 20px; flex: none; fill: currentColor; vertical-align: middle; pointer-events: none; }
.cmp-icon--16 { width: 16px; height: 16px; }

.cmp-skip {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    left: 16px;
    z-index: var(--cmp-z-skip);
    display: inline-flex;
    align-items: center;
    min-height: var(--cmp-ctl-h);
    padding: 0 var(--cmp-s-6);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-action);
    color: var(--cmp-action-ink);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}
.cmp-skip:focus, .cmp-skip:focus-visible { transform: none; }

/* ---------- каркас оболочки (UI-SPEC §4.4, UI-UX-ТЗ §3.1: 248 / 64 / 1152, брейкпоинты 1024 / 640) ---------- */
.cmp-app {
    position: relative;
    z-index: var(--cmp-z-content);
    min-height: 100vh;
    min-height: 100dvh;
}
.cmp-content { min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }

.cmp-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--cmp-s-6) var(--cmp-s-4) var(--cmp-s-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cmp-side__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cmp-s-2);
    padding: 0 var(--cmp-s-3) var(--cmp-s-4);
    margin-bottom: var(--cmp-s-4);
    border-bottom: 1px solid var(--cmp-line-soft);
}
.cmp-side__logo {
    display: inline-flex;
    align-items: baseline;
    gap: var(--cmp-s-2);
    min-width: 0;
    margin: 0;
    color: #ffffff;
    font-size: var(--cmp-fs-heading);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
}
.cmp-side__logo-suffix {
    color: var(--cmp-text, #f3f3f5);
    font-size: var(--cmp-fs-label);
    letter-spacing: .16em;
    text-transform: uppercase;
}
/* Переключатели раскладки ниже стоят раньше блока кнопок (.cmp-btn { display: inline-flex }) и потому
   записаны со специфичностью 0,2,0: одноклассовое правило проиграло бы по порядку (крестик был виден на ПК
   поверх логотипа, имя в шапке телефона распирало страницу). */
.cmp-side__head .cmp-side__close { display: none; }
.cmp-side__nav { margin-bottom: var(--cmp-s-4); }
.cmp-side__foot {
    margin-top: auto;
    padding-top: var(--cmp-s-4);
    border-top: 1px solid var(--cmp-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--cmp-s-2);
}
.cmp-side__user { display: flex; flex-direction: column; min-width: 0; }
.cmp-side__user-name { font-weight: 700; overflow-wrap: anywhere; }
.cmp-side__user-login { color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-side__version {
    margin: 0;
    color: var(--cmp-text-3);
    font-size: var(--cmp-fs-label);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* outline-аккордеон B2B 1-в-1 (b2b-azure.css .b2b-acc*): max-height 250 ms, chevron 200 ms, не grid-rows */
.cmp-acc { display: flex; flex-direction: column; gap: var(--cmp-s-2); }
.cmp-acc__item {
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-nav);
    padding: 0 var(--cmp-s-4);
    transition: border-color var(--cmp-dur) var(--cmp-ease);
}
.cmp-acc__item.is-current { border-color: var(--cmp-line-hover); }
@media (hover: hover) {
    .cmp-acc__item:hover { border-color: var(--cmp-line-hover); }
}
.cmp-acc__trigger {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: var(--cmp-s-3);
    padding: var(--cmp-s-4) 0;
    margin: 0;
    border: 0;
    background: none;
    color: #ffffff;
    font: 400 var(--cmp-fs-body)/1.3 var(--cmp-font);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.cmp-acc__trigger:focus-visible { outline-offset: -2px; border-radius: var(--cmp-r-nav); }
.cmp-acc__trigger[aria-current="page"] { font-weight: 700; }
.cmp-acc__title { display: inline-flex; align-items: center; gap: var(--cmp-s-3); min-width: 0; }
/* T004 04-02 (Codex T002-UI01): подписи пунктов в одну строку, без переноса и дефиса. «Администрирование» в 14 px
   Montserrat занимает 156 px, а в сайдбаре 248 px тексту оставалось 124 px: ширина добрана в той же сетке 248 px
   внутренними отступами и кеглем подписей на ПК (@media (min-width: 1024px) после .cmp-acc__link); в шторке 320 px
   подпись помещается и так. Роли, маршруты и фон не менялись. */
.cmp-acc__title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-hyphens: manual; hyphens: manual; }
.cmp-acc__title .cmp-icon { opacity: .7; }
.cmp-acc__chevron {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .6);
    transition: transform var(--cmp-dur) var(--cmp-ease);
}
.cmp-acc__item.is-open .cmp-acc__chevron,
.cmp-acc__trigger[aria-expanded="true"] .cmp-acc__chevron { transform: rotate(180deg); }
/* закрытая панель недоступна фокусу: visibility переключается после схлопывания */
.cmp-acc__panel {
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height 250ms ease, visibility 0s linear 250ms;
}
.cmp-acc__item.is-open .cmp-acc__panel {
    max-height: 280px;
    visibility: visible;
    transition: max-height 250ms ease, visibility 0s;
}
.cmp-acc__inner { display: flex; flex-direction: column; padding-bottom: var(--cmp-s-4); }
.cmp-acc__link {
    display: flex;
    align-items: center;
    min-height: var(--cmp-ctl-h-sm);
    padding: 0 0 0 var(--cmp-s-8);
    border-radius: var(--cmp-r-nav);
    color: var(--cmp-text-2);
    font-size: var(--cmp-fs-body);
    line-height: 1.3;
    text-decoration: none;
    transition: color var(--cmp-dur-fast) var(--cmp-ease);
}
@media (hover: hover) {
    .cmp-acc__link:hover { color: #ffffff; }
}
.cmp-acc__link[aria-current="page"] { color: #ffffff; font-weight: 700; }
.cmp-acc__link:focus-visible { outline-offset: -2px; }
/* T004 04-02 (T002-UI01): сайдбар ПК 248 px без изменения ширины. Отступ сайдбара 16 → 8, пункта 16 → 12, зазоры
   12 → 8, подписи 13 px: «Администрирование» (145 px) помещается в одну строку с запасом 8 px (замер Chromium и WebKit);
   иконка пункта встаёт по линии логотипа шапки (8 + 1 + 12 = 21 px от края, у шапки 8 + 12); ссылки группы выровнены по
   тексту триггера (иконка 20 + зазор 8). Панель группы: 6 пунктов («Стадии») по 44 px на сенсорном экране не режутся. */
.cmp-acc__item.is-open .cmp-acc__panel { max-height: 360px; }
@media (min-width: 1024px) {
    .cmp-side { padding-left: var(--cmp-s-2); padding-right: var(--cmp-s-2); }
    .cmp-acc__item { padding: 0 var(--cmp-s-3); }
    .cmp-acc__trigger { gap: var(--cmp-s-2); font-size: 13px; }
    .cmp-acc__title { gap: var(--cmp-s-2); }
    .cmp-acc__link { padding-left: 28px; font-size: 13px; }
}

.cmp-top {
    display: flex;
    align-items: center;
    gap: var(--cmp-s-2);
    min-height: var(--cmp-top-h);
    padding: 0 var(--cmp-s-6);
}
.cmp-top__start { display: none; align-items: center; gap: var(--cmp-s-2); min-width: 0; margin-right: auto; }
.cmp-top__end { display: flex; align-items: center; gap: var(--cmp-s-2); min-width: 0; margin-left: auto; }
.cmp-top__brand {
    display: block;
    object-fit: contain;
}
.cmp-top__start .cmp-burger { width: 44px; min-width: 44px; min-height: 44px; }

.cmp-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--cmp-z-scrim);
    background: rgba(0, 0, 0, .55);
}

.cmp-main {
    width: 100%;
    max-width: var(--cmp-content-max);
    margin: 0 auto;
    padding: var(--cmp-s-12) var(--cmp-s-6) var(--cmp-s-16);
    min-width: 0;
}

.cmp-pagehead { margin-bottom: var(--cmp-s-8); }
.cmp-pagehead__back { margin-bottom: var(--cmp-s-2); }
.cmp-body .cmp-return-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cmp-s-2);
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: 0;
    color: var(--cmp-text-2);
    font-size: var(--cmp-fs-body);
    font-weight: 500;
    line-height: 1.35;
    text-align: start;
    text-decoration: none;
}
.cmp-body .cmp-return-link > .cmp-btn__label { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) {
    .cmp-body .cmp-return-link:hover { color: var(--cmp-text); }
    .cmp-return-link:hover > .cmp-btn__label { text-decoration: underline; text-underline-offset: 3px; }
}
.cmp-pagehead__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cmp-s-4);
    padding-bottom: var(--cmp-s-6);
    border-bottom: 1px solid var(--cmp-line-strong);
}
.cmp-pagehead__title {
    margin: 0;
    min-width: 0;
    font-size: var(--cmp-fs-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.cmp-pagehead__actions { display: flex; gap: var(--cmp-s-2); flex: none; }

@media (min-width: 1024px) {
    .cmp-app { display: grid; grid-template-columns: var(--cmp-side-w) minmax(0, 1fr); }
    .cmp-side {
        position: sticky;
        top: 0;
        align-self: start;
        z-index: var(--cmp-z-side);
        height: 100vh;
        height: 100dvh;
        background: var(--cmp-side);
        backdrop-filter: blur(22px) saturate(1.2);
        -webkit-backdrop-filter: blur(22px) saturate(1.2);
        border-right: 1px solid rgba(255, 255, 255, .08);
    }
    .cmp-scrim { display: none; }
}
/* до 1023px: шторка со сплошным фоном (урок B2B: стекло без backdrop-filter нечитаемо), бургер в шапке */
@media (max-width: 1023px) {
    .cmp-side {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--cmp-z-drawer);
        width: min(320px, 88vw);
        height: 100vh;
        height: 100dvh;
        padding-top: max(var(--cmp-s-6), env(safe-area-inset-top));
        padding-bottom: max(var(--cmp-s-4), env(safe-area-inset-bottom));
        background: var(--cmp-solid-side);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform var(--cmp-dur-slow) var(--cmp-ease-out), visibility 0s linear var(--cmp-dur-slow);
    }
    .cmp-side.is-open {
        transform: none;
        visibility: visible;
        transition: transform var(--cmp-dur-slow) var(--cmp-ease-out), visibility 0s;
    }
    .cmp-side__head .cmp-side__close { display: inline-flex; width: 44px; min-width: 44px; min-height: 44px; }
    .cmp-top {
        position: sticky;
        top: 0;
        z-index: var(--cmp-z-top);
        min-height: calc(var(--cmp-top-h) + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) var(--cmp-s-4) 0;
        background: rgba(5, 5, 6, .9);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .cmp-top__start { display: flex; }
    .cmp-top__end { flex: none; }
    .cmp-top__end .cmp-top__account { display: inline-flex; width: 44px; min-width: 44px; min-height: 44px; }
    .cmp-top .cmp-btn--text { min-height: 44px; }
}
@media (max-width: 640px) {
    .cmp-main { padding: var(--cmp-s-6) var(--cmp-s-4) calc(var(--cmp-s-12) + env(safe-area-inset-bottom)); }
    .cmp-pagehead__row { flex-direction: column; align-items: stretch; }
    .cmp-pagehead__actions { flex-direction: column; }
    .cmp-pagehead__actions .cmp-btn { width: 100%; }
}

/* ---------- кнопки UI-SPEC §4.1 ---------- */
.cmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cmp-s-2);
    min-height: var(--cmp-ctl-h);
    padding: 0 var(--cmp-s-6);
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-action);
    color: var(--cmp-action-ink);
    font: 700 var(--cmp-fs-body)/1.2 var(--cmp-font);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--cmp-dur) var(--cmp-ease), border-color var(--cmp-dur) var(--cmp-ease),
        color var(--cmp-dur) var(--cmp-ease), transform 120ms var(--cmp-ease);
}
@media (hover: hover) {
    .cmp-btn:hover { background: var(--cmp-action-hover); }
}
.cmp-btn:active { transform: translateY(1px); }
.cmp-btn:focus-visible { outline: var(--cmp-focus); outline-offset: 2px; }
.cmp-btn.is-busy { cursor: progress; }
.cmp-btn[aria-disabled="true"]:not(.is-busy) { opacity: .45; cursor: not-allowed; }
.cmp-btn[aria-disabled="true"]:not(.is-busy):active { transform: none; }

.cmp-btn--ghost { background: var(--cmp-panel); color: #ffffff; border-color: var(--cmp-line); }
@media (hover: hover) {
    .cmp-btn--ghost:hover { background: var(--cmp-fill-hover); border-color: var(--cmp-line-hover); }
}

.cmp-btn--danger { background: var(--cmp-danger); color: #ffffff; }
@media (hover: hover) {
    .cmp-btn--danger:hover { background: var(--cmp-danger-hover); }
}

.cmp-btn--danger-ghost { background: transparent; color: var(--cmp-err); border-color: var(--cmp-err-line); }
@media (hover: hover) {
    .cmp-btn--danger-ghost:hover { background: var(--cmp-err-fill); }
}

.cmp-btn--text {
    min-height: var(--cmp-ctl-h-sm);
    padding: 0 var(--cmp-s-2);
    background: none;
    color: var(--cmp-text-2);
    font-weight: 400;
}
@media (hover: hover) {
    .cmp-btn--text:hover { background: none; color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
}

.cmp-btn--icon {
    width: var(--cmp-ctl-h);
    min-width: var(--cmp-ctl-h);
    padding: 0;
    background: var(--cmp-panel);
    color: #ffffff;
    border-color: var(--cmp-line);
}
@media (hover: hover) {
    .cmp-btn--icon:hover { background: var(--cmp-fill-hover); border-color: var(--cmp-line-hover); }
}

.cmp-btn--sm { min-height: var(--cmp-ctl-h-sm); padding: 0 var(--cmp-s-4); }

/* ---------- поля UI-SPEC §4.2 ---------- */
.cmp-field { display: flex; flex-direction: column; gap: var(--cmp-s-2); min-width: 0; }
.cmp-label { color: var(--cmp-text-2); font-size: var(--cmp-fs-body); line-height: 1.5; }
.cmp-hint { margin: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-error {
    display: flex;
    align-items: flex-start;
    gap: var(--cmp-s-1);
    margin: 0;
    color: var(--cmp-err);
    font-size: var(--cmp-fs-label);
    line-height: 1.4;
}
.cmp-error .cmp-icon { width: 16px; height: 16px; margin-top: 1px; }

.cmp-input, .cmp-select {
    width: 100%;
    min-width: 0;
    height: var(--cmp-ctl-h);
    padding: 0 var(--cmp-s-4);
    margin: 0;
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-panel);
    color: #ffffff;
    font: 400 var(--cmp-fs-body)/1.2 var(--cmp-font);
    transition: border-color var(--cmp-dur) var(--cmp-ease);
}
.cmp-input::placeholder { color: var(--cmp-text-3); opacity: 1; }
@media (hover: hover) {
    .cmp-input:hover, .cmp-select:hover { border-color: rgba(255, 255, 255, .3); }
}
/* фокус поля: рамка white/.85 + кольцо вместо outline (замена, а не отключение) */
.cmp-input:focus, .cmp-select:focus,
.cmp-input:focus-visible, .cmp-select:focus-visible { outline: none; border-color: var(--cmp-line-focus); box-shadow: var(--cmp-ring); }
.cmp-input[aria-invalid="true"], .cmp-select[aria-invalid="true"] { border-color: var(--cmp-err); }
.cmp-input:-webkit-autofill,
.cmp-inputgroup__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 60px var(--cmp-option-bg) inset;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
}
/* свой chevron: Phosphor caret-down (тот же path, что в спрайте), 12px справа 12px */
.cmp-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23ffffff' fill-opacity='.6' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
.cmp-select option { background: var(--cmp-option-bg); color: #ffffff; }

/* группа поля: рамка/фон/радиус/высота у обёртки; слот иконки = label for поля (D-46: клик в слот даёт
   фокус полю, поэтому pointer-events у слота НЕ отключаются), кнопка в потоке flex рядом с полем */
.cmp-inputgroup {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: var(--cmp-ctl-h);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-panel);
    overflow: hidden;
    transition: border-color var(--cmp-dur) var(--cmp-ease), background-color var(--cmp-dur) var(--cmp-ease);
}
@media (hover: hover) {
    .cmp-inputgroup:hover { border-color: rgba(255, 255, 255, .3); }
}
.cmp-inputgroup:focus-within { border-color: var(--cmp-line-focus); box-shadow: var(--cmp-ring); }
.cmp-inputgroup.is-invalid { border-color: var(--cmp-err); }
.cmp-inputgroup__slot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    margin: 0;
    color: var(--cmp-text-3);
    cursor: text;
}
.cmp-inputgroup__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 var(--cmp-s-4) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font: 400 var(--cmp-fs-body)/1.2 var(--cmp-font);
    outline: none;
}
.cmp-inputgroup__input:first-child { padding-left: var(--cmp-s-4); }
/* фокус поля внутри группы показывает сама группа (:focus-within, рамка + кольцо) */
.cmp-inputgroup__input:focus, .cmp-inputgroup__input:focus-visible { outline: none; }
.cmp-inputgroup__input::placeholder { color: var(--cmp-text-3); opacity: 1; }
.cmp-inputgroup__btn {
    flex: none;
    width: var(--cmp-ctl-h);
    min-width: var(--cmp-ctl-h);
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cmp-text-2);
}
@media (hover: hover) {
    .cmp-inputgroup__btn:hover { background: var(--cmp-fill-hover); border-color: transparent; color: #ffffff; }
}
.cmp-inputgroup__btn:focus-visible { outline-offset: -2px; }
.cmp-inputgroup__btn:active { transform: none; }

@media (max-width: 640px), (pointer: coarse) {
    .cmp-input, .cmp-select, .cmp-inputgroup__input { font-size: 16px; }
}

.cmp-check {
    display: flex;
    align-items: center;
    gap: var(--cmp-s-3);
    min-height: var(--cmp-ctl-h-sm);
    margin: 0;
    font-size: var(--cmp-fs-body);
    line-height: 1.4;
    cursor: pointer;
}
.cmp-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #ffffff;
    cursor: pointer;
}

/* ---------- поверхности UI-SPEC §4.3 ---------- */
.cmp-card {
    min-width: 0;
    padding: var(--cmp-s-6);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-radius);
    background: var(--cmp-panel);
}
.cmp-card__title { margin: 0 0 var(--cmp-s-4); font-size: var(--cmp-fs-heading); font-weight: 700; line-height: 1.3; }

.cmp-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--cmp-s-3);
    min-width: 0;
    padding: var(--cmp-s-3) var(--cmp-s-4);
    border: 1px solid var(--cmp-line);
    border-left-width: 3px;
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-panel);
    font-size: var(--cmp-fs-body);
    line-height: 1.5;
}
.cmp-alert > .cmp-icon { margin-top: 1px; }
.cmp-alert__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cmp-alert__meta { display: block; margin-top: var(--cmp-s-1); color: var(--cmp-muted); font-size: var(--cmp-fs-label); }
.cmp-alert__actions { display: flex; flex-wrap: wrap; gap: var(--cmp-s-3); margin-top: var(--cmp-s-3); }
.cmp-alert--err { border-left-color: var(--cmp-err); }
.cmp-alert--err > .cmp-icon { color: var(--cmp-err); }
.cmp-alert--ok { border-left-color: var(--cmp-ok); }
.cmp-alert--ok > .cmp-icon { color: var(--cmp-ok); }
.cmp-alert--warn { border-left-color: var(--cmp-warn); }
.cmp-alert--warn > .cmp-icon { color: var(--cmp-text-2, #c7c7ce); }
.cmp-alert--info { border-left-color: rgba(255, 255, 255, .6); }

.cmp-toasts {
    position: fixed;
    right: var(--cmp-s-6);
    bottom: var(--cmp-s-6);
    z-index: var(--cmp-z-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--cmp-s-2);
    pointer-events: none;
}
.cmp-toast {
    display: flex;
    align-items: center;
    gap: var(--cmp-s-3);
    max-width: 420px;
    min-width: 0;
    padding: var(--cmp-s-3) var(--cmp-s-3) var(--cmp-s-3) var(--cmp-s-4);
    border: 1px solid var(--cmp-line-strong);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-solid);
    font-size: var(--cmp-fs-body);
    pointer-events: auto;
}
.cmp-toast > .cmp-icon { color: var(--cmp-ok); }
.cmp-toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .cmp-toasts {
        left: var(--cmp-s-4);
        right: var(--cmp-s-4);
        bottom: max(16px, env(safe-area-inset-bottom));
        align-items: stretch;
    }
    .cmp-toast { max-width: none; }
}

.cmp-dialog {
    width: min(480px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    padding: var(--cmp-s-6);
    border: 1px solid var(--cmp-line-strong);
    border-radius: var(--cmp-radius);
    background: var(--cmp-solid);
    color: #ffffff;
    font: 400 var(--cmp-fs-body)/1.5 var(--cmp-font);
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .7);
    overflow-y: auto;
}
.cmp-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.cmp-dialog__title { margin: 0 0 var(--cmp-s-2); font-size: var(--cmp-fs-heading); font-weight: 700; line-height: 1.3; }
.cmp-dialog__text { margin: 0; color: var(--cmp-text-2); }
.cmp-dialog__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--cmp-s-2); margin-top: var(--cmp-s-6); }
.cmp-dialog__foot .cmp-btn { min-height: 44px; }
@media (max-width: 640px) {
    /* в DOM сначала второстепенные, primary последней: на телефоне столбец, primary сверху */
    .cmp-dialog__foot { flex-direction: column-reverse; }
    .cmp-dialog__foot .cmp-btn { width: 100%; }
}

.cmp-skel { display: block; border-radius: 8px; background: var(--cmp-fill-soft); }
.cmp-skel--line { height: 14px; }
.cmp-skel--short { width: 40%; }
.cmp-skel--mid { width: 64%; }
.cmp-skel--title { width: min(320px, 70%); height: 32px; }
.cmp-skel--nav { height: 50px; border-radius: var(--cmp-r-nav); }
.cmp-skel--btn { width: 96px; height: 32px; border-radius: var(--cmp-r-ctl); }
.cmp-skel--icon { width: 44px; height: 44px; border-radius: var(--cmp-r-ctl); }
.cmp-skelstack { display: flex; flex-direction: column; gap: var(--cmp-s-3); }

.cmp-empty { padding: var(--cmp-s-12); }
.cmp-empty > .cmp-icon { color: var(--cmp-muted); margin-bottom: var(--cmp-s-3); }
.cmp-empty__title { margin: 0 0 var(--cmp-s-2); font-size: var(--cmp-fs-heading); font-weight: 700; line-height: 1.3; }
.cmp-empty__text { margin: 0; max-width: 52ch; color: var(--cmp-text-2); }
.cmp-empty__action { margin-top: var(--cmp-s-6); }

.cmp-noscript { margin: 0 0 var(--cmp-s-6); }

@media (max-width: 640px) {
    .cmp-card { padding: var(--cmp-s-4); }
    .cmp-empty { padding: var(--cmp-s-6); }
}

/* ---------- login: shared Chroma field, safe opaque SSR base before JS ---------- */
.cmp-login {
    position: relative;
    z-index: var(--cmp-z-content, 1);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(32px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
    background: transparent;
    color: #ffffff;
}
/* Compatibility with older SSR markup; no poster or media URLs remain in the base. */
.cmp-login__side { display: none; background: none; }
.cmp-login__stage {
    position: relative;
    z-index: var(--cmp-z-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cmp-s-6);
    min-width: 0;
    width: 100%;
    max-width: 460px;
    padding: 16px 0;
}

.cmp-login__brand { display: flex; flex-direction: column; align-items: center; gap: var(--cmp-s-2); text-align: center; }
.cmp-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: var(--cmp-s-2);
    margin: 0;
    color: #f5f5f7;
    line-height: 1.2;
}
.cmp-wordmark__word { display: inline-flex; }
/* брендовое исключение типографики UI-SPEC: буквы знака 24px/800 .18em */
.cmp-wordmark__ch { display: inline-block; font-size: 24px; font-weight: 800; letter-spacing: .18em; }
.cmp-wordmark__suffix {
    font-size: var(--cmp-fs-label);
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}
.cmp-login__tag {
    margin: 0;
    color: #b5b7bf;
    font-size: var(--cmp-fs-label);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.cmp-authcard {
    width: 100%;
    max-width: 420px;
    padding: var(--cmp-s-12) 40px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--cmp-r-xl);
    background: rgba(0, 0, 0, .9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.cmp-login-matches {
    display: grid;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cmp-black-glass-line);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-black-glass-bg);
}
.cmp-login-matches[hidden] { display: none; }
.cmp-login-matches > .cmp-btn {
    min-height: 44px;
    justify-content: flex-start;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}
.cmp-authcard__head { margin-bottom: var(--cmp-s-8); text-align: center; }
.cmp-authcard__title {
    margin: 0;
    color: #ffffff;
    font-size: var(--cmp-fs-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}
@media (max-width: 374px) {
    .cmp-authcard__title { font-size: 26px; }
}
.cmp-authcard__sub { margin: var(--cmp-s-2) 0 0; color: #A7ADBA; font-size: var(--cmp-fs-body); line-height: 1.5; text-wrap: balance; }

/* сообщение над формой: контейнер data-cmp="login-msg" пуст и скрыт; JS ставит role, модификатор и текст */
.cmp-authmsg {
    display: flex;
    align-items: flex-start;
    gap: var(--cmp-s-3);
    margin-bottom: var(--cmp-s-4);
    padding: var(--cmp-s-3) var(--cmp-s-4);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-fill-soft);
    color: #C3C7D2;
    font-size: var(--cmp-fs-body);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.cmp-authmsg > .cmp-icon { margin-top: 1px; }
.cmp-authmsg--err { background: rgba(205, 53, 64, .16); border-color: rgba(205, 53, 64, .3); color: #FFB4AB; }
.cmp-authmsg--info { background: var(--cmp-fill-soft); border-color: rgba(255, 255, 255, .16); color: #C3C7D2; }

.cmp-authform { display: flex; flex-direction: column; gap: var(--cmp-s-4); margin: 0; }
.cmp-authform .cmp-label { color: #C3C7D2; }
.cmp-authform .cmp-inputgroup {
    height: var(--cmp-ctl-h-lg);
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
}
@media (hover: hover) {
    .cmp-authform .cmp-inputgroup:hover { border-color: rgba(255, 255, 255, .3); }
}
.cmp-authform .cmp-inputgroup:focus-within {
    border-color: var(--cmp-line-focus);
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .1);
}
.cmp-authform .cmp-inputgroup.is-invalid { border-color: var(--cmp-err); }
.cmp-authform .cmp-inputgroup__slot { color: #7D8494; }
.cmp-authform .cmp-inputgroup__input { font-size: 16px; }
.cmp-authform .cmp-inputgroup__input::placeholder { color: #8B919D; }
.cmp-authform .cmp-inputgroup__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #171922 inset; }
.cmp-authform .cmp-inputgroup__btn { color: #9AA1AD; }
@media (hover: hover) {
    .cmp-authform .cmp-inputgroup__btn:hover { background: transparent; color: #ffffff; }
}
.cmp-authform .cmp-check { color: #E6E8EC; }
.cmp-authform__remember { display: flex; flex-direction: column; gap: var(--cmp-s-1); }
.cmp-authform__remember .cmp-hint { padding-left: var(--cmp-s-8); color: #9AA1AD; }

.cmp-authcard__submit {
    width: 100%;
    min-height: var(--cmp-ctl-h-lg);
    margin-top: var(--cmp-s-2);
    background: #ffffff;
    color: #101318;
    font-size: var(--cmp-fs-heading);
    transition: background-color var(--cmp-dur) var(--cmp-ease), transform 120ms var(--cmp-ease);
}
@media (hover: hover) {
    .cmp-authcard__submit:hover { background: #ECEEF2; transform: translateY(-1px); }
}
.cmp-authcard__submit:active { transform: scale(.98); }
.cmp-authcard__submit.is-busy { background: #ECEEF2; transform: none; }
@media (hover: hover) {
    .cmp-authcard__submit.is-busy:hover { background: #ECEEF2; transform: none; }
}

.cmp-authcard__foot { margin: var(--cmp-s-6) 0 0; color: #9AA1AD; font-size: var(--cmp-fs-label); line-height: 1.4; text-align: center; text-wrap: balance; }

/* Narrow login stays in flow and scrolls naturally when the keyboard opens. */
@media (max-width: 640px) {
    .cmp-login__stage { max-width: 420px; padding: 0; }
}
@media (max-width: 640px) {
    .cmp-authcard { padding: var(--cmp-s-8) var(--cmp-s-6); }
}

/* ---------- движение (UI-SPEC §3.3): только под no-preference, без JS-гейта видимости ---------- */
@keyframes cmpRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cmpCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cmpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmpToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cmpPulse { from { opacity: 1; } to { opacity: .6; } }

@media (prefers-reduced-motion: no-preference) {
    .cmp-wordmark__ch { animation: cmpRise 800ms var(--cmp-ease-out) 300ms both; }
    .cmp-wordmark__ch:nth-child(2) { animation-delay: 350ms; }
    .cmp-wordmark__ch:nth-child(3) { animation-delay: 400ms; }
    .cmp-wordmark__ch:nth-child(4) { animation-delay: 450ms; }
    .cmp-wordmark__ch:nth-child(5) { animation-delay: 500ms; }
    .cmp-wordmark__ch:nth-child(6) { animation-delay: 550ms; }
    .cmp-wordmark__ch:nth-child(7) { animation-delay: 600ms; }
    .cmp-wordmark__ch:nth-child(8) { animation-delay: 650ms; }
    .cmp-wordmark__suffix, .cmp-login__tag { animation: cmpFadeIn 600ms ease 700ms both; }
    .cmp-authcard { animation: cmpCardIn 600ms var(--cmp-ease-out) 150ms both; }
    .cmp-toast { animation: cmpToastIn var(--cmp-dur) var(--cmp-ease-out) both; }
    /* скелетон проявляется, только если ждать дольше 300 мс (UI-SPEC §5.1), затем пульсирует */
    .cmp-skel { animation: cmpFadeIn 1ms linear 300ms both, cmpPulse 1.2s ease-in-out 301ms infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-body *, .cmp-body *::before, .cmp-body *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0ms !important;
        transition-delay: 0ms !important;
    }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
    .cmp-authcard__submit:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .cmp-side { background: var(--cmp-solid-side); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .cmp-authcard { background: #050608; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* === T002 02-08 shell integration BEGIN (классы из 02-08-SUMMARY «Integration with 02-06») === */
.cmp-stack { display: flex; flex-direction: column; gap: var(--cmp-s-6); min-width: 0; }
.cmp-form__fields { display: flex; flex-direction: column; gap: var(--cmp-s-6); }
.cmp-dl { display: grid; gap: var(--cmp-s-3); margin: 0; }
.cmp-dl__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--cmp-s-4); }
.cmp-dl__row dt { color: var(--cmp-text-2); }
.cmp-dl__row dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .cmp-dl__row { grid-template-columns: minmax(0, 1fr); gap: var(--cmp-s-1); } }
.cmp-dialog__msg:not(:empty), .cmp-dialog__body { margin-top: var(--cmp-s-4); }
.cmp-dialog__action { display: flex; flex-direction: column; gap: var(--cmp-s-2); }
@media (max-width: 640px) { .cmp-dialog__action { width: 100%; } }
/* === T002 02-08 shell integration END === */

/* === T002 02-10 users screens BEGIN === */
/* Компоненты админки и экраны «Сотрудники» (план 02-10; UI-SPEC 4.2, 4.3, 5.5..5.7, 7; UI-UX-ТЗ §3.1, §13).
   Только токены :root из 02-06, слои не вводятся, все классы с префиксом cmp-, у колонок с текстом min-width:0 и
   minmax(0, 1fr) (урок B2B про распирание сетки). Движение только под prefers-reduced-motion: no-preference. */

/* ---------- чипы статуса и метки источника права (UI-SPEC 4.3) ---------- */
.cmp-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--cmp-s-1);
    height: 24px;
    padding: 0 var(--cmp-s-2);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-pill);
    color: var(--cmp-muted);
    font-size: var(--cmp-fs-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Quiet status, not an action pill. Status text remains accessible. */
.cmp-chip--ok,
.cmp-plist__status .cmp-chip {
    height:20px;padding:0;border:0;border-radius:0;background:transparent;
    color:var(--cmp-text-2);font-size:12px;font-weight:500;line-height:1.4;
    letter-spacing:normal;text-transform:none;gap:7px;
}
.cmp-chip--ok::before,
.cmp-plist__status .cmp-chip::before {
    content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--cmp-ok);opacity:.85;
}
.cmp-plist__status .cmp-chip:not(.cmp-chip--ok)::before { background:var(--cmp-text-3); }
.cmp-chip--self { color: var(--cmp-text); border-color: var(--cmp-line-hover); }

/* радиус 12 = половина высоты чипа: в одну строку та же пилюля, а длинное «Профиль «…»» на телефоне переносится в
   аккуратный скруглённый прямоугольник, а не в овал с текстом у края рамки */
.cmp-src {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 24px;
    padding: 3px var(--cmp-s-2);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    color: var(--cmp-text-2);
    font-size: var(--cmp-fs-label);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.cmp-src--allow { color: var(--cmp-ok); border-color: var(--cmp-ok-line); }
.cmp-src--deny { color: var(--cmp-err); border-color: var(--cmp-err-line); }
.cmp-src--none { color: var(--cmp-text-3); border-color: transparent; }
.cmp-src--dependency-missing { color: var(--cmp-text-2, #c7c7ce); border-color: var(--cmp-warn-line); }

/* ---------- сегменты (UI-SPEC 4.2): fieldset + legend + label с визуально скрытым radio ---------- */
.cmp-seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.cmp-seg__legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--cmp-s-2);
    padding: 0;
    color: var(--cmp-text-2);
    font-size: var(--cmp-fs-body);
    line-height: 1.5;
}
.cmp-seg__track {
    clear: both;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-width: 100%;
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-panel);
    overflow: hidden;
}
.cmp-seg__opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cmp-ctl-h);
    min-height: var(--cmp-ctl-h);
    margin: 0;
    padding: 0 var(--cmp-s-3);
    color: var(--cmp-text-2);
    font-size: var(--cmp-fs-body);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cmp-seg__opt + .cmp-seg__opt { border-left: 1px solid var(--cmp-line-soft); }
@media (hover: hover) {
    .cmp-seg__opt:hover { color: var(--cmp-text); background: var(--cmp-fill-soft); }
}
.cmp-seg__opt.is-on { color: var(--cmp-text); font-weight: 700; background: rgba(255, 255, 255, .12); }
.cmp-seg__opt[data-mode="allow"].is-on { color: var(--cmp-action-ink); background: var(--cmp-action); }
.cmp-seg__opt[data-mode="deny"].is-on { color: #ffffff; background: var(--cmp-danger); }
.cmp-seg__opt:has(input:focus-visible) { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-seg__opt:has(input[aria-disabled="true"]) { cursor: progress; }
/* ширина опции резервируется под жирное начертание: выбор не сдвигает соседние опции */
.cmp-seg__text { display: inline-grid; }
.cmp-seg__text::after {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
}
.cmp-seg--size .cmp-seg__opt { min-width: 56px; }
/* права: три равные колонки; таблица от 1200px (336px), ниже во всю ширину, до 400px столбцом по 44px */
.cmp-seg--perm, .cmp-seg--perm .cmp-seg__track { width: 100%; }
.cmp-seg--perm .cmp-seg__track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-seg--perm .cmp-seg__opt { padding: 0 var(--cmp-s-1); }
@media (min-width: 1200px) {
    .cmp-seg--perm, .cmp-seg--perm .cmp-seg__track { width: 336px; }
}
@media (max-width: 400px) {
    .cmp-seg--perm .cmp-seg__track { grid-template-columns: minmax(0, 1fr); }
    .cmp-seg--perm .cmp-seg__opt { min-height: 44px; }
    .cmp-seg--perm .cmp-seg__opt + .cmp-seg__opt { border-left: 0; border-top: 1px solid var(--cmp-line-soft); }
}

/* ---------- поиск (UI-SPEC 4.2): нативные элементы WebKit type=search скрыты ---------- */
.cmp-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.cmp-search input[type="search"]::-webkit-search-cancel-button,
.cmp-search input[type="search"]::-webkit-search-decoration,
.cmp-search input[type="search"]::-webkit-search-results-button,
.cmp-search input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* ---------- список-карта (UI-SPEC 4.3): строка = одна ссылка, кликабельна вся коробка ---------- */
.cmp-card.cmp-rows { padding: 0; overflow: hidden; }
.cmp-rows__head {
    display: grid;
    align-items: center;
    gap: 0 var(--cmp-s-4);
    padding: var(--cmp-s-3) var(--cmp-s-4);
    border-bottom: 1px solid var(--cmp-line-soft);
    color: var(--cmp-text-3);
    font-size: var(--cmp-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.cmp-rows__list { margin: 0; padding: 0; list-style: none; }
.cmp-rows__list > li + li { border-top: 1px solid var(--cmp-line-soft); }
.cmp-row {
    display: grid;
    align-items: center;
    gap: 0 var(--cmp-s-4);
    min-width: 0;
    min-height: 64px;
    padding: var(--cmp-s-3) var(--cmp-s-4);
    color: var(--cmp-text);
    text-decoration: none;
}
@media (hover: hover) {
    a.cmp-row:hover { background: var(--cmp-row-hover); }
}
a.cmp-row:focus-visible { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-rows.is-busy .cmp-rows__list { opacity: .6; }
@media (max-width: 640px) {
    .cmp-rows__head { display: none; }
}

/* строка сотрудника: 1200+ пять колонок; 641..1199 без «Профессии» (она во второй строке); до 640 карточка */
.cmp-u-urow {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 112px 196px;
    grid-template-areas:
        "name profile prof status last"
        "sub  profile prof status last";
}
.cmp-u-urow__name, .cmp-u-urow__h-who { grid-area: name; }
.cmp-u-urow__sub { grid-area: sub; }
.cmp-u-urow__profile, .cmp-u-urow__h-profile { grid-area: profile; }
.cmp-u-urow__prof, .cmp-u-urow__h-prof { grid-area: prof; }
.cmp-u-urow__status, .cmp-u-urow__h-status { grid-area: status; }
.cmp-u-urow__last, .cmp-u-urow__h-last { grid-area: last; justify-self: end; text-align: right; }
.cmp-u-urow__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: end;
    gap: var(--cmp-s-1) var(--cmp-s-2);
    min-width: 0;
    font-weight: 700;
}
.cmp-u-urow__nametext { min-width: 0; overflow-wrap: anywhere; }
.cmp-u-urow__sub { align-self: start; min-width: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-u-urow__profile, .cmp-u-urow__prof { min-width: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-u-urow__last { color: var(--cmp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-u-urow--skel .cmp-u-urow__last { justify-self: stretch; }
.cmp-u-urow--skel .cmp-u-urow__last .cmp-u-skelbar { margin-left: auto; }
@media (max-width: 1199px) {
    .cmp-u-urow {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 112px 196px;
        grid-template-areas:
            "name profile status last"
            "sub  profile status last";
    }
    .cmp-u-urow__prof, .cmp-u-urow__h-prof { display: none; }
}
@media (max-width: 640px) {
    .cmp-u-urow {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name status"
            "sub  sub"
            "last last";
        row-gap: var(--cmp-s-1);
    }
    .cmp-u-urow__profile, .cmp-u-urow__prof { display: none; }
    .cmp-u-urow__name { font-size: var(--cmp-fs-heading); line-height: 1.3; }
    .cmp-u-urow__status { align-self: start; }
    .cmp-u-urow__last { justify-self: start; text-align: left; color: var(--cmp-muted); font-size: var(--cmp-fs-label); white-space: normal; }
}
.cmp-u-only-md, .cmp-u-only-sm { display: none; }
.cmp-u-only-narrow { display: inline; }
@media (min-width: 641px) and (max-width: 1199px) {
    .cmp-u-only-md { display: inline; }
}
@media (max-width: 640px) {
    .cmp-u-only-sm { display: inline; }
}
@media (min-width: 1200px) {
    .cmp-u-only-narrow { display: none; }
}

/* скелетон-полосы строк (пульс и задержку 300 мс даёт .cmp-skel из 02-06) */
.cmp-u-skelbar { display: block; height: 14px; border-radius: 8px; }
.cmp-u-skelbar--thin { height: 10px; margin-top: var(--cmp-s-1); }
.cmp-u-skelbar--w40 { width: 40%; }
.cmp-u-skelbar--w50 { width: 50%; }
.cmp-u-skelbar--w60 { width: 60%; }
.cmp-u-skelbar--w70 { width: 70%; }
.cmp-u-skelbar--chip { width: 72px; height: 24px; border-radius: var(--cmp-r-pill); }
.cmp-u-skelbar--title { display: inline-block; width: min(280px, 60vw); height: 32px; vertical-align: middle; }
.cmp-card > .cmp-u-skelbar + .cmp-skelstack { margin-top: var(--cmp-s-4); }

/* ---------- пагинация (UI-SPEC 5.5): от 641px одна строка, до 640px текст отдельно и сетка 1fr 1fr ---------- */
.cmp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cmp-s-3);
    margin-top: var(--cmp-s-4);
}
.cmp-pager__text { margin: 0; color: var(--cmp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
    .cmp-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cmp-s-2); }
    .cmp-pager__text { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    .cmp-pager .cmp-btn { width: 100%; }
}

/* ---------- экран «Сотрудники» ---------- */
.cmp-u-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--cmp-s-4);
    margin-bottom: var(--cmp-s-4);
}
.cmp-u-toolbar > .cmp-search { flex: 1 1 320px; max-width: 480px; }
.cmp-u-count {
    display: flex;
    align-items: center;
    min-height: var(--cmp-ctl-h);
    margin: 0 0 0 auto;
    color: var(--cmp-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cmp-u-count:empty { display: none; }
@media (max-width: 640px) {
    .cmp-u-toolbar { flex-direction: column; align-items: stretch; }
    .cmp-u-toolbar > .cmp-search { flex: none; max-width: none; }
    .cmp-u-count { min-height: 0; margin: 0; }
}

/* шапка экранов сотрудников (.cmp-pagehead из 02-06): H1 + чипы рядом, под H1 «логин · профессия» */
.cmp-u-head__titles { min-width: 0; }
.cmp-u-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2) var(--cmp-s-3); min-width: 0; }
.cmp-u-titleline > .cmp-pagehead__title { flex: 0 1 auto; }
.cmp-u-titlename { overflow-wrap: anywhere; }
.cmp-u-chips { display: inline-flex; flex-wrap: wrap; gap: var(--cmp-s-2); }
.cmp-u-chips:empty, .cmp-u-head__sub:empty { display: none; }
.cmp-u-head__sub { margin: var(--cmp-s-2) 0 0; color: var(--cmp-muted); overflow-wrap: anywhere; }

/* ---------- формы «Новый сотрудник» и «Данные» (UI-SPEC 5.6): 2 колонки от 768px ---------- */
.cmp-u-newcard { max-width: 720px; }
.cmp-u-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cmp-s-6) var(--cmp-s-4); }
@media (min-width: 768px) {
    .cmp-u-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-u-form__wide { grid-column: 1 / -1; }
}
.cmp-u-profileslot { display: flex; flex-direction: column; min-width: 0; }
.cmp-u-pwblock { display: flex; flex-direction: column; gap: var(--cmp-s-2); min-width: 0; }
.cmp-u-genrow { display: flex; }
.cmp-u-inlinehost:empty { display: none; }
.cmp-u-note { margin: 0; color: var(--cmp-muted); }
.cmp-u-newcard > .cmp-u-note { margin-top: var(--cmp-s-6); }
.cmp-u-ferr {
    display: flex;
    align-items: flex-start;
    gap: var(--cmp-s-1);
    margin: 0;
    color: var(--cmp-err);
    font-size: var(--cmp-fs-label);
    line-height: 1.4;
}
.cmp-u-ferr .cmp-icon, .cmp-u-prow__warn .cmp-icon, .cmp-u-prow__err .cmp-icon { width: 16px; height: 16px; margin-top: 1px; }

/* карта результата «Сотрудник создан» и результат сброса пароля: пароль скрыт точками, кнопки рядом с полем */
.cmp-u-result__text { margin: 0 0 var(--cmp-s-4); max-width: 60ch; color: var(--cmp-text-2); }
.cmp-u-result__login { margin: 0 0 var(--cmp-s-4); font-weight: 700; overflow-wrap: anywhere; }
.cmp-u-result__pw { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2); min-width: 0; }
.cmp-u-result__input { flex: 1 1 200px; font-variant-numeric: tabular-nums; }
.cmp-u-result__pwbtns { display: flex; flex-wrap: wrap; gap: var(--cmp-s-2); }
/* кнопки в одном ряду с полем той же высоты, что поле (40 ПК / 44 телефон) */
.cmp-u-result__pwbtns .cmp-btn { min-height: var(--cmp-ctl-h); }
.cmp-u-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cmp-s-2);
    margin-top: var(--cmp-s-8);
    padding-top: var(--cmp-s-6);
    border-top: 1px solid var(--cmp-line-soft);
}
@media (max-width: 640px) {
    /* «Скопировать пароль» жирным не помещается в половину 360px: кнопки столбцом, обе 44px */
    .cmp-u-result__pwbtns { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .cmp-u-result__pwbtns .cmp-btn { width: 100%; }
    .cmp-u-result__actions { flex-direction: column; }
    .cmp-u-result__actions .cmp-btn { width: 100%; }
}

/* ---------- карточка сотрудника (UI-SPEC 5.7): от 1200px «Данные» 7fr и «Вход и сеансы» 5fr ---------- */
.cmp-u-cardbody > * + * { margin-top: var(--cmp-s-6); }
.cmp-u-cardalerts:empty { display: none; }
.cmp-u-cardgrid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--cmp-s-6); }
@media (min-width: 1200px) {
    .cmp-u-cardgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.cmp-u-dl { display: grid; gap: var(--cmp-s-3); margin: 0; }
.cmp-u-dl__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cmp-s-1) var(--cmp-s-4); min-width: 0; }
.cmp-u-dl dt { color: var(--cmp-text-2); }
.cmp-u-dl dd { min-width: 0; margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cmp-u-actions { display: grid; gap: var(--cmp-s-2); margin-top: var(--cmp-s-6); }
.cmp-u-actions .cmp-btn { width: 100%; }

/* «Индивидуальные права»: от 1200px таблица-сетка, ниже блок на возможность; изменённая строка = полоса 2px акцента */
.cmp-u-perm__intro { margin: 0 0 var(--cmp-s-4); max-width: 72ch; color: var(--cmp-text-2); }
.cmp-u-perm__banners { display: grid; gap: var(--cmp-s-2); margin-bottom: var(--cmp-s-4); }
.cmp-u-plist { margin: 0; padding: 0; list-style: none; }
.cmp-u-prow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "cap cap"
        "seg seg"
        "res src";
    align-items: center;
    gap: var(--cmp-s-3) var(--cmp-s-4);
    min-width: 0;
    padding: var(--cmp-s-4) 0 var(--cmp-s-4) var(--cmp-s-3);
    border-top: 1px solid var(--cmp-line-soft);
}
.cmp-u-prow.is-changed { box-shadow: inset 2px 0 0 var(--cmp-accent); }
.cmp-u-prow--head { display: none; }
.cmp-u-prow__cap { grid-area: cap; min-width: 0; }
.cmp-u-prow__label { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-u-prow__desc { margin: var(--cmp-s-1) 0 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-u-prow__seg { grid-area: seg; min-width: 0; }
.cmp-u-prow__res { grid-area: res; }
.cmp-u-prow__src { grid-area: src; min-width: 0; }
.cmp-u-prow__warn, .cmp-u-prow__err {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: var(--cmp-s-1);
    margin: 0;
    font-size: var(--cmp-fs-label);
    line-height: 1.4;
}
.cmp-u-prow__warn { color: var(--cmp-text-2, #c7c7ce); }
.cmp-u-prow__err { color: var(--cmp-err); }
.cmp-u-res { display: inline-flex; align-items: center; gap: var(--cmp-s-1); white-space: nowrap; }
.cmp-u-res--yes > .cmp-icon { color: var(--cmp-ok); }
.cmp-u-res--no > .cmp-icon { color: var(--cmp-muted); }
.cmp-u-res--preview { display: inline-grid; gap: 2px; white-space: normal; }
.cmp-u-res__pre { color: var(--cmp-text-2); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-u-res__val { display: inline-flex; align-items: center; gap: var(--cmp-s-1); font-weight: 700; }
.cmp-u-res--yes .cmp-u-res__val > .cmp-icon { color: var(--cmp-ok); }
.cmp-u-res--no .cmp-u-res__val > .cmp-icon { color: var(--cmp-muted); }
.cmp-u-modetext { margin: 0; color: var(--cmp-text-2); }
@media (min-width: 1200px) {
    .cmp-u-prow {
        grid-template-columns: minmax(0, 1.6fr) auto minmax(0, .6fr) minmax(0, 1fr);
        grid-template-areas: "cap seg res src";
    }
    .cmp-u-prow__seg { justify-self: start; }
    .cmp-u-prow--head {
        display: grid;
        padding-top: var(--cmp-s-3);
        padding-bottom: var(--cmp-s-3);
        border-top: 0;
        color: var(--cmp-text-3);
        font-size: var(--cmp-fs-label);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    .cmp-u-prow--head .cmp-u-prow__seg { width: 336px; }
}

/* до 1023px шапка оболочки липкая (64px): поле, получившее фокус после ошибки, не прячется под ней (WCAG 2.4.11) */
@media (max-width: 1023px) {
    .cmp-u-screen :is(input, select, textarea, button, a, [tabindex]) { scroll-margin-top: calc(var(--cmp-top-h) + var(--cmp-s-4)); }
}

/* окна экранов сотрудников (.cmp-dialog из 02-06): тело с полем/результатом, алерты команды */
.cmp-u-dlgbody { display: grid; gap: var(--cmp-s-4); min-width: 0; margin-top: var(--cmp-s-4); }
.cmp-u-dlgalerts:empty { display: none; }
.cmp-dialog__body:has(> .cmp-u-dlgalerts:empty:only-child) { display: none; }
.cmp-u-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    a.cmp-row, .cmp-seg__opt { transition: background-color var(--cmp-dur) var(--cmp-ease), color var(--cmp-dur) var(--cmp-ease); }
    .cmp-rows__list { transition: opacity var(--cmp-dur) var(--cmp-ease); }
}

/* ---------- части cmp/ui (02-07) без правил в базе 02-06 ----------
   FormBlock выводит область алертов .cmp-formblock__alerts, футер .cmp-formfoot (точка #ffffff + «Есть несохранённые
   изменения», «Отменить изменения», primary) и «Ваш вариант» .cmp-conflict; ui.dialog оборачивает тело в .cmp-dialog__body.
   Экраны сотрудников первыми показывают их в картах, поэтому правила здесь (UI-SPEC 5.6, 5.7, 5.12); если при слиянии они
   появятся в основной части файла, этот подраздел удалить целиком. */
.cmp-dialog__body { margin-top: var(--cmp-s-4); min-width: 0; }
.cmp-formblock__alerts:not(:empty) { display: grid; gap: var(--cmp-s-2); margin-bottom: var(--cmp-s-4); }
.cmp-formblock__alerts + .cmp-alert:not([hidden]) { margin-bottom: var(--cmp-s-4); }
.cmp-formfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cmp-s-3) var(--cmp-s-4);
    margin-top: var(--cmp-s-8);
    padding-top: var(--cmp-s-6);
    border-top: 1px solid var(--cmp-line-soft);
}
.cmp-formfoot__dirty { display: flex; align-items: center; gap: var(--cmp-s-2); margin: 0; color: var(--cmp-text-2); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-formfoot__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cmp-accent); }
.cmp-formfoot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2); margin-left: auto; }
.cmp-formfoot__actions .cmp-btn { min-height: 44px; }
.cmp-conflict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--cmp-s-2);
    margin: 0;
    color: var(--cmp-text-2);
    font-size: var(--cmp-fs-label);
    line-height: 1.4;
}
.cmp-conflict__text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    /* телефон: все кнопки ряда 44px, при нехватке места столбцом на всю ширину, primary сверху */
    .cmp-formfoot__actions { flex-direction: column-reverse; align-items: stretch; width: 100%; margin-left: 0; }
    .cmp-formfoot__actions .cmp-btn { width: 100%; }
}
/* === T002 02-10 users screens END === */

/* === T002 02-11 profiles/settings BEGIN === */
/*
 * Экраны «Профили доступа» и «Настройки» (02-UI-SPEC §4.2 радио-карты и степпер, §5.8-§5.10, UI-UX-ТЗ §6, §11.2, §13).
 * Только то, чего нет в общих блоках 02-06/02-10: строки списка профилей, радио-карты области, строки возможностей,
 * степпер «- поле +» (поверх .cmp-inputgroup из 02-06, без input[type=number]), колонка формы, пары «ключ: значение».
 * Цели нажатия: строки и карты не ниже 64px, кнопки степпера --cmp-ctl-h (40 на ПК, 44 на телефоне и pointer:coarse).
 * Акцент #ffffff только полосой изменённой строки (UI-SPEC Color, п.3). z-index не используется.
 * Подсказки и подписи размечаются двумя именами (.cmp-hint/.cmp-field__hint, .cmp-label/.cmp-field__label), чтобы
 * совпасть с разметкой и 02-06 (CSS), и 02-07 (field() в cmp-ui).
 */

/* ---------- шапка экрана: H1 + чипы ---------- */
.cmp-ptitle { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--cmp-s-3); row-gap: var(--cmp-s-2); min-width: 0; }
.cmp-ptitle__chips { display: flex; flex-wrap: wrap; gap: var(--cmp-s-2); }
.cmp-ptitle__chips:empty { display: none; }

/* ---------- колонка формы: карты столбцом не шире 720px ---------- */
.cmp-pform { display: flex; flex-direction: column; gap: var(--cmp-s-6); max-width: 720px; min-width: 0; }
.cmp-pform__form { display: flex; flex-direction: column; gap: var(--cmp-s-6); min-width: 0; margin: 0; }
/* FormBlock (02-07) в колонке карт: зазоры даёт gap колонки (24px), пустая область алертов места не занимает,
   футер на 32px ниже последней карты (UI-SPEC 5.6: отступ сверху 32, линия, padding-top 24) */
.cmp-pform__form > .cmp-formblock__alerts { margin-bottom: 0; }
.cmp-pform__form > .cmp-formblock__alerts:empty { display: none; }
.cmp-pform__form > .cmp-formblock__alerts + .cmp-alert { margin-bottom: 0; }
.cmp-pform__form > .cmp-formfoot { margin-top: var(--cmp-s-2); }
.cmp-pnotes { display: flex; flex-direction: column; gap: var(--cmp-s-3); min-width: 0; }
.cmp-pnotes:empty, .cmp-paffected:empty { display: none; }
.cmp-pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cmp-s-6); min-width: 0; }
.cmp-pstatic {
    display: flex;
    align-items: center;
    min-height: var(--cmp-ctl-h);
    margin: 0;
    color: #ffffff;
    font-size: var(--cmp-fs-body);
    overflow-wrap: anywhere;
}
.cmp-pskel { display: flex; flex-direction: column; gap: var(--cmp-s-3); }
@media (min-width: 768px) {
    .cmp-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cmp-s-4); }
    .cmp-pgrid__full { grid-column: 1 / -1; }
}

/* ---------- список профилей (UI-SPEC 5.8): колонки от 1024px, строка-карточка ниже ---------- */
.cmp-card.cmp-plist { padding: 0; overflow: hidden; }
.cmp-plist__head { display: none; }
.cmp-plist__list { margin: 0; padding: 0; list-style: none; }
.cmp-plist__item { border-bottom: 1px solid var(--cmp-line-soft); }
.cmp-plist__item:last-child { border-bottom: 0; }
.cmp-plist__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main status" "scope scope" "caps caps";
    align-items: start;
    column-gap: var(--cmp-s-4);
    row-gap: var(--cmp-s-1);
    min-height: 64px;
    padding: var(--cmp-s-3) var(--cmp-s-4);
    color: #ffffff;
    text-decoration: none;
    transition: background-color var(--cmp-dur) var(--cmp-ease);
}
@media (hover: hover) {
    .cmp-plist__row:hover { background: var(--cmp-row-hover); }
}
.cmp-plist__row:focus-visible { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-plist__main { grid-area: main; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--cmp-s-2); row-gap: var(--cmp-s-1); min-width: 0; }
.cmp-plist__name { min-width: 0; font-size: var(--cmp-fs-heading); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cmp-plist__code { flex-basis: 100%; order: 3; min-width: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-plist__scope { grid-area: scope; min-width: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-plist__caps { grid-area: caps; min-width: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; font-variant-numeric: tabular-nums; }
.cmp-plist__status { grid-area: status; justify-self: end; }
.cmp-plist__skel { display: flex; flex-direction: column; justify-content: center; gap: var(--cmp-s-2); min-height: 64px; padding: var(--cmp-s-3) var(--cmp-s-4); border-bottom: 1px solid var(--cmp-line-soft); }
.cmp-plist__skel:last-child { border-bottom: 0; }
.cmp-plist__state { padding: var(--cmp-s-4); }
/* подпись колонки внутри строки: видна на телефоне, на ПК остаётся только для чтения с экрана (шапка колонок aria-hidden) */
@media (min-width: 1024px) {
    .cmp-plist__head, .cmp-plist__row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(96px, auto);
        grid-template-areas: "main scope caps status";
        align-items: center;
    }
    .cmp-plist__head {
        display: grid;
        column-gap: var(--cmp-s-4);
        padding: var(--cmp-s-3) var(--cmp-s-4);
        border-bottom: 1px solid var(--cmp-line-soft);
        color: var(--cmp-text-3);
        font-size: var(--cmp-fs-label);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    .cmp-plist__name { font-size: var(--cmp-fs-body); line-height: 1.5; }
    .cmp-plist__scope, .cmp-plist__caps { color: var(--cmp-text-2); font-size: var(--cmp-fs-body); line-height: 1.5; }
    .cmp-plist__status { justify-self: start; }
    .cmp-plist__lbl {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ---------- радио-карты .cmp-choice (UI-SPEC 4.2): 2 колонки, 1 на телефоне; вся карта = label ---------- */
.cmp-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.cmp-choice__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cmp-s-4); }
.cmp-choice__opt {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--cmp-s-3);
    min-width: 0;
    min-height: 64px;
    margin: 0;
    padding: var(--cmp-s-4);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-panel);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--cmp-dur) var(--cmp-ease), background-color var(--cmp-dur) var(--cmp-ease);
}
@media (hover: hover) {
    .cmp-choice__opt:hover { border-color: var(--cmp-line-hover); }
}
.cmp-choice__opt:has(input:checked) { border-color: #ffffff; background: var(--cmp-fill-soft); }
.cmp-choice__opt:has(input:focus-visible) { outline: var(--cmp-focus); outline-offset: 2px; }
.cmp-choice__opt input { width: 20px; height: 20px; margin: 0; accent-color: #ffffff; cursor: pointer; }
.cmp-choice__opt input:focus-visible { outline: none; }
.cmp-choice__opt:has(input[aria-disabled="true"]) { cursor: default; }
@media (hover: hover) {
    .cmp-choice__opt:has(input[aria-disabled="true"]):hover { border-color: var(--cmp-line); }
    .cmp-choice__opt:has(input[aria-disabled="true"]:checked):hover { border-color: #ffffff; }
}
.cmp-choice__opt:has(input[aria-disabled="true"]) input { cursor: default; }
.cmp-choice__body { display: flex; flex-direction: column; gap: var(--cmp-s-1); min-width: 0; }
.cmp-choice__title { font-size: var(--cmp-fs-body); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.cmp-choice__text { color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
/* изменённая область до сохранения: полоса 2px #ffffff слева у выбранной карты */
.cmp-choice.is-changed .cmp-choice__opt:has(input:checked)::before {
    content: "";
    position: absolute;
    left: -1px;
    top: var(--cmp-s-3);
    bottom: var(--cmp-s-3);
    width: 2px;
    border-radius: 1px;
    background: var(--cmp-accent);
}
@media (max-width: 640px) {
    .cmp-choice__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- строки возможностей (UI-SPEC 5.9): вся строка = label, не ниже 64px ---------- */
.cmp-caps { display: flex; flex-direction: column; min-width: 0; }
.cmp-capfield { position: relative; gap: var(--cmp-s-1); padding: var(--cmp-s-1) 0; border-top: 1px solid var(--cmp-line-soft); }
.cmp-capfield:first-child { border-top: 0; padding-top: 0; }
.cmp-capfield:last-child { padding-bottom: 0; }
.cmp-caprow {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--cmp-s-3);
    min-height: 64px;
    margin: 0;
    padding: var(--cmp-s-3) var(--cmp-s-3) var(--cmp-s-3) var(--cmp-s-4);
    border-radius: var(--cmp-r-nav);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--cmp-dur) var(--cmp-ease);
}
@media (hover: hover) {
    .cmp-caprow:hover { background: var(--cmp-row-hover); }
}
.cmp-caprow:has(input:focus-visible) { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-caprow input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #ffffff; cursor: pointer; }
.cmp-caprow input:focus-visible { outline: none; }
.cmp-caprow:has(input[aria-disabled="true"]) { cursor: default; }
@media (hover: hover) {
    .cmp-caprow:has(input[aria-disabled="true"]):hover { background: transparent; }
}
.cmp-caprow:has(input[aria-disabled="true"]) input { cursor: default; }
.cmp-caprow.is-unavailable { cursor: not-allowed; }
.cmp-caprow.is-unavailable input { opacity: .45; cursor: not-allowed; }
.cmp-caprow.is-unavailable .cmp-caprow__label { color: var(--cmp-text-2); }
.cmp-caprow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-caprow__label { font-size: var(--cmp-fs-body); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.cmp-caprow__desc { color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
/* пояснения под строкой выровнены по тексту строки: 16 (отступ) + 20 (флажок) + 12 (зазор) */
.cmp-capnotes { display: flex; flex-direction: column; gap: var(--cmp-s-1); padding-left: 48px; }
.cmp-capnotes:empty { display: none; }
.cmp-capfield > .cmp-field__error, .cmp-capfield > .cmp-error, .cmp-capfield > .cmp-conflict { margin-left: 48px; }
.cmp-capnote { display: flex; align-items: flex-start; gap: var(--cmp-s-1); margin: 0; font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-capnote .cmp-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.cmp-capnote--muted { color: var(--cmp-muted); }
.cmp-capnote--warn { color: var(--cmp-text-2, #c7c7ce); }
.cmp-capfield.is-changed::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--cmp-s-4);
    bottom: var(--cmp-s-4);
    width: 2px;
    border-radius: 1px;
    background: var(--cmp-accent);
}
@media (max-width: 640px) {
    .cmp-caprow { padding: var(--cmp-s-3) var(--cmp-s-2) var(--cmp-s-3) var(--cmp-s-3); }
    .cmp-capnotes { padding-left: 44px; }
    .cmp-capfield > .cmp-field__error, .cmp-capfield > .cmp-error, .cmp-capfield > .cmp-conflict { margin-left: 44px; }
}

/* ---------- профиль только для чтения (D-64; UI-UX-ТЗ §5.1, §11.2): значения текстом, не серая форма ----------
   Пары «Название / Код / Статус» берут .cmp-u-dl, итог строки .cmp-u-res (иконка + слово) из карточки сотрудника 02-10.
   Строка возможности не интерактивна: без hover, курсора и порога 64px; ритм и линии как у .cmp-capfield. */
.cmp-pview__value { margin: 0; color: #ffffff; font-size: var(--cmp-fs-body); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.cmp-pview__text { margin: var(--cmp-s-1) 0 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-pview__hint { margin-top: var(--cmp-s-3); }
.cmp-pview-caps { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.cmp-pview-cap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--cmp-s-4);
    min-width: 0;
    padding: var(--cmp-s-3) 0;
    border-top: 1px solid var(--cmp-line-soft);
}
.cmp-pview-cap:first-child { border-top: 0; padding-top: 0; }
.cmp-pview-cap:last-child { padding-bottom: 0; }
.cmp-pview-cap__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.cmp-pview-cap__res { margin: 0; font-size: var(--cmp-fs-body); line-height: 1.5; }
.cmp-pview-cap__res.cmp-u-res--no { color: var(--cmp-text-2); }

/* ---------- затронутые сотрудники после profile.update (D-58): кнопки-ссылки на карточки ---------- */
.cmp-paffected .cmp-alert__actions { gap: var(--cmp-s-2); }
.cmp-paffected .cmp-btn { max-width: 100%; }
.cmp-paffected .cmp-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- степпер .cmp-stepper (UI-SPEC 4.2): [-][поле][+] на базе .cmp-inputgroup ---------- */
.cmp-stepper { display: inline-flex; align-self: flex-start; width: auto; max-width: 100%; }
.cmp-stepper .cmp-stepper__btn { width: var(--cmp-ctl-h); min-width: var(--cmp-ctl-h); height: auto; min-height: 0; }
@media (hover: hover) {
    .cmp-stepper .cmp-stepper__btn[aria-disabled="true"]:hover { background: transparent; color: var(--cmp-text-2); }
}
.cmp-stepper .cmp-stepper__input {
    flex: none;
    width: 64px;
    padding: 0 var(--cmp-s-1);
    border-left: 1px solid var(--cmp-line-soft);
    border-right: 1px solid var(--cmp-line-soft);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.cmp-stepper:has(.cmp-stepper__input[aria-invalid="true"]) { border-color: var(--cmp-err); }

/* ---------- пары «ключ: значение» (О приложении) ---------- */
.cmp-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--cmp-s-6); row-gap: var(--cmp-s-3); margin: 0; }
.cmp-kv__row { display: contents; }
.cmp-kv dt { color: var(--cmp-text-2); }
.cmp-kv dd { margin: 0; color: #ffffff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .cmp-kv { grid-template-columns: minmax(0, 1fr); row-gap: var(--cmp-s-1); }
    .cmp-kv dd { margin-bottom: var(--cmp-s-2); }
    .cmp-kv__row:last-child dd { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-plist__row, .cmp-choice__opt, .cmp-caprow { transition: none; }
}
/* === T002 02-11 profiles/settings END === */

/* === T003 03-02 BEGIN === */
/* Проекты: список, создание и карточка (план 03-02; UI-UX-ТЗ §4.1..§4.3, §5.1, §7, §13; 03-CONTEXT E-16..E-18).
   Только токены :root из 02-06, классы с префиксом cmp-p3-. У текстовых колонок min-width:0 и minmax(0, 1fr) (урок B2B
   про распирание сетки). Высоты целей берутся из --cmp-ctl-h / --cmp-ctl-h-sm: 40/32px на ПК, 44px до 640px и при грубом
   указателе. Движение только под prefers-reduced-motion: no-preference. */

.cmp-chip--p3warn { color: var(--cmp-text-2, #c7c7ce); border-color: var(--cmp-warn-line); }

/* ---------- шапка: H1 «№ · название» + чип состояния, ниже «Ответственный · обновлён», справа переходы ---------- */
.cmp-p3-head { min-width: 0; }
.cmp-p3-head__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2) var(--cmp-s-3); min-width: 0; }
.cmp-p3-head__line > .cmp-pagehead__title { flex: 0 1 auto; }
.cmp-p3-head__title { overflow-wrap: anywhere; }
.cmp-p3-head__chips { display: inline-flex; flex-wrap: wrap; gap: var(--cmp-s-2); }
.cmp-p3-head__chips:empty, .cmp-p3-head__sub:empty { display: none; }
.cmp-p3-head__sub { margin: var(--cmp-s-2) 0 0; color: var(--cmp-muted); overflow-wrap: anywhere; }
.cmp-p3-actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.cmp-p3-actions .cmp-btn { min-height: var(--cmp-ctl-h); }

/* ---------- список: панель поиска и фильтров ---------- */
.cmp-p3-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--cmp-s-4);
    margin-bottom: var(--cmp-s-4);
}
.cmp-p3-toolbar > .cmp-search { flex: 1 1 320px; max-width: 480px; }
.cmp-p3-count {
    display: flex;
    align-items: center;
    min-height: var(--cmp-ctl-h);
    margin: 0 0 0 auto;
    color: var(--cmp-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cmp-p3-count:empty { display: none; }
/* Desktop keeps the existing toolbar; only mobile folds secondary controls. */
.cmp-p3-filterbody { display: contents; }
.cmp-p3-filtertoggle { display: none; }
@media (max-width: 640px) {
    .cmp-p3-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .cmp-p3-toolbar > .cmp-search { grid-column: 1 / -1; }
    .cmp-p3-filtertoggle {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        min-width: 0; min-height: 48px; padding: 10px 12px;
        border: 1px solid var(--cmp-line-soft); border-radius: 12px;
        background: rgba(255, 255, 255, .035); color: var(--cmp-text); font: inherit;
        cursor: pointer; text-align: left;
    }
    .cmp-p3-filtertoggle:focus-visible { outline: 3px solid var(--cmp-line-focus); outline-offset: 3px; }
    .cmp-p3-filtertoggle__text { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
    .cmp-p3-filtertoggle__label { font-weight: 600; }
    .cmp-p3-filtertoggle__value { color: var(--cmp-muted); font-size: 12px; overflow-wrap: anywhere; }
    .cmp-p3-filtertoggle > .cmp-icon { flex: 0 0 auto; transition: transform .15s; }
    .cmp-p3-filtertoggle[aria-expanded='true'] > .cmp-icon { transform: rotate(180deg); }
    .cmp-p3-filterbody { display: grid; gap: var(--cmp-s-4); grid-column: 1 / -1; }
    .cmp-p3-filterbody.is-collapsed { display: none; }
    .cmp-p3-toolbar > .cmp-p3-count { grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-p3-filtertoggle > .cmp-icon { transition: none; }
}
@media (max-width: 640px) {
    .cmp-p3-toolbar { flex-direction: column; align-items: stretch; }
    .cmp-p3-toolbar > .cmp-search { flex: none; max-width: none; }
    .cmp-p3-count { min-height: 0; margin: 0; }
    /* пять состояний не помещаются в строку 360..390px: «Рабочие» во всю ширину, остальные парами (без прокрутки) */
    .cmp-seg--p3state, .cmp-seg--p3state .cmp-seg__track { width: 100%; }
    .cmp-seg--p3state .cmp-seg__track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-seg--p3state .cmp-seg__opt:first-child { grid-column: 1 / -1; }
    .cmp-seg--p3state .cmp-seg__opt + .cmp-seg__opt { border-left: 0; border-top: 1px solid var(--cmp-line-soft); }
    .cmp-seg--p3state .cmp-seg__opt:nth-child(odd):not(:first-child) { border-left: 1px solid var(--cmp-line-soft); }
}

/* строка проекта: 1024+ четыре колонки; 641..1023 ответственный уходит во вторую строку; до 640 карточка */
.cmp-p3-prow {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) 128px 196px;
    grid-template-areas:
        "name resp state upd"
        "sub  resp state upd";
}
.cmp-p3-prow__name, .cmp-p3-prow__h-name { grid-area: name; }
.cmp-p3-prow__sub { grid-area: sub; }
.cmp-p3-prow__resp, .cmp-p3-prow__h-resp { grid-area: resp; }
.cmp-p3-prow__state, .cmp-p3-prow__h-state { grid-area: state; }
.cmp-p3-prow__upd, .cmp-p3-prow__h-upd { grid-area: upd; justify-self: end; text-align: right; }
.cmp-p3-prow__name { align-self: end; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-p3-prow__num { color: var(--cmp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-p3-prow__sub { align-self: start; min-width: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-p3-prow__subresp { display: none; }
.cmp-p3-prow__resp { min-width: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-p3-prow__upd { color: var(--cmp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-p3-prow--skel .cmp-p3-prow__upd { justify-self: stretch; }
.cmp-p3-prow--skel .cmp-p3-prow__upd .cmp-p3-skelbar { margin-left: auto; }
@media (max-width: 1023px) {
    .cmp-p3-prow {
        grid-template-columns: minmax(0, 1fr) 128px 196px;
        grid-template-areas:
            "name state upd"
            "sub  state upd";
    }
    .cmp-p3-prow__resp, .cmp-p3-prow__h-resp { display: none; }
    .cmp-p3-prow__subresp { display: inline; }
}
@media (max-width: 640px) {
    .cmp-p3-prow {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name state"
            "sub  sub"
            "upd  upd";
        row-gap: var(--cmp-s-1);
    }
    .cmp-p3-prow__name { font-size: var(--cmp-fs-heading); line-height: 1.3; }
    .cmp-p3-prow__state { align-self: start; }
    .cmp-p3-prow__upd { justify-self: start; text-align: left; color: var(--cmp-muted); font-size: var(--cmp-fs-label); white-space: normal; }
}

/* скелетон-полосы (пульс и задержку 300 мс даёт .cmp-skel из 02-06) */
.cmp-p3-skelbar { display: block; height: 14px; border-radius: 8px; }
.cmp-p3-skelbar--thin { height: 10px; margin-top: var(--cmp-s-1); }
.cmp-p3-skelbar--w40 { width: 40%; }
.cmp-p3-skelbar--w50 { width: 50%; }
.cmp-p3-skelbar--w60 { width: 60%; }
.cmp-p3-skelbar--w70 { width: 70%; }
.cmp-p3-skelbar--chip { width: 72px; height: 24px; border-radius: var(--cmp-r-pill); }
.cmp-p3-skelbar--title { display: inline-block; width: min(280px, 60vw); height: 32px; vertical-align: middle; }
.cmp-card > .cmp-p3-skelbar + .cmp-skelstack { margin-top: var(--cmp-s-4); }

/* ---------- карточка: от 1200px левая колонка 7fr (Обзор, Композиции, Стороны), правая 5fr ---------- */
.cmp-p3-body { display: flex; flex-direction: column; gap: var(--cmp-s-6); min-width: 0; }
.cmp-p3-alerts:empty, .cmp-p3-note:empty, .cmp-p3-slot:empty { display: none; }
.cmp-p3-alerts { display: grid; gap: var(--cmp-s-2); }
.cmp-p3-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--cmp-s-6); }
@media (min-width: 1200px) {
    .cmp-p3-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.cmp-p3-col { display: flex; flex-direction: column; gap: var(--cmp-s-6); min-width: 0; }
.cmp-p3-slot { min-width: 0; }

/* формы блоков: 2 колонки от 768px, длинные поля во всю ширину */
.cmp-p3-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cmp-s-6) var(--cmp-s-4); }
@media (min-width: 768px) {
    .cmp-p3-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-p3-form__wide { grid-column: 1 / -1; }
}
.cmp-p3-newcard { max-width: 720px; }
.cmp-input.cmp-p3-textarea {
    display: block;
    height: auto;
    min-height: 112px;
    padding: var(--cmp-s-3) var(--cmp-s-4);
    line-height: 1.5;
    resize: vertical;
}
.cmp-p3-picker { display: grid; gap: var(--cmp-s-2); min-width: 0; }
.cmp-p3-subhead {
    margin: 0;
    padding-top: var(--cmp-s-4);
    border-top: 1px solid var(--cmp-line-soft);
    font-size: var(--cmp-fs-body);
    font-weight: 700;
    line-height: 1.4;
}
.cmp-p3-foreign { margin: var(--cmp-s-4) 0 0; color: var(--cmp-text-2, #c7c7ce); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-p3-pre { white-space: pre-wrap; }
.cmp-p3-muted { margin: 0; color: var(--cmp-muted); }
/* единица у числа справа: label поля (клик фокусирует поле), ширина слота 44px из .cmp-inputgroup__slot */
.cmp-p3-unitgroup { max-width: 320px; }
.cmp-p3-unit { border-left: 1px solid var(--cmp-line-soft); color: var(--cmp-text-2); font-weight: 700; }

/* композиции и участники: строки-списки внутри карты */
.cmp-p3-clist, .cmp-p3-mlist { margin: 0; padding: 0; list-style: none; }
.cmp-p3-clist > li + li, .cmp-p3-mlist > li + li { border-top: 1px solid var(--cmp-line-soft); }
.cmp-p3-crow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cmp-s-3);
    min-height: 48px;
    margin: 0 calc(-1 * var(--cmp-s-3));
    padding: var(--cmp-s-2) var(--cmp-s-3);
    border-radius: var(--cmp-r-nav);
    color: var(--cmp-text);
    text-decoration: none;
}
@media (hover: hover) {
    .cmp-p3-crow:hover { background: var(--cmp-row-hover); }
}
.cmp-p3-crow:focus-visible { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-p3-crow__title { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-p3-crow > .cmp-icon { flex: none; color: var(--cmp-text-3); }
.cmp-p3-mrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cmp-s-2) var(--cmp-s-4);
    min-height: 56px;
    padding: var(--cmp-s-2) 0;
}
.cmp-p3-mrow__who { display: flex; flex: 1 1 180px; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-p3-mrow__name { font-weight: 700; overflow-wrap: anywhere; }
.cmp-p3-mrow__label { color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-p3-cardact { display: flex; flex-wrap: wrap; gap: var(--cmp-s-2); margin-top: var(--cmp-s-4); }
@media (max-width: 640px) {
    .cmp-p3-cardact .cmp-btn { width: 100%; }
    /* сегменты в формах карточки (тип покупателя, режим скидки) во всю ширину: равные цели 44px */
    .cmp-p3-block .cmp-seg, .cmp-p3-block .cmp-seg__track { width: 100%; }
}

/* стоимость: суммы табличными цифрами, итог жирным; форма скидки отделена линией от расчёта */
.cmp-p3-calc { display: grid; gap: var(--cmp-s-3); }
.cmp-p3-calc:empty { display: none; }
.cmp-p3-num { font-variant-numeric: tabular-nums; }
.cmp-p3-total { font-weight: 700; }
@media (min-width: 641px) {
    .cmp-p3-cost dd.cmp-p3-num { text-align: right; }
}
.cmp-p3-calc:not(:empty) + .cmp-p3-discount,
.cmp-p3-calc:not(:empty) + .cmp-dl {
    margin-top: var(--cmp-s-6);
    padding-top: var(--cmp-s-6);
    border-top: 1px solid var(--cmp-line-soft);
}

/* окна карточки (.cmp-dialog из 02-06): тело с полями, алерты команды */
.cmp-p3-dlgbody { display: grid; gap: var(--cmp-s-4); min-width: 0; }
.cmp-p3-dlgalerts:empty { display: none; }
.cmp-dialog__body:has(> .cmp-p3-dlgalerts:empty:only-child) { display: none; }

/* до 1023px шапка оболочки липкая (64px): поле с фокусом после ошибки не прячется под ней (WCAG 2.4.11) */
@media (max-width: 1023px) {
    .cmp-p3-screen :is(input, select, textarea, button, a, [tabindex]) { scroll-margin-top: calc(var(--cmp-top-h) + var(--cmp-s-4)); }
}
@media (prefers-reduced-motion: no-preference) {
    .cmp-p3-crow { transition: background-color var(--cmp-dur) var(--cmp-ease); }
}
/* === T003 03-02 END === */

/* === T003 03-04 BEGIN === */
/* Паспорт композиции, состав, редактор строки, справочники и продавцы (план 03-04; UI-UX-ТЗ §5.1..§5.4, §7, §11.2, §13;
   03-CONTEXT E-16..E-18). Только токены :root из 02-06, классы с префиксом cmp-p4- (плюс общие cmp-p3- из блока 03-02).
   Цели 40/32px на ПК и 44px до 640px и при грубом указателе берутся из --cmp-ctl-h / --cmp-ctl-h-sm. Числовые поля:
   type text с inputmode decimal, нативных стрелок number нет. Движение только под prefers-reduced-motion: no-preference. */

/* ---------- паспорт: от 1200px две колонки блоков, состав ниже во всю ширину ---------- */
.cmp-p4-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--cmp-s-6); }
@media (min-width: 1200px) {
    .cmp-p4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cmp-p4-compslot { min-width: 0; }
.cmp-input.cmp-p4-textarea { min-height: 88px; }
/* единица у числа: слот-label шириной по тексту («мм», «шт», «компл.»), не уже 44px */
.cmp-inputgroup__slot.cmp-p4-unit { width: auto; min-width: 44px; padding: 0 var(--cmp-s-3); white-space: nowrap; }
.cmp-inputgroup__slot.cmp-p4-unit:empty { display: none; }
/* дата монтажа: одинаковая высота с соседними полями в WebKit (iOS рисует date выше без appearance:none) */
.cmp-input.cmp-p4-date {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-height: var(--cmp-ctl-h);
    line-height: calc(var(--cmp-ctl-h) - 2px);
    color-scheme: dark;
}
.cmp-input.cmp-p4-date::-webkit-date-and-time-value { text-align: left; }
.cmp-input.cmp-p4-date::-webkit-calendar-picker-indicator { padding: var(--cmp-s-2); cursor: pointer; }

/* ---------- состав: строка = основная часть, количество, деньги (только при ключах ответа), действия ---------- */
.cmp-p4-csum { margin: 0 0 var(--cmp-s-3); color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-p4-csum:empty { display: none; }
.cmp-p4-clist { margin: 0; padding: 0; list-style: none; }
.cmp-p4-clist > li + li { border-top: 1px solid var(--cmp-line-soft); }
.cmp-p4-crow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(96px, 140px) auto;
    grid-template-areas: "main qty acts";
    align-items: start;
    gap: var(--cmp-s-2) var(--cmp-s-4);
    min-width: 0;
    padding: var(--cmp-s-3) 0;
}
.cmp-p4-crow--priced {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 140px) minmax(200px, 260px) auto;
    grid-template-areas: "main qty money acts";
}
.cmp-p4-crow__main { grid-area: main; min-width: 0; }
.cmp-p4-crow__copy { display: grid; gap: var(--cmp-s-1); min-width: 0; }
.cmp-p4-crow__main--photo {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: var(--cmp-s-3);
}
.cmp-p4-crow__main--photo > .cmp-accessory-cover { aspect-ratio: 1; }
.cmp-p4-crow__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2); min-width: 0; }
.cmp-p4-crow__title { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-p4-crow__meta, .cmp-p4-crow__line { margin: 0; color: var(--cmp-text-2); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-p4-crow__qty { grid-area: qty; display: grid; gap: 2px; min-width: 0; }
.cmp-p4-crow__qlabel { color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-p4-crow__money { grid-area: money; min-width: 0; }
.cmp-p4-crow__money .cmp-dl__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--cmp-s-2); }
.cmp-p4-crow__money dd { text-align: right; white-space: nowrap; }
.cmp-p4-crow__acts { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--cmp-s-2); }
.cmp-p4-crow__acts .cmp-btn { min-height: var(--cmp-ctl-h-sm); }
@media (max-width: 1023px) {
    .cmp-p4-crow, .cmp-p4-crow--priced {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main  main"
            "qty   qty"
            "money money"
            "acts  acts";
    }
    .cmp-p4-crow__qty { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--cmp-s-2); }
    .cmp-p4-crow__acts { justify-content: flex-start; }
}
@media (max-width: 640px) {
    /* на телефоне строка карточкой: две равные кнопки по 44px во всю ширину */
    .cmp-p4-crow__main--photo { grid-template-columns: 56px minmax(0, 1fr); }
    .cmp-p4-crow__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-p4-crow__acts .cmp-btn { width: 100%; min-height: var(--cmp-ctl-h); }
}

/* итоги: суммы табличными цифрами справа, отделены от списка */
.cmp-p4-totals { display: grid; gap: var(--cmp-s-3); margin-top: var(--cmp-s-4); }
.cmp-p4-totals__dl .cmp-dl__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--cmp-s-3); }
.cmp-p4-totals__dl dd { text-align: right; white-space: nowrap; }
.cmp-p4-totalslot:empty { display: none; }

/* ---------- редактор строки: окно 720px на ПК, на телефоне лист на весь экран со своим скроллом ---------- */
.cmp-dialog[data-cmp="component-dialog"] { width: min(720px, calc(100% - 32px)); }
.cmp-dialog[data-cmp="seller-dialog"] { width: min(640px, calc(100% - 32px)); }
.cmp-p4-edbody .cmp-p3-unitgroup { max-width: none; }
@media (max-width: 640px) {
    .cmp-dialog[data-cmp="component-dialog"], .cmp-dialog[data-cmp="seller-dialog"] {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: var(--cmp-s-4) var(--cmp-s-4) max(var(--cmp-s-4), env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
    }
}

/* ---------- админ: справочники и продавцы ---------- */
.cmp-p4-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cmp-s-4); margin-bottom: var(--cmp-s-4); }
.cmp-p4-dlist { min-width: 0; }
.cmp-input.cmp-p4-short { max-width: 160px; }
/* строка-кнопка открывает окно правки: кликабельна вся коробка, вид как у строки-ссылки 02-10 */
.cmp-p4-rowbtn {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
@media (hover: hover) {
    .cmp-p4-rowbtn:hover { background: var(--cmp-row-hover); }
}
.cmp-p4-rowbtn:focus-visible { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-p4-drow { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 88px; }
.cmp-p4-drow__label, .cmp-p4-srow__name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-p4-drow__code { min-width: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-p4-drow__article-label { display: none; }
.cmp-p4-drow__specifications, .cmp-p4-drow__code--article {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.cmp-p4-drow__specifications { margin-top: var(--cmp-s-1); color: var(--cmp-text-2); font-weight: 400; }
.cmp-p4-drow__state, .cmp-p4-srow__state { display: flex; flex-wrap: wrap; gap: var(--cmp-s-1); min-width: 0; }
.cmp-p4-drow__sort, .cmp-p4-drow__h-sort { justify-self: end; text-align: right; color: var(--cmp-text-2); }
.cmp-p4-srow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.cmp-p4-srow__type { color: var(--cmp-text-2); }
@media (max-width: 640px) {
    .cmp-p4-drow { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--cmp-s-1); }
    .cmp-p4-drow__code { grid-column: 1; }
    .cmp-p4-drow__article-label { display: inline; margin-inline-end: .5em; }
    .cmp-p4-drow__state { grid-column: 1 / -1; }
    .cmp-p4-drow__sort { grid-row: 1; grid-column: 2; }
    .cmp-p4-srow { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--cmp-s-1); }
    .cmp-p4-srow__type { grid-column: 1; }
    .cmp-p4-srow__state { grid-row: 1; grid-column: 2; }
    .cmp-seg--p4dict, .cmp-seg--p4dict .cmp-seg__track { width: 100%; }
    .cmp-seg--p4dict .cmp-seg__track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-seg--p4dict .cmp-seg__opt { min-height: 44px; padding-inline: var(--cmp-s-2); }
    .cmp-seg--p4dict .cmp-seg__opt + .cmp-seg__opt { border-left: 0; }
    .cmp-seg--p4dict .cmp-seg__opt:nth-child(n+3) { border-top: 1px solid var(--cmp-line-soft); }
    .cmp-seg--p4dict .cmp-seg__opt:nth-child(even) { border-left: 1px solid var(--cmp-line-soft); }
    .cmp-p4-admin .cmp-pagehead__actions, .cmp-p4-admin .cmp-pagehead__actions .cmp-btn { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
    .cmp-p4-rowbtn { transition: background-color var(--cmp-dur) var(--cmp-ease); }
}
/* === T003 03-04 END === */

/* === T004 04-02 BEGIN === */
/* Стадии и сроки (план 04-02; 04-CONTEXT G-29..G-32, G-34; UI-UX-ТЗ §6, §7, §13): блок карточки, формы «Сменить
   стадию» и «Изменить шаг», поля даты/времени/степпер, история стадий, справочник стадий, стадия в списке проектов.
   Только токены :root из 02-06, классы с префиксом cmp-wf- (cmp-p3-/cmp-p4- заняты T003). Высоты целей из --cmp-ctl-h /
   --cmp-ctl-h-sm: 40/32 px на ПК, 44 px до 640 px и при грубом указателе; у flex/grid детей min-width:0; цвет только
   дополняет текст; :hover только внутри (hover: hover); движение только под prefers-reduced-motion: no-preference. */

.cmp-chip--wf-overdue { color: var(--cmp-err); border-color: var(--cmp-err-line); }
.cmp-chip--wf-paused { color: var(--cmp-text-2, #c7c7ce); border-color: var(--cmp-warn-line); }
.cmp-wf-muted { margin: 0; color: var(--cmp-muted); }
.cmp-wf-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- блок «Стадия и сроки» в карточке: смысловые строки, одно основное действие ---------- */
.cmp-wf-slot { min-width: 0; }
.cmp-wf-block { display: grid; gap: var(--cmp-s-4); }
.cmp-wf-block > .cmp-card__title { margin: 0; }
.cmp-wf-alerts { display: grid; gap: var(--cmp-s-2); min-width: 0; }
.cmp-wf-alerts:empty { display: none; }
@media (min-width: 1024px) {
    .cmp-wf-block .cmp-wf-dl .cmp-wf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
}
.cmp-wf-row > dd { min-width: 0; }
.cmp-wf-row > dd[data-cmp="stage-name"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2); }
.cmp-wf-stagename { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-wf-due { display: flex; flex-direction: column; gap: var(--cmp-s-1); }
.cmp-wf-due__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2); min-width: 0; }
.cmp-wf-due__main { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-wf-due[data-status="overdue"] .cmp-wf-due__main { color: var(--cmp-err); }
.cmp-wf-due__chip { display: inline-flex; }
.cmp-wf-due__chip:empty { display: none; }
.cmp-wf-due__sub { min-width: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-wf-note { margin: 0; color: var(--cmp-text-2); }
.cmp-wf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cmp-s-2);
    padding-top: var(--cmp-s-4);
    border-top: 1px solid var(--cmp-line-soft);
}
.cmp-wf-actions .cmp-btn { min-height: var(--cmp-ctl-h); }
@media (max-width: 640px) {
    .cmp-wf-block .cmp-wf-dl .cmp-wf-row dt { font-size: var(--cmp-fs-label); }
    /* телефон: кнопки ряда столбцом во всю ширину и одной высоты 44 px */
    .cmp-wf-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .cmp-wf-actions .cmp-btn { width: 100%; min-height: 44px; }
}

/* ---------- окна форм: 640/560 px на ПК, на телефоне лист на весь экран со своим скроллом ---------- */
.cmp-dialog[data-cmp="stage-dialog"], .cmp-dialog[data-cmp="step-dialog"] { width: min(640px, calc(100% - 32px)); }
.cmp-dialog[data-cmp="stage-admin-dialog"] { width: min(560px, calc(100% - 32px)); }
@media (max-width: 640px) {
    .cmp-dialog[data-cmp="stage-dialog"], .cmp-dialog[data-cmp="step-dialog"], .cmp-dialog[data-cmp="stage-admin-dialog"] {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: var(--cmp-s-4) var(--cmp-s-4) max(var(--cmp-s-4), env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
    }
}
@media (max-width: 640px) {
    .cmp-dialog[data-cmp="stage-dialog"][open] {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
    }
    .cmp-dialog[data-cmp="stage-dialog"] > .cmp-dialog__body {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-inline: 2px;
    }
    .cmp-dialog[data-cmp="stage-dialog"] > .cmp-dialog__foot {
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: var(--cmp-s-3);
    }
    .cmp-dialog[data-cmp="stage-dialog"] > .cmp-dialog__foot > .cmp-btn {
        width: auto;
        flex: 1;
    }
}
.cmp-wf-dlgbody { min-width: 0; }
.cmp-wf-dlgalerts { display: grid; gap: var(--cmp-s-2); }
.cmp-input.cmp-wf-textarea {
    display: block;
    height: auto;
    min-height: 88px;
    padding: var(--cmp-s-3) var(--cmp-s-4);
    line-height: 1.5;
    resize: vertical;
}
.cmp-wf-warn { color: var(--cmp-text-2, #c7c7ce); }

/* стадии строками-радио: нажимается вся строка (label), текущая недоступна и подписана */
.cmp-wf-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cmp-wf-legend { padding: 0; margin: 0 0 var(--cmp-s-2); }
.cmp-wf-options {
    display: grid;
    min-width: 0;
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-panel);
    overflow: hidden;
}
.cmp-wf-option {
    display: flex;
    align-items: center;
    gap: var(--cmp-s-3);
    min-width: 0;
    min-height: var(--cmp-ctl-h);
    padding: var(--cmp-s-2) var(--cmp-s-4);
    margin: 0;
    line-height: 1.4;
    cursor: pointer;
}
.cmp-wf-option + .cmp-wf-option { border-top: 1px solid var(--cmp-line-soft); }
.cmp-wf-option__input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #ffffff; cursor: pointer; }
.cmp-wf-option__name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.cmp-wf-option__meta { flex: none; color: var(--cmp-muted); font-size: var(--cmp-fs-label); }
.cmp-wf-option:has(.cmp-wf-option__input:checked) { background: var(--cmp-fill-soft); font-weight: 700; }
.cmp-wf-option:has(.cmp-wf-option__input:focus-visible) { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-wf-option.is-current { color: var(--cmp-text-2); cursor: default; }
.cmp-wf-option.is-current .cmp-wf-option__input { cursor: default; opacity: .45; }
@media (hover: hover) {
    .cmp-wf-option:not(.is-current):hover { background: var(--cmp-row-hover); }
}
@media (max-width: 640px) {
    /* телефон: пометка «текущая» / «следующая по порядку» второй строкой под названием, слово не рвётся */
    .cmp-wf-option { flex-wrap: wrap; row-gap: 0; }
    .cmp-wf-option__meta { flex-basis: 100%; padding-left: 32px; }
}

/* ---------- свои поля даты и времени (чипы) и степпер «− поле +» ---------- */
.cmp-wf-duebox { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cmp-s-4); min-width: 0; }
@media (min-width: 641px) {
    .cmp-wf-duebox { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.cmp-wf-ctl { display: grid; gap: var(--cmp-s-2); min-width: 0; }
.cmp-wf-chips { display: flex; flex-wrap: wrap; gap: var(--cmp-s-2); min-width: 0; }
.cmp-wf-chipbtn { padding: 0 var(--cmp-s-3); font-weight: 400; }
.cmp-wf-datein, .cmp-wf-timein { font-variant-numeric: tabular-nums; }
.cmp-wf-timein { max-width: 160px; }
.cmp-wf-stepper { display: flex; align-items: center; gap: var(--cmp-s-2); min-width: 0; max-width: 260px; }
.cmp-wf-stepper .cmp-wf-stepin { flex: 1 1 auto; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.cmp-wf-stepbtn { flex: none; }
@media (max-width: 640px) {
    .cmp-wf-timein { max-width: none; }
    .cmp-wf-stepper { max-width: none; }
}

/* ---------- история стадий ---------- */
.cmp-wf-screen, .cmp-wf-hhead { min-width: 0; }
.cmp-wf-hsub { margin: var(--cmp-s-2) 0 0; color: var(--cmp-muted); overflow-wrap: anywhere; }
.cmp-wf-history { display: grid; gap: var(--cmp-s-6); min-width: 0; }
.cmp-wf-runs, .cmp-wf-log, .cmp-wf-run__lines { margin: 0; padding: 0; list-style: none; }
.cmp-wf-runs { display: grid; min-width: 0; }
.cmp-wf-run { min-width: 0; padding: var(--cmp-s-4) 0; border-top: 1px solid var(--cmp-line-soft); }
.cmp-wf-run:first-child { padding-top: 0; border-top: 0; }
.cmp-wf-run:last-child { padding-bottom: 0; }
.cmp-wf-run__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2) var(--cmp-s-3); min-width: 0; }
.cmp-wf-run__name { margin: 0; min-width: 0; font-size: var(--cmp-fs-heading); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cmp-wf-run__now { min-width: 0; color: var(--cmp-muted); overflow-wrap: anywhere; }
.cmp-wf-run__lines { display: grid; gap: var(--cmp-s-1); margin-top: var(--cmp-s-2); color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-wf-log { display: grid; gap: var(--cmp-s-3); min-width: 0; }
.cmp-wf-logrow { min-width: 0; padding-top: var(--cmp-s-3); border-top: 1px solid var(--cmp-line-soft); }
.cmp-wf-logrow:first-child { padding-top: 0; border-top: 0; }
.cmp-wf-logrow__meta { margin: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-wf-logrow__line { margin: var(--cmp-s-1) 0 0; overflow-wrap: anywhere; }

/* ---------- справочник стадий: строки-кнопки (вся строка открывает окно), удаления нет ---------- */
.cmp-wf-lead { margin: var(--cmp-s-3) 0 0; max-width: 72ch; color: var(--cmp-text-2); }
.cmp-wf-rowbtn {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--cmp-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
@media (hover: hover) {
    .cmp-wf-rowbtn:hover { background: var(--cmp-row-hover); }
}
.cmp-wf-rowbtn:focus-visible { outline: var(--cmp-focus); outline-offset: -2px; }
.cmp-wf-srow { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 120px; }
.cmp-wf-srow__name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-wf-srow__code { min-width: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-wf-srow__state { display: flex; flex-wrap: wrap; gap: var(--cmp-s-1); min-width: 0; }
.cmp-wf-srow__sort, .cmp-wf-srow__h-sort { justify-self: end; text-align: right; color: var(--cmp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
    .cmp-wf-srow { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--cmp-s-1); }
    .cmp-wf-srow__code { grid-column: 1; }
    .cmp-wf-srow__state { grid-column: 1 / -1; }
    .cmp-wf-srow__sort { grid-row: 1; grid-column: 2; }
    .cmp-wf-admin .cmp-pagehead__actions, .cmp-wf-admin .cmp-pagehead__actions .cmp-btn { width: 100%; }
}

/* ---------- список проектов: чип стадии и «Просрочено» отдельной строкой под составом ---------- */
.cmp-wf-pstage { display: flex; flex-wrap: wrap; gap: var(--cmp-s-1); min-width: 0; margin-top: var(--cmp-s-1); }
.cmp-wf-pchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: no-preference) {
    .cmp-wf-rowbtn, .cmp-wf-option { transition: background-color var(--cmp-dur) var(--cmp-ease); }
}
/* === T004 04-02 END === */

/* === T004 04-04 BEGIN === */
/* Внутренние выезды (план 04-04; 04-CONTEXT G-29, G-32..G-34; UI-UX-ТЗ §6, §7, §13): блок «Выезды» в карточке, список
   выездов проекта, экран выезда, окна форм, чипы участников, строки подтверждения в окнах «Завершить проект»/«В архив».
   Только токены :root из 02-06, классы с префиксом cmp-vs- (строки-радио и поля даты/времени переиспользуют cmp-wf- из
   04-02). Высоты целей из --cmp-ctl-h / --cmp-ctl-h-sm: 40/32 px на ПК, 44 px до 640 px и при грубом указателе; вся
   видимая коробка ссылки или кнопки нажимается; у flex/grid детей min-width:0; цвет только дополняет текст; :hover
   только внутри (hover: hover); движение только под prefers-reduced-motion: no-preference. */

.cmp-chip--vs-kind { color: var(--cmp-text); border-color: var(--cmp-line-hover); }
.cmp-chip--vs-cancelled { color: var(--cmp-text-3); border-color: var(--cmp-line); }
.cmp-vs-muted { margin: 0; color: var(--cmp-muted); }
.cmp-vs-alerts { display: grid; gap: var(--cmp-s-2); min-width: 0; }
.cmp-vs-alerts:empty { display: none; }
.cmp-vs-note { margin: 0; color: var(--cmp-text-2); }

/* ---------- блок «Выезды» в карточке: ближайший выезд строкой-ссылкой, счётчики ссылками, действия ---------- */
.cmp-vs-slot { min-width: 0; }
.cmp-vs-block { display: grid; gap: var(--cmp-s-4); }
.cmp-vs-block > .cmp-card__title { margin: 0; }
.cmp-vs-nearestbox { min-width: 0; }
.cmp-vs-nearest {
    display: flex;
    align-items: center;
    gap: var(--cmp-s-3);
    min-width: 0;
    min-height: var(--cmp-ctl-h);
    margin: 0;
    padding: var(--cmp-s-3) var(--cmp-s-4);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    color: var(--cmp-text);
    text-decoration: none;
    line-height: 1.4;
}
a.cmp-vs-nearest:focus-visible { outline: var(--cmp-focus); outline-offset: 2px; }
@media (hover: hover) {
    a.cmp-vs-nearest:hover { background: var(--cmp-row-hover); border-color: var(--cmp-line-hover); }
}
.cmp-vs-nearest > .cmp-icon { flex: none; margin-left: auto; color: var(--cmp-muted); }
.cmp-vs-nearest__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cmp-vs-nearest__label { font-weight: 700; }
.cmp-vs-nearest--none { border-style: dashed; color: var(--cmp-text-2); }
.cmp-vs-counts { display: flex; flex-wrap: wrap; gap: var(--cmp-s-2); min-width: 0; }
.cmp-vs-countlink {
    display: inline-flex;
    align-items: center;
    min-height: var(--cmp-ctl-h-sm);
    padding: 0 var(--cmp-s-3);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-pill);
    color: var(--cmp-text);
    text-decoration: none;
    white-space: nowrap;
}
.cmp-vs-countlink--overdue { color: var(--cmp-err); border-color: var(--cmp-err-line); }
.cmp-vs-countlink:focus-visible { outline: var(--cmp-focus); outline-offset: 2px; }
@media (hover: hover) {
    .cmp-vs-countlink:hover { background: var(--cmp-fill-soft); border-color: var(--cmp-line-hover); }
}
.cmp-vs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cmp-s-2);
    min-width: 0;
    padding-top: var(--cmp-s-4);
    border-top: 1px solid var(--cmp-line-soft);
}
.cmp-vs-actions .cmp-btn { min-height: var(--cmp-ctl-h); }
.cmp-vs-actions--screen { margin-bottom: var(--cmp-s-6); padding-top: 0; border-top: 0; }

/* подтверждение «Завершить проект» / «В архив»: строки о выездах и возобновлении под текстом окна */
.cmp-vs-confirm { display: grid; gap: var(--cmp-s-2); min-width: 0; }
.cmp-vs-confirm__line { margin: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }

/* ---------- список выездов проекта ---------- */
.cmp-vs-screen, .cmp-vs-head, .cmp-vs-listhost, .cmp-vs-body { min-width: 0; }
.cmp-vs-head__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2) var(--cmp-s-3); min-width: 0; }
.cmp-vs-head__line > .cmp-pagehead__title { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cmp-vs-headchips { display: inline-flex; flex-wrap: wrap; gap: var(--cmp-s-2); min-width: 0; }
.cmp-vs-headchips:empty { display: none; }
.cmp-vs-sub { margin: var(--cmp-s-2) 0 0; color: var(--cmp-muted); overflow-wrap: anywhere; }
.cmp-vs-sub:empty { display: none; }
.cmp-vs-screen > .cmp-vs-alerts:not(:empty), .cmp-vs-screen > .cmp-vs-note:not([hidden]) { margin-bottom: var(--cmp-s-4); }
.cmp-vs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cmp-s-4);
    min-width: 0;
    margin-bottom: var(--cmp-s-4);
}
.cmp-vs-count {
    display: flex;
    align-items: center;
    min-height: var(--cmp-ctl-h);
    margin: 0 0 0 auto;
    color: var(--cmp-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cmp-vs-count:empty { display: none; }
.cmp-vs-row {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    grid-template-areas: "main state caret";
    gap: var(--cmp-s-2) var(--cmp-s-4);
}
.cmp-vs-row__main { grid-area: main; display: grid; gap: var(--cmp-s-1); min-width: 0; }
.cmp-vs-row__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2); min-width: 0; }
.cmp-vs-row__title { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-vs-row__when { min-width: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-vs-row__meta { display: flex; flex-wrap: wrap; gap: var(--cmp-s-1) var(--cmp-s-3); min-width: 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; }
.cmp-vs-row__meta > span { min-width: 0; overflow-wrap: anywhere; }
.cmp-vs-row__confirmed { color: var(--cmp-ok); }
.cmp-vs-row__state { grid-area: state; display: flex; flex-direction: column; align-items: flex-end; gap: var(--cmp-s-1); }
.cmp-vs-row > .cmp-icon { grid-area: caret; color: var(--cmp-muted); }
.cmp-vs-overdue { color: var(--cmp-err); font-size: var(--cmp-fs-label); font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
    .cmp-vs-toolbar { flex-direction: column; align-items: stretch; gap: var(--cmp-s-2); }
    .cmp-vs-count { min-height: 0; margin: 0; }
    /* четыре фильтра не помещаются в строку 360..390 px: два ряда по два, без горизонтальной прокрутки */
    .cmp-vs-seg, .cmp-vs-seg .cmp-seg__track { width: 100%; }
    .cmp-vs-seg .cmp-seg__track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-vs-seg .cmp-seg__opt { min-height: 44px; padding: 0 var(--cmp-s-2); }
    .cmp-vs-seg .cmp-seg__opt + .cmp-seg__opt { border-left: 0; }
    .cmp-vs-seg .cmp-seg__opt:nth-child(even) { border-left: 1px solid var(--cmp-line-soft); }
    .cmp-vs-seg .cmp-seg__opt:nth-child(n+3) { border-top: 1px solid var(--cmp-line-soft); }
    .cmp-vs-row {
        grid-template-columns: minmax(0, 1fr) 16px;
        grid-template-areas: "main caret" "state caret";
    }
    .cmp-vs-row__state { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .cmp-vs-headactions, .cmp-vs-headactions .cmp-btn { width: 100%; }
}

/* ---------- экран выезда: детали, итог, предыдущий итог, история ---------- */
.cmp-vs-body { display: flex; flex-direction: column; gap: var(--cmp-s-6); }
.cmp-vs-dl .cmp-vs-dlrow > dd { min-width: 0; }
.cmp-vs-when { display: flex; flex-direction: column; gap: var(--cmp-s-1); min-width: 0; }
.cmp-vs-tz { color: var(--cmp-muted); font-size: var(--cmp-fs-label); }
.cmp-vs-result { margin: 0 0 var(--cmp-s-3); overflow-wrap: anywhere; }
.cmp-vs-line { margin: var(--cmp-s-1) 0 0; overflow-wrap: anywhere; }
.cmp-vs-line.cmp-vs-muted { color: var(--cmp-muted); }
.cmp-vs-history { display: grid; gap: var(--cmp-s-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
.cmp-vs-hrow { min-width: 0; padding-top: var(--cmp-s-3); border-top: 1px solid var(--cmp-line-soft); }
.cmp-vs-hrow:first-child { padding-top: 0; border-top: 0; }
.cmp-vs-hrow__title { margin: 0; font-weight: 700; }
.cmp-vs-hrow__meta { margin: var(--cmp-s-1) 0 0; color: var(--cmp-muted); font-size: var(--cmp-fs-label); line-height: 1.4; overflow-wrap: anywhere; }
.cmp-vs-hrow__line { margin: var(--cmp-s-1) 0 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
@media (min-width: 1024px) {
    .cmp-vs-dl .cmp-vs-dlrow { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
}
@media (max-width: 640px) {
    /* телефон: подпись над значением, действия столбцом во всю ширину и одной высоты 44 px */
    .cmp-vs-dl .cmp-vs-dlrow { grid-template-columns: minmax(0, 1fr); gap: var(--cmp-s-1); }
    .cmp-vs-dl .cmp-vs-dlrow dt { font-size: var(--cmp-fs-label); }
    .cmp-vs-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .cmp-vs-actions .cmp-btn { width: 100%; min-height: 44px; }
    .cmp-vs-nearest { min-height: 44px; }
}

/* ---------- окна форм выезда: 640/560 px на ПК, на телефоне лист на весь экран со своим скроллом ---------- */
.cmp-dialog[data-cmp="visit-form"] { width: min(640px, calc(100% - 32px)); }
.cmp-dialog[data-cmp="visit-reschedule-dialog"], .cmp-dialog[data-cmp="visit-complete-dialog"],
.cmp-dialog[data-cmp="visit-result-dialog"] { width: min(560px, calc(100% - 32px)); }
.cmp-dialog[data-cmp^="visit-"] { scroll-padding-bottom: 96px; }
@media (max-width: 640px) {
    /* клавиатура не прячет «Сохранить»: окно высотой видимой области (dvh), кнопки в конце прокрутки над safe-area */
    .cmp-dialog[data-cmp="visit-form"], .cmp-dialog[data-cmp="visit-reschedule-dialog"], .cmp-dialog[data-cmp="visit-complete-dialog"],
    .cmp-dialog[data-cmp="visit-result-dialog"], .cmp-dialog[data-cmp="visit-cancel-dialog"], .cmp-dialog[data-cmp="visit-reopen-dialog"] {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: var(--cmp-s-4) var(--cmp-s-4) max(var(--cmp-s-4), env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
    }
}
.cmp-vs-dlgbody, .cmp-vs-kindfield, .cmp-vs-partsfield { min-width: 0; }
.cmp-vs-dlgalerts { display: grid; gap: var(--cmp-s-2); }
.cmp-vs-formlead { margin: 0; color: var(--cmp-text-2); }
.cmp-vs-slotbox { min-width: 0; }
.cmp-vs-startnote { margin: calc(-1 * var(--cmp-s-2)) 0 0; }
.cmp-input.cmp-vs-textarea {
    display: block;
    height: auto;
    min-height: 88px;
    padding: var(--cmp-s-3) var(--cmp-s-4);
    line-height: 1.5;
    resize: vertical;
}

/* участники: выбор + «Добавить участника» в ряд, ниже чипы с «Убрать» (вся кнопка 32/44 px нажимается) */
.cmp-vs-partsfield { display: grid; gap: var(--cmp-s-2); }
.cmp-vs-partsfield > .cmp-label { margin: 0; }
.cmp-vs-partpick { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cmp-s-2); min-width: 0; }
.cmp-vs-partpick > .cmp-field { flex: 1 1 280px; min-width: 0; margin: 0; }
.cmp-vs-partpick > .cmp-btn { flex: none; min-height: var(--cmp-ctl-h); }
.cmp-vs-people { display: flex; flex-wrap: wrap; gap: var(--cmp-s-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.cmp-vs-people__none { color: var(--cmp-muted); }
.cmp-vs-person {
    display: inline-flex;
    align-items: center;
    gap: var(--cmp-s-2);
    max-width: 100%;
    min-width: 0;
    padding-left: var(--cmp-s-3);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-r-ctl);
    background: var(--cmp-panel);
}
.cmp-vs-person__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.cmp-vs-person__remove.cmp-btn { flex: none; min-height: var(--cmp-ctl-h-sm); border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0 var(--cmp-r-ctl) var(--cmp-r-ctl) 0; }
@media (max-width: 640px) {
    .cmp-vs-partpick > .cmp-field, .cmp-vs-partpick > .cmp-btn { flex: 1 1 100%; width: 100%; }
    .cmp-vs-partpick > .cmp-btn { min-height: 44px; }
    .cmp-vs-person { width: 100%; justify-content: space-between; }
    .cmp-vs-person__remove.cmp-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
    .cmp-vs-nearest, .cmp-vs-countlink { transition: background-color var(--cmp-dur) var(--cmp-ease), border-color var(--cmp-dur) var(--cmp-ease); }
}
/* === T004 04-04 END === */

/* === CARDS project-cards BEGIN === */
/* Список проектов карточками (design/project-cards/README.md, тёмная версия a7d7914; разметка cmp-projects.js
   projectCard). Основа #151419, радиальное свечение тона в правом верхнем углу, градиентная обводка, отдельная нижняя
   панель. Тон: просрочка коралловая, пауза нейтральная, иначе по коду стадии (бирюза/янтарь/лиловый/синий). Цвет не
   единственный признак: стадия, «Просрочено», пауза и срок всегда написаны текстом. Вся коробка .cmp-pcard — одна
   ссылка; кнопка сведений .cmp-pcard__info — соседний элемент поверх угла (44px). Без фиксированной высоты, длинный
   текст переносится; min-width:0 и minmax(0, 1fr) против распирания сетки на 390px. */
.cmp-pcards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--cmp-s-6);
    min-width: 0;
}
.cmp-pcards.is-busy { opacity: .6; pointer-events: none; }

.cmp-pcard-cell {
    --pc-accent: #00c6ad; --pc-glow: 0, 198, 173;
    --pc-paper: #151419; --pc-foot: #141217; --pc-ink: #f6f3f8; --pc-soft: #d3cadb; --pc-line: rgba(255, 255, 255, .07);
    position: relative;
    min-width: 0;
    display: flex;
}
.cmp-pcard-cell--teal  { --pc-accent: #00c6ad; --pc-glow: 0, 198, 173; }
.cmp-pcard-cell--amber { --pc-accent: #ffb83e; --pc-glow: 255, 184, 62; }
.cmp-pcard-cell--lilac { --pc-accent: #b48cff; --pc-glow: 180, 140, 255; }
.cmp-pcard-cell--blue  { --pc-accent: #239bff; --pc-glow: 35, 155, 255; }
.cmp-pcard-cell--late  { --pc-accent: #ed745d; --pc-glow: 237, 116, 93; }
.cmp-pcard-cell--pause { --pc-accent: #b6abbf; --pc-glow: 182, 171, 191; }

.cmp-pcard {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 23px 25px 0;
    border: 1.5px solid transparent;
    border-radius: 32px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--pc-glow), .38), transparent 58%) padding-box,
        linear-gradient(var(--pc-paper), var(--pc-paper)) padding-box,
        linear-gradient(230deg, var(--pc-accent), rgba(48, 43, 52, .5) 34%, #26232a 70%) border-box;
    box-shadow: 0 14px 26px rgba(0, 0, 0, .27);
    color: var(--pc-ink);
    text-decoration: none;
    overflow: hidden;
    font-family: var(--cmp-font);
}
.cmp-pcard:hover { color: var(--pc-ink); text-decoration: none; }
a.cmp-pcard:focus-visible { outline: 3px solid var(--cmp-line-focus); outline-offset: 4px; }

/* шапка: номер слева; справа место под кнопку сведений (она соседний элемент поверх) */
.cmp-pcard__num {
    min-height: 25px;
    padding-right: 48px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    color: #e5e0e9;
    font-variant-numeric: tabular-nums;
}
.cmp-pcard__info {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #f5f0f9;
    cursor: pointer;
}
.cmp-pcard__info:hover { background: rgba(255, 255, 255, .08); }
.cmp-pcard__info:focus-visible { outline: 3px solid var(--cmp-line-focus); outline-offset: 2px; }
/* три точки рисуются CSS (в спрайте нет иконки меню-точек) */
.cmp-pcard__dots, .cmp-pcard__dots::before, .cmp-pcard__dots::after {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}
.cmp-pcard__dots { position: relative; }
.cmp-pcard__dots::before, .cmp-pcard__dots::after { content: ''; position: absolute; left: 0; }
.cmp-pcard__dots::before { top: -7px; }
.cmp-pcard__dots::after { top: 7px; }

.cmp-pcard__title {
    display: block;
    margin: 30px 0 8px;
    text-align: center;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.cmp-pcard__sub {
    display: block;
    text-align: center;
    color: var(--pc-soft);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.cmp-pcard__marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.cmp-pcard__stage { color: #eee6f6; overflow-wrap: anywhere; text-align: center; }
.cmp-pcard__stage--none { color: var(--pc-soft); font-weight: 500; }
.cmp-pcard__state, .cmp-pcard__late {
    padding: 3px 9px;
    border-radius: var(--cmp-r-pill);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #eee6f6;
    white-space: nowrap;
}
.cmp-pcard__late { border-color: rgba(237, 116, 93, .6); color: #ffb3a3; }

.cmp-pcard__next { display: block; margin: 22px 0 20px; }
.cmp-pcard__cap {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c7becf;
}
.cmp-pcard__nexttext {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: #eee8f2;
    overflow-wrap: anywhere;
}
.cmp-pcard__nexttext--none { color: var(--pc-soft); }

.cmp-pcard__time {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    font-size: 11px;
    line-height: 1.5;
    color: #d9d0e3;
}
.cmp-pcard__timelabel { min-width: 0; overflow-wrap: anywhere; }
.cmp-pcard__timevalue { min-width: 0; color: #fff; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cmp-pcard__track {
    display: block;
    height: 6px;
    margin: 10px 0 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .13);
    overflow: hidden;
}
.cmp-pcard__track--none {
    height: 4px;
    margin-bottom: 24px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .17) 0 7px, transparent 7px 11px);
}
.cmp-pcard__bar {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--pc-accent);
    transform-origin: left center;
    transform: scaleX(var(--cmp-pcard-used, 0));
}

/* нижняя тёмная панель: ответственный и участники слева, плашка срока справа */
.cmp-pcard__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin: 0 -25px;
    padding: 16px 24px;
    min-height: 81px;
    background: var(--pc-foot);
    border-top: 1px solid var(--pc-line);
}
.cmp-pcard__people { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 140px; }
.cmp-pcard__avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--pc-paper);
    background: #29252e;
    color: #e8e0ee;
    font-size: 10px;
    font-weight: 700;
}
.cmp-pcard__avatar--none { background: transparent; border: 1px dashed rgba(255, 255, 255, .28); }
.cmp-pcard__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cmp-pcard__resp { font-size: 11px; font-weight: 600; color: #eee8f2; overflow-wrap: anywhere; }
.cmp-pcard__members { font-size: 10px; color: #d0c7da; }
.cmp-pcard__pill {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 39px;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 25px;
    background: #26222b;
    color: #f5f0fa;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
}
.cmp-pcard__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-accent); }

/* скелетон карточками */
.cmp-pcard--skel { min-height: 340px; }
.cmp-pcard-skel__bar { border-radius: 6px; }
.cmp-pcard-skel__bar--num { width: 48px; height: 12px; }
.cmp-pcard-skel__bar--title { width: 70%; height: 22px; margin: 30px auto 10px; }
.cmp-pcard-skel__bar--sub { width: 50%; height: 12px; margin: 0 auto; }
.cmp-pcard-skel__bar--next { width: 90%; height: 12px; margin-top: 34px; }
.cmp-pcard-skel__bar--next2 { width: 60%; height: 12px; margin-top: 8px; }
.cmp-pcard-skel__bar--track { width: 100%; height: 6px; margin: auto 0 22px; }
.cmp-pcard-skel__bar--who { width: 110px; height: 14px; }
.cmp-pcard-skel__bar--pill { width: 96px; height: 39px; border-radius: 25px; }

/* сводка в диалоге кнопки сведений */
.cmp-pcard-sum { margin: 0; display: grid; gap: var(--cmp-s-3); min-width: 0; }
.cmp-pcard-sum__row { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--cmp-s-3); min-width: 0; }
.cmp-pcard-sum__row dt { color: var(--cmp-text-2); }
.cmp-pcard-sum__row dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .cmp-pcards { gap: 20px; }
    .cmp-pcard { padding: 22px 22px 0; }
    .cmp-pcard__foot { margin: 0 -22px; padding: 16px 20px; }
    .cmp-pcard__info { top: 12px; right: 10px; }
    .cmp-pcard-sum__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
    .cmp-pcard-cell { transition: transform var(--cmp-dur) var(--cmp-ease); }
    .cmp-pcard { transition: box-shadow var(--cmp-dur) var(--cmp-ease); }
    .cmp-pcard__info { transition: background-color var(--cmp-dur-fast) var(--cmp-ease); }
    @media (hover: hover) {
        /* подъём всей ячейки: ссылка и кнопка сведений двигаются вместе */
        .cmp-pcard-cell:not(.cmp-pcard-cell--skel):hover { transform: translateY(-3px); }
        .cmp-pcard-cell:hover .cmp-pcard:not(.cmp-pcard--skel) { box-shadow: 0 18px 35px rgba(0, 0, 0, .4); }
    }
}
/* Ближайший выезд в карточке (projects-row-visit) */
.cmp-pcard__visit { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-pcard__visittext { overflow-wrap: anywhere; color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.45; }

/* === CARDS project-cards END === */

/* === T004b BEGIN: «Монтаж завершён», пометка завершённого проекта, «Мои выезды» (#/visits) ===
   Только токены :root, классы cmp-wf-install*, cmp-vs-install, cmp-vsm-*. Цели: вся коробка кликабельна, не меньше
   --cmp-ctl-h (40 px ПК, 44 px телефон/coarse); кнопки ряда на телефоне одной высоты 44 px; 390 px без прокрутки. */

/* окно «Монтаж завершён»: 560 px на ПК, лист на весь экран на телефоне (как окна выезда) */
.cmp-dialog[data-cmp="install-done-dialog"] { width: min(560px, calc(100% - 32px)); }
@media (max-width: 640px) {
    .cmp-dialog[data-cmp="install-done-dialog"] {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: var(--cmp-s-4) var(--cmp-s-4) max(var(--cmp-s-4), env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
    }
}
.cmp-wf-install__lead { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* экран выезда: строка «Монтаж завершён» под действиями выезда */
.cmp-vs-install .cmp-btn { min-height: var(--cmp-ctl-h); }
@media (max-width: 640px) {
    .cmp-vs-install { display: grid; grid-template-columns: minmax(0, 1fr); }
    .cmp-vs-install .cmp-btn { width: 100%; min-height: 44px; }
}

/* «Мои выезды» */
.cmp-vsm-toolbar { align-items: flex-end; }
.cmp-vsm-row__when { min-width: 0; color: var(--cmp-text); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cmp-vsm-row.is-overdue .cmp-vsm-row__when { color: var(--cmp-err); }
.cmp-vsm-row__project { min-width: 0; color: var(--cmp-text-2); overflow-wrap: anywhere; }
.cmp-vsm-row__pnote { color: var(--cmp-muted); }
@media (max-width: 640px) {
    .cmp-vsm-toolbar { align-items: stretch; }
    /* «Мои / Все доступные»: две равные опции во всю ширину, 44 px */
    .cmp-vsm-seg:not(.cmp-vs-seg), .cmp-vsm-seg:not(.cmp-vs-seg) .cmp-seg__track { width: 100%; }
    .cmp-vsm-seg:not(.cmp-vs-seg) .cmp-seg__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-vsm-seg .cmp-seg__opt { min-height: 44px; padding: 0 var(--cmp-s-2); }
}
/* === T004b END === */
/* === T006 scheme picker (passport) === */
.cmp-p6-scheme { display: grid; gap: var(--cmp-s-2); min-width: 0; }
.cmp-p6-scheme__current { margin: 0; overflow-wrap: anywhere; }
.cmp-p6-scheme__actions { display: flex; flex-wrap: wrap; gap: var(--cmp-s-2); }
.cmp-p6-scheme__actions .cmp-btn { min-height: 40px; }
.cmp-p6-scheme__panel { display: grid; gap: var(--cmp-s-2); padding: var(--cmp-s-3); border: 1px solid var(--cmp-line); border-radius: var(--cmp-r-ctl); min-width: 0; }
.cmp-p6-scheme__list { display: grid; gap: var(--cmp-s-2); min-width: 0; }
.cmp-p6-scheme__item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--cmp-s-3); align-items: center;
    width: 100%; min-height: 44px; padding: var(--cmp-s-2) var(--cmp-s-3); text-align: left; cursor: pointer;
    color: inherit; font: inherit; background: transparent; border: 1px solid var(--cmp-line); border-radius: var(--cmp-r-ctl);
}
.cmp-p6-scheme__item:hover { border-color: var(--cmp-line-hover); }
.cmp-p6-scheme__item:focus-visible { outline: 2px solid var(--cmp-line-focus); outline-offset: 2px; }
.cmp-p6-scheme__item.is-selected { border-color: var(--cmp-line-focus); }
.cmp-p6-scheme__name { grid-column: 1; overflow-wrap: anywhere; }
.cmp-p6-scheme__meta { grid-column: 1; color: var(--cmp-muted); font-size: var(--cmp-fs-label); }
.cmp-p6-scheme__mark { grid-column: 2; grid-row: 1 / span 2; font-size: var(--cmp-fs-label); }
.cmp-p6-scheme__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cmp-s-2); }
@media (max-width: 640px) {
    .cmp-p6-scheme__actions .cmp-btn, .cmp-p6-scheme__pager .cmp-btn { min-height: 44px; flex: 1 1 100%; min-width: 0; max-width: 100%; white-space: normal; }
    .cmp-p6-scheme__actions .cmp-btn__label { white-space: normal; overflow-wrap: anywhere; }
}
/* === T006 END === */

/* === T017 BEGIN: «Работа на стадии» в блоке стадии (итоги прохода, быстрые действия, проходы). Белый текст, серые подписи. === */
.cmp-wf-work { display: grid; gap: var(--cmp-s-3); margin-top: var(--cmp-s-4); padding-top: var(--cmp-s-4); border-top: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.cmp-wf-work[hidden] { display: none; }
.cmp-wf-work__title { margin: 0; font-size: 15px; color: var(--cmp-text, #f3f3f5); }
.cmp-wf-workgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cmp-s-3); min-width: 0; }
.cmp-wf-workgrid > * { min-width: 0; }
.cmp-input.cmp-wf-worknote { display: block; height: auto; min-height: 104px; padding: var(--cmp-s-3) var(--cmp-s-4); line-height: 1.5; resize: vertical; }
.cmp-wf-workactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-3); }
.cmp-wf-workstate { margin: 0; font-size: 13px; color: #c7c7cc; }
.cmp-wf-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-s-2); }
.cmp-wf-quick[hidden] { display: none; }
.cmp-wf-quick__label { font-size: 12px; color: #c7c7cc; margin-right: var(--cmp-s-1); }
.cmp-wf-timelinebox > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--cmp-text, #f3f3f5); font-size: 14px; font-weight: 600; }
.cmp-wf-timelinebox[hidden] { display: none; }
.cmp-wf-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cmp-s-2); }
.cmp-wf-timeline__item { padding: var(--cmp-s-3); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; display: grid; gap: 4px; min-width: 0; }
.cmp-wf-timeline__item.is-current { border-color: rgba(255, 255, 255, .28); }
.cmp-wf-timeline__head { margin: 0; font-size: 12px; color: #c7c7cc; overflow-wrap: anywhere; }
.cmp-wf-timeline__note { margin: 0; color: var(--cmp-text, #f3f3f5); overflow-wrap: anywhere; }
/* Ширина блока, а не окна: в узкой колонке инспектора и в панели доски поля идут в один столбец. */
.cmp-wf-work { container-type: inline-size; }
@container (min-width: 600px) {
    .cmp-wf-workgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp-wf-workgrid > .cmp-field:has(.cmp-wf-worknote), .cmp-wf-workgrid > .cmp-wf-workactions { grid-column: 1 / -1; }
}
@container (max-width: 599px) {
    .cmp-wf-workgrid .cmp-wf-duebox { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .cmp-wf-workactions > .cmp-btn { flex: 1 1 auto; min-height: 44px; }
}
/* === T017 END === */


/* Owner 05.11: headings use the regular Montserrat face from «Световые композиции».
   Keep each component's size, spacing and case. This shared stylesheet is loaded by
   employee, login and guest entry points; specificity also survives later screen CSS.
   Explicit non-heading titles avoid changing buttons, form labels or the wordmark. */
html[lang='ru'] body.cmp-body :is(
    h1, h2, h3, h4, h5, h6, [role='heading'],
    .cmp-pagehead__title, .cmp-card__title, .cmp-dialog__title, .cmp-empty__title,
    .cmp-authcard__title, .cmp-fileviewer-title,
    .cmp-p3-panelfold__title, .cmp-parties-group__title, .cmp-docs-terms__title,
    .cmp-pcard__title, .cmp-plist__name,
    .cmp-p3-crow__title, .cmp-p4-crow__title,
    .cmp-vs-row__title, .cmp-vs-hrow__title,
    .cmp-guest__resolution-title, .cmp-guest__file-name,
    .cmp-notify-link, .cmp-search-result-link,
    .cmp-notify-eyebrow, .cmp-docs-eyebrow, .cmp-disc-eyebrow,
    .cmp-search-eyebrow, .cmp-board__eyebrow
) {
    font-family: var(--cmp-font);
    font-weight: 400;
}

/* Mobile page headings share a baseline; more specific project/file sizes stay in charge. */
@media (max-width: 767px) {
    body.cmp-body .cmp-main h1 { font-size: 24px; line-height: 1.25; }
}

/* Self-service project sharing: existing black-glass card and form components. */
.cmp-sharing { display:flex; flex-direction:column; gap:16px; min-width:0; }
.cmp-sharing[hidden], .cmp-sharing [hidden] { display:none !important; }
.cmp-sharing > .cmp-card__title, .cmp-sharing > .cmp-hint { margin:0; }
.cmp-sharing__editor, .cmp-sharing__form, .cmp-sharing__choices { min-width:0; }
.cmp-sharing__form { display:flex; flex-direction:column; gap:14px; }
.cmp-sharing__form > .cmp-formblock__alerts:empty,
.cmp-sharing__lookup-status:empty { display:none; }
.cmp-sharing__owner { margin:0; color:var(--cmp-text); overflow-wrap:anywhere; }
.cmp-sharing__count { margin:0; color:var(--cmp-text-2); font-size:14px; }
.cmp-sharing__selected { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; min-width:0; }
.cmp-sharing__person-chip {
    display:flex; align-items:center; gap:4px; max-width:100%; min-width:0;
    padding:2px 2px 2px 12px; border:1px solid var(--cmp-line); border-radius:12px;
    background:rgba(0,0,0,.24); color:var(--cmp-text);
}
.cmp-sharing__chip-name { min-width:0; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.cmp-sharing__person-chip > .cmp-btn { width:44px; min-width:44px; min-height:44px; padding:0; border:0; }
.cmp-sharing__inactive, .cmp-sharing__profession { display:block; color:var(--cmp-text-3); font-size:12px; line-height:1.45; }
.cmp-sharing__people {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px;
    max-height:320px; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.24) transparent; padding:2px;
}
.cmp-sharing__person-row {
    min-width:0; min-height:56px; padding:10px 12px; border:1px solid var(--cmp-line);
    border-radius:12px; background:rgba(0,0,0,.2); color:var(--cmp-text); font-size:14px;
}
.cmp-sharing__person-row:has(input:checked) { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.3); }
.cmp-sharing__person-row:focus-within { outline:2px solid var(--cmp-text-2); outline-offset:1px; }
.cmp-sharing__person-text { display:block; min-width:0; overflow-wrap:anywhere; }
.cmp-sharing__empty { grid-column:1 / -1; margin:0; padding:8px 0; }
.cmp-sharing__scope-note { margin:0; }
.cmp-sharing .cmp-formfoot { margin-top:2px; }
@media (max-width:640px) {
    .cmp-sharing { gap:14px; }
    .cmp-sharing__people { grid-template-columns:minmax(0,1fr); max-height:288px; }
    .cmp-sharing__person-row { min-height:56px; font-size:16px; }
    .cmp-sharing__selected { gap:6px; }
    .cmp-sharing__person-chip { max-width:100%; }
    .cmp-sharing .cmp-formfoot__actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); width:100%; gap:8px; }
    .cmp-sharing .cmp-formfoot__actions > .cmp-btn { min-width:0; width:100%; min-height:44px; padding-inline:10px; white-space:normal; }
}