/* Minta Finance — DS V2.3. ГЕНЕРИРУЕТСЯ: node scripts/ds/build-v23.mjs из docs/design/v2.3-research/system/ds/components.css. Руками не править. Правила действуют под `.ds23` (класс на ) и НЕ входят в островок прежних экранов `.ds22`: `@scope (.ds23) to (.ds22)`, см. scripts/ds/css-scope.mjs и scripts/ds/README.md. */ @keyframes spin{to{transform:rotate(360deg)}} @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}} @scope (.ds23) to (.ds22){/* Minta Finance — DS V2.3 components. ТОЛЬКО var(--token) для цвета, радиуса, тени и кегля; литеральных цветов здесь нет. Состояния «наведение / фокус / нажатие» имеют двойников-классы .is-hover/.is-focus/.is-pressed — для галереи (specimen) и скриншотов. */ :scope [hidden]{display:none!important} /* ═══════════════ S1 · ОБОЛОЧКА ═══════════════ */ :scope .app{display:grid;grid-template-columns:var(--layout-sidebar) minmax(0,1fr);min-height:100vh;--ctxbar-actual:var(--layout-ctxbar-h);--sticky-top:var(--ctxbar-actual)} :scope .app[data-shell=fixed],:scope .app[data-shell=panes]{height:100vh;overflow:hidden} :scope .main{min-width:0;display:flex;flex-direction:column} :scope .app[data-shell=fixed] .main,:scope .app[data-shell=panes] .main{height:100vh;overflow:hidden} :scope .page{flex:1 1 auto;min-width:0;width:100%;max-width:calc(var(--layout-content-max) + 2 * var(--layout-gutter));margin-inline:auto;padding:22px var(--layout-gutter) 28px} :scope .app[data-shell=fixed] .page{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent} /* экран по высоте окна; если содержимое выше — прокручивается область страницы (панель и полоса контекста остаются) */ :scope .app[data-shell=panes] .page{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-bottom:0} :scope .pane-scroll{--sticky-top:0px;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent} /* боковая панель */ :scope .sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;padding:14px 12px;background:var(--background-sidebar);border-right:1px solid var(--border);z-index:var(--z-sidebar);overflow-y:auto;overflow-x:hidden} :scope .brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px} :scope .brand-mark{width:30px;height:30px;border-radius:var(--radius-md);background:var(--action-primary);color:var(--text-inverse);display:grid;place-items:center;font:var(--type-subsection);font-style:normal;flex:none} :scope .brand-text b{display:block;font:var(--type-subsection)} :scope .brand-text small{display:block;font:var(--type-micro);font-weight:400;color:var(--text-muted)} :scope .search-trigger{display:flex;align-items:center;gap:8px;height:36px;width:100%;margin-bottom:14px;padding:0 10px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-md);color:var(--text-muted);font:var(--type-meta)} :scope .search-trigger:hover{background:var(--action-secondary-hover)} :scope .search-trigger kbd{margin-left:auto} :scope .nav{display:flex;flex-direction:column;gap:2px} :scope .nav-item{position:relative;display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;border-radius:var(--radius-md);color:var(--text-secondary);font:var(--type-nav)} :scope .nav-item .ic{width:var(--icon-lg);height:var(--icon-lg);color:var(--text-muted)} :scope .nav-item:hover,:scope .nav-item.is-hover{background:var(--action-secondary-hover)} :scope .nav-item[aria-current=page]{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-raised)} :scope .nav-item[aria-current=page] .ic{color:var(--text-primary)} :scope .nav-count{margin-left:auto;font:var(--type-caption-strong);color:var(--negative);background:var(--negative-subtle);border-radius:var(--radius-pill);padding:0 7px;line-height:18px;min-width:18px;text-align:center} :scope .nav-count.is-neutral{color:var(--text-muted);background:var(--surface-muted)} :scope .nav-chev{margin-left:auto;color:var(--text-subtle)} :scope .nav-chev .ic{width:var(--icon-sm);height:var(--icon-sm)} :scope .nav-group{padding:14px 10px 4px;font:var(--type-micro);color:var(--text-muted);letter-spacing:var(--type-micro-tracking)} :scope .sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:12px;display:flex;align-items:center;gap:10px} :scope .avatar{width:30px;height:30px;border-radius:var(--radius-pill);background:var(--action-primary);color:var(--text-inverse);display:grid;place-items:center;font:var(--type-caption-strong);flex:none} :scope .who b{display:block;font:var(--type-label);font-weight:600;line-height:17px} :scope .who small{display:block;font:var(--type-micro);font-weight:400;color:var(--text-muted)} /* ≤1279: полоса значков. Названия остаются доступными (aria-label + визуально скрытый текст), видимого текста <12 px нет */ @media (min-width:768px) and (max-width:1279px){ :scope .app{grid-template-columns:var(--layout-sidebar-rail) minmax(0,1fr)} :scope .sidebar{align-items:center;padding:12px 8px} :scope .brand{padding:4px 0 10px} :scope .brand-text,:scope .nav-label,:scope .nav-chev,:scope .who,:scope .search-trigger>span:not(.ic),:scope .search-trigger kbd,:scope .nav-group-label{display:none} /* имена остаются в aria-label ссылок и кнопок */ :scope .search-trigger{width:var(--control-lg);height:var(--control-lg);padding:0;justify-content:center;margin-bottom:8px} :scope .nav{align-items:center} :scope .nav-item{width:var(--control-lg);height:var(--control-lg);justify-content:center;padding:0} :scope .nav-count{position:absolute;top:1px;right:0;margin:0;line-height:16px;padding:0 5px;min-width:18px} :scope .nav-group{padding:0;margin:8px 6px;width:24px;border-top:1px solid var(--border-strong)} :scope .sidebar-foot{border-top:0;padding-top:0;justify-content:center} } :scope .iconbtn.nav-toggle{display:none} @media (max-width:767px){ :scope .app{grid-template-columns:minmax(0,1fr)} :scope .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-102%);transition:transform var(--duration-base) var(--ease-standard);z-index:var(--z-drawer)} :scope .sidebar.is-open{transform:none;box-shadow:var(--shadow-overlay)} :scope .iconbtn.nav-toggle{display:grid} } /* полоса контекста (P13): юрлицо — всегда; период — только где влияет; «Сравнить» — только где есть дельты */ :scope .ctxbar{position:sticky;top:0;z-index:var(--z-sticky);height:var(--layout-ctxbar-h);flex:none;display:flex;align-items:center;gap:10px;padding:0 var(--layout-gutter);border-bottom:1px solid var(--border);background:var(--background)} :scope .ctx-group{display:flex;align-items:center;gap:8px;min-width:0} :scope .spacer{flex:1} :scope .pill{display:inline-flex;align-items:center;gap:8px;height:var(--control-md);padding:0 12px 0 11px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-md);font:var(--type-label);color:var(--text-primary);white-space:nowrap} :scope .pill:hover,:scope .pill.is-hover{background:var(--action-secondary-hover)} :scope .pill b{font-weight:600} :scope .pill small{font:var(--type-meta);color:var(--text-muted)} :scope .pill .lbl{font:var(--type-meta);color:var(--text-subtle);font-weight:500} :scope .pill .ic{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-muted)} :scope .pill--sm{height:var(--control-sm);font:var(--type-button-sm);font-weight:500} :scope .pill--ghost{background:transparent;border-color:transparent;color:var(--text-muted)} :scope .pill--add{border-style:dashed;color:var(--text-muted);background:transparent} :scope .pill.is-on,:scope .pill[aria-pressed=true]{background:var(--accent-mint-subtle);border-color:var(--accent-mint-border);color:var(--accent-mint-strong);font-weight:600} :scope .pill.is-on .ic,:scope .pill[aria-pressed=true] .ic{color:var(--accent-mint-strong)} :scope .stepper{display:inline-flex;align-items:center;height:var(--control-md);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface)} :scope .stepper-btn{width:32px;height:100%;display:grid;place-items:center;color:var(--text-muted)} :scope .stepper-btn:hover{background:var(--action-secondary-hover)} :scope .stepper-btn:first-child{border-right:1px solid var(--border);border-radius:var(--radius-md) 0 0 var(--radius-md)} :scope .stepper-btn:last-child{border-left:1px solid var(--border);border-radius:0 var(--radius-md) var(--radius-md) 0} :scope .stepper-btn .ic{width:var(--icon-sm);height:var(--icon-sm)} :scope .stepper-label{padding:0 12px;height:100%;display:inline-flex;align-items:center;gap:6px;font:var(--type-label);font-weight:600;white-space:nowrap} :scope .stepper-label small{font:var(--type-meta);color:var(--text-muted);font-weight:400} :scope .iconbtn{width:var(--control-md);height:var(--control-md);display:grid;place-items:center;border-radius:var(--radius-md);color:var(--text-secondary);position:relative;flex:none} :scope .iconbtn:hover,:scope .iconbtn.is-hover{background:var(--action-secondary-hover)} :scope .iconbtn .ic{width:var(--icon-lg);height:var(--icon-lg)} :scope .iconbtn--outline{border:1px solid var(--border-strong);background:var(--surface)} :scope .iconbtn--sm{width:var(--control-sm);height:var(--control-sm)} :scope .iconbtn--sm .ic{width:var(--icon-md);height:var(--icon-md)} :scope .badge-dot{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--negative);color:var(--text-inverse);font:var(--type-micro);font-weight:600;line-height:18px;text-align:center} :scope .kbd,:scope kbd{display:inline-block;font:var(--type-micro);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-xs);padding:0 5px;line-height:17px;color:var(--text-muted);background:var(--surface)} /* заголовок страницы: название + ОДНА фраза-вывод (P1) */ :scope .page-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:var(--page-head-gap);flex-wrap:wrap} :scope .page-head-main{min-width:0;flex:1 1 360px} :scope .page-head-main>h1,:scope .page-head-main>h2,:scope .page-head-main>h3{font:var(--type-page-title);letter-spacing:var(--type-page-title-tracking)} :scope .verdict{margin-top:6px;font:var(--type-verdict);color:var(--text-primary)} :scope [data-density=compact] .verdict{margin-top:var(--space-2)} :scope .verdict b{font-weight:600} :scope .verdict .is-neg{color:var(--negative)} :scope .verdict .is-warn{color:var(--warning)} :scope .verdict .acc{display:inline;line-height:inherit} :scope .verdict .acc-name{white-space:normal;overflow:visible} :scope .panel-head--tight{padding-bottom:var(--space-1)} :scope .th-sub{display:block;margin-top:var(--space-1)} :scope .page-head-sub{margin-top:4px;font:var(--type-caption);color:var(--text-muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap} :scope .page-head-sub .sep{color:var(--text-subtle)} :scope .page-head-actions{display:flex;gap:8px;align-items:center;margin-left:auto;margin-top:2px} :scope .page-head[data-sticky]{position:sticky;top:var(--ctxbar-actual);z-index:var(--z-sticky);background:var(--background);padding:10px 0;margin-bottom:0} :scope .views{display:flex;align-items:center;gap:6px;margin-left:auto;margin-top:6px;flex-wrap:wrap} :scope .views-cap{font:var(--type-caption);color:var(--text-muted);margin-right:2px} :scope .view{height:var(--control-sm);display:inline-flex;align-items:center;gap:6px;padding:0 11px;border-radius:var(--radius-pill);font:var(--type-button-sm);font-weight:500;color:var(--text-secondary);border:1px solid var(--border-strong);white-space:nowrap} :scope .view:hover,:scope .view.is-hover{background:var(--action-secondary-hover)} :scope .view[aria-current=page]{background:var(--accent-mint-subtle);border-color:var(--accent-mint-border);color:var(--accent-mint-strong);font-weight:600} :scope .view[aria-pressed=true],:scope .view.is-on{background:var(--accent-mint-subtle);border-color:var(--accent-mint-border);color:var(--accent-mint-strong);font-weight:600} :scope .view--add{border-style:dashed;color:var(--text-muted)} :scope .view .ic{width:var(--icon-sm);height:var(--icon-sm)} /* ═══════════════ ПОВЕРХНОСТИ ═══════════════ */ :scope .panel{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);min-width:0} :scope .panel-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:15px var(--panel-padding) 0;min-height:34px} :scope .panel-head h2{font:var(--type-section-title);letter-spacing:var(--type-section-title-tracking);white-space:nowrap} :scope .panel-meta{font:var(--type-meta);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} :scope .panel-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none} :scope .panel-body{padding:14px var(--panel-padding) 16px} :scope .panel-foot .link{font:var(--type-meta);white-space:normal} :scope .panel-foot{padding:10px var(--panel-padding) 14px;border-top:1px solid var(--border);font:var(--type-caption);color:var(--text-subtle);display:flex;gap:8px;align-items:center} :scope .panel-section + .panel-section{border-top:1px solid var(--border-strong)} :scope .panel-split{display:grid} :scope .panel-split>*{border-left:1px solid var(--border);min-width:0;padding-bottom:10px} :scope .panel-split>*:first-child{border-left:0} :scope .panel-split--r{grid-template-columns:var(--split-cols)} @media (min-width:1800px){:scope .panel-split--r{grid-template-columns:var(--split-cols-wide)}} @media (max-width:1439px){:scope .panel-split--r{grid-template-columns:minmax(0,1fr)}:scope .panel-split--r>*{border-left:0;border-top:1px solid var(--border)}:scope .panel-split--r>*:first-child{border-top:0}} :scope .panel-split--r .table{--cell-padding-x:var(--space-3)} :scope .panel-split--r .table th:first-child,:scope .panel-split--r .table td:first-child{padding-left:var(--panel-padding)} :scope .panel-split--r .table td:first-child{white-space:normal;line-height:var(--type-table-lh)} :scope .panel-split--r .table .is-num{font-size:var(--type-table-size)} :scope .panel-rule--roomy .line-row{padding-block:var(--space-4)} :scope .panel-rule{border-top:1px solid var(--border)} :scope .layout-work{display:grid;grid-template-columns:minmax(0,1fr) var(--layout-rail);gap:var(--layout-gap);align-items:start;margin-bottom:var(--layout-gap)} :scope .layout-col{display:flex;flex-direction:column;gap:var(--layout-gap);min-width:0} :scope .stack{display:flex;flex-direction:column;gap:var(--layout-gap)} :scope .row{display:flex;align-items:center;gap:10px} :scope .between{justify-content:space-between} :scope .grow{flex:1;min-width:0} @media (max-width:1279px){:scope .layout-work{grid-template-columns:minmax(0,1fr)}} @media (max-width:1799px){:scope .only-wide{display:none!important}} @media (min-width:1800px){:scope .hide-wide{display:none!important}} @media (max-width:767px){:scope .hide-phone{display:none!important}} @media (min-width:768px){:scope .only-phone{display:none!important}} /* ═══════════════ СВОДКА (summary strip) ═══════════════ */ :scope .strip{--cols:repeat(4,minmax(0,1fr));--cols-wide:var(--cols);display:grid;grid-template-columns:var(--cols);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);margin-bottom:var(--layout-gap)} @media (min-width:1800px){:scope .strip{grid-template-columns:var(--cols-wide)}} :scope .strip-cell{padding:14px 22px;border-left:1px solid var(--border);min-width:0;container-type:inline-size} :scope .strip-cell:first-child{border-left:0} :scope .strip-label{font:var(--type-label);color:var(--text-muted)} :scope .strip-ctx{color:var(--text-subtle);font-weight:400;margin-left:var(--space-3)} :scope .strip-value{margin-top:10px;white-space:nowrap;display:block} :scope .strip-value--hero{font:var(--type-money-hero);letter-spacing:var(--type-money-hero-tracking);margin-top:8px} :scope .strip-value--large{font:var(--type-money-large);letter-spacing:var(--type-money-large-tracking)} :scope .strip-value--hero .k,:scope .strip-value--hero .u{font-size:var(--size-fraction-hero);letter-spacing:0} :scope .strip-value--large .k,:scope .strip-value--large .u{font-size:var(--size-fraction-large);letter-spacing:0} :scope .strip-value.is-neg{color:var(--negative)} /* узкая ячейка (1280–1366): главная сумма берёт кегль money-large, а не вылезает за край */ @container (max-width:304px){:scope .strip-value--hero{font:var(--type-money-large);letter-spacing:var(--type-money-large-tracking)}:scope .strip-value--hero .k,:scope .strip-value--hero .u{font-size:var(--size-fraction-large)}} :scope .strip-line{font:var(--type-label);font-weight:400;color:var(--text-secondary);margin-top:6px;display:flex;gap:7px;align-items:center;line-height:19px;min-width:0} :scope .strip-line.is-warn{color:var(--warning)} :scope .strip-line>.ic{margin-top:2px;flex:none} :scope .strip-line.is-muted{color:var(--text-muted)} :scope .strip-line .t,:scope .strip-line>.incomplete,:scope .strip-line .link{min-width:0} :scope .strip-kv-link{color:var(--text-muted)} :scope .strip-kv-link:hover{color:var(--text-primary)} :scope .strip-kv{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;font:var(--type-label);font-weight:400;color:var(--text-muted)} :scope .strip-kv .fx{font:var(--type-subsection);color:var(--text-primary)} @media (max-width:899px){ :scope .strip{grid-template-columns:1fr 1fr} :scope .strip-cell:first-child{grid-column:1/-1} :scope .strip-cell{border-left:0;border-top:1px solid var(--border)} :scope .strip-cell:first-child{border-top:0} :scope .strip-cell:nth-child(2n){border-left:1px solid var(--border)} :scope .strip-label,:scope .strip-line{white-space:normal} :scope .strip-value{white-space:normal} } :scope .delta{display:inline-block;font:var(--type-caption-strong);padding:1px 6px;border-radius:var(--radius-sm);white-space:nowrap} :scope .delta.is-neutral{background:var(--surface-muted);color:var(--text-secondary)} :scope .delta.is-good{color:var(--delta-good);padding:1px 0} :scope .delta.is-bad{background:var(--warning-subtle);color:var(--delta-bad)} /* drill: единственная форма «число кликабельно» (P9) — только у ОТДЕЛЬНЫХ чисел сводок; в плотных таблицах кликабельна строка */ :scope .drill{border-bottom:1px dotted var(--border-emphasis);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)} :scope .drill:hover,:scope .drill.is-hover{border-bottom-color:var(--text-primary);background:var(--row-hover)} /* ═══════════════ КНОПКИ ═══════════════ */ :scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--control-md);padding:0 14px;border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-primary);font:var(--type-button);letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)} :scope .btn:hover,:scope .btn.is-hover{background:var(--action-secondary-hover)} :scope .btn:active,:scope .btn.is-pressed{background:var(--surface-muted);border-color:var(--border-emphasis)} :scope .btn .ic{width:15px;height:15px} :scope .btn--primary{background:var(--action-primary);border-color:var(--action-primary);color:var(--text-inverse)} :scope .btn--primary:hover,:scope .btn--primary.is-hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover)} :scope .btn--primary:active,:scope .btn--primary.is-pressed{background:var(--action-primary-pressed);border-color:var(--action-primary-pressed)} :scope .btn--ghost{background:transparent;border-color:transparent;color:var(--text-secondary)} :scope .btn--danger{color:var(--action-destructive);border-color:var(--negative-border);background:var(--surface)} :scope .btn--danger:hover,:scope .btn--danger.is-hover{background:var(--negative-subtle);border-color:var(--action-destructive)} :scope .btn--danger:active,:scope .btn--danger.is-pressed{background:var(--negative-subtle);color:var(--action-destructive-pressed);border-color:var(--action-destructive-pressed)} :scope .btn--danger-solid{background:var(--action-destructive);border-color:var(--action-destructive);color:var(--text-inverse)} :scope .btn--danger-solid:hover,:scope .btn--danger-solid.is-hover{background:var(--action-destructive-hover);border-color:var(--action-destructive-hover)} :scope .btn--danger-solid:active,:scope .btn--danger-solid.is-pressed{background:var(--action-destructive-pressed);border-color:var(--action-destructive-pressed)} :scope .btn--lg{height:var(--control-lg);padding:0 18px} :scope .btn--sm{height:var(--control-sm);padding:0 11px;font:var(--type-button-sm)} :scope .btn--xs{height:var(--control-xs);padding:0 10px;font:var(--type-button-xs)} :scope .btn--block{width:100%} :scope .btn[disabled],:scope .btn.is-disabled,:scope .btn[aria-disabled=true]{color:var(--text-subtle);background:var(--surface-sunken);border-color:var(--border);cursor:not-allowed;pointer-events:none} :scope .btn--primary[disabled],:scope .btn--primary.is-disabled{color:var(--text-subtle);background:var(--surface-muted);border-color:var(--border)} :scope .btn.is-loading{pointer-events:none} :scope .btn.is-loading::before{content:"";width:14px;height:14px;flex:none;border-radius:var(--radius-pill);border:2px solid var(--border-strong);border-top-color:var(--text-primary);animation:spin .8s linear infinite} :scope .btn--primary.is-loading::before{border-color:var(--action-primary-pressed);border-top-color:var(--text-inverse)} :scope .btn--danger-solid.is-loading::before{border-color:var(--action-destructive-pressed);border-top-color:var(--text-inverse)} :scope .link{display:inline-flex;align-items:center;gap:4px;font:var(--type-button);color:var(--accent-mint-strong);white-space:nowrap} :scope .link:hover{text-decoration:underline;text-underline-offset:3px} :scope .link .ic{width:var(--icon-sm);height:var(--icon-sm)} :scope .link--muted{color:var(--text-muted)} @media (max-width:767px){ :scope .btn,:scope .btn--sm,:scope .btn--xs,:scope .pill,:scope .pill--sm,:scope .view,:scope .stepper,:scope .iconbtn,:scope .iconbtn--sm,:scope .link{min-height:var(--control-touch)} :scope .btn,:scope .btn--sm,:scope .btn--xs{height:var(--control-touch)} :scope .btn--lg{height:var(--control-touch-lg)} :scope .iconbtn,:scope .iconbtn--sm{width:var(--control-touch);height:var(--control-touch)} :scope .stepper,:scope .pill,:scope .pill--sm,:scope .view{height:var(--control-touch)} } :scope .count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;font:var(--type-caption-strong);color:var(--text-secondary);background:var(--surface-muted);border-radius:var(--radius-pill);padding:0 7px;line-height:20px} :scope .count--neg{color:var(--negative);background:var(--negative-subtle)} :scope .count--warn{color:var(--warning);background:var(--warning-subtle)} /* сегмент: короткий переключатель режимов (радиогруппа) */ :scope .seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);height:var(--control-md);overflow:hidden} :scope .seg--sm{height:var(--control-sm)} :scope .seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;padding:0 11px;font:var(--type-button-sm);font-weight:500;color:var(--text-secondary);border-right:1px solid var(--border)} :scope .seg button:last-child{border-right:0} :scope .seg button:hover,:scope .seg button.is-hover{background:var(--action-secondary-hover)} :scope .seg button[aria-checked=true],:scope .seg button.is-on{background:var(--surface-muted);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-active-underline)} :scope .seg button:focus-visible{outline-offset:-2px} /* ═══════════════ S2 · ВКЛАДКИ СО СЧЁТЧИКАМИ (настоящий tablist) ═══════════════ */ :scope .tabs{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);height:var(--control-md);overflow:hidden;max-width:100%} :scope .tabs--fill{display:flex;width:100%} :scope .tabs--fill .tab{flex:1} :scope .tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;font:var(--type-button-sm);font-weight:500;color:var(--text-secondary);white-space:nowrap;border-right:1px solid var(--border)} :scope .tab:last-child{border-right:0} :scope .tab:hover,:scope .tab.is-hover{background:var(--action-secondary-hover)} :scope .tab[aria-selected=true],:scope .tab[aria-current=page],:scope .tab.is-on{background:var(--surface-muted);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-active-underline)} :scope .tab[aria-selected=true] .count,:scope .tab[aria-current=page] .count{background:var(--surface)} :scope .tabpanel:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:-2px} :scope .tab:focus-visible{outline-offset:-2px;border-radius:0} :scope .tab[disabled]{color:var(--text-subtle);cursor:not-allowed} /* ═══════════════ S12 · ПОИСК ═══════════════ */ :scope .search-field{position:relative;display:block;min-width:160px;flex:0 1 220px;max-width:100%} :scope .search-field>.ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);width:var(--icon-sm);height:var(--icon-sm)} :scope .search-field>.kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none} :scope .search-input{width:100%;height:var(--control-sm);padding:0 42px 0 30px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-md);font:var(--type-meta);color:var(--text-primary)} :scope .search-input:hover{border-color:var(--border-emphasis)} :scope .search-input::placeholder{color:var(--text-muted)} :scope .search-input:focus-visible,:scope .search-input.is-focus{border-radius:var(--radius-md)} :scope .search-field--lg{flex-basis:320px} :scope .search-field--lg .search-input{height:var(--control-md)} /* ═══════════════ ПОЛЯ ФОРМ ═══════════════ */ :scope .field{display:flex;flex-direction:column;gap:6px;min-width:0} :scope .field-label{font:var(--type-label);color:var(--text-secondary)} :scope .field-label .req{color:var(--negative)} :scope .field-hint{font:var(--type-caption);color:var(--text-muted)} :scope .field-error{display:flex;gap:6px;align-items:flex-start;font:var(--type-caption);font-weight:500;color:var(--negative)} :scope .field-error .ic{width:var(--icon-sm);height:var(--icon-sm);margin-top:2px} :scope .input,:scope .select,:scope .textarea{width:100%;height:var(--control-md);padding:0 12px;border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);font:var(--type-body);color:var(--text-primary)} :scope .input:hover,:scope .select:hover,:scope .textarea:hover,:scope .input.is-hover{border-color:var(--text-secondary)} :scope .input:focus-visible,:scope .select:focus-visible,:scope .textarea:focus-visible,:scope .input.is-focus{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-md)} :scope .input::placeholder,:scope .textarea::placeholder{color:var(--text-muted)} :scope .input[aria-invalid=true],:scope .select[aria-invalid=true],:scope .textarea[aria-invalid=true]{border-color:var(--negative)} :scope .input:disabled,:scope .select:disabled,:scope .textarea:disabled,:scope .input.is-disabled{background:var(--surface-sunken);color:var(--text-subtle);border-color:var(--border-strong);cursor:not-allowed} :scope .input[readonly]{background:var(--surface-sunken)} :scope .textarea{height:auto;min-height:88px;padding:8px 12px;resize:vertical;line-height:20px} :scope .select-wrap{position:relative} :scope .select{appearance:none;-webkit-appearance:none;padding-right:34px} :scope .select-wrap .ic{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);width:var(--icon-md);height:var(--icon-md)} :scope .check{display:inline-flex;align-items:center;gap:6px;min-height:var(--target-min);font:var(--type-body);cursor:pointer} :scope .check-input{appearance:none;-webkit-appearance:none;position:relative;width:var(--target-min);height:var(--target-min);margin:0;flex:none;background:transparent;border:0;cursor:pointer;display:inline-block;border-radius:var(--radius-sm)} :scope .check-input::before{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;box-sizing:border-box;border:1.5px solid var(--border-control);border-radius:var(--radius-xs);background:var(--surface)} :scope .check-input:hover::before,:scope .check-input.is-hover::before{border-color:var(--text-primary)} :scope .check-input:checked::before,:scope .check-input:indeterminate::before,:scope .check-input.is-checked::before{background:var(--accent-mint-strong);border-color:var(--accent-mint-strong)} :scope .check-input:checked::after,:scope .check-input.is-checked::after{content:"";position:absolute;left:10px;top:6px;width:4px;height:8px;border:solid var(--text-inverse);border-width:0 2px 2px 0;transform:rotate(45deg)} :scope .check-input:indeterminate::after{content:"";position:absolute;left:8px;top:11px;width:8px;height:2px;background:var(--text-inverse)} :scope .check-input[type=radio]::before{border-radius:var(--radius-pill)} :scope .check-input[type=radio]:checked::after{left:9px;top:9px;width:6px;height:6px;border:0;background:var(--text-inverse);border-radius:var(--radius-pill);transform:none} :scope .check-input:disabled{cursor:not-allowed} :scope .check-input:disabled::before{border-color:var(--border-strong);background:var(--surface-sunken)} :scope .check-input[aria-invalid=true]::before{border-color:var(--negative)} :scope .check.is-disabled{color:var(--text-subtle);cursor:not-allowed} :scope .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px} @media (max-width:767px){:scope .form-grid{grid-template-columns:1fr}:scope .input,:scope .select{height:var(--control-touch)}} /* ═══════════════ СТАТУС, ФЛАГ, СЕРЬЁЗНОСТЬ (P14: значок + слово, не цвет) ═══════════════ */ :scope .status{display:inline-flex;align-items:center;gap:5px;font:var(--type-caption-strong);white-space:nowrap} :scope .status .ic{width:var(--icon-sm);height:var(--icon-sm)} :scope .status--neg{color:var(--negative)} :scope .status--warn{color:var(--warning)} :scope .status--ok,:scope .status--done{color:var(--positive)} :scope .status--wait{color:var(--text-muted)} :scope .status--rejected{color:var(--text-secondary)} :scope .status--closed{color:var(--text-muted)} :scope .incomplete{display:inline-flex;align-items:flex-start;gap:6px;color:var(--warning);font:var(--type-meta)} :scope .incomplete b{font-weight:600} :scope .incomplete .ic{width:var(--icon-sm);height:var(--icon-sm);color:var(--warning-icon)} :scope a.incomplete:hover b{text-decoration:underline} :scope .flag{--flag-ring:var(--shadow-ring-negative);display:flex;gap:8px;align-items:center;margin-top:8px;padding:7px 10px;border-radius:var(--radius-md);font:var(--type-label);font-weight:400;line-height:19px;overflow:hidden} :scope .flag b{font-weight:600} :scope .flag>span:not(.ic):not(.flag-go){overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap} :scope .flag .ic{flex:none} :scope .flag-go{margin-left:auto;opacity:.8;flex:none} :scope .flag--crit{background:var(--negative-subtle);color:var(--negative-strong)} :scope .flag--crit .ic{color:var(--negative)} :scope .flag--warn{--flag-ring:var(--shadow-ring-warning);background:var(--warning-subtle);color:var(--warning-strong)} :scope .flag--warn .ic{color:var(--warning-icon)} :scope .flag--ok{background:var(--positive-subtle);color:var(--positive-strong)} :scope .flag--ok .ic{color:var(--positive)} :scope .flag--info{background:var(--information-subtle);color:var(--information-strong)} :scope .flag--info .ic{color:var(--information)} :scope a.flag:hover,:scope a.flag.is-hover{box-shadow:var(--flag-ring)} :scope .flag--wrap>span:not(.ic):not(.flag-go){white-space:normal} :scope .sev{display:inline-grid;place-items:center} :scope .sev--crit{color:var(--negative)} :scope .sev--warn{color:var(--warning-icon)} :scope .sev--info{color:var(--text-subtle)} :scope .sev--ok{color:var(--positive)} /* ═══════════════ РЕШЕНИЕ · ОЧЕРЕДЬ · ПЛАТЁЖ · ПРОСРОЧКА · СТРОКА ═══════════════ */ :scope .decision{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:12px;row-gap:3px;padding:12px var(--panel-padding);border-top:1px solid var(--border)} :scope .decision:first-child{border-top:0} :scope .decision-sev{grid-row:1/3;padding-top:1px} :scope .decision-sev .ic{width:var(--icon-lg);height:var(--icon-lg)} :scope .decision-title{font:var(--type-item-title);overflow-wrap:anywhere} :scope .decision-impact{font:var(--type-item-title);text-align:right;white-space:nowrap} :scope .decision-impact.is-neg{color:var(--negative)} :scope .decision-impact.is-warn{color:var(--warning)} :scope .decision-impact.is-muted{color:var(--text-subtle);font-weight:500} :scope .decision-why{grid-column:2;font:var(--type-meta);color:var(--text-muted);min-width:0} :scope .decision-act{grid-column:3;grid-row:2;display:flex;justify-content:flex-end;gap:8px} :scope .decision-rank{grid-column:2/4;grid-row:3;display:flex;gap:8px;align-items:baseline;font:var(--type-caption);color:var(--text-subtle);margin-top:2px} :scope .decision-rank b{font:var(--type-caption-strong);color:var(--text-secondary)} :scope .decision-rank>span{min-width:0;flex:1} :scope .decision-rank .fx,:scope .decision-why .fx{white-space:normal} :scope .sev-word{font-weight:600;color:var(--text-secondary)} :scope .decision.is-done .decision-title{color:var(--text-secondary);font-weight:500} :scope .queue-note{padding:10px var(--panel-padding);font:var(--type-caption);color:var(--text-muted);border-top:1px solid var(--border);display:flex;gap:8px} :scope .queue-note .ic{margin-top:1px;flex:none} :scope .pay-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto 14px;column-gap:12px;align-items:start;padding:8px var(--panel-padding);border-top:1px solid var(--border);color:inherit} :scope a.pay-row:hover,:scope .pay-row.is-hover,:scope .line-row.is-hover,:scope a.line-row:hover,:scope a.overdue:hover{background:var(--row-hover)} :scope .pay-date{line-height:18px} :scope .pay-date b{display:block;font:var(--type-body-large);font-weight:600} :scope .pay-date small{font:var(--type-caption);color:var(--text-subtle);white-space:nowrap} :scope .pay-text{min-width:0;font:var(--type-table);line-height:19px} :scope .pay-text .a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :scope .pay-text .c{display:block} :scope .pay-text .c{font:var(--type-caption);color:var(--text-subtle)} :scope .pay-amount{font:var(--type-money);white-space:nowrap;line-height:19px} :scope .pay-amount.is-pos{color:var(--positive)} :scope .pay-chev{color:var(--text-subtle);padding-top:2px} :scope .pay-chev .ic{width:var(--icon-sm);height:var(--icon-sm)} :scope .pay-totals{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-6);padding:2px var(--panel-padding) 10px;font:var(--type-meta);color:var(--text-muted)} :scope .pay-totals b{color:var(--text-primary);font-weight:600} :scope .overdue{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:2px 12px;align-items:center;margin:0 12px 6px;padding:8px 10px;border-radius:var(--radius-md);background:var(--negative-subtle);color:inherit} :scope .overdue-sev{color:var(--negative)} :scope .overdue-title{font:var(--type-body);font-weight:600;color:var(--negative-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :scope .overdue-title small{font:var(--type-caption);font-weight:400;color:var(--negative-strong);margin-left:6px;white-space:nowrap} :scope .overdue-amount{font:var(--type-money);color:var(--negative);white-space:nowrap} :scope .overdue-sub{grid-column:2/4;font:var(--type-caption);color:var(--negative-strong);display:none} @media (min-width:1800px){:scope .overdue-sub{display:block}:scope .overdue-title small{display:none}} :scope .line-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:8px var(--panel-padding);border-bottom:1px solid var(--border);min-height:48px;color:inherit} :scope .line-row:last-child{border-bottom:0} :scope .line-row--dot{grid-template-columns:10px minmax(0,1fr) auto;column-gap:10px} :scope .line-row .dot{width:8px;height:8px;border-radius:var(--radius-pill);justify-self:center} :scope .line-row-main{min-width:0;display:flex;flex-direction:column;line-height:18px} :scope .line-row-main .a{font:var(--type-table);font-weight:500;overflow-wrap:anywhere} :scope .line-row-main .a .acc{display:inline;max-width:none} :scope .line-row-main .a .acc-name{display:inline;overflow:visible;white-space:normal} :scope .line-row-main .c{font:var(--type-caption);color:var(--text-subtle)} :scope .line-row-value{font:var(--type-money);white-space:nowrap} :scope .line-row.is-flagged{background:var(--row-flagged)} :scope .line-row.is-flagged .a{color:var(--negative-strong)} /* ═══════════════ ГРАФИК (рамка + прогноз + разрыв + столбцы) ═══════════════ */ :scope .chart-wrap{padding:6px 12px 2px} :scope .chart{display:block;width:100%;height:auto;--chart-k:1} /* --chart-k = масштаб viewBox→экран; behaviors.js пишет его, подписи компенсируют масштаб и всегда остаются ≥12 px */ :scope .ch-grid{stroke:var(--chart-grid);stroke-width:1} :scope .ch-zero{stroke:var(--border-emphasis);stroke-width:1} :scope .ch-axis{font:var(--type-micro);font-size:calc(var(--type-micro-size) / var(--chart-k));fill:var(--text-subtle);letter-spacing:0} :scope .ch-future{fill:var(--surface-sunken);opacity:.75} :scope .ch-fact{fill:none;stroke:var(--chart-income);stroke-width:2.4;stroke-linejoin:round} :scope .ch-forecast{fill:none;stroke:var(--chart-forecast);stroke-width:2.2;stroke-dasharray:6 4;stroke-linejoin:round} :scope .ch-forecast-neg{fill:none;stroke:var(--negative);stroke-width:2.6;stroke-dasharray:6 4;stroke-linejoin:round} :scope .ch-today{stroke:var(--text-primary);stroke-width:1.2} :scope .ch-today-dot{fill:var(--chart-income);stroke:var(--surface);stroke-width:2.5} :scope .ch-min-dot{fill:var(--surface);stroke:var(--warning);stroke-width:2.5} :scope .ch-min-dot.is-gap{stroke:var(--negative)} :scope .ch-end-dot,:scope .ch-note-dot{fill:var(--chart-forecast)} :scope .ch-gap-band{fill:var(--chart-gap-band)} :scope .ch-gap-fill{fill:var(--chart-gap-fill)} :scope .ch-gap-bracket{fill:none;stroke:var(--negative);stroke-width:1.5} :scope .ch-note{font:var(--type-caption-strong);font-size:calc(var(--type-caption-strong-size) / var(--chart-k));fill:var(--text-secondary);letter-spacing:0} :scope .ch-note--today{fill:var(--text-primary)} :scope .ch-note--warn{fill:var(--warning-strong)} :scope .ch-note--neg{fill:var(--negative)} :scope .ch-bar-in{fill:var(--chart-income)} :scope .ch-bar-out{fill:var(--chart-expense)} :scope .ch-bar-neutral{fill:var(--chart-neutral)} :scope .chart-legend{display:flex;gap:16px;align-items:center;padding:4px var(--panel-padding) 14px;font:var(--type-caption);color:var(--text-muted);flex-wrap:wrap} :scope .chart-legend .sw{display:inline-block;width:16px;height:0;border-top:2.5px solid var(--chart-income);margin-right:6px;vertical-align:middle} :scope .chart-legend .sw--fc{border-top:2px dashed var(--chart-forecast)} :scope .chart-legend .sw--gap{border:0;width:12px;height:10px;background:var(--chart-gap-fill)} :scope .chart-legend .sw--out{border-top-color:var(--chart-expense)} :scope .chart-fallback{padding:12px var(--panel-padding);font:var(--type-meta);color:var(--text-muted)} /* ═══════════════ ТАБЛИЦА · S4 ВЫБРАННАЯ СТРОКА · S11 МАССОВОЕ ДЕЙСТВИЕ · S7 ФИЛЬТРЫ ═══════════════ */ :scope .table-wrap{position:relative} :scope .table-wrap--scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent} :scope .table{width:100%;border-collapse:separate;border-spacing:0;font:var(--type-table);table-layout:fixed} :scope .table th{position:sticky;top:var(--sticky-top,0);z-index:2;background:var(--surface);font:var(--type-table-head);color:var(--text-muted);text-align:left;height:var(--header-height);padding:0 var(--cell-padding-x);box-shadow:var(--shadow-hairline-bottom);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :scope .table td{height:calc(var(--row-height) - var(--border-width));padding:0 var(--cell-padding-x);border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)} :scope .table th:first-child,:scope .table td:first-child{padding-left:16px} :scope .table th:last-child,:scope .table td:last-child{padding-right:18px} :scope .table tbody tr:last-child td{border-bottom:0} :scope .table .is-num{text-align:right;font:var(--type-money);color:var(--text-primary)} :scope .table th.is-num{font:var(--type-table-head);color:var(--text-muted)} :scope .table .cell-strong{color:var(--text-primary);font-weight:600} :scope .table .cell-muted{color:var(--text-subtle)} :scope .table .cell-check{padding:0;text-align:center} :scope .table td.cell-go,:scope .table th.cell-go{width:36px;padding:0 var(--space-5) 0 0;text-align:right;color:var(--text-subtle);overflow:visible} :scope .table .cell-go .ic{width:var(--icon-sm);height:var(--icon-sm);display:inline-block;vertical-align:middle} :scope .table tbody tr.has-link{position:relative;cursor:pointer} :scope .table tbody tr.has-link:hover td{background:var(--row-hover)} :scope .table tbody tr.has-link:focus-within{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:-2px} :scope .row-link{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis} :scope .row-link::after{content:"";position:absolute;inset:0} :scope .row-link:focus-visible{outline:none} /* S3: столбец, который уступает место инспектору рядом (скрывается вместе со своей ) */ :scope .split-view[data-inspector-mode=side][data-open] .col-optional{display:none} :scope .row-check{display:grid;place-items:center;width:100%;height:calc(var(--row-height) - var(--border-width));cursor:pointer} :scope .table th .row-check{height:var(--header-height)} :scope .table--dense td{height:calc(var(--density-compact-row) - var(--border-width))} :scope .table--dense th{height:var(--density-compact-header)} :scope .table--dense .group-row td{height:calc(var(--density-compact-group) - var(--border-width));line-height:calc(var(--density-compact-group) - var(--border-width))} :scope .table tbody tr[data-row]{cursor:pointer} :scope .table tbody tr[data-row]:hover td,:scope .table tbody tr.is-hover td{background:var(--row-hover)} :scope .group-row td{background:var(--surface-sunken);font:var(--type-label);font-weight:600;height:calc(var(--group-height) - var(--border-width));padding-top:0;padding-bottom:0;line-height:calc(var(--group-height) - var(--border-width));color:var(--text-secondary)} :scope .total-row td{font-weight:600;color:var(--text-primary);border-top:1px solid var(--border-strong)} :scope .table tr.is-flagged td{background:var(--row-flagged)} :scope .table tr.is-plan td{color:var(--text-muted);background:var(--surface-sunken)} /* S4: ОДНО выбранное состояние для списка и таблицы — подложка + верхняя/нижняя линия. Цветной левой полосы нет (P12) */ :scope .table tbody tr[aria-selected=true] td,:scope .table tbody tr.is-selected td{background:var(--row-selected);box-shadow:var(--shadow-row-selected)} :scope .table tbody tr:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:-2px} :scope .row-list [role=row]{cursor:pointer} :scope .row-list [role=row]:hover,:scope .row-list [role=row].is-hover{background:var(--row-hover)} :scope .row-list [role=row][aria-selected=true],:scope .row-list [role=row].is-selected{background:var(--row-selected);box-shadow:var(--shadow-ring-selected)} :scope .row-list [role=row]:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:-2px;border-radius:0} :scope .group-head{display:flex;align-items:center;gap:8px;background:var(--surface-sunken);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0 var(--panel-padding);height:var(--group-height);font:var(--type-label);font-weight:600;color:var(--text-secondary)} :scope .group-head .sum{margin-left:auto;font-weight:600} :scope .filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center} :scope .filterbar-cap{font:var(--type-caption);color:var(--text-muted)} :scope .bulk{display:flex;align-items:center;gap:12px;min-height:var(--control-md);padding:0 8px 0 14px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-ring-strong);min-width:0;flex-wrap:wrap} :scope .bulk-count{font:var(--type-label);font-weight:600;white-space:nowrap} :scope .bulk-sum{font:var(--type-meta);color:var(--text-muted);white-space:nowrap} :scope .bulk-sum b{color:var(--text-primary);font-weight:600} :scope .bulk-sep{width:1px;height:16px;background:var(--border-strong)} :scope .bulk-esc{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:var(--type-caption);color:var(--text-muted);white-space:nowrap} :scope .toolbar{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;margin-bottom:8px} /* ═══════════════ S3 · ИНСПЕКТОР: рядом ИЛИ ящик (никогда «полтаблицы + полпанели») ═══════════════ */ :scope .split-view{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--layout-gap);align-items:start;min-width:0} :scope .split-view[data-inspector-mode=side][data-open]{grid-template-columns:minmax(0,1fr) var(--layout-inspector)} :scope .split-view:not([data-open]) .inspector{display:none} :scope .split-list{min-width:0} :scope .inspector{display:flex;flex-direction:column;min-width:0;background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);overflow:hidden} :scope .split-view[data-inspector-mode=side] .inspector{position:sticky;top:calc(var(--sticky-top) + var(--space-4));max-height:calc(100vh - var(--sticky-top) - 2 * var(--space-4))} :scope .inspector[data-mode=drawer]{position:fixed;top:0;right:0;bottom:0;width:min(var(--layout-inspector),100vw);max-height:none;z-index:var(--z-drawer);border-radius:var(--radius-xl) 0 0 var(--radius-xl);box-shadow:var(--shadow-overlay)} :scope .inspector-head{display:flex;align-items:center;gap:10px;padding:14px var(--panel-padding) 4px} :scope .inspector-head h2{font:var(--type-section-title);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :scope .inspector-head .meta{font:var(--type-meta);color:var(--text-muted);white-space:nowrap} :scope .inspector-nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex:none} :scope .inspector-pos{font:var(--type-meta);color:var(--text-muted);margin-right:6px;white-space:nowrap} :scope .inspector-sum{padding:6px var(--panel-padding) 10px} :scope .inspector-sum .amt{font:var(--type-money-large);letter-spacing:var(--type-money-large-tracking);white-space:nowrap} :scope .inspector-sum .amt .k,:scope .inspector-sum .amt .u{font-size:var(--size-fraction-large);letter-spacing:0} :scope .inspector-sum .m2{display:flex;gap:10px;align-items:center;margin-top:2px;font:var(--type-label);font-weight:400;color:var(--text-muted);flex-wrap:wrap} :scope .inspector-tabs{padding:0 var(--panel-padding) 10px} :scope .inspector-body{flex:1;min-height:0;overflow:auto;padding:0 var(--panel-padding);border-top:1px solid var(--border);scrollbar-width:thin} :scope .inspector-foot{flex:none;display:flex;align-items:center;gap:10px;padding:12px var(--panel-padding) 14px;border-top:1px solid var(--border);background:var(--surface-raised);flex-wrap:wrap} :scope .inspector-foot .hint{font:var(--type-caption);color:var(--text-muted);display:flex;gap:5px;align-items:center;flex-wrap:wrap} :scope .inspector-foot .btn .kbd{margin-left:4px} :scope .inspector-foot .more{margin-left:auto} :scope .scrim{position:fixed;inset:0;background:var(--scrim);z-index:calc(var(--z-drawer) - 1)} :scope .field-list{margin:0} :scope .field-row{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;padding:8px 0;border-top:1px solid var(--border)} :scope .field-row:first-child{border-top:0} :scope .field-row dt{font:var(--type-meta);color:var(--text-muted);padding-top:1px} :scope .field-row dd{margin:0;font:var(--type-body);line-height:20px;color:var(--text-primary);min-width:0;overflow-wrap:anywhere} :scope .field-row dd small{display:block;font:var(--type-caption);color:var(--text-muted)} :scope .field-row dd .link{margin-top:2px} :scope .field-row--wide{grid-template-columns:1fr} @media (max-width:767px){:scope .inspector[data-mode=drawer]{width:100vw;border-radius:0}:scope .field-row{grid-template-columns:104px minmax(0,1fr)}} /* модальное окно */ :scope .modal-root{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;background:var(--scrim);padding:var(--space-6)} :scope .modal{display:flex;flex-direction:column;width:min(520px,100%);max-height:calc(100vh - 2 * var(--space-6));background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-overlay);overflow:hidden} :scope .modal-head{display:flex;align-items:center;gap:12px;padding:18px 20px 6px} :scope .modal-head h2{font:var(--type-section-title)} :scope .modal-head .iconbtn{margin-left:auto} :scope .modal-body{padding:6px 20px 16px;overflow:auto;font:var(--type-body-large);color:var(--text-secondary)} :scope .modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border);flex-wrap:wrap} :scope .modal--sheet{align-self:end;width:100%;max-width:560px;border-radius:var(--radius-xl) var(--radius-xl) 0 0} :scope .modal-root--sheet{place-items:end center;padding:0} /* ═══════════════ S8 · ОТЧЁТНАЯ ТАБЛИЦА (целые колонки: first+tail залипают, между ними — целое число месяцев) ═══════════════ */ :scope .report{--rep-first-n:232px;--rep-total-n:108px;--rep-base-n:84px;--rep-first-w:var(--rep-first-n);--rep-total-w:var(--rep-total-n);--rep-base-w:var(--rep-base-n);--rep-first:var(--rep-first-n);--rep-total:var(--rep-total-n);--rep-base:var(--rep-base-n);--rep-col:96px;--rep-months:12;--rep-tail:calc(var(--rep-total) + var(--rep-base));min-width:0} @media (min-width:1800px){:scope .report{--rep-first:var(--rep-first-w);--rep-total:var(--rep-total-w);--rep-base:var(--rep-base-w)}} @media (min-width:1800px){:scope .report--tight .report-table td.rep-month,:scope .report--tight .report-table th.rep-month{padding-left:2px;padding-right:5px}} :scope .report-toolbar{display:flex;align-items:center;gap:8px;padding:12px var(--panel-padding);flex-wrap:wrap} :scope .report-range{font:var(--type-meta);color:var(--text-muted);white-space:nowrap} :scope .report-scroll{overflow:auto;max-height:calc(100vh - var(--sticky-top) - 150px);min-height:240px;position:relative;scroll-snap-type:x mandatory;scroll-padding-left:var(--rep-first);scroll-padding-right:var(--rep-tail);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;border-radius:0 0 var(--radius-lg) var(--radius-lg)} :scope .report-scroll:focus-visible{outline-offset:-2px;border-radius:0} :scope .report-table{border-collapse:separate;border-spacing:0;table-layout:fixed;font:var(--type-report);width:calc(var(--rep-first) + var(--rep-months) * var(--rep-col) + var(--rep-tail))} :scope .report-table col.c-label{width:var(--rep-first)} :scope .report-table col.c-month{width:var(--rep-col)} :scope .report-table col.c-total{width:var(--rep-total)} :scope .report-table col.c-base{width:var(--rep-base)} :scope .report-table tr{background:var(--surface)} :scope .report-table th,:scope .report-table td{background:inherit;padding:0 5px;height:36px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;overflow:hidden} :scope .report-table thead th{position:sticky;top:0;z-index:4;height:46px;font:var(--type-table-head);color:var(--text-muted);vertical-align:middle;border-bottom:1px solid var(--border-strong);background:var(--surface)} :scope .report-table thead th small{display:block;font:var(--type-micro);font-weight:400;color:var(--text-subtle)} :scope .report-table thead th.is-incomplete{color:var(--warning)} :scope .report-table thead th.is-incomplete small{color:var(--warning)} :scope .report-table thead th.is-incomplete small{color:var(--warning);font-weight:600;display:flex;gap:3px;align-items:center;justify-content:flex-end} :scope .report-table thead th.is-incomplete .ic{width:var(--icon-xs);height:var(--icon-xs);color:var(--warning-icon)} :scope .rep-first{position:sticky;left:0;z-index:3;text-align:left!important;padding-left:20px!important;border-right:1px solid var(--border-strong);background:var(--surface);overflow:hidden;text-overflow:ellipsis} :scope .report-table thead th.rep-first{z-index:6} :scope .rep-total{position:sticky;right:var(--rep-base);z-index:3;border-left:1px solid var(--border-strong);font-weight:600;background:var(--surface)} :scope .rep-base{position:sticky;right:0;z-index:3;background:var(--surface);color:var(--text-secondary)} :scope .report-table thead th.rep-total,:scope .report-table thead th.rep-base{z-index:6} :scope .rep-month{scroll-snap-align:start} :scope .report.is-scrolled-x .rep-first{box-shadow:var(--shadow-sticky-edge)} :scope .report.has-more-x .rep-total{box-shadow:var(--shadow-sticky-edge-left)} :scope .report-table tbody tr.is-group th.rep-first,:scope .report-table tbody tr.is-group td{background:var(--surface-sunken);font-weight:600} :scope .report-table tbody tr.is-total th.rep-first,:scope .report-table tbody tr.is-total td{background:var(--surface-muted);font-weight:600;border-top:1px solid var(--border-emphasis)} :scope .report-table tbody tr.is-sub th.rep-first{padding-left:40px!important;font-weight:400;color:var(--text-secondary)} :scope .report-table tbody tr.is-ratio td,:scope .report-table tbody tr.is-ratio th.rep-first{color:var(--text-muted);font-weight:500} :scope .report-table td.is-current,:scope .report-table th.is-current{background:var(--surface-sunken)} :scope .report-table tr.is-total td.is-current,:scope .report-table tr.is-group td.is-current{background:var(--surface-muted)} :scope .report-table tr[hidden]{display:none} :scope .rep-toggle{display:inline-flex;align-items:center;gap:6px;min-height:var(--target-min);font:inherit;font-weight:600;color:inherit;text-align:left;max-width:100%;min-width:0} :scope .rep-toggle-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :scope .rep-toggle .ic{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-muted);transition:transform var(--duration-fast) var(--ease-standard)} :scope .rep-toggle[aria-expanded=false] .ic{transform:rotate(-90deg)} :scope .report-note{display:flex;gap:8px;align-items:center;padding:10px var(--panel-padding) 12px;border-top:1px solid var(--border);font:var(--type-caption);color:var(--text-muted)} :scope .report-note .ic{flex:none;width:var(--icon-sm);height:var(--icon-sm)} :scope .rep-delta{font:var(--type-caption-strong)} :scope .rep-delta.is-good{color:var(--delta-good)} :scope .rep-delta.is-bad{color:var(--delta-bad)} :scope .rep-delta.is-neutral{color:var(--delta-neutral);font-weight:500} /* ═══════════════ S9 · ЦЕПОЧКА СОГЛАСОВАНИЯ ═══════════════ */ :scope .chain{margin:0;padding:0;list-style:none} :scope .chain li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:12px;padding:0 0 14px;position:relative} :scope .chain li:last-child{padding-bottom:0} :scope .chain li::before{content:"";position:absolute;left:12.5px;top:26px;bottom:0;width:1px;background:var(--border-strong)} :scope .chain li:last-child::before{display:none} :scope .chain-mark{width:26px;height:26px;display:grid;place-items:center;color:var(--positive)} :scope .chain-mark .ic{width:20px;height:20px} :scope .chain-n{width:24px;height:24px;border-radius:var(--radius-pill);display:grid;place-items:center;font:var(--type-caption-strong);border:1.5px solid var(--border-emphasis);color:var(--text-muted);background:var(--surface)} :scope .chain li[aria-current=step] .chain-n{background:var(--action-primary);border-color:var(--action-primary);color:var(--text-inverse)} :scope .chain-t{font:var(--type-item-title);font-weight:500;padding-top:3px;min-width:0;overflow-wrap:anywhere} :scope .chain-t small{display:block;font:var(--type-caption);color:var(--text-muted);font-weight:400} :scope .chain-when{font:var(--type-caption);color:var(--text-muted);white-space:nowrap;padding-top:4px} :scope .chain li[aria-current=step] .chain-t{font-weight:600} :scope .chain li.is-future .chain-t{color:var(--text-muted)} /* ═══════════════ S10 · БЫЛО → СТАНЕТ ═══════════════ */ :scope .impact{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-raised)} :scope .impact-in{display:flex;flex-wrap:wrap;margin:-1px 0 0 -1px} :scope .impact-in>div{flex:1 1 160px;padding:10px 14px;min-width:0;border-top:1px solid var(--border);border-left:1px solid var(--border)} :scope .impact .k{font:var(--type-caption);color:var(--text-muted)} :scope .impact .v{font:var(--type-section-title);margin-top:2px} :scope .impact .v.is-neg{color:var(--negative)} :scope .impact .s{font:var(--type-caption);color:var(--text-muted);margin-top:1px} :scope .impact-verdict{margin-top:10px} :scope .budget{margin-top:6px} :scope .budget-head{display:flex;justify-content:space-between;gap:12px;font:var(--type-label);font-weight:400;color:var(--text-secondary)} :scope .budget-head b{color:var(--text-primary);font-weight:600} :scope .bar{height:8px;border-radius:var(--radius-xs);background:var(--surface-muted);overflow:hidden;display:flex;margin-top:6px} :scope .bar i{display:block;height:100%} :scope .bar .a{background:var(--chart-expense)} :scope .bar .b{background:var(--chart-neutral)} :scope .bar .c{background:var(--warning-icon)} :scope .budget-cap{display:flex;gap:14px;flex-wrap:wrap;font:var(--type-caption);color:var(--text-muted);margin-top:6px} :scope .budget-cap i{display:inline-block;width:10px;height:8px;border-radius:var(--radius-xs);margin-right:5px} /* ═══════════════ S14 · ПРОЦЕСС: ступени и проверки качества ═══════════════ */ :scope .process{--stages:5;display:grid;grid-template-columns:repeat(var(--stages),minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0} :scope .stage{padding:0 12px 0 0;min-width:0} :scope .stage-head>div{min-width:0;overflow-wrap:anywhere} :scope .stage-bar{height:8px;border-radius:var(--radius-xs);background:var(--surface-muted);margin-right:4px} :scope .stage.is-done .stage-bar{background:var(--positive)} :scope .stage.is-current .stage-bar{background:var(--warning-icon)} :scope .stage.is-blocked .stage-bar{background:var(--negative)} :scope .stage-head{display:flex;align-items:flex-start;gap:8px;margin-top:10px} :scope .stage-head .ic{margin-top:1px;flex:none} :scope .stage.is-done .stage-head .ic{color:var(--positive)} :scope .stage.is-current .stage-head .ic{color:var(--warning-icon)} :scope .stage.is-blocked .stage-head .ic{color:var(--negative)} :scope .stage.is-todo .stage-head .ic{color:var(--text-subtle)} :scope .stage-title{font:var(--type-item-title)} :scope .stage-meta{font:var(--type-caption);color:var(--text-muted);margin-top:2px} :scope .gates-block{margin-top:14px;padding-top:10px;border-top:1px solid var(--border)} :scope .gates-block h3{font:var(--type-label);color:var(--text-muted)} :scope .gates{margin:4px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));column-gap:28px} :scope .gate{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 0;border-bottom:1px solid var(--border);font:var(--type-meta);color:var(--text-secondary)} :scope .gate .ic{width:var(--icon-md);height:var(--icon-md);margin-top:1px} :scope .gate.is-ok .ic{color:var(--positive)} :scope .gate.is-warn .ic{color:var(--warning-icon)} :scope .gate.is-crit .ic{color:var(--negative)} :scope .gate.is-wait .ic{color:var(--text-subtle)} :scope .gate-val{font:var(--type-caption-strong);color:var(--text-primary);white-space:nowrap} @media (max-width:767px){:scope .process{grid-template-columns:1fr;row-gap:16px}:scope .stage{padding:0}} /* ═══════════════ ПОДСКАЗКИ: «Как посчитано», меню ═══════════════ */ :scope .explain{position:relative;display:inline-flex;align-items:center;gap:4px;vertical-align:baseline} :scope .explain-btn{display:inline-grid;place-items:center;width:var(--target-min);height:var(--target-min);border-radius:var(--radius-pill);color:var(--text-subtle)} :scope .explain-btn:hover,:scope .explain-btn[aria-expanded=true]{color:var(--accent-mint-strong);background:var(--accent-mint-subtle)} :scope .explain-btn .ic{width:var(--icon-md);height:var(--icon-md)} :scope .popover{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-dropdown);width:min(360px,calc(100vw - 32px));padding:14px 16px;background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);font:var(--type-body);color:var(--text-secondary);text-align:left;white-space:normal} :scope .popover[data-flip=right]{left:auto;right:0} :scope .popover h3{font:var(--type-subsection);color:var(--text-primary);margin-bottom:6px} :scope .popover .formula{font:var(--type-body);color:var(--text-primary);padding:8px 10px;background:var(--surface-sunken);border-radius:var(--radius-sm);margin:6px 0 10px} :scope .popover dl{margin:0 0 10px} :scope .popover .src{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--border);font:var(--type-meta)} :scope .popover .src dt{color:var(--text-muted)} :scope .popover .src dd{margin:0;color:var(--text-primary);font-weight:600;white-space:nowrap} :scope .menu-wrap{position:relative;display:inline-block} :scope .menu{position:absolute;top:calc(100% + 4px);right:0;z-index:var(--z-dropdown);min-width:220px;padding:6px;background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay)} :scope .menu--left{right:auto;left:0} :scope .menu-item{display:flex;align-items:center;gap:10px;width:100%;height:var(--control-md);padding:0 10px;border-radius:var(--radius-sm);font:var(--type-body);color:var(--text-primary);white-space:nowrap} :scope .menu-item:hover,:scope .menu-item:focus-visible,:scope .menu-item.is-hover{background:var(--action-secondary-hover)} :scope .menu-item:focus-visible{outline-offset:-2px} :scope .menu-item .ic{width:var(--icon-md);height:var(--icon-md);color:var(--text-muted)} :scope .menu-item .kbd{margin-left:auto} :scope .menu-item--danger{color:var(--action-destructive)} :scope .menu-item--danger .ic{color:var(--action-destructive)} :scope .menu-item[disabled],:scope .menu-item[aria-disabled=true]{color:var(--text-subtle);cursor:not-allowed} :scope .menu-sep{height:1px;background:var(--border);margin:6px 4px} /* ═══════════════ СОСТОЯНИЯ СИСТЕМЫ: пусто · нет данных · ошибка · загрузка · тост ═══════════════ */ :scope .state-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 24px} :scope .state-icon{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-muted);color:var(--text-muted);display:grid;place-items:center;margin-bottom:4px} :scope .state-icon .ic{width:var(--icon-2xl);height:var(--icon-2xl)} :scope .state-box.is-error .state-icon{background:var(--negative-subtle);color:var(--negative)} :scope .state-box.is-nodata .state-icon{background:var(--warning-subtle);color:var(--warning-icon)} :scope .state-title{font:var(--type-section-title)} :scope .state-box--page .state-title{font:var(--type-display);letter-spacing:var(--type-display-tracking)} :scope .state-text{font:var(--type-body);color:var(--text-muted);max-width:44ch} :scope .state-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center} :scope .skeleton{display:flex;flex-direction:column;gap:10px;padding:16px var(--panel-padding)} :scope .sk{display:block;height:12px;border-radius:var(--radius-xs);background:linear-gradient(90deg,var(--surface-muted),var(--surface-sunken),var(--surface-muted));background-size:200% 100%;animation:shimmer 1.4s linear infinite} :scope .sk--title{height:20px;width:40%} :scope .sk--value{height:32px;width:55%} :scope .sk--w60{width:60%} :scope .sk--w80{width:80%} :scope .toast-region{position:fixed;left:var(--space-6);bottom:var(--space-6);z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 32px)} :scope .toast{display:flex;gap:10px;align-items:center;padding:10px 12px 10px 14px;background:var(--inverse-background);color:var(--inverse-text-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);font:var(--type-label);font-weight:400} :scope .toast .ic{color:var(--inverse-positive);flex:none} :scope .toast.is-error .ic{color:var(--warning-border)} :scope .toast .undo{color:var(--inverse-accent);font:var(--type-button);margin-left:8px;min-height:var(--target-min);padding:0 var(--space-3)} :scope .toast .undo:hover{text-decoration:underline} :scope .inline-confirm{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:var(--radius-md);background:var(--positive-subtle);color:var(--positive-strong);font:var(--type-label);font-weight:400} :scope .inline-confirm .link{margin-left:auto;min-height:var(--target-min);padding:0 var(--space-3)} /* ═══════════════ ПАТТЕРНЫ ═══════════════ */ :scope .freshness{display:inline-flex;gap:6px;align-items:center;font:var(--type-caption);color:var(--text-muted)} :scope .freshness .ic{width:var(--icon-sm);height:var(--icon-sm)} :scope .freshness b{color:var(--warning);font-weight:600} :scope .provenance{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px} :scope .src-tag{display:inline-flex;align-items:center;gap:4px;font:var(--type-caption);color:var(--text-muted);padding:0 6px;border:1px solid var(--border);border-radius:var(--radius-pill);line-height:18px;white-space:nowrap} :scope .src-tag .ic{width:var(--icon-xs);height:var(--icon-xs)} :scope .src-tag.is-manual{color:var(--warning);border-color:var(--warning-border);background:var(--warning-subtle)} :scope .fra{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:start} :scope .fra-fact{font:var(--type-item-title)} :scope .fra-reason{grid-column:2;font:var(--type-meta);color:var(--text-muted)} :scope .fra-action{grid-column:3;grid-row:1/3;align-self:center} /* ═══════════════ S15 · ТЕЛЕФОННАЯ ОБОЛОЧКА ═══════════════ */ :scope .m-shell{max-width:560px;margin:0 auto;min-height:100vh;padding-bottom:calc(var(--layout-mobile-bar) + var(--space-8) + 28px)} :scope .m-top{position:sticky;top:0;z-index:var(--z-sticky);height:var(--layout-ctxbar-h);display:flex;align-items:center;gap:8px;padding:0 var(--layout-gutter);background:var(--background);border-bottom:1px solid var(--border)} :scope .m-top .pill{height:var(--control-touch);min-width:0;flex:0 1 auto} :scope .m-top .pill>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} :scope .m-top .pill small,:scope .m-top .pill .ic{flex:none} :scope .m-top .iconbtn{flex:none} :scope .m-top .pill--fixed{flex:none} :scope .m-main{padding:14px var(--layout-gutter) 0;display:flex;flex-direction:column;gap:12px} :scope .m-back{display:inline-flex;align-items:center;height:var(--control-touch);margin-left:-8px;padding:0 8px 0 4px;font:var(--type-button);color:var(--accent-mint-strong);gap:2px;white-space:nowrap} :scope .m-back .ic{width:var(--icon-xl);height:var(--icon-xl)} :scope .m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);background:var(--surface);border-top:1px solid var(--border-strong);padding:0 4px var(--space-4);max-width:560px;margin:0 auto} :scope .m-tabs ul{display:grid;grid-template-columns:repeat(5,1fr)} :scope .m-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--layout-mobile-bar);font:var(--type-micro);font-weight:500;color:var(--text-muted);position:relative;white-space:nowrap} :scope .m-tab .ic{width:var(--icon-xl);height:var(--icon-xl)} :scope .m-tab[aria-current=page]{color:var(--text-primary);font-weight:600} :scope .m-tab[aria-current=page]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;background:var(--text-primary);border-radius:0 0 var(--radius-xs) var(--radius-xs)} :scope .m-tab .nav-count{position:absolute;top:5px;left:calc(50% + 6px);margin:0;font:var(--type-micro);font-weight:600;line-height:18px;background:var(--negative);color:var(--text-inverse)} :scope .m-tab .nav-count.is-neutral{background:var(--surface-muted);color:var(--text-secondary)} :scope .m-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);background:var(--surface);border-top:1px solid var(--border-strong);padding:10px var(--layout-gutter) var(--space-6);max-width:560px;margin:0 auto;display:flex;gap:8px} :scope .m-bar .btn{height:var(--control-touch-lg);flex:none} :scope .m-bar .btn--primary{flex:1} :scope .m-sheet{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);min-width:0;overflow:hidden} :scope .m-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:52px;padding:8px var(--layout-gutter);border-top:1px solid var(--border);font:var(--type-body-large)} :scope .m-row .l{color:var(--text-muted);font:var(--type-body)} :scope .m-row .v{text-align:right;font-weight:600;min-width:0} :scope .sheet-options{display:flex;flex-direction:column} :scope .sheet-option{display:flex;align-items:center;gap:12px;min-height:var(--control-touch);padding:0 4px;border-top:1px solid var(--border);font:var(--type-body-large)} :scope .sheet-option:first-child{border-top:0} @media (max-width:767px){ :scope .page{padding-top:14px;padding-bottom:var(--space-8)} :scope .ctxbar{flex-wrap:wrap;height:auto;min-height:var(--layout-ctxbar-h);padding-top:8px;padding-bottom:8px} :scope .ctx-group{flex-wrap:wrap} :scope .layout-work{grid-template-columns:minmax(0,1fr)} :scope .page-head-actions{margin-left:0} } /* ═══════════════ ДОБАВКИ: точки, очередь-строки, подписи из fx.mjs ═══════════════ */ :scope .panel--clip{overflow:clip} /* clip, не hidden: hidden делает панель прокручиваемым предком и ломает залипающую шапку таблицы внутри */ :scope .panel-part-body{margin-top:8px} :scope .dot{display:inline-block;flex:none} :scope .dot--cat-1{background:var(--chart-cat-1)} :scope .dot--cat-2{background:var(--chart-cat-2)} :scope .dot--cat-3{background:var(--chart-cat-3)} :scope .dot--cat-4{background:var(--chart-cat-4)} :scope .dot--cat-5{background:var(--chart-cat-5)} :scope .dot--cat-6{background:var(--chart-cat-6)} :scope .row-list{display:block;--row-cols:minmax(0,1fr)} :scope .queue-row{display:grid;grid-template-columns:var(--row-cols,minmax(0,1fr));column-gap:12px;align-items:start;padding:10px var(--panel-padding);border-top:1px solid var(--border)} :scope .queue-row:first-child{border-top:0} :scope .queue-cell{min-width:0} :scope .queue-row .qd{line-height:18px} :scope .queue-row .qd b{display:block;font:var(--type-body-large);font-weight:600} :scope .queue-row .qd small{font:var(--type-caption);color:var(--text-subtle);white-space:nowrap} :scope .queue-row .qt{font:var(--type-table);line-height:19px} :scope .queue-row .qt .a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} :scope .queue-row .qt .c{display:flex;gap:8px;align-items:center;font:var(--type-caption);color:var(--text-muted);line-height:20px} :scope .queue-row .qm{font:var(--type-money);white-space:nowrap} :scope .group-row-list .group-head{border-top:1px solid var(--border);border-bottom:1px solid var(--border)} :scope .incomplete-metric{display:flex;flex-direction:column;gap:4px;align-items:flex-start} /* имена из facts/fx.mjs: acc / ent / cp / period */ :scope .acc{display:inline-flex;flex-direction:column;min-width:0;max-width:100%;line-height:18px;vertical-align:top} :scope .acc-name{overflow-wrap:anywhere} :scope .acc-ent{font:var(--type-caption);color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :scope .ent{white-space:nowrap} :scope .cp{white-space:nowrap} :scope .period{white-space:nowrap} :scope .page-head-sub .acc,:scope .field-row .acc{display:inline-flex} /* «и ещё N» — раскрывающийся блок */ :scope .disclosure-btn{display:inline-flex;align-items:center;gap:4px;min-height:var(--target-min);font:var(--type-button);color:var(--accent-mint-strong)} :scope .disclosure-btn:hover .disclosure-label{text-decoration:underline;text-underline-offset:3px} :scope .disclosure-btn .ic{width:var(--icon-sm);height:var(--icon-sm);transition:transform var(--duration-fast) var(--ease-standard)} :scope .disclosure-btn[aria-expanded=true] .ic{transform:rotate(180deg)} :scope .disclosure-body{margin-top:4px} /* реестр в оболочке panes: панель занимает остаток высоты, прокручивается ТОЛЬКО таблица; шапка таблицы залипает внутри панели */ :scope .pane-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:var(--radius-lg) var(--radius-lg) 0 0} :scope .pane-panel>.pane-scroll{flex:1 1 auto} /* ячейка отчёта = кнопка «Как посчитано»: число с пунктиром, окно вынесено из прокручиваемой области */ :scope .explain--cell{display:block;position:static} :scope .explain-cell-btn{display:block;width:100%;min-height:var(--target-min);text-align:right;font:inherit;color:inherit;border-bottom:1px dotted var(--border-emphasis)} :scope .explain-cell-btn:hover,:scope .explain-cell-btn[aria-expanded=true]{background:var(--row-hover);border-bottom-color:var(--text-primary)} :scope .explain-cell-btn:focus-visible{outline-offset:-2px;border-radius:0} :scope .popover[data-portal]{position:fixed;z-index:var(--z-dropdown)} /* ═══════════════ СОСТАВНЫЕ ЭКРАНОВ (консолидация v2.3): очередь внимания, деталь, закрытие месяца ═══════════════ */ :scope .nodata-text{margin-top:var(--space-5);font:var(--type-money);color:var(--text-muted)} :scope .meta-text{font:var(--type-meta);color:var(--text-muted);min-width:0} :scope .queue-order{padding:var(--space-4) var(--panel-padding) var(--space-5);font:var(--type-caption);color:var(--text-muted)} :scope .queue-rank{font:var(--type-caption-strong);color:var(--text-secondary);padding-top:var(--space-2)} :scope .queue-main{display:flex;flex-direction:column;gap:var(--space-2);min-width:0} :scope .queue-title{font:var(--type-item-title);overflow-wrap:anywhere} :scope .queue-meta{display:block;font:var(--type-meta);color:var(--text-muted)} :scope .queue-sep{color:var(--text-muted);margin-inline:var(--space-3)} :scope .queue-higher{font:var(--type-caption);color:var(--text-subtle)} :scope .queue-higher b{font-weight:600;color:var(--text-muted)} :scope .queue-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);text-align:right;padding-top:var(--space-1)} :scope .queue-amt{font:var(--type-money);white-space:nowrap} :scope .queue-due{font:var(--type-caption);color:var(--text-muted);white-space:nowrap} :scope .queue-sev-note{padding:var(--space-3) var(--panel-padding) var(--space-4);font:var(--type-meta);color:var(--text-muted)} :scope .sev-inline{display:inline-flex;align-items:center;gap:var(--space-2);vertical-align:bottom} :scope .sev-inline b{font:var(--type-caption-strong)} :scope .sev-inline--crit b{color:var(--negative-strong)} :scope .sev-inline--warn b{color:var(--warning-strong)} :scope .sev-inline--info b{color:var(--text-muted)} :scope .sev-inline .sev{display:inline-grid} :scope .sev-inline .ic{width:var(--icon-sm);height:var(--icon-sm)} :scope .detail-stack{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-5) 0 var(--space-6)} :scope .detail-stack .fra{grid-template-columns:20px minmax(0,1fr)} :scope .detail-stack .fra-fact{display:none} :scope .detail-stack .fra-reason{grid-column:2;font:var(--type-body);color:var(--text-secondary)} :scope .detail-stack .fra-action{grid-column:2;grid-row:auto;align-self:start;margin-top:var(--space-4)} :scope .why-box{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--surface-sunken);font:var(--type-meta);color:var(--text-secondary)} :scope .why-box b{color:var(--text-primary);font-weight:600} :scope .sub-label{font:var(--type-label);color:var(--text-muted)} :scope .field-list--split .field-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} :scope .field-list--split .field-row dd{text-align:right} :scope .todo-row{padding:var(--space-5) var(--panel-padding);border-top:1px solid var(--border)} :scope .todo-row:first-child{border-top:0} :scope .todo-row .fra{grid-template-columns:20px minmax(0,1fr) auto;align-items:center} :scope .todo-row .fra-reason{color:var(--text-secondary)} :scope .todo-row .fra-fact{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center} :scope .inspector-head h2{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} :scope .inspector-head h2 .acc,:scope .inspector-head h2 .acc-name{display:inline;overflow:visible;white-space:normal} :scope .inspector-head h2 .cp,:scope .inspector-head h2 .ent{white-space:normal} :scope .strip-line .acc,:scope .strip-line .acc-name{display:inline;white-space:normal;overflow:visible;text-overflow:clip;max-width:100%} :scope .chart-wrap{container-type:inline-size} :scope .ch-extra{display:none} @container (min-width:900px){:scope .ch-extra{display:inline}} :scope .incomplete .ic{margin-top:2px} :scope .incomplete-text{min-width:0} :scope .strip.strip--stack{grid-template-columns:minmax(0,1fr)} :scope .strip.strip--stack .strip-cell{grid-column:auto;border-left:0;border-top:1px solid var(--border)} :scope .strip.strip--stack .strip-cell:first-child{border-top:0} :scope .line-row-main .a .ent,:scope .line-row-main .a .cp,:scope .pay-text .c .cp,:scope .pay-text .c .ent{white-space:normal} @container (max-width:240px){:scope .strip-value--large,:scope .strip-value--hero{font:var(--type-section-title);letter-spacing:0}:scope .strip-value--large .k,:scope .strip-value--large .u,:scope .strip-value--hero .k,:scope .strip-value--hero .u{font-size:var(--type-meta-size)}} :scope .strip-line{flex-wrap:wrap} :scope .strip-line>.ic~.t{flex:1 1 0;min-width:0} /* ═══════════════ СОСТАВНЫЕ ЭКРАНОВ: реестр, инспектор операции, карточка заявки, телефонная карточка ═══════════════ */ :scope .btn.is-on{background:var(--accent-mint-subtle);border-color:var(--accent-mint-border);color:var(--accent-mint-strong)} :scope .btn.is-on .ic{color:var(--accent-mint-strong)} :scope .menu--wide{min-width:260px;max-width:min(380px,calc(100vw - 32px));max-height:min(60vh,420px);overflow:auto} :scope .menu-item{overflow:hidden;text-overflow:ellipsis;max-width:100%} :scope .menu-item.is-on{background:var(--accent-mint-subtle);color:var(--accent-mint-strong);font-weight:600} :scope .panel>.bulk{margin:var(--space-4)} :scope .fx.is-muted{color:var(--text-muted)} :scope .cell-who{color:var(--text-primary);font-weight:500;margin-right:var(--space-4)} :scope .cell-who .acc,:scope .cell-who .acc-name{display:inline;max-width:none;white-space:nowrap} :scope .cell-purpose{color:var(--text-muted)} :scope .table td .status{vertical-align:middle;margin-left:var(--space-3)} :scope .cell-cat{display:block;white-space:nowrap} :scope .cell-cat--split{display:flex;align-items:center;gap:var(--space-3);color:var(--text-secondary)} :scope .cell-cat .ic{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--text-muted)} :scope .inline-totals{display:flex;align-items:center;line-height:20px;min-width:0;flex-wrap:wrap} :scope .itot{display:flex;align-items:baseline;gap:var(--space-3);padding:0 var(--space-5);border-left:1px solid var(--border-strong);min-width:0;white-space:nowrap} :scope .itot-k{font:var(--type-label);color:var(--text-muted)} :scope .itot-v{font:var(--type-money);color:var(--text-primary)} :scope .itot-s{font:var(--type-caption);color:var(--text-subtle)} :scope .itot--apart{padding-right:0} :scope .note-text{font:var(--type-body);color:var(--text-secondary);padding:var(--space-5) 0} :scope .note-text--lead{padding-bottom:0} :scope .inspector-confirm{padding:var(--space-4) 0 0} :scope .history-list{margin:0;padding:var(--space-4) 0} :scope .history-list li{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) 0;border-top:1px solid var(--border)} :scope .history-list li:first-child{border-top:0} :scope .history-title{font:var(--type-label);font-weight:600} :scope .history-sub{font:var(--type-caption);color:var(--text-muted)} :scope .history-from{color:var(--text-subtle)} :scope .parts-list{margin:0;padding:var(--space-4) 0 0} :scope .parts-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--border)} :scope .parts-list li:first-child{border-top:0} :scope .parts-name{display:flex;flex-direction:column;min-width:0} :scope .parts-name small{font:var(--type-caption);color:var(--text-muted)} :scope .hint-text{font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-4)} :scope .inspector-sum .amt .fx{font:inherit} :scope .field-row dd .select-wrap{max-width:100%} :scope .field-row dd .cp,:scope .field-row dd .ent{white-space:normal} /* очередь заявок */ :scope .queue-panel .row-list{padding-bottom:var(--space-3)} :scope .queue-panel .queue-row{align-items:center} :scope .queue-panel .queue-row.is-done .qt .a,:scope .queue-panel .queue-row.is-done .qm{color:var(--text-muted)} :scope .queue-panel .qt .c{flex-wrap:wrap;column-gap:var(--space-5);row-gap:0} :scope .queue-panel .group-head .count{margin-left:var(--space-1)} :scope .queue-panel .panel-foot{align-items:flex-start;color:var(--text-secondary);font:var(--type-meta)} /* карточка заявки */ :scope .detail-card .panel-head{padding-bottom:var(--space-3)} :scope .detail-card .panel-head h2{min-width:0;white-space:normal;overflow-wrap:anywhere} :scope .card-sum{padding:var(--space-3) var(--panel-padding) var(--space-5)} :scope .card-amt{font:var(--type-money-large);letter-spacing:var(--type-money-large-tracking)} :scope .card-sub{font:var(--type-body);color:var(--text-muted);margin-top:var(--space-1)} :scope .card-sub b{color:var(--text-primary);font-weight:600} :scope .card-h{font:var(--type-label);color:var(--text-muted);font-weight:600;margin-bottom:var(--space-4)} :scope .card-impact{padding:0 var(--panel-padding) var(--space-6)} :scope .card-note{font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-4)} :scope .card-when{font:var(--type-caption);color:var(--text-muted);font-weight:400;margin-left:var(--space-3)} :scope .card-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-8);padding:var(--space-6) var(--panel-padding);border-top:1px solid var(--border)} :scope .card-col{min-width:0} :scope .card-actions{position:sticky;bottom:0;display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;padding:var(--space-5) var(--panel-padding);border-top:1px solid var(--border);background:var(--surface);border-radius:0 0 var(--radius-lg) var(--radius-lg)} :scope .card-hint{font:var(--type-caption);color:var(--text-muted);flex:1 1 220px;min-width:0} :scope .card-btns{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-left:auto} @media (max-width:1279px){:scope .card-cols{grid-template-columns:minmax(0,1fr)}:scope .card-actions{position:static}} /* телефонная карточка (заявка, операция) */ :scope .m-detail-head{padding:var(--space-6) var(--layout-gutter) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start} :scope .m-detail-head h1{font:var(--type-section-title);overflow-wrap:anywhere} :scope .m-detail-amt{font:var(--type-money-large);letter-spacing:var(--type-money-large-tracking)} :scope .m-detail-head .verdict{margin-top:var(--space-2);font:var(--type-body-large)} :scope .m-section{border-top:1px solid var(--border)} :scope .m-section>h2{font:var(--type-label);color:var(--text-muted);font-weight:600;padding:var(--space-5) var(--layout-gutter) var(--space-3)} :scope .m-section .m-row:first-of-type{border-top:0} :scope .m-section .m-row{grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-6)} :scope .m-section .m-row .v{text-align:right} :scope .m-pad{padding:0 var(--layout-gutter) var(--space-6)} :scope .m-cta .m-pad{padding-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)} :scope .m-confirm{padding:var(--space-5) var(--layout-gutter) 0} :scope .m-row .v{min-width:0;overflow-wrap:anywhere;font-weight:500} :scope .m-row .v .cp,:scope .m-row .v .ent{white-space:normal} :scope .m-row .v .acc{align-items:flex-end} :scope .m-bar .btn{flex:1 1 0;min-width:0;padding-inline:var(--space-4)} :scope .m-bar .btn--primary{flex:1.5 1 0} :scope .m-pad .impact .v{font:var(--type-section-title)} :scope [data-density=compact] .page{padding-top:var(--space-5)} :scope .table .acc,:scope .table .acc-name{display:inline;max-width:none} /* ═══════════════ СОСТАВНЫЕ ЭКРАНОВ: отчёты и календарь ═══════════════ */ :scope .filterbar-cap b{font-weight:600;color:var(--text-primary)} :scope .th-link{color:inherit} :scope .th-link:hover{text-decoration:underline;text-underline-offset:3px;color:var(--text-primary)} :scope .rep-delta-wrap{margin-left:var(--space-2)} :scope .report-table thead th.rep-total small,:scope .report-table thead th.rep-base small{display:block} :scope .row-mark{display:inline-flex;vertical-align:middle;margin-left:var(--space-3)} :scope .row-mark .ic{width:var(--icon-sm);height:var(--icon-sm);color:var(--warning-icon)} :scope .flag--flush{margin-top:0} :scope .panel-sum{font:var(--type-item-title);white-space:nowrap} :scope .state-links{display:flex;gap:var(--space-6);flex-wrap:wrap;justify-content:center;align-items:center;padding:0 var(--panel-padding) var(--space-8);font:var(--type-meta);color:var(--text-muted)} :scope .layout-work--sticky>.panel--clip{position:sticky;top:calc(var(--sticky-top) + var(--space-6))} :scope .pay-row--date-wide{grid-template-columns:80px minmax(0,1fr) auto 14px} :scope .cal-dows,:scope .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))} :scope .cal-dows{margin-top:var(--space-4);border-bottom:1px solid var(--border)} :scope .cal-dows span{padding:var(--space-3) var(--space-5);font:var(--type-caption);color:var(--text-muted)} :scope .cal-day{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-height:92px;min-width:0;padding:var(--space-4) var(--space-3);border-right:1px solid var(--border);border-bottom:1px solid var(--border);color:inherit} :scope .cal-day:nth-child(7n){border-right:0} :scope a.cal-day:hover{background:var(--row-hover)} :scope .cal-day.is-past,:scope .cal-day.is-after{background:var(--surface-sunken);color:var(--text-muted)} :scope .cal-day.is-today{box-shadow:var(--shadow-ring-selected)} :scope .cal-day.is-min{background:var(--warning-subtle)} :scope .cal-n{font:var(--type-label);font-weight:600} :scope .cal-tag{font:var(--type-caption-strong);color:var(--text-secondary)} :scope .cal-sum{display:block} :scope .cal-sum.is-pos{color:var(--positive-strong)} :scope .cal-day .fx{font:var(--type-caption-strong)} :scope .cal-day:focus-visible{outline-offset:-2px} :scope .cal-day .status{flex-wrap:wrap;max-width:100%} /* ═══════════════ СОСТАВНЫЕ ЭКРАНОВ: справочники, настройки, кабинет поставщика ═══════════════ */ :scope .cell-two{display:flex;flex-direction:column;line-height:18px;min-width:0} :scope .cell-sub{display:block;font:var(--type-caption);color:var(--text-muted);line-height:16px} :scope .table-scroll{--sticky-top:0px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent} :scope .table-scroll>.table-wrap>.table{min-width:var(--table-min,760px)} :scope .group-line{display:flex;align-items:center;gap:var(--space-5);min-width:0} :scope .group-name{display:inline-flex;gap:var(--space-4);align-items:center;min-width:0} :scope .group-sum{margin-left:auto;display:inline-flex;gap:var(--space-4);align-items:baseline;font-weight:600;color:var(--text-primary)} :scope .group-sum small{font:var(--type-caption);font-weight:400;color:var(--text-muted)} :scope .fold{border-top:1px solid var(--border)} :scope .fold>.disclosure>.disclosure-btn{margin-left:var(--panel-padding)} :scope .fold .disclosure-body{margin-top:0;border-top:1px solid var(--border)} :scope .toolbar--tabs{gap:var(--space-5);margin-bottom:var(--space-5)} :scope .toolbar--tabs .search-field{flex:0 1 320px;min-width:200px} :scope .table-scroll .acc{max-width:100%} :scope .noresult{padding:var(--space-8) var(--panel-padding);color:var(--text-muted);font:var(--type-body);text-align:center} :scope .form-panel{display:flex;flex-direction:column;gap:var(--space-6);max-width:760px;padding:var(--space-6) var(--panel-padding) var(--space-7)} :scope .form-panel .form-grid{gap:var(--space-6)} :scope .form-actions{display:flex;gap:var(--space-5);align-items:center;padding-top:var(--space-6);border-top:1px solid var(--border);flex-wrap:wrap} :scope .form-actions .hint{margin-left:auto;font:var(--type-caption);color:var(--text-muted)} :scope .formset{display:flex;flex-direction:column;gap:var(--space-5);border:0;padding:0;margin:0;min-width:0} :scope .formset>legend{font:var(--type-subsection);margin-bottom:var(--space-2);padding:0} :scope .help-text{font:var(--type-caption);color:var(--text-muted);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap} :scope .section-lead{padding:var(--space-6) var(--panel-padding) 0;font:var(--type-body);color:var(--text-muted);max-width:72ch} :scope .section-lead+.table-wrap,:scope .section-lead+.table-scroll{margin-top:var(--space-5)} :scope .id-text{font:var(--type-technical);color:var(--text-muted)} :scope .aside-text{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-5) var(--panel-padding) var(--space-6);font:var(--type-body);color:var(--text-secondary)} :scope .aside-text p{max-width:60ch} :scope .review-list{margin:0;padding:var(--space-4) var(--panel-padding) var(--space-6)} :scope .process-wrap--framed .process{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);padding:var(--space-6) var(--panel-padding)} :scope .detail-actions{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5) 0 var(--space-6);border-top:1px solid var(--border);margin-top:var(--space-5)} :scope .detail-actions .row{flex-wrap:wrap} :scope .detail-actions h3{font:var(--type-label);color:var(--text-muted);font-weight:500} :scope .detail-why{font:var(--type-caption);color:var(--text-muted);display:flex;gap:var(--space-3);align-items:center} :scope .steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-gap);padding:var(--space-2) var(--panel-padding) var(--space-8)} :scope .steps-item{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-5);border-top:1px solid var(--border-strong)} :scope .steps-item b{font:var(--type-subsection)} :scope .steps-item span{font:var(--type-body);color:var(--text-muted)} @media (max-width:1023px){:scope .steps-grid{grid-template-columns:minmax(0,1fr)}} /* телефон: счета */ :scope .m-hero{padding:var(--space-6) var(--layout-gutter) var(--space-5);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel)} :scope .m-hero-l{font:var(--type-label);color:var(--text-muted)} :scope .m-hero-v{margin-top:var(--space-3);font:var(--type-money-large);letter-spacing:var(--type-money-large-tracking);white-space:nowrap} :scope .m-hero-v .k,:scope .m-hero-v .u{font-size:var(--size-fraction-large);letter-spacing:0} :scope .m-hero-s{margin-top:var(--space-3);font:var(--type-caption);color:var(--text-muted)} :scope .m-group{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--layout-gutter);background:var(--surface-sunken);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font:var(--type-label);font-weight:600;color:var(--text-secondary);min-height:36px} :scope .m-group .sum{margin-left:auto;color:var(--text-primary)} :scope .m-list .line-row{padding-inline:var(--layout-gutter);min-height:60px} :scope .m-list .line-row-main .c{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap} :scope .m-list .src-tag{align-self:flex-start} :scope .m-list .fold>.disclosure>.disclosure-btn{margin-left:var(--layout-gutter);min-height:var(--control-touch)} :scope .m-title{font:var(--type-section-title);letter-spacing:var(--type-section-title-tracking)} /* ═══════════════ ПАКЕТ ПРАВОК ПО РЕЦЕНЗИЯМ ═══════════════ */ /* ширины колонок — переменной, не inline-стилем */ :scope .table col{width:var(--col-w,auto)} /* заголовок колонки не усекается: переносится по словам */ :scope .table th{white-space:normal;overflow:visible;text-overflow:clip;line-height:15px;padding-top:0;padding-bottom:0;vertical-align:middle} :scope .table th .th-sort{display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;text-align:inherit;padding:0;min-height:24px} :scope .table th.is-num .th-sort{flex-direction:row-reverse} :scope .th-sort:hover{color:var(--text-primary)} :scope .th-sort-ic{display:inline-block;width:8px;height:12px;position:relative;flex:none;opacity:.45} :scope .th-sort-ic::before,:scope .th-sort-ic::after{content:"";position:absolute;left:0;border:4px solid transparent} :scope .th-sort-ic::before{top:0;border-bottom-color:currentColor;border-top:0} :scope .th-sort-ic::after{bottom:0;border-top-color:currentColor;border-bottom:0} :scope th[aria-sort=ascending] .th-sort-ic,:scope th[aria-sort=descending] .th-sort-ic{opacity:1;color:var(--text-primary)} :scope th[aria-sort=ascending] .th-sort-ic::after,:scope th[aria-sort=descending] .th-sort-ic::before{opacity:.25} :scope .row-check{min-width:24px} :scope .row-link{display:flex;align-items:center;min-height:24px} :scope .th-link{display:inline-flex;align-items:center;min-height:24px} :scope .link{min-height:24px} /* ошибка поля: рамка + значок + текст; обязательность — не красная */ :scope .field-label .req{color:var(--text-muted)} :scope .field-error[hidden]{display:none} :scope .input[aria-invalid=true],:scope .select[aria-invalid=true],:scope .textarea[aria-invalid=true]{border-color:var(--negative);box-shadow:var(--shadow-ring-error)} /* слово серьёзности у плашки видно (P14) */ :scope .flag-word{font-weight:600;margin-right:var(--space-3)} :scope .flag-word::after{content:" ·";font-weight:400} :scope .flag--info{background:var(--surface-sunken);color:var(--text-secondary)} :scope .flag--info .ic{color:var(--text-muted)} /* меню у края контейнера: поповер вне обрезки (fixed по координатам кнопки) */ :scope .menu[data-fixed]{position:fixed;right:auto;top:0;left:0} /* заголовок инспектора: строка мета/навигации, ниже — название по словам на всю ширину */ :scope .inspector-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--panel-padding) var(--space-3)} :scope .inspector-head h2{grid-row:2;grid-column:1/-1;overflow-wrap:break-word;hyphens:manual} :scope .inspector-head .meta{grid-row:1;grid-column:1;min-width:0;white-space:normal} :scope .inspector-head .inspector-nav{grid-row:1;grid-column:2} /* числа, ожидающие пересчёта сервером (B24): вместо устаревших — «обновляется…» */ :scope [data-live][data-updating]{position:relative;color:transparent!important} :scope [data-live][data-updating] *{color:transparent!important;border-color:transparent!important} :scope [data-live][data-updating]::after{content:"обновляется…";position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--text-muted);font:var(--type-caption);white-space:nowrap} :scope .live-status{font:var(--type-caption);color:var(--text-muted)} /* телефон: настольный маршрут — меню за кнопкой, контекст одной строкой, лист контекста */ :scope .ctx-summary,:scope .ctx-sheet-controls{display:none} :scope .ctx-sheet-controls{flex-direction:column;align-items:stretch;gap:var(--space-5)} :scope .ctx-sheet-controls .pill,:scope .ctx-sheet-controls .stepper{width:100%;justify-content:space-between} :scope .ctx-sheet-gap{margin-top:var(--space-6)} :scope .ctx-sum{display:flex;flex-direction:column;align-items:flex-start;line-height:16px;text-align:left} :scope .ctx-sum small{font:var(--type-caption);color:var(--text-muted)} :scope .modal-body .ctx-sheet-controls{display:flex} @media (max-width:767px){ :scope .sidebar{visibility:hidden;transition:transform var(--duration-base) var(--ease-standard),visibility 0s linear var(--duration-base)} :scope .sidebar.is-open{visibility:visible;transition-delay:0s} :scope .iconbtn.nav-toggle{width:44px;height:44px} :scope .link,:scope .incomplete,:scope .drill,:scope .overdue,:scope .strip-kv-link,:scope .th-link,:scope .row-link,:scope .strip-value{min-height:44px} :scope .strip-value.drill{display:flex;align-items:center} :scope .table th .th-sort{min-height:44px} } :scope .count[data-live][data-updating]{min-width:2ch} :scope .count[data-live][data-updating]::after{content:"…";left:50%;transform:translate(-50%,-50%)} @media (max-width:767px){:scope .table-wrap{overflow-x:auto;scrollbar-width:thin}} :scope .pay-text .a{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word} :scope .pay-text .c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :scope .pay-text .c .cp,:scope .pay-text .c .ent{white-space:nowrap} /* «в работе» — ожидание, не тревога (янтарь — только проверить / неполно / рост расхода) */ :scope .stage.is-current .stage-bar{background:var(--border-emphasis)} :scope .stage.is-current .stage-head .ic{color:var(--text-muted)} /* «Влияние на деньги» — таблица-врезка без своей карточки: волосяные линии на листе заявки (P3, без карточки в карточке) */ :scope .impact{border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;background:transparent;overflow:hidden} :scope .impact-in>div{padding-left:var(--space-6);padding-right:var(--space-6)} :scope .impact-in>div:first-child{padding-left:0} :scope .rep-warn{color:var(--warning)} :scope .rep-warn .k{color:inherit} :scope .report-table tr.is-memo th,:scope .report-table tr.is-memo td{color:var(--text-muted);font-style:normal} :scope .report-table tr.is-memo th.rep-first{font-weight:400} :scope .report--nototal .report-table{--rep-total:0px} :scope .rep-kop-note{margin:0;padding:var(--space-4) var(--panel-padding) var(--space-5);font:var(--type-caption);color:var(--text-muted)} @media (max-width:767px){ :scope .report{--rep-base:0px} :scope .report-table .rep-base,:scope .report-table col.c-base{display:none} /* телефон: база и изменение — на столе; итог остаётся закреплённым справа */ } /* список рядом с карточкой: таблица помещается без горизонтальной прокрутки — минимальная ширина снимается, вторичные колонки скрыты */ :scope .split-view[data-inspector-mode=side][data-open] .table-scroll>.table-wrap>.table{min-width:0} :scope .panel-split--cols{grid-template-columns:var(--split-cols)} :scope .panel-head--queue{padding-bottom:10px} :scope .row--roomy{gap:var(--space-5)} :scope .bar i{width:var(--w,100%)} :scope .split-view[data-inspector-mode=side][data-open] .table col{width:var(--col-w-split,var(--col-w,auto))} :scope .acc-name{overflow-wrap:break-word;hyphens:manual} /* сегменты и вкладки на узком экране прокручиваются, а не режут счётчики */ @media (max-width:767px){ :scope .seg,:scope .tabs{overflow-x:auto;scrollbar-width:none;max-width:100%} :scope .seg button,:scope .tab{flex:none} :scope .fra-fact{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)} :scope .line-row-main{min-width:0} :scope .line-row-main .a,:scope .line-row-main .c{overflow-wrap:anywhere;white-space:normal} /* карточка — нижний лист; затемнение даёт тень листа */ :scope .inspector[data-mode=drawer]{top:auto;left:0;right:0;bottom:0;width:100%;max-height:90vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-sheet-backdrop)} :scope .scrim{display:none} /* очереди: ранг + текст, сумма и срок — под текстом */ :scope .row-list .queue-row{grid-template-columns:max-content minmax(0,1fr)} :scope .row-list .queue-row>.queue-cell:nth-child(n+3){grid-column:2} :scope .queue-side{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:var(--space-2) var(--space-5)} } /* календарь: от 600 px сетка месяца, на телефоне — список дней с платежами */ :scope .cal-full{display:none} @media (max-width:599px){ :scope .cal-dows{display:none} :scope .cal-grid{grid-template-columns:minmax(0,1fr)} :scope .cal-day{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);min-height:44px;border-right:0;padding:var(--space-4) var(--layout-gutter)} :scope .cal-day:not(:has(.cal-sum)):not(.is-today):not(.is-min){display:none} :scope .cal-n{display:none} :scope .cal-full{display:inline;font:var(--type-label);font-weight:600} :scope .cal-day .cal-sum{margin-left:auto} } /* плашки переносятся по словам: слово серьёзности и дата не усекаются */ :scope .flag>span:not(.ic):not(.flag-go){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word} @media (max-width:767px){ :scope .todo-row .fra,:scope .fra{grid-template-columns:20px minmax(0,1fr)} :scope .fra-action,:scope .todo-row .fra-action{grid-column:2;grid-row:auto;align-self:start;margin-top:var(--space-3)} :scope .src-tag{white-space:normal} :scope .field-row dd{min-width:0;overflow-wrap:anywhere} :scope .itot{white-space:normal;padding-left:0;padding-right:var(--space-5);border-left:0} :scope .inline-totals{gap:var(--space-2) 0} :scope .overdue-title{white-space:normal;overflow:visible;text-overflow:clip} } @media (max-width:399px){:scope .strip-value--large{font:var(--type-page-title);letter-spacing:0}} @media (max-width:599px){ :scope .strip,:scope .strip.strip--stack{grid-template-columns:minmax(0,1fr)} :scope .strip-cell:first-child{grid-column:auto} :scope .strip-cell:nth-child(2n){border-left:0} } :scope .overdue-title small{white-space:normal} @media (max-width:767px){:scope .panel-meta{white-space:normal;overflow:visible;text-overflow:clip}} @media (max-width:767px){:scope .field-row dd .link,:scope .field-row dd a{white-space:normal}} @media (max-width:767px){ :scope .page-head,:scope .page-head-actions{flex-wrap:wrap} :scope .page-head-actions{width:100%;gap:var(--space-4)} :scope .ctx-summary{white-space:normal;height:auto;min-height:44px} :scope .ctx-sum small{white-space:normal} } :scope .th-nowrap{white-space:nowrap} @media (max-width:767px){:scope .report-table thead th.rep-total{white-space:normal;line-height:15px}} /* N10: дата строки видна, когда реестр отсортирован не по дате (заголовки дней исчезают) */ :scope .col-sort-only{display:none} :scope .table[data-sorted] td.col-sort-only,:scope .table[data-sorted] th.col-sort-only{display:table-cell} :scope .table[data-sorted] col.col-sort-only{display:table-column} /* меню на телефоне — модальный диалог: кнопка закрытия, затемнение тенью самого меню */ :scope .sidebar-close{display:none} @media (max-width:767px){ :scope .sidebar-close{display:grid;align-self:flex-end;margin-bottom:var(--space-2)} :scope .sidebar.is-open{box-shadow:var(--shadow-sheet-backdrop)} } /* график: красной подписи того же значения рядом с красной фразой не бывает (P5 — один красный блок на факт) */ :scope .ch-note--neg{fill:var(--text-primary)} /* таблица-стопка: до 600 px строка = заголовок и сумма в первой строке, остальное — второй строкой; сумма видна без прокрутки вбок */ @media (max-width:899px){ :scope .table-scroll>.table-wrap>.table.table--stack,:scope .table--stack{min-width:0} :scope .table--stack{display:block;table-layout:auto} :scope .table--stack colgroup{display:none} :scope .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)} :scope .table--stack tbody{display:block} :scope .table--stack tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-5);row-gap:var(--space-2);padding:var(--space-4) var(--layout-gutter);border-top:1px solid var(--border);height:auto} :scope .table--stack td{display:none;height:auto;padding:0;border:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:20px;max-width:none} :scope .table--stack td[data-ph]{display:block} :scope .table--stack td[data-ph=title]{grid-column:1;grid-row:1;font-weight:500;overflow-wrap:anywhere} :scope .table--stack td[data-ph=amount]{grid-column:2;grid-row:1;text-align:right;white-space:nowrap} :scope .table--stack td[data-ph=sub]{grid-column:1/-1;font:var(--type-caption);color:var(--text-muted)} :scope .table--stack td[data-ph][data-label]::before{content:attr(data-label) ": ";color:var(--text-subtle)} :scope .table--stack:not([data-sorted]) td.col-sort-only{display:none} :scope .table--stack tr.group-row{display:block;padding:0} :scope .table--stack tr.group-row td{display:none;height:auto;padding:var(--space-3) var(--layout-gutter);line-height:20px} :scope .table--stack tr.group-row td:not(.col-optional):not(.col-sort-only):not(:empty){display:block} :scope .table--stack td .row-link{display:block;min-height:0} } @media (max-width:899px){ :scope .table--stack td[data-ph=title]{overflow-wrap:break-word} :scope .table--stack .cell-who{display:block} :scope .table--stack .cell-purpose{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font:var(--type-caption);color:var(--text-muted)} } @media (max-width:899px){ :scope .ctxbar{flex-wrap:nowrap;height:var(--layout-ctxbar-h);min-height:0;padding-top:0;padding-bottom:0;gap:var(--space-4)} :scope .ctxbar .ctx-group{display:none} :scope .ctxbar .ctx-summary{display:inline-flex;height:44px;min-width:0;flex:1 1 auto;max-width:calc(100% - 112px);justify-content:space-between} :scope .ctxbar .spacer{display:none} :scope .ctx-primary .btn{width:44px;height:44px;padding:0;justify-content:center} :scope .ctx-primary .btn-label,:scope .ctx-primary .btn .ic:last-child{display:none} } @media (min-width:1800px){ :scope .report--base-stack .report-table td.rep-base{white-space:normal;line-height:16px;height:44px} :scope .report--base-stack .report-table td.rep-base .rep-delta-wrap{display:block;margin-left:0} } @media (min-width:1800px){:scope .report--base-stack .report-table thead th.rep-base{white-space:normal;line-height:14px}:scope .report--base-stack .report-table thead th.rep-base small{white-space:normal}} }