/* ============================================================================
«Сборник» – тема интерфейса поверх Bootstrap 5.3.8
Подключать ПОСЛЕ bootstrap.min.css (и после tom-select.bootstrap5.min.css,
если он нужен на странице):
затем css/doc.css, css/editor-core.css, css/template.css и все css/area-*.css
(порядок задаёт views/layout.php).
Правила темы – единый визуальный код (scratchpad/audit/UI-KIT.md)
• Bootstrap даёт сетку, кнопки, поля, меню, выезжающую панель, окна,
всплывающие сообщения. Здесь он перекрашен только через переменные
--bs-* и переменные самих компонентов (--bs-btn-*, --bs-card-* …).
• Всё своё начинается с «sb-» (Сборник) – с Bootstrap не пересекается.
• Фон страницы #ececec, рабочие блоки – белые карточки без теней.
Тень есть только у выпадающих меню, окон, всплывающих сообщений,
перетаскиваемой строки и прилипающих панелей действий.
• Бирюзовый СПбГЭУ: главная кнопка, ссылки, активный пункт; #028c90 –
только не-текст (кольцо фокуса, точки). Красный – только ошибка.
• Состояние = цветная точка + слово. Никаких «таблеток», градиентов,
цветных полос сбоку, эмодзи, жёлтых подложек.
• Размеры текста – только 20 / 17 / 15 / 14 / 13 px (поля на телефоне –
16 px, иначе iOS увеличивает страницу при вводе).
• Скругления – только 5 px (поля, кнопки) и 6 px (карточки, плашки, окна,
меню, сообщения); круг – только точки, аватарки, счётчики.
• Поля и кнопки – 34 px на компьютере, 44 px на телефоне и планшете.
• Отступы: в карточке 20 px, между карточками 16 px, между полями 14 px,
подпись → поле 4 px. Строки списков и таблиц – от 40 px.
• Ссылки без подчёркивания; подчёркнуты только ссылки внутри текста
(плашки, подсказки, .sb-prose). Рамка фокуса – только с клавиатуры.
• Ничего не прыгает: сообщения сервера и всплывающие – поверх страницы,
место под то, что дорисовывается после загрузки, занято заранее.
========================================================================== */
/* ------------------------------------------------------------- 1. Шрифт -- */
/* ------------------------------------------------------------ 2. Токены -- */
:root, [data-bs-theme=light] {
/* поверхности и линии */
--sb-page: #ececec; /* фон страницы – как в личном кабинете СПбГЭУ */
--sb-surface: #ffffff; /* карточки, поля, меню */
--sb-surface-2: #f6f7f8; /* подложка внутри карточки */
--sb-line: #dde1e5; /* разделители и рамки карточек */
--sb-line-2: #d2d7dc; /* рамки кнопок и полей */
--sb-field: #8b959f; /* рамка поля: 3 : 1 на белом */
/* текст */
--sb-ink: #404344; /* основной текст – как в ЛК: 10 : 1 */
--sb-ink-2: #4e5861; /* пояснения: 7,4 : 1 */
--sb-muted: #626c76; /* второстепенное: 5,3 : 1 на белом */
/* СПбГЭУ */
--sb-brand: #028c90; /* только не-текст: фокус, точки, перетаскивание */
--sb-brand-600: #017b80; /* главная кнопка – прежняя бирюза */
--sb-brand-700: #016a6f; /* наведение, ссылки, шапка */
--sb-brand-800: #01555a; /* нажатие, текст на светло-бирюзовом */
--sb-brand-50: #edf7f7;
--sb-brand-100: #d3ebeb;
--sb-brand-200: #a6d4d5;
/* смысловые цвета: подложка / рамка / текст / значок */
--sb-warn-bg: #f7f7f5; --sb-warn-line: #dedcd5; --sb-warn-ink: #404344; --sb-warn-icon: #a86a00;
--sb-bad-bg: #fcf3f2; --sb-bad-line: #ecc9c5; --sb-bad-ink: #9f1d17; --sb-bad-icon: #c4342b;
--sb-ok-bg: #f4f8f6; --sb-ok-line: #d3e3da; --sb-ok-ink: #24563a; --sb-ok-icon: #23854a;
--sb-info-bg: #f6f7f8; --sb-info-line: #dde1e5; --sb-info-ink: #404344; --sb-info-icon: #017b80;
/* размеры */
--sb-header-h: 60px;
--sb-side-w: 252px;
--sb-wrap-max: 1248px; /* студент и руководитель: колонка по центру */
--sb-main-max: 72rem; /* администратор и руководитель: колонка списков и таблиц (по центру) */
--sb-col: 56rem; /* студент, редактор, статья: колонка по центру */
--sb-pad: 1.25rem; /* внутренний отступ карточки – 20 px */
--sb-gap: 1rem; /* расстояние между карточками – 16 px */
--sb-row-line: #eef0f2; /* разделитель строк списков и таблиц */
--sb-gutter: 1.5rem; /* боковое поле страницы */
--sb-radius: .3125rem; /* поля и кнопки – 5 px, как в ЛК */
--sb-radius-lg: .375rem; /* карточки */
--sb-shadow-pop: 0 8px 24px rgba(15, 36, 48, .14);
--sb-shadow-bar: 0 -6px 18px rgba(15, 36, 48, .08);
--sb-focus: 0 0 0 .25rem rgba(2, 140, 144, .28);
--sb-paper-font: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
/* Bootstrap. --bs-body-bg остаётся белым: Bootstrap красит им поля, меню,
окна и выезжающую панель. Серый фон задаётся только у body. */
--bs-font-sans-serif: Helvetica, Arial, sans-serif; /* как в личном кабинете СПбГЭУ */
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: .875rem; /* 14 px, как в ЛК */
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #404344; --bs-body-color-rgb: 64, 67, 68;
--bs-body-bg: #ffffff; --bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #161d22; --bs-emphasis-color-rgb: 22, 29, 34;
--bs-heading-color: #2f3233;
--bs-secondary-color: #626c76; --bs-secondary-color-rgb: 98, 108, 118;
--bs-secondary-bg: #e7eaed; --bs-secondary-bg-rgb: 231, 234, 237;
--bs-tertiary-color: #626c76;
--bs-tertiary-bg: #f6f7f8; --bs-tertiary-bg-rgb: 246, 247, 248;
--bs-primary: #017b80; --bs-primary-rgb: 1, 123, 128;
--bs-primary-text-emphasis: #01464a; --bs-primary-bg-subtle: #e8f4f4; --bs-primary-border-subtle: #a6d4d5;
--bs-success: #1f7a44; --bs-success-rgb: 31, 122, 68;
--bs-success-text-emphasis: #18603a; --bs-success-bg-subtle: #e9f5ed; --bs-success-border-subtle: #b9dcc5;
--bs-danger: #b42318; --bs-danger-rgb: 180, 35, 24;
--bs-danger-text-emphasis: #9f1d17; --bs-danger-bg-subtle: #fdeeec; --bs-danger-border-subtle: #f1c4bf;
--bs-warning: #b06a00; --bs-warning-rgb: 176, 106, 0;
--bs-warning-text-emphasis: #404344; --bs-warning-bg-subtle: #f7f7f5; --bs-warning-border-subtle: #dedcd5;
--bs-info: #2b679f; --bs-info-rgb: 43, 103, 159;
--bs-info-text-emphasis: #1d4061; --bs-info-bg-subtle: #edf3f8; --bs-info-border-subtle: #c8d9e8;
--bs-link-color: #016a6f; --bs-link-color-rgb: 1, 106, 111;
--bs-link-hover-color: #01555a; --bs-link-hover-color-rgb: 1, 85, 90;
--bs-link-decoration: none;
--bs-code-color: #242c33;
--bs-highlight-color: #242c33; --bs-highlight-bg: #ffe9a8;
--bs-border-color: #dde1e5;
--bs-border-color-translucent: rgba(22, 29, 34, .13);
--bs-border-radius: .3125rem; --bs-border-radius-sm: .25rem; --bs-border-radius-lg: .375rem; --bs-border-radius-xl: .375rem;
--bs-box-shadow: 0 8px 24px rgba(15, 36, 48, .14);
--bs-box-shadow-sm: none;
--bs-focus-ring-width: .25rem; --bs-focus-ring-opacity: .28; --bs-focus-ring-color: rgba(2, 140, 144, .28);
--bs-form-valid-color: #18603a; --bs-form-valid-border-color: #23854a;
--bs-form-invalid-color: #9f1d17; --bs-form-invalid-border-color: #c4342b;
}
/* -------------------------------------------------------------- 3. База -- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
background-color: var(--sb-page); /* серый только здесь, см. --bs-body-bg */
min-height: 100vh; display: flex; flex-direction: column;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
font-kerning: normal; overflow-wrap: break-word;
}
b, strong { font-weight: 600; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 700; letter-spacing: 0; text-wrap: balance; }
h1, .h1 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: 0; margin-bottom: .5rem; }
h2, .h2 { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; margin-bottom: .5rem; }
h3, .h3 { font-size: .9375rem; line-height: 1.4; font-weight: 700; margin-bottom: .375rem; }
h4, .h4 { font-size: .875rem; line-height: 1.4; font-weight: 700; margin-bottom: .25rem; }
p { margin-bottom: .75rem; }
p:last-child { margin-bottom: 0; }
/* Ссылки без подчёркивания: в списках, меню, строках сведений, названиях – только цвет
(Bootstrap 5.3 подчёркивает все – снимаем). Подчёркивание – при наведении и у ссылок
внутри текста: плашки, подсказки под полями, сообщения, блоки .sb-prose, a.sb-inline. */
a { text-decoration: none; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
a.sb-inline, .sb-prose a, .sb-notice-body a, .form-text a, .invalid-feedback a, .sb-summary a, .sb-field-todo a, .modal-body p a, .alert .sb-flash-text a {
text-decoration: underline; text-decoration-color: rgba(1, 106, 111, .45);
}
a.sb-inline:hover, .sb-prose a:hover, .sb-notice-body a:hover, .form-text a:hover, .sb-summary a:hover, .modal-body p a:hover { text-decoration-color: currentColor; }
::selection { background: #bfe2e3; }
:focus-visible { outline: 3px solid var(--sb-brand); outline-offset: 2px; }
.small, small { font-size: .8125rem; }
mark, .mark { padding: 0 .125em; border-radius: 0; }
kbd {
display: inline-block; padding: .0625rem .4375rem; border-radius: .375rem; font-family: var(--bs-font-sans-serif);
font-size: .8125rem; font-weight: 600; line-height: 1.5; color: var(--sb-ink); background: #fff;
border: 1px solid var(--sb-line-2); border-bottom-width: 2px; white-space: nowrap; vertical-align: .0625em;
}
hr { border-color: var(--sb-line); opacity: 1; margin: 1.5rem 0; }
.sb-ic { width: 1.25rem; height: 1.25rem; flex: none; }
.sb-ic-sm { width: 1.125rem; height: 1.125rem; }
.sb-ic-lg { width: 1.5rem; height: 1.5rem; }
.sb-num { font-variant-numeric: tabular-nums; }
.sb-muted { color: var(--sb-muted); }
.sb-ink-2 { color: var(--sb-ink-2); }
.sb-text-ok { color: var(--sb-ok-ink); }
.sb-text-warn { color: var(--sb-warn-ink); }
.sb-text-bad { color: var(--sb-bad-ink); }
.sb-measure { max-width: 46rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }
/* ----------------------------------------------------------- 4. Кнопки -- */
.btn {
--bs-btn-padding-x: .875rem; --bs-btn-padding-y: .3125rem;
--bs-btn-font-size: .875rem; --bs-btn-font-weight: 700; --bs-btn-line-height: 1.2;
--bs-btn-border-radius: var(--sb-radius); --bs-btn-border-width: 1px;
--bs-btn-focus-box-shadow: var(--sb-focus);
--bs-btn-disabled-opacity: 1;
min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
text-align: center; text-wrap: balance;
}
.btn > .sb-ic { margin-left: -.125rem; }
/* Высота у всех кнопок одна (34 px): «крупная» и «мелкая» отличаются только боковым отступом */
.btn-lg {
--bs-btn-padding-x: 1.125rem; --bs-btn-padding-y: .3125rem; --bs-btn-font-size: .875rem;
--bs-btn-border-radius: var(--sb-radius); min-height: 34px;
}
.btn-sm {
--bs-btn-padding-x: .625rem; --bs-btn-padding-y: .3125rem; --bs-btn-font-size: .875rem;
--bs-btn-border-radius: var(--sb-radius); min-height: 34px; gap: .3125rem;
}
/* 1. Главное действие экрана – одно */
.btn-primary {
--bs-btn-color: #fff; --bs-btn-bg: #017b80; --bs-btn-border-color: #017b80;
--bs-btn-hover-color: #fff; --bs-btn-hover-bg: #016a6f; --bs-btn-hover-border-color: #016a6f;
--bs-btn-active-color: #fff; --bs-btn-active-bg: #01555a; --bs-btn-active-border-color: #01555a;
--bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #7fb3b5; --bs-btn-disabled-border-color: #7fb3b5;
--bs-btn-focus-shadow-rgb: 2, 140, 144;
}
/* 2. Второе действие – спокойная белая кнопка с серой рамкой: бирюзовой на экране остаётся
только главная кнопка, как в прежней версии */
.btn-outline-primary {
--bs-btn-color: #384249; --bs-btn-bg: #fff; --bs-btn-border-color: #d2d7dc;
--bs-btn-hover-color: #161d22; --bs-btn-hover-bg: #f4f5f7; --bs-btn-hover-border-color: #b6bec6;
--bs-btn-active-color: #161d22; --bs-btn-active-bg: #e7eaed; --bs-btn-active-border-color: #8b959f;
--bs-btn-disabled-color: #626c76; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #dfe3e7;
--bs-btn-focus-shadow-rgb: 2, 140, 144;
box-shadow: 0 1px 1px rgba(22, 29, 34, .04);
}
.btn-outline-primary > .sb-ic { color: #626c76; }
.btn-outline-primary:hover > .sb-ic { color: #384249; }
/* выбранный вариант в группе переключателей – бирюзовый */
.btn-check:checked + .btn-outline-primary { --bs-btn-active-bg: #edf7f7; --bs-btn-active-color: #01555a; --bs-btn-active-border-color: #017b80; }
.btn-check:checked + .btn-outline-primary > .sb-ic { color: #017b80; }
/* Кнопка-поле: рядом с полями ввода («Показать») – рамка как у поля, спокойный тёмный текст */
.btn-sb-field {
--bs-btn-color: #384249; --bs-btn-bg: #fff; --bs-btn-border-color: #c3c9cf;
--bs-btn-hover-color: #161d22; --bs-btn-hover-bg: #f4f5f7; --bs-btn-hover-border-color: #9aa3ab;
--bs-btn-active-color: #161d22; --bs-btn-active-bg: #e7eaed; --bs-btn-active-border-color: #8b959f;
--bs-btn-disabled-color: #626c76; --bs-btn-disabled-bg: #f6f8f9; --bs-btn-disabled-border-color: #dfe3e7;
}
/* 3. Третье действие – текстом, без рамки и без подчёркивания («Чат», «Отменить», «Прочитать все») */
.btn-sb-quiet {
--bs-btn-color: #016a6f; --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
--bs-btn-hover-color: #01464a; --bs-btn-hover-bg: #eef5f5; --bs-btn-hover-border-color: transparent;
--bs-btn-active-color: #01464a; --bs-btn-active-bg: #e2efef; --bs-btn-active-border-color: transparent;
--bs-btn-padding-x: .75rem;
text-decoration: none;
}
.btn-sb-quiet:hover { text-decoration: none; }
/* Опасное действие: в меню и окне подтверждения */
.btn-danger {
--bs-btn-color: #fff; --bs-btn-bg: #b42318; --bs-btn-border-color: #b42318;
--bs-btn-hover-color: #fff; --bs-btn-hover-bg: #9a1d14; --bs-btn-hover-border-color: #9a1d14;
--bs-btn-active-bg: #85150f; --bs-btn-active-border-color: #85150f; --bs-btn-focus-shadow-rgb: 196, 52, 43;
}
.btn-outline-danger {
--bs-btn-color: #9f1d17; --bs-btn-bg: #fff; --bs-btn-border-color: #c4342b;
--bs-btn-hover-color: #85150f; --bs-btn-hover-bg: #fdeeec; --bs-btn-hover-border-color: #9f1d17;
--bs-btn-active-color: #85150f; --bs-btn-active-bg: #f9dcd8; --bs-btn-active-border-color: #85150f;
--bs-btn-focus-shadow-rgb: 196, 52, 43;
}
/* число на кнопке: «Чат с руководителем 1» */
.sb-count {
display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem;
padding: 0 .4375rem; border-radius: 999px; background: #016a6f; color: #fff;
font-size: .8125rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.btn-primary .sb-count { background: #fff; color: #016a6f; }
/* ссылка-кнопка: действие внутри текста или строки, зона нажатия 44 px */
.sb-link-btn {
display: inline-flex; align-items: center; gap: .375rem; min-height: 32px; padding: 0; border: 0; background: none;
font-weight: 500; color: var(--sb-brand-700); text-align: left;
}
.sb-link-btn:hover { color: var(--sb-brand-800); text-decoration: underline; }
/* выбор из двух-трёх вариантов: Bootstrap .btn-check + .btn-outline-primary в .sb-choice */
.sb-choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.sb-choice .btn { flex: 1 1 12rem; }
.sb-choice .btn-check:checked + .btn { --bs-btn-active-bg: #e8f4f4; --bs-btn-active-color: #01464a; --bs-btn-active-border-color: #016a6f; box-shadow: inset 0 0 0 1px #016a6f; }
/* ------------------------------------------------------------- 5. Поля -- */
.form-label { display: block; font-weight: 700; color: var(--sb-ink); margin-bottom: .25rem; line-height: 1.4; }
.sb-opt { font-weight: 400; color: var(--sb-muted); } /* «– необязательно» */
.sb-req { color: var(--sb-bad-ink); font-weight: 600; margin-left: .125rem; } /* «*» – только если обязательных меньшинство */
.form-control, .form-select {
min-height: 34px; padding: .3125rem .625rem; font-size: .875rem; font-weight: 400; line-height: 1.4; color: var(--sb-ink);
background-color: #fff; border: 1px solid #c3c9cf; border-radius: var(--sb-radius);
transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: #9aa3ab; }
.form-select { padding-right: 2.25rem; background-position: right .75rem center; background-size: 14px 10px; }
.form-control::placeholder { color: #8a949d; opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--sb-brand); box-shadow: var(--sb-focus); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--sb-surface-2); color: var(--sb-ink-2); }
textarea.form-control { min-height: 72px; resize: vertical; line-height: 1.5; }
/* поле растёт вместе с текстом (название, аннотация, сообщение в чате) */
textarea.sb-autosize { field-sizing: content; resize: none; overflow: hidden; min-height: 34px; }
textarea.sb-autosize[rows="3"] { min-height: 4.75rem; }
textarea.sb-autosize[rows="4"] { min-height: 6rem; }
/* «мелкие» поля – той же высоты, что все поля: на одной странице поля не разной высоты */
.form-control-sm, .form-select-sm { min-height: 34px; padding-top: .3125rem; padding-bottom: .3125rem; font-size: .875rem; border-radius: var(--sb-radius); }
.form-select-sm { padding-left: .625rem; padding-right: 2.25rem; background-position: right .75rem center; }
.form-text { font-size: .8125rem; color: var(--sb-muted); margin-top: .25rem; }
.form-check { min-height: 1.75rem; padding-left: 2.125rem; margin-bottom: 0; }
.form-check .form-check-input { margin-left: -2.125rem; }
.form-check-input { width: 1.375rem; height: 1.375rem; margin-top: .0625rem; border: 1.5px solid var(--sb-field); background-color: #fff; }
.form-check-input[type=checkbox] { border-radius: .3125rem; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: #016a6f; border-color: #016a6f; }
.form-check-input:focus { border-color: var(--sb-field); box-shadow: none; }
.form-check-input:checked:focus { border-color: #016a6f; }
.form-check-input:focus-visible { border-color: var(--sb-brand); box-shadow: var(--sb-focus); }
.form-check-label { cursor: pointer; }
.form-switch { padding-left: 3.5rem; min-height: 1.75rem; }
.form-switch .form-check-input { width: 2.75rem; height: 1.5rem; margin-left: -3.5rem; margin-top: 0; border-radius: var(--sb-radius-lg); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23028c90'/%3e%3c/svg%3e"); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sb-bad-icon); background-image: none; padding-right: 1rem; }
.invalid-feedback { font-size: .875rem; color: var(--sb-bad-ink); margin-top: .5rem; }
/* ещё не заполнено – спокойный жёлтый, а не красная ошибка */
.form-control.sb-todo, .form-select.sb-todo { border-color: #a0a0a0; background-color: #fff; }
.sb-field-todo { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; font-size: .875rem; line-height: 1.45; color: var(--sb-warn-ink); }
.sb-field-todo > .sb-ic { color: var(--sb-warn-icon); width: 1.125rem; height: 1.125rem; margin-top: .125rem; }
.sb-field { margin-bottom: .875rem; } /* между полями – 14 px */
.sb-field:last-child { margin-bottom: 0; }
.sb-field-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .25rem; }
.sb-field-head .form-label { margin: 0; }
.sb-counter { font-size: .8125rem; color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-counter.is-short { color: var(--sb-warn-ink); font-weight: 500; }
.sb-counter.is-ok { color: var(--sb-ok-ink); }
.sb-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; min-height: 34px; padding: .3125rem .625rem; border-radius: var(--sb-radius); background: var(--sb-surface-2); border: 1px solid var(--sb-line); }
.sb-search { position: relative; }
.sb-search > .sb-ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--sb-muted); pointer-events: none; }
.sb-search > .form-control { padding-left: 2.875rem; }
.input-group > .btn-sb-field { min-width: 7.5rem; }
.input-group > .form-control:focus { z-index: 5; }
.sb-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--sb-line); }
.sb-form-actions .sb-form-actions-end { margin-left: auto; }
/* поле выбора файла – той же высоты, что остальные поля; кнопка внутри – спокойная серая */
input[type=file].form-control { padding: .3125rem .625rem; line-height: 1.4; }
input[type=file].form-control::file-selector-button { margin: -.3125rem .625rem -.3125rem -.625rem; padding: .3125rem .75rem; border: 0; border-right: 1px solid var(--sb-line-2); background: var(--sb-surface-2); color: var(--sb-ink); font-weight: 600; }
/* ---------------------------------------------------------- 6. Карточки -- */
.card {
--bs-card-spacer-y: var(--sb-pad); --bs-card-spacer-x: var(--sb-pad);
--bs-card-border-color: var(--sb-line); --bs-card-border-radius: var(--sb-radius-lg);
--bs-card-inner-border-radius: calc(var(--sb-radius-lg) - 1px);
--bs-card-bg: #fff; --bs-card-cap-bg: #fff; --bs-card-cap-padding-y: .875rem; --bs-card-cap-padding-x: var(--sb-pad);
--bs-card-title-spacer-y: .75rem; --bs-card-color: var(--sb-ink);
}
.card > .card-body + .card-body { border-top: 1px solid var(--sb-line); }
/* карточки на странице идут столбиком с одинаковым шагом */
.sb-content .card { margin-bottom: var(--sb-gap); }
.sb-content .card:last-child, .sb-content .card .card { margin-bottom: 0; }
.sb-card-title { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; margin: 0; }
.sb-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .5rem; }
.sb-card-head > :is(h2, h3) { margin: 0; }
.sb-card-head-note { color: var(--sb-muted); }
.sb-card-lead { color: var(--sb-ink-2); max-width: 46rem; margin-bottom: .75rem; }
.sb-card-foot { margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--sb-line); color: var(--sb-ink-2); font-size: .8125rem; }
/* ----------------------------------------------- 7. Шапка и раскладка -- */
.sb-skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; }
.sb-header { background: #016a6f; border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .14); position: sticky; top: 0; z-index: 1030; padding-top: env(safe-area-inset-top); color: #fff; }
.sb-header-inner { height: var(--sb-header-h); display: flex; align-items: center; gap: .75rem; padding: 0 var(--sb-gutter); max-width: var(--sb-wrap-max); margin: 0 auto; }
.sb-has-side .sb-header-inner { max-width: none; }
.sb-brand { display: flex; align-items: center; gap: .625rem; min-width: 0; color: #fff; text-decoration: none; border-radius: var(--sb-radius); padding: .25rem .5rem; margin-left: -.5rem; }
.sb-brand:hover, .sb-brand:active, .sb-brand:focus { color: #fff; text-decoration: none; background: none; box-shadow: none; }
.sb-brand img { width: auto; height: 40px; flex: none; }
.sb-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sb-brand-text b { font-size: 1.0625rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.sb-brand-text small { font-size: .8125rem; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.sb-header-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.sb-icon-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-width: 44px; height: 44px; padding: 0 .625rem; border: 0; border-radius: var(--sb-radius); background: transparent;
color: var(--sb-ink-2); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.sb-icon-btn:hover, .sb-icon-btn[aria-expanded=true] { background: var(--sb-page); color: var(--sb-ink); text-decoration: none; }
/* в бирюзовой шапке – белые */
.sb-header .sb-icon-btn { color: #fff; opacity: .75; height: 40px; min-width: 40px; border-radius: 0; }
.sb-header .sb-icon-btn:hover, .sb-header .sb-icon-btn[aria-expanded=true] { opacity: 1; background: none; }
/* как в ЛК: «Вы: Фамилия И.О.», дальше значки через тонкие белые линии */
.sb-header-who { color: #fff; padding-right: .5rem; white-space: nowrap; }
.sb-header-who b { font-weight: 700; }
/* значки – ровным рядом, без разделительных линий */
.sb-header-actions { gap: .5rem; }
.sb-header-who { margin-right: .5rem; }
.sb-header .sb-icon-btn:hover, .sb-header .sb-icon-btn[aria-expanded=true] { background: rgba(255, 255, 255, .12); color: #fff; }
.sb-header .sb-icon-btn:focus-visible, .sb-header .sb-brand:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: none; }
.sb-icon-btn > .sb-ic { width: 1.375rem; height: 1.375rem; }
.sb-icon-btn .sb-bell-count {
position: absolute; top: 3px; left: 24px; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; border-radius: .625rem;
background: #c4342b; color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.25rem; text-align: center;
box-shadow: 0 0 0 2px #016a6f; font-variant-numeric: tabular-nums;
}
.sb-header-user { color: #fff; }
.sb-header-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .28); margin: 0 .25rem; }
.sb-wrap { width: 100%; max-width: var(--sb-wrap-max); margin: 0 auto; padding: 2rem var(--sb-gutter) 3.5rem; flex: 1 0 auto; }
.sb-shell { display: flex; flex: 1 0 auto; align-items: stretch; }
.sb-side { width: var(--sb-side-w); flex: none; background: #fff; border-right: 1px solid var(--sb-line); }
.sb-main { flex: 1; min-width: 0; padding: 2rem 2.5rem 3rem; }
/* администратор и руководитель: колонка 72rem по центру рабочей области (справа от меню) */
.sb-main > .sb-content { max-width: var(--sb-main-max); margin-inline: auto; }
.sb-footer { background: #404344; color: #fff; font-size: .875rem; }
.sb-footer a { color: #fff; }
.sb-footer-inner { max-width: var(--sb-wrap-max); margin: 0 auto; padding: 1rem var(--sb-gutter); min-height: 55px; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; justify-content: center; text-align: center; line-height: 1.6; }
.sb-has-side .sb-footer-inner { max-width: none; }
/* меню разделов: на компьютере колонка, на телефоне – Bootstrap offcanvas-lg */
.sb-nav-box { position: sticky; top: 0; padding: 1.5rem 1rem; }
.sb-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.sb-nav a {
display: flex; align-items: center; gap: .75rem; min-height: 40px; padding: .5rem .75rem; border-radius: var(--sb-radius);
color: var(--sb-ink); font-weight: 500; text-decoration: none;
}
.sb-nav a > .sb-ic { color: var(--sb-muted); }
.sb-nav a:hover { background: var(--sb-page); }
.sb-nav a.active { background: var(--sb-brand-50); color: var(--sb-brand-800); font-weight: 600; }
.sb-nav a.active > .sb-ic { color: var(--sb-brand-600); }
.sb-nav-count { margin-left: auto; font-size: .875rem; font-weight: 700; color: var(--sb-brand-700); font-variant-numeric: tabular-nums; }
.sb-nav-sep { height: 1px; background: var(--sb-line); margin: .75rem .875rem; }
.sb-nav a.sb-nav-more { align-items: flex-start; }
.sb-nav-more > span { display: flex; flex-direction: column; line-height: 1.35; }
.sb-nav-more small { color: var(--sb-muted); font-weight: 400; font-size: .8125rem; margin-top: .125rem; }
.offcanvas-lg, .offcanvas { --bs-offcanvas-width: min(320px, 86vw); --bs-offcanvas-bg: #fff; --bs-offcanvas-border-color: var(--sb-line); --bs-offcanvas-padding-x: 1.25rem; }
.offcanvas-header { min-height: var(--sb-header-h); border-bottom: 1px solid var(--sb-line); padding: 0 .75rem 0 1.25rem; }
.offcanvas-title { font-size: .9375rem; font-weight: 700; }
.sb-close {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
border: 0; border-radius: var(--sb-radius); background: transparent; color: var(--sb-ink-2);
}
.sb-close:hover { background: var(--sb-page); color: var(--sb-ink); }
@media (max-width: 991.98px) {
.sb-side { width: 0; border: 0; background: transparent; }
#sbSideNav .offcanvas-body { padding: 0; }
#sbSideNav .sb-nav-box { position: static; padding: 1rem .75rem; }
}
/* ----------------------------------------------- 8. Шапка страницы -- */
.sb-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.sb-page-head-main { flex: 1 1 28rem; min-width: 0; }
.sb-page-head h1 { margin-bottom: .5rem; }
.sb-page-head h1:last-child { margin-bottom: 0; }
.sb-lead { font-size: .9375rem; color: var(--sb-ink-2); margin: 0; max-width: 48rem; }
.sb-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sb-back { display: inline-flex; align-items: center; gap: .375rem; min-height: 32px; margin: -.25rem 0 .125rem; color: var(--sb-brand-600); font-weight: 500; }
/* «← назад» – мелко и серым, как раньше: не спорит с заголовком */
.sb-back { font-size: .8125rem; font-weight: 500; color: var(--sb-muted); text-decoration: none; }
.sb-back:hover { color: var(--sb-brand-700); text-decoration: underline; }
.sb-back > .sb-ic { width: 1.125rem; height: 1.125rem; }
/* строка сведений: каждая часть не рвётся внутри себя */
.sb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1.25rem; color: var(--sb-ink-2); margin-top: .75rem; }
.sb-meta > * { white-space: nowrap; }
.sb-summary { font-size: .9375rem; color: var(--sb-ink); margin: -.5rem 0 1.75rem; max-width: 56rem; }
.sb-save-state { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; font-size: .875rem; color: var(--sb-ok-ink); white-space: nowrap; }
.sb-save-state > .sb-ic { color: var(--sb-ok-icon); width: 1.125rem; height: 1.125rem; }
.sb-save-state.is-saving { color: var(--sb-muted); }
.sb-save-state.is-error { color: var(--sb-bad-ink); white-space: normal; }
/* -------------------------------------- 9. Состояние: точка + слово -- */
.sb-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: #34434c; line-height: 1.3; white-space: nowrap; }
.sb-status::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--sb-dot, #8493a0); flex: none; }
.sb-status[data-status=draft] { --sb-dot: #8493a0; color: #34434c; }
.sb-status[data-status=submitted] { --sb-dot: #2f6fc6; color: #1c4b8a; }
.sb-status[data-status=revision] { --sb-dot: #e08600; color: #7a4600; }
.sb-status[data-status=approved] { --sb-dot: #2a9a52; color: #18603a; }
.sb-status[data-status=accepted] { --sb-dot: #028c90; color: #01555a; }
.sb-status[data-status=rejected] { --sb-dot: #c4342b; color: #9f1d17; }
.sb-status[data-status=waiting] { --sb-dot: #e08600; color: #7a4600; } /* руководитель ждёт подтверждения */
.sb-status[data-status=blocked] { --sb-dot: #c4342b; color: #9f1d17; } /* вход закрыт */
/* ------------------------------------------ 10. Подсказки и замечания -- */
.sb-notice {
display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1.25rem; margin-bottom: var(--sb-gap);
border-radius: var(--sb-radius-lg); border: 1px solid var(--sb-info-line); background: var(--sb-info-bg); color: var(--sb-info-ink);
}
.sb-notice > .sb-ic { color: var(--sb-info-icon); margin-top: .125rem; }
.sb-notice-body { flex: 1; min-width: 0; }
.sb-notice-body > :last-child { margin-bottom: 0; }
.sb-notice b { color: inherit; }
.sb-notice-warn { background: var(--sb-warn-bg); border-color: var(--sb-warn-line); color: var(--sb-warn-ink); }
.sb-notice-warn > .sb-ic { color: var(--sb-warn-icon); }
.sb-notice-ok { background: var(--sb-ok-bg); border-color: var(--sb-ok-line); color: var(--sb-ok-ink); }
.sb-notice-ok > .sb-ic { color: var(--sb-ok-icon); }
.sb-notice-bad { background: var(--sb-bad-bg); border-color: var(--sb-bad-line); color: var(--sb-bad-ink); }
.sb-notice-bad > .sb-ic { color: var(--sb-bad-icon); }
.sb-notice-plain { background: var(--sb-surface-2); border-color: var(--sb-line); color: var(--sb-ink-2); }
.sb-notice-plain > .sb-ic { color: var(--sb-muted); }
.sb-notice .sb-close { margin: -.625rem -.75rem -.625rem 0; color: inherit; }
a.sb-notice { text-decoration: none; }
a.sb-notice:hover { filter: brightness(.98); }
/* замечание руководителя: тёплая подложка с тонкой рамкой со всех сторон */
.sb-remark { margin: 0; padding: .875rem 1rem; border-radius: var(--sb-radius-lg); background: #fff; border: 1px solid var(--sb-line); }
.sb-remark-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; margin-bottom: .25rem; color: var(--sb-muted); font-size: .8125rem; }
.sb-remark-head b { font-weight: 700; color: var(--sb-ink); font-size: .875rem; }
.sb-remark blockquote { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--sb-ink); max-width: 62rem; }
.sb-remark-foot { margin-top: .5rem; }
/* ---------------------------------------------------- 11. Путь статьи -- */
.sb-steps { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; }
.sb-steps > li { position: relative; flex: 1 1 0; min-width: 0; padding-right: 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.sb-steps > li::after { content: ""; position: absolute; top: 19px; left: 52px; right: 12px; height: 2px; border-radius: 1px; background: var(--sb-line-2); }
.sb-steps > li:last-child::after { display: none; }
.sb-steps > li.is-done::after { background: var(--sb-brand); }
.sb-step-dot {
width: 40px; height: 40px; margin-bottom: .5rem; border-radius: 50%; border: 2px solid var(--sb-line-2); background: #fff;
display: inline-flex; align-items: center; justify-content: center; color: var(--sb-muted); font-weight: 700;
}
.sb-step-dot > .sb-ic { width: 1.25rem; height: 1.25rem; }
.sb-steps .is-done .sb-step-dot { background: var(--sb-brand); border-color: var(--sb-brand); color: #fff; }
.sb-steps .is-current .sb-step-dot { border-color: var(--sb-brand); color: var(--sb-brand-700); box-shadow: 0 0 0 4px var(--sb-brand-50); }
.sb-step-name { font-weight: 500; line-height: 1.3; color: var(--sb-ink-2); }
.sb-steps .is-done .sb-step-name { color: var(--sb-ink); }
.sb-steps .is-current .sb-step-name { color: var(--sb-ink); font-weight: 700; }
.sb-step-note { font-size: .8125rem; line-height: 1.35; color: var(--sb-muted); }
.sb-steps .is-current .sb-step-note { color: var(--sb-brand-700); font-weight: 500; }
/* телефон: «Шаг 2 из 4» и полоса из четырёх частей */
.sb-steps-mini { margin: 0 0 1.25rem; }
.sb-steps-mini-head { margin-bottom: .5rem; }
.sb-steps-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; margin-bottom: .5rem; }
.sb-steps-bar > span { height: .5rem; border-radius: var(--sb-radius); background: var(--sb-line-2); }
.sb-steps-bar > .is-done { background: var(--sb-brand); }
.sb-steps-bar > .is-current { background: #fff; box-shadow: inset 0 0 0 2px var(--sb-brand); }
.sb-steps-mini-next { font-size: .875rem; color: var(--sb-muted); }
/* ------------------------------------------- 12. «Что сделать сейчас» -- */
.sb-now .card-body { display: grid; gap: 1.5rem 2.5rem; }
.sb-now-top { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; margin-bottom: .75rem; }
.sb-kicker { font-size: .875rem; font-weight: 600; color: var(--sb-muted); }
.sb-now h2 { font-size: 1.25rem; margin-bottom: .625rem; }
.sb-now-article { font-size: .9375rem; font-weight: 500; color: var(--sb-ink); margin-bottom: .5rem; }
.sb-now-text { color: var(--sb-ink-2); margin-bottom: 1.25rem; max-width: 40rem; }
.sb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sb-now .sb-remark { align-self: start; }
@media (min-width: 992px) {
.sb-now.has-remark .card-body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
/* ------------------------------------------- 13. Сведения: подпись | значение | действие -- */
.sb-facts { margin: 0; }
.sb-fact { display: grid; grid-template-columns: 15rem minmax(0, 1fr) auto; gap: .25rem 1.5rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--sb-line); }
.sb-fact:first-child { border-top: 0; padding-top: 0; }
.sb-fact:last-child { padding-bottom: 0; }
.sb-fact dt { font-weight: 400; color: var(--sb-muted); padding-top: .125rem; }
.sb-fact dd { margin: 0; min-width: 0; }
.sb-fact-value b { display: block; font-weight: 600; }
.sb-fact-value span { display: block; color: var(--sb-ink-2); font-size: .875rem; margin-top: .125rem; }
.sb-fact .sb-fact-act { align-self: center; }
.sb-fact .sb-fact-act .sb-link-btn { margin: -.625rem 0; }
.sb-fact-more { grid-column: 1 / -1; }
.sb-fact-more-body { margin-top: .75rem; padding: 1rem 1.25rem; border-radius: var(--sb-radius-lg); background: var(--sb-surface-2); color: var(--sb-ink-2); }
.sb-fact-more-body ul { margin: 0; padding-left: 1.25rem; }
.sb-chev { width: 1.125rem; height: 1.125rem; transition: transform .15s; }
[aria-expanded=true] > .sb-chev, details[open] > summary .sb-chev { transform: rotate(180deg); }
/* ---------------------------------------------------- 14. Строки-списки -- */
.sb-rows { list-style: none; margin: 0; padding: 0; }
.sb-rows > li { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; min-height: 40px; padding: .625rem 0; border-top: 1px solid var(--sb-row-line); }
.sb-rows > li:first-child { border-top: 0; padding-top: 0; }
.sb-rows > li:last-child { padding-bottom: 0; }
.sb-row-main { flex: 1; min-width: 0; }
.sb-row-title { font-weight: 600; font-size: .9375rem; line-height: 1.4; color: var(--sb-brand-700); }
.sb-row-sub { color: var(--sb-muted); font-size: .875rem; margin-top: .25rem; }
.sb-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; flex: none; }
/* ------------------------------------------------ 15. Раскрывающиеся -- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.sb-fold > summary {
display: flex; align-items: center; gap: .5rem .75rem; min-height: 64px; padding: 1rem var(--sb-pad);
font-weight: 600; font-size: .9375rem; color: var(--sb-ink); border-radius: var(--sb-radius-lg);
}
.sb-fold > summary:hover { background: var(--sb-surface-2); }
.sb-fold > summary .sb-fold-note { font-weight: 400; font-size: .875rem; color: var(--sb-muted); }
.sb-fold > summary .sb-chev { margin-left: auto; color: var(--sb-muted); width: 1.25rem; height: 1.25rem; flex: none; }
.sb-fold[open] > summary { border-bottom: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0; }
.sb-fold-body { padding: 1.5rem var(--sb-pad) var(--sb-pad); }
.sb-fold-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; min-width: 0; }
.sb-more > summary { display: inline-flex; align-items: center; gap: .375rem; min-height: 32px; color: var(--sb-brand-600); font-weight: 500; }
.sb-more > summary:hover { color: var(--sb-brand-800); text-decoration: underline; }
.sb-more-body { padding: .5rem 0 .25rem; color: var(--sb-ink-2); }
/* -------------------------------------------- 16. Пустое состояние -- */
/* одна строка серым по центру карточки + (если есть) одно действие; без больших значков */
.sb-empty { text-align: center; padding: 1.25rem 1rem; max-width: 34rem; margin: 0 auto; color: var(--sb-muted); }
.sb-empty-ic { display: none; }
.sb-empty b { display: block; font-size: .875rem; font-weight: 400; color: var(--sb-muted); margin-bottom: .25rem; }
.sb-empty p { color: var(--sb-muted); margin-bottom: .75rem; }
.sb-empty p:last-child { margin-bottom: 0; }
/* ---------------------------------------------- 17. Список проверок -- */
.sb-checks { list-style: none; margin: 0; padding: 0; }
.sb-check { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr) auto; gap: .0625rem .75rem; align-items: start; padding: .625rem 0; border-top: 1px solid var(--sb-line); }
.sb-check:first-child { border-top: 0; }
.sb-check > .sb-ic { grid-column: 1; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; margin-top: .125rem; }
.sb-check-name { grid-column: 2; font-weight: 500; line-height: 1.4; }
.sb-check-detail { grid-column: 2; font-size: .875rem; line-height: 1.4; color: var(--sb-muted); }
.sb-check-fix { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; min-height: 32px; padding: 0 .25rem; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.sb-check[data-state=todo] > .sb-ic { color: var(--sb-warn-icon); } /* ещё не сделано */
.sb-check[data-state=advice] > .sb-ic { color: var(--sb-muted); } /* совет: можно отправить и так */
.sb-check[data-state=error] > .sb-ic { color: var(--sb-bad-icon); } /* настоящая ошибка */
.sb-check[data-state=error] .sb-check-detail { color: var(--sb-bad-ink); }
.sb-check[data-state=done] > .sb-ic { color: var(--sb-ok-icon); }
/* строки-ссылки: вся строка ведёт к полю */
.sb-checks-links .sb-check { padding: 0; }
.sb-check > a.sb-check-link {
grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: 1.375rem minmax(0, 1fr) auto; gap: .0625rem .75rem;
align-items: start; padding: .75rem .5rem; margin: 0 -.5rem; border-radius: var(--sb-radius); color: var(--sb-ink); text-decoration: none;
}
.sb-check > a.sb-check-link:hover { background: var(--sb-surface-2); }
.sb-check-link > .sb-ic:first-child { grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; margin-top: .125rem; }
.sb-check-link .sb-check-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: .25rem; color: var(--sb-brand-600); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.sb-check[data-state=todo] .sb-check-link > .sb-ic:first-child { color: var(--sb-warn-icon); }
.sb-check[data-state=advice] .sb-check-link > .sb-ic:first-child { color: var(--sb-muted); }
.sb-check[data-state=error] .sb-check-link > .sb-ic:first-child { color: var(--sb-bad-icon); }
.sb-checks-done > summary { display: flex; align-items: center; gap: .5rem; min-height: 32px; color: var(--sb-ok-ink); font-weight: 500; }
.sb-checks-done > summary > .sb-ic:first-child { color: var(--sb-ok-icon); }
.sb-checks-done > summary .sb-chev { margin-left: auto; color: var(--sb-muted); }
.sb-left { font-weight: 700; color: var(--sb-warn-ink); white-space: nowrap; }
.sb-progress-line { margin: .75rem 0 .25rem; }
.progress { --bs-progress-height: .5rem; --bs-progress-bg: var(--sb-line); --bs-progress-bar-bg: var(--sb-brand); --bs-progress-border-radius: var(--sb-radius); }
.sb-progress-text { font-size: .875rem; color: var(--sb-ink-2); margin-top: .5rem; }
/* панель «Перед отправкой»: на компьютере – липкая колонка, на телефоне – раскрывающаяся полоса */
.sb-ready { display: flex; flex-direction: column; }
.sb-ready-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 0; }
.sb-ready-head h2 { font-size: 1.0625rem; margin: 0; }
.sb-ready-progress { padding: 0 1.5rem; }
.sb-ready-body { padding: .5rem 1.5rem 1rem; }
.sb-ready-intro { font-size: .875rem; color: var(--sb-ink-2); margin: .75rem 0 .25rem; }
.sb-ready-foot { display: grid; gap: .625rem; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--sb-line); background: #fff; border-radius: 0 0 var(--sb-radius-lg) var(--sb-radius-lg); }
.sb-ready-note { font-size: .875rem; color: var(--sb-ink-2); margin: 0; }
.sb-ready-toggle {
display: grid; grid-template-columns: 1.375rem minmax(0, 1fr) 1.25rem; gap: .125rem .75rem; align-items: start; width: 100%;
padding: 1.125rem var(--sb-pad) .25rem; border: 0; background: none; text-align: left; color: var(--sb-ink); min-height: 64px;
}
.sb-ready-toggle > .sb-ic { color: var(--sb-warn-icon); margin-top: .125rem; }
.sb-ready-toggle b { display: block; font-size: .9375rem; }
.sb-ready-toggle small { display: block; font-size: .875rem; color: var(--sb-ink-2); line-height: 1.4; margin-top: .125rem; }
.sb-ready-toggle .sb-chev { color: var(--sb-muted); margin-top: .25rem; }
.sb-ready-alert { margin: .75rem 0 0; }
@media (min-width: 992px) {
.sb-ready { max-height: calc(100vh - 3rem); }
.sb-ready-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 991.98px) {
.sb-ready-progress { padding: 0 var(--sb-pad) 1rem; }
.sb-ready-body { padding: 0 var(--sb-pad) 1rem; border-top: 1px solid var(--sb-line); }
.sb-ready-body.show, .sb-ready-body.collapsing { display: block; }
}
/* ------------------------------------------------------ 18. Редактор -- */
.sb-ed-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sb-gap); align-items: start; }
.sb-ed-side { order: -1; }
@media (min-width: 992px) {
.sb-ed-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
.sb-ed-side { order: 0; position: sticky; top: 1.5rem; }
}
@media (min-width: 1200px) { .sb-ed-layout { grid-template-columns: minmax(0, 1fr) 22.5rem; } }
.sb-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.sb-sec-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.0625rem; }
.sb-sec-num { width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--sb-page); color: var(--sb-ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; }
.sb-sec-state { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.sb-sec-state > .sb-ic { width: 1.125rem; height: 1.125rem; }
.sb-sec-state[data-state=todo] { color: var(--sb-warn-ink); }
.sb-sec-state[data-state=todo] > .sb-ic { color: var(--sb-warn-icon); }
.sb-sec-state[data-state=done] { color: var(--sb-ok-ink); }
.sb-sec-state[data-state=done] > .sb-ic { color: var(--sb-ok-icon); }
.sb-sec-state[data-state=error] { color: var(--sb-bad-ink); }
.sb-sec-hint { color: var(--sb-ink-2); margin: -.5rem 0 1.25rem; max-width: 46rem; }
.sb-author { border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.sb-author-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font-weight: 600; }
.sb-printed { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .875rem 1rem; border-radius: var(--sb-radius); background: var(--sb-surface-2); color: var(--sb-ink-2); font-size: .875rem; }
.sb-printed b { color: var(--sb-ink); font-family: var(--sb-paper-font); font-size: .9375rem; font-weight: 700; }
/* поле текста: панель инструментов + «лист» */
.sb-ed-shell { border: 1px solid var(--sb-field); border-radius: var(--sb-radius-lg); background: #fff; overflow: clip; }
.sb-ed-shell:focus-within { border-color: var(--sb-brand); box-shadow: var(--sb-focus); }
.sb-toolbar {
position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem;
padding: .375rem .5rem; background: var(--sb-surface-2); border-bottom: 1px solid var(--sb-line);
}
.sb-tb-group { display: flex; align-items: center; gap: .125rem; }
.sb-tb-btn {
min-width: 40px; height: 40px; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
border: 1px solid transparent; border-radius: var(--sb-radius); background: transparent; color: var(--sb-ink); font-size: .875rem; font-weight: 500; white-space: nowrap;
}
.sb-tb-btn:hover, .sb-tb-btn[aria-expanded=true] { background: #fff; border-color: var(--sb-line-2); }
.sb-tb-btn[aria-pressed=true] { background: var(--sb-brand-50); border-color: var(--sb-brand-200); color: var(--sb-brand-800); }
.sb-tb-btn > .sb-ic { width: 1.25rem; height: 1.25rem; }
.sb-tb-btn.sb-tb-letter { font-family: var(--sb-paper-font); font-size: 1.0625rem; }
.sb-editor {
min-height: 22rem; padding: 1.5rem 2rem 2rem; font-family: var(--sb-paper-font); font-size: .9375rem; line-height: 1.6; color: #111;
text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.sb-editor:focus { outline: none; }
.sb-editor h3 { font-family: var(--sb-paper-font); font-size: .9375rem; font-weight: 700; text-align: center; margin: 1rem 0 .5rem; letter-spacing: 0; }
.sb-editor p { text-indent: 1.25cm; margin: 0 0 .25rem; }
.sb-editor .sb-cap { text-align: center; text-indent: 0; margin: .5rem 0; hyphens: none; }
.sb-editor .sb-src { text-indent: 0; font-size: .875rem; margin: .375rem 0 .75rem; }
.sb-ed-table { overflow-x: auto; margin: .25rem 0; }
.sb-editor table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.4; text-align: left; hyphens: manual; }
.sb-editor th, .sb-editor td { border: 1px solid #555; padding: .25rem .5rem; vertical-align: top; }
.sb-editor th { font-weight: 700; text-align: center; }
/* пометка прямо в тексте: чего не хватает и что вписать */
.sb-ed-missing {
margin: .75rem 0 1rem; padding: 1rem 1.25rem; border: 2px dashed #d6a347; border-radius: var(--sb-radius-lg); background: #fffaf0;
display: flex; gap: .875rem; align-items: flex-start; font-family: var(--bs-font-sans-serif); font-size: .875rem; line-height: 1.5;
text-align: left; text-indent: 0; hyphens: manual; color: var(--sb-warn-ink);
}
.sb-ed-missing > .sb-ic { color: var(--sb-warn-icon); width: 1.5rem; height: 1.5rem; margin-top: .0625rem; }
.sb-ed-missing b { display: block; color: var(--sb-ink); }
.sb-ed-missing p { text-indent: 0; margin: .125rem 0 0; }
.sb-ed-missing .btn { margin-top: .625rem; }
.sb-ed-missing q { quotes: "«" "»"; color: var(--sb-ink); font-family: var(--sb-paper-font); font-size: .9375rem; }
/* список литературы: памятка «Как ссылаться в тексте» */
.sb-cite-hint { color: var(--sb-ink-2); margin: 1rem 0 0; }
/* ---------------------------------------------- 19. Страница статьи -- */
.sb-article-h1 { font-size: 1.25rem; max-width: 60rem; }
.sb-decision .card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: 1.5rem var(--sb-pad); }
.sb-decision-text { flex: 1 1 24rem; min-width: 0; }
.sb-decision-text h2 { font-size: 1.0625rem; margin-bottom: .375rem; }
.sb-decision-text p { color: var(--sb-ink-2); margin: 0; }
.sb-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sb-gap); align-items: start; }
.sb-article-grid > * { min-width: 0; }
@media (min-width: 1200px) {
.sb-article-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "main chat"; }
.sb-article-main { grid-area: main; }
.sb-article-grid > .sb-chat { grid-area: chat; position: sticky; top: 1.5rem; height: max(30rem, calc(100vh - 19.5rem)); max-height: 50rem; margin-bottom: 0; }
}
@media (max-width: 1199.98px) {
.sb-article-grid { display: flex; flex-direction: column; }
.sb-article-main { display: contents; }
.sb-article-main > .sb-decision { order: 1; }
.sb-article-grid > .sb-chat { order: 2; margin-bottom: var(--sb-gap); }
.sb-article-main > .sb-a-todo { order: 3; }
.sb-article-main > .sb-a-paper { order: 4; }
.sb-article-main > .sb-a-more { order: 5; }
.sb-article-main > * { width: 100%; }
}
/* «лист» с текстом статьи – как в книге */
.sb-paper-card { overflow: hidden; }
.sb-paper-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1.125rem var(--sb-pad); border-bottom: 1px solid var(--sb-line); }
.sb-paper-head h2 { font-size: 1.0625rem; margin: 0; }
.sb-paper-desk { background: var(--sb-surface-2); padding: 1.5rem; }
.sb-paper {
background: #fff; border: 1px solid var(--sb-line); padding: 2.5rem 2.75rem; max-width: 46rem; margin: 0 auto;
font-family: var(--sb-paper-font); color: #111; font-size: .9375rem; line-height: 1.5; text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.sb-paper p { text-indent: 1.25cm; margin: 0; }
.sb-paper .sb-p-block { text-indent: 0; margin-bottom: .5rem; }
.sb-paper .sb-p-udk { text-indent: 0; text-align: left; margin-bottom: .75rem; }
.sb-paper .sb-p-missing { font-family: var(--bs-font-sans-serif); font-size: .875rem; color: var(--sb-warn-ink); background: var(--sb-warn-bg); border: 1px dashed #d6a347; border-radius: .375rem; padding: .0625rem .5rem; }
.sb-paper .sb-p-title { text-indent: 0; text-align: center; font-weight: 700; text-transform: uppercase; hyphens: none; text-wrap: balance; line-height: 1.4; margin-bottom: .75rem; }
.sb-paper .sb-p-auth { text-indent: 0; text-align: right; font-weight: 700; }
.sb-paper .sb-p-sup { text-indent: 0; text-align: right; font-style: italic; margin-bottom: 1rem; }
.sb-paper h3 { font-family: var(--sb-paper-font); font-size: .9375rem; font-weight: 700; text-align: center; margin: 1rem 0 .25rem; letter-spacing: 0; }
.sb-paper-more { padding: 1rem var(--sb-pad) 1.5rem; display: flex; justify-content: center; }
/* чат */
.sb-chat { display: flex; flex-direction: column; overflow: hidden; }
.sb-chat-head { padding: 1.125rem 1.5rem 1rem; border-bottom: 1px solid var(--sb-line); flex: none; }
.sb-chat-head h2 { font-size: 1.0625rem; margin: 0 0 .125rem; }
.sb-chat-people { font-size: .875rem; color: var(--sb-muted); }
.sb-chat-list { flex: 1 1 auto; min-height: 0; padding: 1rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .875rem; background: #fff; }
.sb-chat-day { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; font-weight: 500; color: var(--sb-muted); }
.sb-chat-day::before, .sb-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--sb-line); }
.sb-chat-event { align-self: center; max-width: 92%; text-align: center; font-size: .8125rem; color: var(--sb-muted); }
.sb-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.sb-msg-who { font-size: .8125rem; margin: 0 0 .25rem .25rem; color: var(--sb-ink-2); }
.sb-msg-who b { color: var(--sb-ink); font-weight: 600; }
.sb-msg-bubble { min-width: 0; padding: .625rem .875rem .5rem; border-radius: var(--sb-radius-lg); background: var(--sb-surface-2); border: 1px solid var(--sb-line); }
.sb-msg-text { line-height: 1.5; white-space: pre-line; }
.sb-msg-time { font-size: .8125rem; color: var(--sb-muted); text-align: right; margin-top: .125rem; }
.sb-msg-label { font-size: .8125rem; font-weight: 600; color: var(--sb-warn-ink); margin-bottom: .125rem; }
.sb-msg.is-remark .sb-msg-bubble { background: #fff; border-color: var(--sb-line-2); }
.sb-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.sb-msg.is-mine .sb-msg-bubble { background: var(--sb-brand-50); border-color: #c5e3e3; border-radius: var(--sb-radius-lg); }
.sb-msg-file { display: flex; align-items: center; gap: .625rem; margin: .375rem 0 .125rem; padding: .5rem .75rem; min-height: 44px; border-radius: var(--sb-radius); background: #fff; border: 1px solid var(--sb-line-2); color: var(--sb-brand-700); font-weight: 500; text-decoration: none; }
.sb-msg-file:hover { border-color: var(--sb-field); text-decoration: none; }
.sb-msg-file > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.sb-msg-file small { color: var(--sb-muted); font-weight: 400; }
.sb-chat-form { flex: none; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--sb-line); background: #fff; }
.sb-chat-form textarea { min-height: 52px; max-height: 12rem; overflow-y: auto; }
.sb-chat-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-top: .625rem; }
.sb-chat-row .sb-chat-send { margin-left: auto; }
.sb-chat-hint { font-size: .8125rem; color: var(--sb-muted); }
.sb-chat-new { align-self: center; position: sticky; bottom: 0; }
/* ------------------------------------------- 20. Главная администратора -- */
.sb-queue { list-style: none; margin: 0; padding: 0; }
.sb-queue > li { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.25rem 0; border-top: 1px solid var(--sb-line); }
.sb-queue > li:first-child { border-top: 0; padding-top: .25rem; }
.sb-queue > li:last-child { padding-bottom: 0; }
.sb-queue-main { flex: 1 1 26rem; min-width: 0; }
.sb-queue-title { font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--sb-brand-700); }
.sb-queue-meta { display: flex; flex-wrap: wrap; gap: .125rem 1rem; color: var(--sb-ink-2); font-size: .875rem; margin-top: .375rem; }
.sb-queue-meta > span { white-space: nowrap; }
.sb-queue-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sb-book-ready { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.sb-book-ready-text { flex: 1 1 24rem; min-width: 0; }
.sb-book-ready-text p { color: var(--sb-ink-2); }
.sb-book-ready-act { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; text-align: center; }
.sb-book-ready-act .sb-link-btn { justify-content: center; }
.sb-log-day { font-size: .8125rem; font-weight: 600; color: var(--sb-muted); margin: 1.25rem 0 .25rem; }
.sb-log-day:first-child { margin-top: 0; }
.sb-log { list-style: none; margin: 0; padding: 0; }
.sb-log li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--sb-line); }
.sb-log li:first-child { border-top: 0; }
.sb-log time { color: var(--sb-muted); font-size: .875rem; font-variant-numeric: tabular-nums; padding-top: .0625rem; }
.sb-log-art { font-size: .875rem; }
/* ------------------------------------------- 21. Скачать сборник -- */
.sb-export-main { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-bottom: 1.5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--sb-line); }
.sb-export-main p { flex: 1 1 100%; margin: 0 0 .5rem; color: var(--sb-ink-2); }
.sb-sub-h { font-size: .875rem; font-weight: 600; color: var(--sb-ink-2); margin: 1.25rem 0 .25rem; letter-spacing: 0; }
.sb-files { list-style: none; margin: 0 0 1rem; padding: 0; }
.sb-files > li + li { border-top: 1px solid var(--sb-line); }
.sb-files a { display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: .875rem .5rem; margin: 0 -.5rem; border-radius: var(--sb-radius); color: var(--sb-ink); text-decoration: none; }
.sb-files a:hover { background: var(--sb-surface-2); }
.sb-file-ic { width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--sb-radius); background: var(--sb-page); color: var(--sb-ink-2); display: inline-flex; align-items: center; justify-content: center; }
.sb-file-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sb-file-txt b { font-weight: 600; color: var(--sb-brand-700); }
.sb-file-txt small { font-size: .875rem; color: var(--sb-muted); }
.sb-file-get { display: inline-flex; align-items: center; gap: .375rem; flex: none; font-size: .8125rem; font-weight: 700; color: var(--sb-brand-700); letter-spacing: .02em; }
.sb-link-card { display: flex; flex-direction: row; align-items: center; gap: 1rem; min-height: 72px; padding: 1.25rem var(--sb-pad); color: var(--sb-ink); text-decoration: none; }
.sb-link-card:hover { color: var(--sb-ink); text-decoration: none; background: var(--sb-surface-2); }
.sb-link-card-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sb-link-card-txt b { font-size: .9375rem; color: var(--sb-brand-700); }
.sb-link-card-txt small { font-size: .875rem; color: var(--sb-muted); }
.sb-link-card > .sb-ic:last-child, .sb-files .sb-chev-r { color: var(--sb-muted); }
/* ----------------------------------------------- 22. Состав сборника -- */
.sb-book-card { overflow: visible; }
.sb-book-top { padding: var(--sb-pad) var(--sb-pad) 1rem; }
.sb-book-hint { display: flex; gap: .75rem; align-items: flex-start; color: var(--sb-ink-2); margin: 0 0 .5rem; max-width: 52rem; }
.sb-book-hint > .sb-ic { color: var(--sb-muted); margin-top: .1875rem; }
.sb-inline-ic { display: inline-block; width: 1.125rem; height: 1.125rem; vertical-align: -.2em; color: var(--sb-muted); }
.sb-check-all { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 500; cursor: pointer; }
.sb-check-all .form-check-input { margin: 0; }
.sb-book { container-type: inline-size; container-name: book; }
.sb-book-group { scroll-margin-top: 1rem; }
.sb-book-group-title {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; padding: 1.25rem var(--sb-pad) .625rem;
font-size: .9375rem; font-weight: 600; letter-spacing: 0; border-bottom: 2px solid var(--sb-ink);
}
.sb-book-group-title .sb-cnt { font-size: .875rem; font-weight: 400; color: var(--sb-muted); }
.sb-book-group.is-nosection .sb-book-group-title { border-bottom-color: var(--sb-warn-icon); }
.sb-book-group-note { font-size: .875rem; font-weight: 500; color: var(--sb-warn-ink); }
.sb-book-list { list-style: none; margin: 0; padding: 0; min-height: 1.5rem; }
.sb-book-empty { display: none; margin: .75rem var(--sb-pad) 0; padding: 1rem; border: 2px dashed var(--sb-line-2); border-radius: var(--sb-radius-lg); text-align: center; color: var(--sb-muted); font-size: .875rem; }
.sb-book-group.is-empty .sb-book-empty { display: block; }
.sb-book-group.is-empty .sb-book-list { min-height: 0; }
.sb-bi {
display: grid; gap: .25rem .75rem; align-items: start; padding: .875rem var(--sb-pad); border-bottom: 1px solid var(--sb-line); background: #fff;
/* телефон: отметка слева, название во всю ширину, «Ещё» справа, ручка – рядом с выбором секции */
grid-template-columns: 44px minmax(0, 1fr) auto;
grid-template-areas: "check main main" "check state menu" "drag sect sect";
}
.sb-bi.is-checked { background: #f3f9f9; }
.sb-bi .sb-drag { grid-area: drag; }
.sb-bi .sb-chk { grid-area: check; }
.sb-bi .sb-bi-num { display: none; grid-area: num; }
.sb-bi .sb-bi-main { grid-area: main; min-width: 0; }
.sb-bi .sb-bi-state { grid-area: state; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .875rem; align-self: center; }
.sb-bi .sb-bi-sect { grid-area: sect; min-width: 0; }
.sb-bi .sb-bi-menu { grid-area: menu; align-self: center; }
.sb-bi-title { font-weight: 600; line-height: 1.4; color: var(--sb-brand-700); }
.sb-bi-title .sb-bi-n { color: var(--sb-muted); font-variant-numeric: tabular-nums; margin-right: .25rem; }
.sb-bi-meta { font-size: .875rem; color: var(--sb-ink-2); margin-top: .125rem; }
.sb-bi-meta > span { white-space: nowrap; }
.sb-bi-orig { font-size: .875rem; color: var(--sb-ink-2); white-space: nowrap; }
.sb-bi .sb-status { white-space: normal; }
.sb-chk { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -.6875rem 0 0; cursor: pointer; }
.sb-chk .form-check-input { margin: 0; }
.sb-drag {
display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
border: 0; border-radius: var(--sb-radius); background: transparent; color: #66757f; cursor: grab; touch-action: none;
}
.sb-drag:hover { background: var(--sb-page); color: var(--sb-ink); }
.sb-drag:active { cursor: grabbing; }
.sb-bi-menu .btn { min-height: 44px; }
.sb-bi.is-ghost { background: var(--sb-brand-50); outline: 2px dashed var(--sb-brand); outline-offset: -4px; }
.sb-bi.is-ghost > * { visibility: hidden; }
.sb-bi.is-dragging { opacity: 1 !important; box-shadow: 0 12px 28px rgba(15, 36, 48, .2); border: 1px solid var(--sb-line-2); border-radius: var(--sb-radius-lg); }
.sb-bi.is-moved .sb-bi-sect .form-select { border-color: var(--sb-brand); }
.sb-bi.is-flash { animation: sb-flash 1.2s ease-out; }
@keyframes sb-flash { from { background: var(--sb-brand-100); } to { background: #fff; } }
@container book (min-width: 640px) {
.sb-bi {
grid-template-columns: 44px 44px 2rem minmax(0, 1fr) auto;
grid-template-areas: "drag check num main menu" ". . . state state" ". . . sect sect";
}
.sb-bi .sb-drag, .sb-bi .sb-bi-menu { margin-top: -.6875rem; align-self: start; }
.sb-bi .sb-bi-num { display: block; color: var(--sb-muted); font-weight: 600; text-align: right; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sb-bi-title .sb-bi-n { display: none; }
.sb-bi .sb-bi-state { align-self: start; margin-top: .25rem; }
.sb-bi .sb-bi-sect { max-width: 19rem; margin-top: .375rem; }
}
@container book (min-width: 920px) {
.sb-bi {
grid-template-columns: 44px 44px 2rem minmax(0, 1fr) 18rem auto;
grid-template-areas: "drag check num main sect menu" ". . . state sect menu";
}
.sb-bi .sb-bi-sect { max-width: none; margin-top: -.6875rem; }
}
/* панель «Отмечено: N» – появляется при первой отметке */
.sb-bulk {
position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
padding: .875rem var(--sb-pad); background: #fff; border-top: 1px solid var(--sb-line-2); box-shadow: var(--sb-shadow-bar);
border-radius: 0 0 var(--sb-radius-lg) var(--sb-radius-lg);
}
.sb-bulk[hidden] { display: none; }
.sb-bulk-count { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.sb-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.sb-book-saved { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--sb-ok-ink); white-space: nowrap; }
.sb-book-saved > .sb-ic { color: var(--sb-ok-icon); }
/* ---------------------------------------- 23. Таблица → карточки -- */
.sb-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.sb-filters .sb-f-grow { flex: 1 1 20rem; min-width: 0; }
.sb-filters .sb-f-role { flex: 0 1 15rem; min-width: 12rem; }
.sb-filters-extra { margin-top: 1rem; }
.table {
--bs-table-bg: #fff; --bs-table-color: var(--sb-ink); --bs-table-border-color: var(--sb-row-line);
--bs-table-hover-bg: var(--sb-surface-2); --bs-table-striped-bg: var(--sb-surface-2);
margin: 0;
}
.sb-table { table-layout: fixed; width: 100%; font-size: .875rem; }
.sb-table > thead th { font-size: .8125rem; font-weight: 400; color: #fff; background: #017b80; padding: .5rem .75rem; border-bottom: 0; vertical-align: middle; }
.sb-table > thead th:first-child { border-top-left-radius: .375rem; }
.sb-table > thead th:last-child { border-top-right-radius: .375rem; }
.sb-table > tbody td { padding: .625rem .75rem; vertical-align: top; }
.sb-table th:first-child, .sb-table td:first-child { padding-left: .75rem; }
.sb-table th:last-child, .sb-table td:last-child { padding-right: 0; }
.sb-table > tbody > tr:last-child > td { border-bottom: 0; }
.sb-table .sb-t-num { text-align: right; font-variant-numeric: tabular-nums; }
.sb-table .sb-t-empty { color: var(--sb-muted); }
.sb-u-name { font-size: .875rem; }
.sb-u-name a { font-weight: 600; color: var(--sb-brand-700); }
.sb-u-mail { display: block; color: var(--sb-ink-2); font-size: .875rem; margin-top: .125rem; overflow-wrap: anywhere; }
.sb-u-flag { display: block; margin-top: .375rem; font-size: .875rem; }
.sb-u-act { margin-top: .625rem; }
.sb-table tr.is-blocked td:not(:first-child) { color: var(--sb-muted); }
.sb-list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--sb-line); color: var(--sb-ink-2); }
/* ниже 1200 px строки таблицы становятся карточками: подписи из data-label */
@media (max-width: 1199.98px) {
.sb-table-stack { table-layout: auto; }
.sb-table-stack > thead { display: none; }
.sb-table-stack, .sb-table-stack > tbody, .sb-table-stack > tbody > tr { display: block; width: 100%; }
.sb-table-stack > tbody > tr { padding: 1rem 0; border-bottom: 1px solid var(--sb-line); }
.sb-table-stack > tbody > tr:first-child { padding-top: 0; }
.sb-table-stack > tbody > tr:last-child { border-bottom: 0; padding-bottom: 0; }
.sb-table-stack > tbody > tr > td { display: block; padding: .125rem 0 !important; border: 0; }
.sb-table-stack > tbody > tr > td.sb-t-inline { display: inline; }
.sb-table-stack > tbody > tr > td.sb-t-inline + td.sb-t-inline::before { content: " · "; color: var(--sb-muted); }
.sb-table-stack > tbody > tr > td[data-label]:not(.sb-t-inline)::before { content: attr(data-label) ": "; color: var(--sb-muted); }
.sb-table-stack > tbody > tr > td.sb-t-empty { display: none; }
.sb-table-stack > tbody > tr > td.sb-t-num { text-align: left; }
.sb-table-stack > tbody > tr > td:first-child { padding-bottom: .375rem !important; }
.sb-table-stack .sb-u-name a { font-size: 1.0625rem; }
}
/* ----------------------------------------- 24. Уведомления, настройки -- */
/* Уведомления – одинаково в колокольчике и на странице /notifications:
точка «новое» · текст в две строки с многоточием · время мелко; вся строка нажимается */
.sb-notes { list-style: none; margin: 0; padding: 0; }
.sb-notes > li + li { border-top: 1px solid var(--sb-row-line); }
.sb-note {
display: grid; grid-template-columns: .5rem minmax(0, 1fr) auto; column-gap: .75rem; align-items: baseline;
min-height: 40px; padding: .625rem var(--sb-pad); color: var(--sb-ink); text-decoration: none; line-height: 1.45;
}
a.sb-note:hover { background: var(--sb-surface-2); color: var(--sb-ink); text-decoration: none; }
.sb-note::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: transparent; align-self: start; margin-top: .4375rem; }
.sb-note.is-unread::before { background: var(--sb-brand); }
.sb-note-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sb-note.is-unread .sb-note-text { font-weight: 600; }
.sb-note-when { font-size: .8125rem; color: var(--sb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-notes-empty { margin: 0; padding: 1.25rem var(--sb-pad); text-align: center; color: var(--sb-muted); }
.sb-notes-more { margin: .75rem 0 0; color: var(--sb-muted); font-size: .8125rem; text-align: center; }
.sb-notes-card { overflow: hidden; }
.sb-notes-head { align-items: center; }
.sb-notes-head h1 { margin: 0; }
.sb-notes-head form { margin: 0; }
@media (max-width: 767.98px) {
/* телефон: время – второй строкой под текстом; «Прочитать все» – справа от заголовка, не на всю ширину */
.sb-note { grid-template-columns: .5rem minmax(0, 1fr); row-gap: .125rem; }
.sb-note-when { grid-column: 2; }
.sb-notes-head { flex-wrap: nowrap; }
.sb-notes-head .sb-page-actions { width: auto; }
}
.sb-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem); gap: .75rem 2rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--sb-line); }
.sb-set:first-child { border-top: 0; padding-top: 0; }
.sb-set-text b { display: block; font-weight: 600; }
.sb-set-text small { display: block; font-size: .875rem; color: var(--sb-ink-2); margin-top: .125rem; }
.sb-set-ctl.is-switch { justify-self: end; }
.sb-narrow { max-width: 46rem; }
/* ------------------------------------------------------- 25. Вход -- */
.sb-auth { flex: 1 0 auto; width: 100%; max-width: 1080px; margin: 0 auto; padding: 3.5rem var(--sb-gutter) 3rem; display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 992px) { .sb-auth { grid-template-columns: minmax(0, 1fr) 30rem; } .sb-auth-card { grid-column: 2; grid-row: 1; } .sb-auth-intro { grid-column: 1; grid-row: 1; padding-top: 1.5rem; } }
.sb-auth-card .card-body { padding: var(--sb-pad); }
.sb-auth-card h1 { font-size: 1.25rem; }
.sb-auth-sub { color: var(--sb-ink-2); margin-bottom: 1.75rem; }
.sb-auth-alt { text-align: center; margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--sb-line); }
.sb-auth-help { display: flex; gap: .75rem; margin-top: 1.25rem; color: var(--sb-ink-2); font-size: .875rem; }
.sb-auth-help > .sb-ic { color: var(--sb-muted); margin-top: .125rem; }
.sb-auth-intro h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin-bottom: .75rem; max-width: 30rem; }
.sb-auth-intro > p { color: var(--sb-ink-2); font-size: .9375rem; max-width: 32rem; margin-bottom: 2rem; }
.sb-how { list-style: none; margin: 0; padding: 0; counter-reset: how; display: grid; gap: 1.25rem; max-width: 32rem; }
.sb-how > li { counter-increment: how; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .125rem 1rem; }
.sb-how > li::before { content: counter(how); grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; border: 2px solid var(--sb-brand); color: var(--sb-brand-700); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sb-how b { font-size: .9375rem; padding-top: .375rem; }
.sb-how span { color: var(--sb-ink-2); }
/* ------------------------------- 26. Меню, окна, всплывающие сообщения -- */
/* Меню «Ещё» и выпадающие списки: радиус 6, пункты 36 px (на касании 44), текст 14 px,
опасные пункты (.sb-danger) – красным и с подтверждением */
.dropdown-menu {
--bs-dropdown-bg: #fff; --bs-dropdown-border-color: var(--sb-line-2); --bs-dropdown-border-radius: var(--sb-radius-lg);
--bs-dropdown-padding-x: .25rem; --bs-dropdown-padding-y: .25rem; --bs-dropdown-font-size: .875rem; --bs-dropdown-color: var(--sb-ink);
--bs-dropdown-link-color: var(--sb-ink); --bs-dropdown-link-hover-color: var(--sb-ink); --bs-dropdown-link-hover-bg: var(--sb-surface-2);
--bs-dropdown-link-active-color: var(--sb-brand-800); --bs-dropdown-link-active-bg: var(--sb-brand-50);
--bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .375rem; --bs-dropdown-item-border-radius: var(--sb-radius);
--bs-dropdown-divider-bg: var(--sb-line); --bs-dropdown-divider-margin-y: .25rem; --bs-dropdown-header-color: var(--sb-muted); --bs-dropdown-min-width: 12rem;
box-shadow: var(--sb-shadow-pop);
}
.dropdown-item { display: flex; align-items: center; gap: .5rem; min-height: 36px; line-height: 1.4; white-space: normal; text-decoration: none; }
.dropdown-item:hover, .dropdown-item:focus { text-decoration: none; }
.dropdown-item > .sb-ic { color: var(--sb-muted); width: 1.125rem; height: 1.125rem; }
.dropdown-item.sb-danger { color: var(--sb-bad-ink); }
.dropdown-item.sb-danger > .sb-ic { color: var(--sb-bad-icon); }
.dropdown-item.sb-danger:hover { background: var(--sb-bad-bg); color: var(--sb-bad-ink); }
.dropdown-header { font-size: .8125rem; font-weight: 600; padding: .375rem .75rem .25rem; }
.dropdown-toggle::after { display: none; } /* стрелку рисуем значком .sb-chev */
/* Окно: заголовок 17 px, текст 14 px, отступ 20 px, кнопки справа внизу – «Отмена» и главная */
.modal {
--bs-modal-bg: #fff; --bs-modal-border-color: var(--sb-line); --bs-modal-border-radius: var(--sb-radius-lg);
--bs-modal-inner-border-radius: calc(var(--sb-radius-lg) - 1px); --bs-modal-padding: var(--sb-pad);
--bs-modal-header-padding: var(--sb-pad) var(--sb-pad) .5rem; --bs-modal-header-border-width: 0; --bs-modal-footer-border-width: 0;
--bs-modal-footer-gap: .5rem; --bs-modal-title-line-height: 1.35; --bs-modal-box-shadow: 0 16px 48px rgba(15, 36, 48, .22);
--bs-modal-width: 32rem; --bs-modal-color: var(--sb-ink);
}
.modal-backdrop { --bs-backdrop-bg: #0f2430; --bs-backdrop-opacity: .45; }
.modal-title { font-size: 1.0625rem; font-weight: 700; }
.modal-header .sb-close { margin: -.5rem -.5rem -.5rem auto; }
.modal-body { padding-top: .25rem; color: var(--sb-ink); font-size: .875rem; }
.modal-body > p:last-child { margin-bottom: 0; }
.modal-footer { padding: .5rem var(--sb-pad) var(--sb-pad); }
.modal-footer > * { margin: 0; }
/* Всплывающее сообщение (тост): светлое, тонкая рамка, тень, радиус 6; значок по смыслу
(галочка – сделано, «i» – сведения, треугольник – внимание, красное – ошибка);
одна строка и, если нужно, одна кнопка-действие. Ошибка – светло-красная. */
.toast {
--bs-toast-bg: #fff; --bs-toast-color: var(--sb-ink); --bs-toast-border-width: 1px; --bs-toast-border-color: var(--sb-line-2);
--bs-toast-border-radius: var(--sb-radius-lg); --bs-toast-max-width: 30rem; --bs-toast-font-size: .875rem;
--bs-toast-padding-x: .875rem; --bs-toast-padding-y: .5rem; --bs-toast-box-shadow: var(--sb-shadow-pop);
}
.toast.is-error { --bs-toast-bg: var(--sb-bad-bg); --bs-toast-border-color: var(--sb-bad-line); --bs-toast-color: var(--sb-bad-ink); }
.sb-toast-body { display: flex; align-items: center; gap: .625rem; min-height: 44px; padding: .3125rem .3125rem .3125rem .875rem; line-height: 1.4; }
.sb-toast-body > .sb-ic { width: 1.125rem; height: 1.125rem; color: var(--sb-ok-icon); }
.toast.is-info .sb-toast-body > .sb-ic { color: var(--sb-info-icon); }
.toast.is-warn .sb-toast-body > .sb-ic { color: var(--sb-warn-icon); }
.toast.is-error .sb-toast-body > .sb-ic { color: var(--sb-bad-icon); }
/* текст всегда в одной строке со значком (основа 9rem); кнопкам не хватило места – они уходят
строкой ниже, справа («Программа обновилась» + «Обновить страницу» · «Позже» на телефоне) */
.sb-toast-body { flex-wrap: wrap; row-gap: 0; }
.sb-toast-body > span { flex: 1 1 9rem; min-width: 0; padding: .25rem 0; }
.sb-toast-body .btn { flex: none; --bs-btn-padding-x: .625rem; --bs-btn-font-size: .875rem; font-weight: 700; }
.sb-toast-body > span + .btn { margin-left: auto; }
.toast.is-error .sb-toast-body .btn { --bs-btn-color: var(--sb-bad-ink); --bs-btn-hover-color: var(--sb-bad-ink); --bs-btn-hover-bg: rgba(196, 52, 43, .08); }
/* короткое сообщение редактора (.ed-toast, app.js edToast) – свой вид в editor-core.css */
/* ------------------------------------------- 27. Нижняя панель действий -- */
.sb-action-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem;
padding: .625rem var(--sb-gutter) calc(.625rem + env(safe-area-inset-bottom));
background: #fff; border-top: 1px solid var(--sb-line-2); box-shadow: var(--sb-shadow-bar);
}
.sb-action-bar .btn { --bs-btn-padding-x: .625rem; min-height: 44px; white-space: nowrap; }
.sb-action-bar .sb-wide { grid-column: span 2; }
body.sb-has-bar { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { .sb-action-bar.sb-bar-lg-none { display: none; } body.sb-has-bar.sb-bar-until-lg { padding-bottom: 0; } }
@media (min-width: 768px) { .sb-action-bar.sb-bar-md-none { display: none; } body.sb-has-bar.sb-bar-until-md { padding-bottom: 0; } }
/* ------------------------------------------------------ 28. Tom Select -- */
.ts-wrapper.form-control, .ts-wrapper.form-select { min-height: 34px; padding: 0 !important; display: flex; }
.ts-wrapper.focus.form-control, .ts-wrapper.focus.form-select { border-color: var(--sb-brand); box-shadow: var(--sb-focus); }
.ts-wrapper .ts-control { min-height: 32px; padding: .3125rem .625rem; font-size: .875rem; line-height: 1.4; color: var(--sb-ink); border-radius: var(--sb-radius); cursor: text; }
.ts-wrapper .ts-control > input { font-size: .875rem; color: var(--sb-ink); min-width: 8rem; }
.ts-wrapper .ts-control > input::placeholder { color: #8a949d; opacity: 1; }
.ts-wrapper.sb-ts-search { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356666f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") no-repeat .625rem center / 1rem; }
.ts-wrapper.sb-ts-search .ts-control { padding-left: 2rem; }
.ts-wrapper.multi.has-items .ts-control { padding: .25rem .375rem 0; gap: 0; }
.ts-wrapper.multi .ts-control > div.item {
display: inline-flex; align-items: center; margin: 0 .25rem .25rem 0; padding: 0 0 0 .5rem; min-height: 24px; font-size: .8125rem; line-height: 1.3;
background: var(--sb-brand-50); border: 1px solid var(--sb-brand-200); border-radius: var(--sb-radius); color: var(--sb-brand-800); font-weight: 500;
}
.ts-wrapper.multi .ts-control > div.item.active { background: var(--sb-brand-100); color: var(--sb-brand-800); border-color: var(--sb-brand-600); }
.ts-wrapper.plugin-remove_button .item .remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-height: 22px; margin-left: .25rem; border-left: 1px solid var(--sb-brand-200) !important; border-radius: 0 var(--sb-radius) var(--sb-radius) 0; color: var(--sb-brand-800); font-size: .9375rem; line-height: 1; text-decoration: none; }
.ts-wrapper.plugin-remove_button .item .remove:hover { background: var(--sb-brand-100); }
.ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
margin-top: .375rem; padding: .375rem; border: 1px solid var(--sb-line-2); border-radius: var(--sb-radius-lg); background: #fff; box-shadow: var(--sb-shadow-pop); font-size: .875rem; color: var(--sb-ink);
}
.ts-dropdown .option, .ts-dropdown .create, .ts-dropdown .no-results { min-height: 36px; padding: .4375rem .75rem; border-radius: var(--sb-radius); }
.ts-dropdown .option small, .ts-dropdown .sb-ts-sub { color: var(--sb-muted); font-size: .8125rem; }
.ts-dropdown .active, .ts-dropdown .create.active { background: var(--sb-brand-50); color: var(--sb-ink); }
.ts-dropdown .highlight, .ts-dropdown mark { background: none; padding: 0; font-weight: 700; color: var(--sb-brand-800); text-decoration: underline; text-decoration-color: var(--sb-brand); text-underline-offset: .2em; }
.ts-dropdown .no-results { color: var(--sb-ink-2); }
.ts-wrapper.single .ts-control::after { display: none; }
/* ------------------------------------------------------- 29. Планшет и телефон -- */
@media (max-width: 1199.98px) {
.sb-main { padding: 2rem 2rem 3rem; }
.sb-article-grid > .sb-chat { height: auto; }
.sb-chat-list { max-height: 34rem; }
}
@media (max-width: 991.98px) {
.sb-fact { grid-template-columns: 12rem minmax(0, 1fr) auto; }
}
@media (max-width: 767.98px) {
:root { --sb-header-h: 60px; --sb-pad: 1.25rem; --sb-gap: 1rem; --sb-gutter: 1rem; }
/* размеры заголовков на телефоне те же, что на компьютере: 20 / 17 / 15 */
.sb-header-inner { padding: 0 .5rem 0 1rem; gap: .25rem; }
.sb-brand { gap: .625rem; }
.sb-brand img { width: 30px; height: 33px; }
.sb-brand-text b { font-size: 1.0625rem; }
.sb-wrap { padding: 1.25rem var(--sb-gutter) 2rem; }
.sb-main { padding: 1.25rem var(--sb-gutter) 2rem; }
.card { --bs-card-border-radius: var(--sb-radius-lg); --bs-card-inner-border-radius: calc(var(--sb-radius-lg) - 1px); }
.sb-page-head { margin-bottom: 1.25rem; gap: .75rem; }
.sb-page-head-main { flex-basis: 100%; }
.sb-page-actions { width: 100%; }
.sb-page-actions > .btn, .sb-page-actions > .dropdown { flex: 1 1 auto; }
.sb-page-actions > .dropdown > .btn { width: 100%; }
.sb-summary { margin-top: 0; }
.sb-actions, .sb-queue-actions { flex-direction: column; align-items: stretch; width: 100%; }
.sb-actions > .btn, .sb-queue-actions > .btn { width: 100%; }
.sb-fact { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label act" "value value"; gap: .25rem 1rem; }
.sb-fact dt { grid-area: label; align-self: center; }
.sb-fact .sb-fact-value { grid-area: value; }
.sb-fact .sb-fact-act { grid-area: act; }
.sb-fact-more { grid-column: 1 / -1; }
.sb-rows > li { flex-direction: column; gap: .375rem; }
.sb-fold > summary { min-height: 48px; }
.sb-remark { padding: 1rem; }
.sb-paper-desk { padding: 0; background: #fff; }
.sb-paper { border: 0; padding: 1.25rem var(--sb-pad) .5rem; font-size: 1rem; text-align: left; hyphens: manual; }
.sb-paper p { text-indent: 1.5em; }
.sb-chat-head, .sb-chat-list, .sb-chat-form { padding-left: 1rem; padding-right: 1rem; }
.sb-chat-list { max-height: 65vh; }
.sb-msg { max-width: 88%; }
.sb-chat-hint { display: none; }
.sb-author { padding: 1rem; }
.sb-sec-head { margin-bottom: 1rem; }
/* поле текста на телефоне – от края до края карточки: так шире строка и панель инструментов */
.sb-ed-shell { margin: 0 calc(-1 * var(--sb-pad)); border-left: 0; border-right: 0; border-radius: 0; }
.sb-editor { padding: 1rem var(--sb-pad) 1.5rem; min-height: 18rem; font-size: 1.0625rem; text-align: left; hyphens: manual; }
.sb-editor p { text-indent: 1.5em; }
.sb-toolbar { padding: .375rem calc(var(--sb-pad) - .375rem); gap: .25rem .5rem; }
.sb-tb-btn { min-width: 44px; height: 44px; }
.sb-ed-missing { padding: .875rem 1rem; }
.sb-ed-missing > .sb-ic { display: none; }
.sb-notice { padding: .875rem 1rem; gap: .625rem; }
.sb-auth { padding: 1.25rem var(--sb-gutter) 2rem; gap: 2rem; }
.sb-export-main .btn { width: 100%; }
.sb-filters .sb-f-role { flex: 1 1 100%; }
.sb-filters .btn { width: 100%; }
.sb-list-foot .btn, .sb-book-ready-act { width: 100%; }
.sb-u-act .btn { width: 100%; }
.sb-footer-inner { padding: 1rem var(--sb-gutter); }
.sb-footer-inner span + span { display: none; }
.sb-set { grid-template-columns: minmax(0, 1fr); }
.sb-set-ctl.is-switch { justify-self: start; }
.modal { --bs-modal-margin: 1rem; }
.modal-footer { flex-direction: column-reverse; align-items: stretch; }
.modal-footer > .btn { width: 100%; }
/* панель отметок на телефоне – внизу экрана */
.sb-bulk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; border-radius: 0; padding: .625rem var(--sb-gutter) calc(.625rem + env(safe-area-inset-bottom)); gap: .375rem; }
.sb-bulk-count { width: 100%; justify-content: space-between; }
.sb-bulk-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
body.sb-bulk-on { padding-bottom: 132px; }
}
@media (max-width: 575.98px) {
.sb-chat-form .sb-chat-row .btn { flex: 1 1 auto; }
}
@media (max-width: 399.98px) {
.sb-brand-text small { display: none; }
.sb-action-bar { gap: .375rem; }
.sb-action-bar .btn > .sb-ic { display: none; }
}
@media (max-width: 359.98px) {
.sb-action-bar .sb-bar-iconable > span { display: none; }
.sb-action-bar .sb-bar-iconable > .sb-ic { display: block; }
}
/* ------------------------------------------------------------ 30. Печать -- */
@media print {
.sb-header, .sb-footer, .sb-side, .sb-action-bar, .sb-bulk, .sb-toolbar { display: none !important; }
body { background: #fff; }
.card { border: 0; }
}
/* ------------------------------------------------- 31. Дополнения -- */
/* ширины столбцов таблицы пользователей (table-layout: fixed) */
.sb-users-table > thead > tr > th:nth-child(1) { width: 34%; }
.sb-users-table > thead > tr > th:nth-child(2) { width: 17%; }
.sb-users-table > thead > tr > th:nth-child(3) { width: 20%; }
.sb-users-table > thead > tr > th:nth-child(4) { width: 17%; }
.sb-users-table > thead > tr > th:nth-child(5) { width: 12%; }
/* всплывающие сообщения: снизу справа, на телефоне – над нижней панелью */
.sb-toasts { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1090; display: grid; gap: .5rem; }
@media (max-width: 767.98px) {
.sb-toasts { left: var(--sb-gutter); right: var(--sb-gutter); bottom: calc(1rem + env(safe-area-inset-bottom)); }
.sb-toasts .toast { width: 100%; }
body.sb-has-bar .sb-toasts { bottom: calc(82px + env(safe-area-inset-bottom)); }
body.sb-bulk-on .sb-toasts { bottom: calc(140px + env(safe-area-inset-bottom)); }
}
/* кнопка с файлом внутри (