/* Кружки с инициалами убраны из списков людей: фотографий не грузим, поэтому
   «АИ» рядом с «Анна Иванова» ничего не сообщал — только шум. Вернуть аватар,
   когда появятся фотографии. */
:root {
  --bg: #f5f3ee;
  --surface: #ffffff;
  --ink: #1d2824;
  --muted: #66736d;
  --brand: #1f4b3f;
  --brand-soft: #e5f0ec;
  --accent: #c8945c;
  --danger: #a33a32;
  --ok: #2f7d55;
  --border: #d9dedb;
  /* 56px вместо прежних 76: у управляющего девять вкладок, и на кнопках
     базового размера (16px, жирные, padding .8rem) шапка занимала пятую часть
     экрана и всё равно не помещалась. Шкала взята та же, что у сотрудника. */
  --topbar-height: 56px;
  --app-width: 1280px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* "Шалфей" - onboarding roadmap screens only (DESIGN_SPEC_sage.md). Do not
     reuse on existing screens, do not delete the tokens above. */
  --sg-bg:        #F4F2EC;
  --sg-card:      #FFFFFF;
  --sg-line:      #E6E2D8;

  --sg-head:      #4A6152;
  --sg-head-2:    #5C7565;
  --sg-head-text: #EDF2EE;

  --sg-acc:       #4A6152;
  --sg-acc-soft:  #E8EFE9;
  --sg-acc-text:  #3A4E42;

  --sg-ok:        #7FA05C;
  --sg-ok-soft:   #EFF4E6;
  --sg-warn:      #C08A3E;
  --sg-warn-soft: #FAF0E0;

  /* Red is manager-only: for the trainee an overdue step is anxiety, for the
     manager it is a signal to act. Employee screens stay on --sg-warn. */
  --sg-red:       #A85A4A;
  --sg-red-soft:  #F7EAE6;

  --sg-text:      #2A2E2B;
  --sg-text-2:    #6E7570;
  --sg-muted:     #A8ACA6;

  --sg-r-card:    16px;
  --sg-r-stat:    14px;
  --sg-r-btn:     10px;
  --sg-r-chip:     9px;
  --sg-r-phone:   24px;
}
* { box-sizing: border-box; }
/* Место под вертикальную полосу прокрутки резервируется всегда: иначе короткая
   вкладка шире длинной на ширину скроллбара, и при переходе окно дёргается. */
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 12px; padding: .8rem 1rem; background: var(--brand); color: white; font-weight: 700; }
button.secondary { background: var(--brand-soft); color: var(--brand); }
button.ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); }
button:disabled { opacity: .55; cursor: not-allowed; }
/* Полоса шапки во всю ширину, а её содержимое — по колонке рабочей области.
   Раньше логотип и «Выйти» прижимались к краям монитора, а страница шла узкой
   колонкой по центру: на широком экране это читалось как две разные страницы.
   max() оставляет обычные поля на узком экране, где колонки и так нет. */
.topbar { position: sticky; top: 0; z-index: 10; min-height: var(--topbar-height); display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem max(1rem, calc((100% - var(--app-width)) / 2 + 1.5rem)); background: var(--brand); color: white; box-shadow: 0 3px 18px rgba(0,0,0,.12); }
.topbar-brand { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: .6rem; }
/* Фон знака темнее шапки лишь на пару тонов, поэтому квадрат обводим тем же
   волоском, что и .icon-btn рядом - иначе край знака теряется. */
.topbar-mark { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); }
.topbar-brand strong { font-size: 14px; font-weight: 600; }
.topbar-brand-text { min-width: 0; }
.topbar-brand strong, .topbar-brand span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-brand span { opacity: .8; font-size: 11.5px; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
.icon-btn { width: 32px; height: 32px; min-width: 32px; border-radius: 999px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: white; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }

/* У сотрудника рабочая область — телефонная колонка 420px, шапка равняется
   по ней же, а не по ширине монитора. */
.topbar.topbar-sage { flex-direction: row; align-items: center; gap: .4rem; padding: .5rem max(.7rem, calc((100% - 420px) / 2)); background: var(--sg-head); min-height: 0; }
/* У сотрудника шапка компактная: словесную часть прячем, знак оставляем -
   иначе на самом массовом экране бренда нет вообще. Ниже 430px четыре вкладки
   занимают всю строку, поэтому до 520px знак тоже скрыт. */
.topbar-sage .topbar-brand { display: none; }
.topbar-sage .topbar-brand-text { display: none; }
@media (min-width: 521px) {
  .topbar-sage .topbar-brand { display: flex; }
  .topbar-sage .topbar-mark { width: 26px; height: 26px; border-radius: 7px; }
  /* На экране шире телефона шапке даём колонку просторнее, чем 420 px у
     содержимого: знак бренда и кнопка выхода забирают часть строки, и в
     колонку по ширине текста пять вкладок уже не помещаются. */
  .topbar.topbar-sage { padding-left: max(.7rem, calc((100% - 520px) / 2)); padding-right: max(.7rem, calc((100% - 520px) / 2)); }
}
/* Название рядом со знаком, в одну строку — экран входа утверждён Сергеем
   26.08.2026 ЕДИНЫМ шаблоном входа для всех продуктов (D:\Project_AI\Штаб\
   reference\design\etalon-vhod-shablon.html, собран из этой же вёрстки).
   Скопировано дословно, менять только вместе с эталоном. */
.login-mark { display: block; width: 64px; height: 64px; border-radius: 16px; margin-bottom: .9rem; }
.login-brand { display: flex; align-items: center; gap: .95rem; margin-bottom: 1.1rem; }
.login-brand .login-mark { margin-bottom: 0; flex: 0 0 auto; }
.login-brand-text { min-width: 0; }
.login-brand-text strong { display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.01em; }
.login-brand-text span { display: block; margin-top: .3rem; color: var(--muted); font-size: .92rem; line-height: 1.35; }

/* Плоская шапка сотрудника (решение владельца 25.08.2026): бургер не
   рисуется, все кнопки видны сразу на любой ширине; логотип «Компас»
   (жирное имя + тонкая подпись) всегда на месте. */
.topbar-flat .nav-toggle { display: none !important; }
.topbar-flat .topbar-brand { display: flex; }
.topbar-flat .tabs {
  position: static; display: flex !important; flex-direction: row; align-items: center;
  flex: 1 1 auto; justify-content: flex-end; gap: .35rem;
  min-width: 0; max-width: none; max-height: none; overflow: visible;
  padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
.topbar-flat .tabs button,
.topbar-flat.topbar-sage .tabs button {
  width: auto; text-align: center; white-space: nowrap;
  min-height: 44px; padding: .3rem .6rem; font-size: 12px; line-height: 1.15;
  border-radius: 10px; background: transparent; color: var(--sg-head-text); border: 0;
}
.topbar-flat .tabs button.active,
.topbar-flat.topbar-sage .tabs button.active { background: #fff; color: var(--sg-acc-text); }
.topbar-flat .tabs .tab-gear { min-width: 44px; display: flex; align-items: center; justify-content: center; }
.topbar-flat .topbar-actions .icon-btn { width: 44px; height: 44px; min-width: 44px; }
@media (max-width: 520px) {
  /* На телефоне подпись логотипа уступает место кнопкам, имя остаётся. */
  .topbar-flat .topbar-brand span { display: none; }
  .topbar-flat .topbar-brand { display: flex; }
}
.topbar-sage .topbar-actions { flex: 1 1 auto; justify-content: flex-start; gap: .4rem; }
.topbar-sage .tabs { flex: 1 1 auto; gap: .2rem; }
/* Кнопка выхода — обычный элемент строки, а не слой поверх неё. Раньше она
   висела absolute у правого края и накрывала последнюю вкладку: «Профиль»
   оказывался под иконкой и не нажимался. */
.topbar-sage .topbar-actions .icon-btn { flex: 0 0 auto; width: 32px; height: 32px; min-width: 32px; background: transparent; border-color: transparent; }
/* Отступы у вкладок сжаты: пять вкладок должны уместиться в колонку 420 px
   вместе с кнопкой выхода, иначе строка уезжает в прокрутку. */
.topbar-sage .tabs button { padding: .4rem .3rem; min-height: 0; font-size: 11.5px; font-weight: 500; border-radius: 8px; background: transparent; color: var(--sg-head-text); border: 0; }
.topbar-sage .tabs button.active { background: #fff; color: var(--sg-acc-text); font-weight: 500; }
.topbar-sage .icon-btn { width: 32px; height: 32px; min-width: 32px; font-size: 15px; }
/* Рабочая область во всю ширину монитора: таблице контроля адаптации и спискам
   1120px тесно, по краям оставались пустые поля. Экраны, где читают текст или
   заполняют форму, сами сужаются до читаемой колонки - длинная строка читается
   плохо, растягивать всё подряд нельзя. */
/* Одна ширина рабочей области на все экраны. Раньше их было три — 980px на
   «Обучении» и «Пользователях», 1040px на «Маршрутах», 1400px на «Главной» —
   и при переходе между вкладками окно прыгало.
   1280px: на ноутбуке 1366 занимает почти всю ширину, на 1920 не растягивает
   таблицы в нечитаемую строку. Экран сотрудника (.sg-screen) сюда не входит:
   он телефонный по замыслу. */
main { width: min(var(--app-width), 100%); margin: 0 auto; padding: 1.25rem 1.5rem; }
.sg-page { width: 100%; margin: 0 auto; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1rem; box-shadow: 0 8px 28px rgba(31,75,63,.06); }
.login-card { max-width: 430px; margin: 6vh auto; }
.login-card h1 { margin: 0 0 1rem; font-size: 1.45rem; }
/* Подпись «Код» убрана с экрана (решение Сергея 26.08, единый шаблон входа),
   но оставлена для скринридеров. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: .8rem; background: white; color: var(--ink); }
/* Галочка и радиокнопка — не поля ввода: width:100% растягивал их на всю строку,
   подпись уезжала к правому краю, и было непонятно, что к чему относится.
   Правим в корне, а не в каждом месте отдельно. */
/* flex: 0 0 auto — иначе во flex-строке кружок сжимается тем сильнее,
   чем длиннее подпись рядом, и разный размер читается как подсказка. */
input[type="checkbox"], input[type="radio"] { width: auto; flex: 0 0 auto; border-radius: 0; padding: 0; }
/* Поля выравниваем по верху и растягиваем на одну высоту: при align-items: end
   подписи гуляли волной, потому что input и select разной высоты. */
.inline-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.inline-form label { flex: 1 1 130px; grid-template-rows: auto 1fr; gap: .3rem; font-weight: 600; font-size: .85rem; }
.inline-form input, .inline-form select { padding: .55rem .6rem; height: 2.75rem; align-self: end; }
.inline-form button { flex: 0 0 auto; height: 2.75rem; align-self: end; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.2rem; }
/* Вкладки прокручиваются вбок, когда не влезают, но полосу прокрутки не
   показываем: в шапке высотой 56px она съедает половину строки и читается как
   поломка вёрстки. `safe center` — чтобы при переполнении первая вкладка не
   уезжала за левый край: обычный center в таких случаях делает её недоступной. */
.tabs { flex: 1 1 auto; display: flex; justify-content: center; justify-content: safe center; gap: .25rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Вкладки не наследуют базовую кнопку: та рассчитана на действие в форме
   (16px, жирная, padding .8rem), а здесь их девять в один ряд. */
.tabs button { white-space: nowrap; padding: .38rem .6rem; font-size: 12px; font-weight: 500; border-radius: 8px; background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.28); }
.tabs button.active { background: white; color: var(--brand); border-color: white; font-weight: 600; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.metric { padding: 1rem; background: white; border: 1px solid var(--border); border-radius: 16px; }
.metric strong { display: block; font-size: 1.7rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
.assignment { display: grid; gap: .7rem; }
.assignment h3 { margin: 0; }
.badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge { display: inline-flex; padding: .3rem .55rem; border-radius: 999px; background: #eef1ef; color: #4b564f; font-size: .8rem; font-weight: 700; }
.badge.ok { background: #e0f2e8; color: #1f6b46; }
.badge.warn { background: #f7ead8; color: #87511d; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 .7rem; }
.list { display: grid; gap: .7rem; }
.reference-group { margin-bottom: 1.5rem; }
.reference-group h3 { margin: 0 0 .6rem; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.reference-link { display: block; width: 100%; min-height: 44px; padding: .75rem; margin-bottom: .7rem; background: none; border: 1px solid var(--border); border-radius: 12px; text-align: left; font: inherit; font-weight: 500; color: var(--brand); cursor: pointer; }
.reference-link:hover, .reference-link:focus-visible { text-decoration: underline; background: var(--brand-soft); }
.team-member { display: grid; gap: .7rem; }
.progress { height: 10px; background: #e5e8e6; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); }
dialog { width: min(760px, calc(100% - 1.2rem)); max-height: calc(100vh - 1.2rem); overflow: auto; border: 0; border-radius: 20px; padding: 1rem; }
dialog::backdrop { background: rgba(13, 25, 21, .55); }
/* Регламент — это длинный текст со скриншотами: в колонке 760 px он на большом
   экране читается узкой лентой, а картинки ужимаются вдвое против оригинала.
   Окно с текстом регламента шире остальных диалогов. */
dialog:has(.regulation-content) { width: min(1100px, calc(100% - 1.2rem)); }
/* Просмотр картинки во весь экран: тёмная подложка, картинка целиком без
   обрезки, нажатие мимо неё закрывает. */
.image-viewer { width: min(96vw, 1600px); max-width: 96vw; max-height: 96vh; padding: .5rem; background: #0d1915; }
.image-viewer img { display: block; max-width: 100%; max-height: calc(96vh - 3.5rem); margin: 0 auto; object-fit: contain; cursor: zoom-in; }
.image-viewer .dialog-close { margin-bottom: .5rem; }
/* Увеличено: картинка в своём размере, окно листается пальцем. */
.image-viewer.is-zoomed img { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
/* sticky, не float: диалог сам и есть скролл-контейнер (dialog { overflow:
   auto }), и плавающая кнопка уезжала вместе с длинным текстом регламента —
   после прокрутки до конца страницы закрыть можно было только вернувшись
   наверх (жалоба живого испытателя на мобильном, 25.08.2026). margin-inline-
   start:auto прижимает к правому краю без float, что со sticky не сочетается
   надёжно. Минимум 44px — тач-цель по WCAG. */
.dialog-close { position: sticky; top: .5rem; float: none; display: block; margin-inline-start: auto; margin-bottom: -2.75rem; width: 44px; height: 44px; padding: 0; border-radius: 50%; z-index: 5; }
.install-guide { clear: both; display: grid; gap: 1rem; }
.install-guide h2 { margin: 0; }
.install-guide h3 { margin: 0 0 .3rem; }
.install-guide ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .25rem; }
.lesson-changelog { margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.lesson-changelog summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.diff { display: grid; gap: .35rem; margin-top: .5rem; }
.diff-item { padding: .55rem .7rem; border-radius: 8px; font-family: ui-monospace, monospace; font-size: .86rem; }
.diff-item.added { background: #e3f5e9; color: #235f3f; }
.diff-item.removed { background: #fae7e5; color: #83302b; text-decoration: line-through; }
/* overflow-wrap — страховка от длинного адреса, оставшегося простым текстом:
   на телефоне он иначе распирает карточку и уезжает за край экрана. */
.regulation-content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; background: #f7f8f7; padding: 1rem; border-radius: 12px; }
.regulation-content p { margin: 0 0 .5rem; }
.regulation-content h2 { font-size: 1.2rem; margin: 1rem 0 .4rem; }
.regulation-content h3 { font-size: 1.05rem; margin: .8rem 0 .3rem; }
.regulation-content ul, .regulation-content ol { padding-left: 1.4rem; margin: .3rem 0; }
.regulation-content img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: .6rem 0; cursor: zoom-in; }
.regulation-content a { color: var(--brand); }
/* Отступы Quill: html хранит только класс, глубину рисуем сами. */
.regulation-content .ql-indent-1 { padding-left: 1.5em; }
.regulation-content .ql-indent-2 { padding-left: 3em; }
.regulation-content .ql-indent-3 { padding-left: 4.5em; }
.regulation-content .ql-indent-4 { padding-left: 6em; }
.regulation-content li.ql-indent-1 { padding-left: 0; margin-left: 1.5em; }
.regulation-content li.ql-indent-2 { padding-left: 0; margin-left: 3em; }
.regulation-content li.ql-indent-3 { padding-left: 0; margin-left: 4.5em; }
.regulation-content li.ql-indent-4 { padding-left: 0; margin-left: 6em; }

/* Редактор Quill, перекрашенный под приложение. */
.rich-editor-box .ql-toolbar.ql-snow { border: 1px solid var(--border); border-radius: 12px 12px 0 0; background: var(--brand-soft); font-family: inherit; }
.rich-editor-box .ql-container.ql-snow { border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; background: white; font-family: inherit; font-size: 1rem;  height: auto; }
/* height:auto — у Quill контейнер 100% высоты коробки, а панель инструментов
   стоит в той же коробке: редактор вылезал вниз на высоту панели и
   перекрывал следующее поле формы («Раздел каталога» при создании регламента). */
.rich-editor-box .ql-editor { min-height: 9rem; max-height: 26rem; overflow-y: auto; color: var(--ink); line-height: 1.6; }
.rich-editor-box .ql-editor img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: .6rem 0; }
.rich-editor-box .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.rich-editor-box .ql-snow .ql-stroke { stroke: var(--brand); }
.rich-editor-box .ql-snow .ql-fill { fill: var(--brand); }
.rich-editor-box .ql-snow .ql-picker { color: var(--brand); }
.rich-editor-box .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-editor-box .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); }
.rich-editor-box .ql-snow.ql-toolbar button:hover .ql-fill, .rich-editor-box .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }

/* Подсказка ссылки Quill — по-русски (надписи там нарисованы через CSS). */
.ql-snow .ql-tooltip::before { content: "Ссылка:"; }
.ql-snow .ql-tooltip[data-mode=link]::before { content: "Адрес ссылки:"; }
.ql-snow .ql-tooltip a.ql-action::after { content: "Изменить"; }
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Сохранить"; }
.ql-snow .ql-tooltip a.ql-remove::before { content: "Убрать"; }
/* Пункты выпадашки «Заголовок». */
.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "Обычный текст"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "Заголовок"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "Подзаголовок"; }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.profile-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.profile-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--border); }
.profile-readonly { margin-bottom: 1rem; }
.avatar-placeholder {
  display: inline-block; text-align: center; background: var(--brand-soft);
  color: var(--brand); font-weight: 700;
}
/* Профиль — это форма на несколько коротких полей, а не таблица: во всю
   ширину монитора строка ввода телефона выглядит нелепо. Колонку ставим по
   центру рабочей области — карточка у левого края посреди пустого экрана
   смотрится обрезком. */
.profile-card { max-width: 560px; margin-left: auto; margin-right: auto; }
.profile-title { text-align: center; justify-content: center; }
/* Кнопка в форме — это действие, а не поле: в гриде формы она растягивалась
   на всю ширину карточки, и «Сменить пароль» выходила во весь экран. */
.profile-card button { justify-self: center; min-width: 12rem; }
.profile-head .row-actions button { justify-self: start; min-width: 0; }
#content.desk-skin .profile-row { padding: .4rem 0; border-color: var(--sg-line); font-size: 12.5px; }
#content.desk-skin .profile-row span:first-child { color: var(--sg-text-2); }
#content.desk-skin .profile-head { gap: .9rem; margin-bottom: .8rem; }
#content.desk-skin .profile-head h3 { font-size: 13px; font-weight: 600; margin: 0; }
#content.desk-skin .button-link { min-height: 32px; padding: .4rem .8rem; font-size: 12.5px; font-weight: 500; border-radius: var(--sg-r-btn); }
/* Ссылка, которая должна выглядеть и нажиматься как кнопка (например, уход
   в Telegram по deep-link: это переход, а не действие внутри страницы). */
.button-link {
  display: inline-block; min-height: 44px; padding: .7rem 1.1rem;
  background: var(--brand); color: white; border-radius: 12px;
  font-weight: 600; text-decoration: none;
}
.button-link:hover, .button-link:focus-visible { filter: brightness(1.08); text-decoration: none; }
/* Блок подключения уведомлений. Пока не подключено — заметная рамка вверху
   экрана: серый текст в подвале люди не находили (замечание №29). После
   привязки от него остаётся одна строка, чтобы не занимать место зря. */
/* Только нижний отступ: сокращённая запись margin обнуляла и боковые auto, из-за
   чего в профиле блок не вставал в колонку карточек, а разъезжался во всю ширину. */
.notifications-card { margin-bottom: 1rem; }
.notifications-setup { border: 2px solid var(--accent); }
.notifications-connected { padding: .6rem 1rem; }
.notifications-steps { margin: .6rem 0; padding-left: 1.2rem; }
.notifications-steps li { margin: .2rem 0; }
.quiz-question { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.option { display: flex; align-items: flex-start; gap: .5rem; padding: .55rem 0; font-weight: 400; cursor: pointer; }
.option input { width: auto; margin-top: .25rem; }
.toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: var(--ink);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 12px 42px rgba(0,0,0,0.4);
  font-weight: 600;
  text-align: center;
  max-width: min(480px, calc(100vw - 2rem));
  font-size: 0.95rem;
  pointer-events: none;
  animation: slideDownToast 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2px solid var(--accent);
}
@keyframes slideDownToast {
  from { transform: translate(-50%, -20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
table { width: 100%; border-collapse: collapse; background: white; border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
@media (max-width: 720px) {
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid { grid-template-columns: 1fr; }
  main { padding: .75rem; }
  .card { border-radius: 15px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  td { border-bottom: 0; padding: .4rem .7rem; }
  tr { border-bottom: 1px solid var(--border); padding: .6rem 0; }
  /* Кнопки редактора под палец: по умолчанию Quill рисует их в 28 px шириной,
     на телефоне в них не попасть. */
  .rich-editor-box .ql-snow.ql-toolbar button { width: 40px; height: 40px; }
  .rich-editor-box .ql-editor { min-height: 12rem; }
}
.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.editor-grid form, .editor-grid section { display: grid; gap: .85rem; }
.editor-grid h3 { margin: 0; }
.form-stack { display: grid; gap: .65rem; margin-top: .75rem; }
.check-row { display: flex; align-items: flex-start; gap: .55rem; font-weight: 500; cursor: pointer; }
.check-row input { width: auto; margin-top: .2rem; }
.draft-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: 12px; }
.draft-row[draggable="true"] { cursor: grab; }
.draft-row.dragging { opacity: .4; }
.drag-handle { display: inline-block; margin-right: .4rem; color: var(--muted); cursor: grab; }
.roster-row { display: flex; align-items: center; flex-wrap: nowrap; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; white-space: nowrap; }
/* min-width, а не 0: в плотной строке остальные ячейки идут с nowrap, и на
   узком экране имя ужималось до нулевой ширины — исчезало совсем вместо того,
   чтобы обрезаться многоточием. Строка и так прокручивается по горизонтали. */
.roster-row strong { flex: 1 1 auto; min-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.roster-row-edit { overflow-x: visible; white-space: normal; flex-wrap: wrap; }
.roster-row-edit input, .roster-row-edit select { flex: 1 1 130px; width: auto; padding: .45rem .5rem; }
.roster-row-inactive > strong,
.roster-row-inactive > .muted { opacity: .7; }
.roster-row-inactive:focus-within > strong,
.roster-row-inactive:focus-within > .muted { opacity: 1; }
.compact { max-height: 220px; overflow: auto; padding: .25rem; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; }
.notice { padding: .75rem; border-radius: 12px; background: #f7ead8; color: #87511d; }
/* Следующий шаг после «Подтвердить ознакомление»: зелёный, не тревожный —
   это продвижение, а не предупреждение. Кнопка во всю ширину, чтобы её
   нельзя было не заметить над длинным текстом регламента. */
.lesson-next-banner { display: grid; gap: .6rem; background: var(--brand-soft); color: var(--brand); margin-bottom: .8rem; }
.lesson-next-banner button { width: 100%; }
/* Адресная вставка урока: часть материала, но видно, что это «для твоей
   должности» — брендовая рамка слева, фон подложки. */
.lesson-insert { border-left: 4px solid var(--brand); background: var(--brand-soft); border-radius: 0 12px 12px 0; padding: .75rem 1rem; margin-top: .9rem; }
.lesson-insert h3 { margin-top: 0; color: var(--brand); }
.sg-warning-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.sg-warning-list li { margin: .2rem 0; }
fieldset { min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: .75rem; }
legend { padding: 0 .35rem; font-weight: 700; }
.table-wrap { overflow-x: auto; }
.loading-card { min-height: 80px; }
@media (max-width: 820px) {
  .editor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .two-cols { grid-template-columns: 1fr; }
  .draft-row { align-items: stretch; flex-direction: column; }
  .topbar-brand { flex: 0 1 40%; max-width: 40%; }
  .topbar-brand strong { font-size: .95rem; }
  .topbar-brand span { font-size: .74rem; }
  .tabs { justify-content: flex-start; }
  .tabs button { padding: .55rem .7rem; font-size: .82rem; }
  .topbar-sage .tabs button { padding: .4rem .5rem; font-size: 10.5px; }
  .topbar-sage .tabs button { padding: .4rem .65rem; font-size: 11.5px; }
}

/* ===== "Шалфей" - onboarding roadmap screens (DESIGN_SPEC_sage.md) ===== */

/* Дизайн-спека держит 420px («карточка телефона») — на телефоне это и
   есть весь экран, но на планшете/десктопе те же 420px посреди широкого
   поля читаются зажатыми (живая правка 25.08.2026, Сергей смотрел с
   планшета: «Мой путь»/«База знаний» узкие, «Моё обучение»/«Профиль»
   нормальные — те не используют .sg-screen). Ширина растёт с экраном, как
   у обычных страниц (main — min(1280px,100%)), без горизонтальной прокрутки. */
.sg-screen { max-width: min(420px, 100%); margin: 0 auto; font-size: 13px; color: var(--sg-text); }
@media (min-width: 600px) {
  /* Не шире 680px и на десктопе тоже: .sg-trail — вертикальная лента,
     прибитая к левому краю (left: 46px, карточки margin-left: 68px), не
     сетка. На 860px+ она осталась бы у левого края с пустым полем справа —
     нашла на design-critique после первого прохода, здесь единый потолок. */
  .sg-screen { max-width: min(680px, 100%); }
}
.sg-header { background: var(--sg-head); border-radius: var(--sg-r-card); padding: 15px 17px 17px; display: flex; align-items: center; gap: .7rem; }
.sg-header-name { font-size: 15px; font-weight: 500; color: #fff; }
.sg-header-role { font-size: 12px; font-weight: 400; color: var(--sg-head-text); opacity: .75; }
.sg-path-card { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: .85rem .9rem; margin-top: .8rem; }
.sg-path-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.sg-path-card-head strong { font-size: 14px; font-weight: 500; color: var(--sg-text); }
.sg-path-card-head span { font-size: 12px; color: var(--sg-text-2); white-space: nowrap; }
.sg-progress { height: 6px; border-radius: 999px; background: var(--sg-line); overflow: hidden; }
.sg-progress .sg-fill { display: block; height: 100%; background: var(--sg-ok); width: 0; transition: width .6s cubic-bezier(.2,.8,.3,1), height .6s cubic-bezier(.2,.8,.3,1); }
.sg-mentor-card { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: .8rem .9rem; margin-top: .8rem; display: flex; align-items: center; gap: .7rem; }
.sg-mentor-info { flex: 1; min-width: 0; }
.sg-mentor-info strong { display: block; font-size: 13px; font-weight: 500; color: var(--sg-text); }
.sg-mentor-info span { display: block; font-size: 11px; color: var(--sg-text-2); }
.sg-call-btn { width: 36px; height: 36px; min-width: 44px; min-height: 44px; border-radius: 50%; background: var(--sg-acc); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; flex: 0 0 auto; }
.sg-today-banner { margin-top: .8rem; background: var(--sg-warn-soft); color: var(--sg-warn); border-radius: var(--sg-r-stat); padding: .55rem .8rem; font-size: 12px; font-weight: 500; }
.sg-today-banner.sg-done { background: var(--sg-ok-soft); color: var(--sg-ok); }

.sg-trail { position: relative; margin-top: 1.1rem; padding-left: 0; }
.sg-trail::before { content: ""; position: absolute; left: 46px; top: 0; bottom: 0; width: 3px; background: var(--sg-line); border-radius: 999px; }
.sg-trail-fill { position: absolute; left: 46px; top: 0; width: 3px; background: var(--sg-ok); border-radius: 999px; height: 0; transition: height .6s cubic-bezier(.2,.8,.3,1); }
.sg-day { position: relative; margin-bottom: 1.1rem; }
.sg-day-heading { font-size: 12px; font-weight: 500; color: var(--sg-text-2); margin: 0 0 .5rem 68px; }
.sg-day-past .sg-day-heading { color: var(--sg-muted); text-decoration: line-through; }
/* Node is centered on the 46px trail line and 33px wide, so its right edge
   sits at ~62.5px - everything to the right of it starts at 68px (safe gap)
   to stop text/cards printing over the node (bug reported 2026-08-10). */
.sg-node { position: absolute; left: 46px; top: 2px; transform: translateX(-50%); width: 33px; height: 33px; border-radius: 50%; border: 3px solid var(--sg-bg); background: var(--sg-muted); z-index: 1; }
.sg-node.sg-node-current { background: var(--sg-warn); }
.sg-node.sg-node-done { background: var(--sg-ok); }
.sg-node.sg-node-flag { background: var(--sg-acc); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }

.sg-step-card { margin-left: 68px; background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: .65rem .75rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; transition: all .35s cubic-bezier(.2,.8,.3,1); }
.sg-step-card.sg-done { border-color: var(--sg-ok); }
.sg-step-future .sg-step-card { background: transparent; border-style: dashed; }
.sg-chip { width: 26px; height: 26px; border-radius: var(--sg-r-chip); background: var(--sg-bg); color: var(--sg-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.sg-chip.sg-done { background: var(--sg-ok); color: #fff; }
.sg-step-body { flex: 1; min-width: 0; }
.sg-step-title { font-size: 13px; font-weight: 500; color: var(--sg-text); }
.sg-step-card.sg-done .sg-step-title { color: var(--sg-muted); text-decoration: line-through; }
.sg-step-meta { font-size: 11px; color: var(--sg-text-2); margin-top: 2px; }
.sg-step-future .sg-step-title, .sg-step-future .sg-step-meta { color: var(--sg-muted); }
.sg-btn { border: 0; border-radius: var(--sg-r-btn); padding: 9px 15px; min-height: 44px; font-size: 13px; font-weight: 500; background: var(--sg-acc); color: #fff; flex: 0 0 auto; }
.sg-btn.sg-btn-soft { background: var(--sg-acc-soft); color: var(--sg-acc-text); }
.sg-btn:active { transform: scale(.96); }
.sg-mentor-contact { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }

.sg-day.sg-day-future .sg-node { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .sg-step, .sg-fill, .sg-trail-fill { transition-duration: .01ms !important; }
}

@keyframes sg-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
.sg-pop { animation: sg-pop .45s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .sg-pop { animation: none; }
}

/* Manager-facing onboarding views: same tokens, no trail, no animation, red allowed for overdue. */
.sg-manager-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .75rem; border: 1px solid var(--sg-line); border-radius: var(--sg-r-stat); background: var(--sg-card); }

/* ===== Десктоп управляющего и владельца (CLAUDE_CODE_TASK_manager_desktop.md).
   Задача другая, чем у сотрудника: не мотивировать, а за 5 секунд показать
   проблемы. Поэтому таблица, плотные строки, красный — и ни одной анимации. */

/* 1400px, а не вся ширина: на 1600+ шесть колонок расползаются, и глаз
   перестаёт связывать имя слева со статусом справа. */
.sg-desk { max-width: 100%; margin: 0 auto; color: var(--sg-text); font-size: 13px; }
.sg-desk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.sg-desk-title { margin: 0; font-size: 21px; font-weight: 500; color: var(--sg-text); }
.sg-desk-sub { margin: 3px 0 0; font-size: 12.5px; font-weight: 400; color: var(--sg-text-2); }
.sg-desk-back { background: none; border: 0; padding: 0 0 .5rem; font-size: 12.5px; font-weight: 400; color: var(--sg-text-2); }
.sg-desk-foot { margin: .7rem 0 0; font-size: 12px; font-weight: 400; color: var(--sg-text-2); }
/* Подсказка под заголовком: говорит, где лежит соседнее рабочее место, и
   ведёт туда одним нажатием. Тише подзаголовка, но не спрятана. */
.sg-desk-hint { margin: .6rem 0 0; font-size: 12px; font-weight: 400; color: var(--sg-text-2); }
/* Кнопка, которая ведёт себя как ссылка: действие внутри фразы, а не
   отдельная цель на экране. Тап-цель добирается отступами. */
.sg-link-btn { background: none; border: 0; padding: .35rem .2rem; margin: -.35rem 0;
  font: inherit; font-weight: 500; color: var(--sg-acc-text); text-decoration: underline;
  cursor: pointer; }
.sg-link-btn:hover { text-decoration: none; }
/* Предупреждение уровня экрана: то, что верно для всего списка сразу, а не
   для отдельной строки. Стоит над таблицей, ступень 12px. */
.sg-desk-alert { margin: .8rem 0 0; padding: .55rem .8rem; border-radius: var(--sg-r-stat);
  background: var(--sg-warn-soft); color: var(--sg-warn-ink); font-size: 12px; font-weight: 400; }
.sg-desk-back:hover { color: var(--sg-acc-text); text-decoration: underline; }

.sg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.sg-tile { display: block; width: 100%; text-align: left; padding: .9rem 1rem; background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); color: var(--sg-text); font: inherit; font-weight: 400; }
.sg-tile-value { display: block; font-size: 23px; font-weight: 500; line-height: 1.15; color: var(--sg-text); }
.sg-tile-label { display: block; margin-top: 5px; font-size: 12px; color: var(--sg-text-2); }
/* --sg-muted on white is ~2.4:1 and fails AA. It is the right colour for
   "future, unavailable" on the employee trail, but here the note carries data
   ("у 2 человек"), so it gets the readable secondary token. */
.sg-tile-note { display: block; font-size: 11.5px; color: var(--sg-text-2); }
.sg-tile-warn .sg-tile-value { color: var(--sg-warn); }
.sg-tile-red .sg-tile-value { color: var(--sg-red); }
.sg-tile-ok .sg-tile-value { color: var(--sg-ok); }
.sg-tile[aria-pressed="true"] { border-color: var(--sg-acc); box-shadow: inset 0 0 0 1px var(--sg-acc); }

.sg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.sg-chip-filter { padding: .4rem .8rem; min-height: 32px; background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: 999px; color: var(--sg-text-2); font: inherit; font-size: 12.5px; font-weight: 400; }
.sg-chip-filter[aria-pressed="true"] { background: var(--sg-acc); border-color: var(--sg-acc); color: #fff; font-weight: 500; }

.sg-table-wrap { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); overflow: hidden; overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; background: var(--sg-card); border-radius: 0; }
.sg-table th { padding: .7rem 1rem; border-bottom: 1px solid var(--sg-line); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: var(--sg-text-2); }
/* Слабину забирает последняя колонка с действием, которая всё равно прижата к
   правому краю. Если отдать её колонке с сотрудником, между именем и
   наставником вырастает пустое поле, и строка перестаёт читаться слитно. */
.sg-table-control th:nth-child(1) { width: 30%; }
.sg-table-control th:nth-child(2) { width: 15%; }
.sg-table-control th:nth-child(3) { width: 11%; }
.sg-table-control th:nth-child(4) { width: 15%; }
.sg-table-control th:nth-child(5) { width: 17%; }
.sg-table-team th:nth-child(1) { width: 30%; }
.sg-table-team th:nth-child(2) { width: 24%; }
.sg-table-team th:nth-child(3) { width: 15%; }
.sg-table-team th:nth-child(4) { width: 17%; }
.sg-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--sg-line); vertical-align: middle; font-weight: 400; }
.sg-table tbody tr:last-child td { border-bottom: 0; }
.sg-table tbody tr:hover { background: var(--sg-bg); }
.sg-row-clickable { cursor: pointer; }
.sg-row-clickable:focus-visible { outline: 2px solid var(--sg-acc); outline-offset: -2px; }
.sg-table-empty td { color: var(--sg-text-2); text-align: center; padding: 1.6rem 1rem; }

.sg-person { display: flex; align-items: center; gap: .65rem; }
.sg-person > span:first-child { min-width: 0; overflow: hidden; }
.sg-person-name { display: block; font-size: 13px; font-weight: 500; color: var(--sg-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-person-meta { display: block; font-size: 11.5px; color: var(--sg-text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* На узкой колонке имя/подпись раньше переносились ВНУТРИ .sg-person
   (flex-строка не рвётся, но текст внутри неё — рвался), блок вырастал на
   две строки, а иконки справа (margin-left:auto, center по высоте) от
   этого визуально «проваливались» между строк — на разную длину имени
   по-разному. Обрезаем многоточием вместо переноса: иконки остаются на
   одной высоте с ОДНОЙ строкой имени всегда. Мобильный медиа-запрос ниже
   (.sg-table .sg-person-name/.meta) намеренно возвращает перенос — там
   колонки и так растягиваются на всю ширину, обрезать нечего. Решение
   Сергея 26.08.2026 (разнобой в «Сотрудник» и «Наставник»). */
.sg-mentor-name { display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; }
.sg-mentor-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sg-cell-muted { color: var(--sg-text-2); }
.sg-cell-empty { color: var(--sg-red); font-weight: 500; }

.sg-bar { display: flex; align-items: center; gap: .55rem; }
.sg-bar-track { width: 84px; height: 6px; border-radius: 999px; background: var(--sg-line); overflow: hidden; flex: 0 0 auto; }
.sg-bar-fill { display: block; height: 100%; background: var(--sg-ok); }
.sg-bar-fill.sg-bar-warn { background: var(--sg-warn); }
.sg-bar-fill.sg-bar-red { background: var(--sg-red); }
.sg-bar-value { font-size: 12px; color: var(--sg-text-2); }

.sg-state { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.sg-state-ontrack { background: transparent; color: var(--sg-text-2); font-weight: 400; padding-left: 0; }
.sg-state-warn { background: var(--sg-warn-soft); color: var(--sg-warn); }
.sg-state-red { background: var(--sg-red-soft); color: var(--sg-red); }
.sg-state-ok { background: var(--sg-ok-soft); color: var(--sg-ok); }
.sg-table th:last-child, .sg-table td:last-child { text-align: right; white-space: nowrap; }
.sg-open-link { background: none; border: 0; padding: .35rem 0; font: inherit; font-size: 12.5px; font-weight: 400; color: var(--sg-text-2); }
.sg-open-link:hover { color: var(--sg-acc-text); text-decoration: underline; }

/* --- Карточка стажёра --- */
.sg-card-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: .9rem; align-items: start; }
.sg-panel { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: 1rem 1.1rem; margin-bottom: .9rem; }
.sg-panel:last-child { margin-bottom: 0; }
.sg-panel-title { margin: 0 0 .75rem; font-size: 13px; font-weight: 500; color: var(--sg-text); }
.sg-trainee-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.sg-trainee-name { display: block; font-size: 17px; font-weight: 500; color: var(--sg-text); }
.sg-trainee-meta { display: block; font-size: 12px; color: var(--sg-text-2); margin-top: 2px; }
.sg-day-badge { margin-left: auto; padding: .3rem .7rem; border-radius: 999px; background: var(--sg-acc-soft); color: var(--sg-acc-text); font-size: 12px; font-weight: 500; white-space: nowrap; }
.sg-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-top: .9rem; font-size: 12px; color: var(--sg-text-2); }

.sg-block-row { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--sg-line); border-radius: var(--sg-r-stat); margin-bottom: .5rem; }
.sg-block-row:last-child { margin-bottom: 0; }
.sg-block-row.sg-block-done { border-color: var(--sg-ok); }
.sg-block-row.sg-block-current { border-color: var(--sg-warn); }
.sg-block-chip { width: 26px; height: 26px; border-radius: var(--sg-r-chip); background: var(--sg-bg); color: var(--sg-muted); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.sg-block-chip.sg-block-done { background: var(--sg-ok); color: #fff; }
.sg-block-chip.sg-block-current { background: var(--sg-warn); color: #fff; }
.sg-block-body { flex: 1; min-width: 0; }
.sg-block-title { display: block; font-size: 13px; font-weight: 500; color: var(--sg-text); }
.sg-block-reason { display: block; font-size: 11.5px; color: var(--sg-text-2); margin-top: 2px; }
.sg-block-reason.sg-block-overdue { color: var(--sg-red); }
.sg-block-count { font-size: 12px; color: var(--sg-text-2); white-space: nowrap; }

.sg-mentor-line { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.sg-mentor-line > span:last-child { min-width: 0; }
.sg-verdict-box { background: var(--sg-ok-soft); border-radius: var(--sg-r-stat); padding: .75rem .85rem; margin-bottom: .9rem; }
.sg-verdict-box.sg-verdict-unfit { background: var(--sg-red-soft); }
.sg-verdict-title { font-size: 13px; font-weight: 500; color: var(--sg-ok); margin-bottom: 4px; }
.sg-verdict-box.sg-verdict-unfit .sg-verdict-title { color: var(--sg-red); }
.sg-verdict-comment { font-size: 12px; color: var(--sg-text); }
.sg-verdict-sign { font-size: 11.5px; color: var(--sg-text-2); margin-top: 6px; }
.sg-decision-actions { display: grid; gap: .5rem; }
.sg-decision-actions .sg-btn { width: 100%; }
.sg-decision-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sg-btn-warn { background: var(--sg-warn-soft); color: var(--sg-warn); }
.sg-btn-red { background: var(--sg-red-soft); color: var(--sg-red); }
/* Демотированное опасное действие рядом с безопасным по умолчанию — вариант
   «выкинуть накопленное» при возобновлении рассылки не должен стоять вровень
   с «отправить», иначе случайный клик стоит потерянных уведомлений
   (design-critique макета стоп-крана, 26.08.2026). */
.sg-link-danger { background: none; border: none; padding: 0; font-size: 12px; color: var(--sg-red);
  text-decoration: underline; cursor: pointer; }
.sg-awaiting { font-size: 12.5px; color: var(--sg-text-2); }
.sg-history-row { display: flex; gap: .7rem; padding: .35rem 0; font-size: 12px; }
.sg-history-date { flex: 0 0 58px; color: var(--sg-text-2); }
.sg-history-text { color: var(--sg-text-2); }

/* --- Конструктор маршрутных карт --- */
.sg-table-roadmaps th:nth-child(1) { width: 26%; }
.sg-table-roadmaps th:nth-child(2) { width: 15%; }
.sg-table-roadmaps th:nth-child(3) { width: 18%; }
.sg-table-roadmaps th:nth-child(4) { width: 20%; }
.sg-table-roadmaps th:nth-child(5) { width: 11%; }
.sg-roadmap-meta { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .8rem; }
.sg-block-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.sg-block-title-input { flex: 1 1 auto; min-width: 0; border: 0; border-bottom: 1px solid var(--sg-line); border-radius: 0; padding: .35rem 0; background: none; color: var(--sg-text); font: inherit; font-size: 14px; font-weight: 500; }
.sg-block-title-input:focus { outline: 0; border-bottom-color: var(--sg-acc); }

.sg-step-edit { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--sg-line); }
.sg-step-edit:first-of-type { border-top: 0; }
.sg-step-num { flex: 0 0 auto; width: 22px; padding-top: .55rem; font-size: 11.5px; color: var(--sg-muted); text-align: right; }
.sg-step-fields { flex: 1 1 auto; min-width: 0; display: grid; gap: .4rem; }
.sg-step-title { width: 100%; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .5rem .6rem; background: var(--sg-card); color: var(--sg-text); font: inherit; font-size: 13px; }
.sg-step-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sg-step-controls select { border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .35rem .5rem; background: var(--sg-card); color: var(--sg-text-2); font: inherit; font-size: 11.5px; }
.sg-step-lesson { flex: 1 1 260px; min-width: 0; }
.sg-step-num-field { display: inline-flex; align-items: center; gap: .3rem; font-size: 11.5px; color: var(--sg-text-2); }
.sg-step-num-field input { width: 62px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .35rem .4rem; background: var(--sg-card); color: var(--sg-text); font: inherit; font-size: 11.5px; }
.sg-step-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; padding-top: .3rem; }
.sg-verdict-mark { display: inline-flex; align-items: center; gap: .25rem; margin-right: .3rem; font-size: 11px; font-weight: 400; color: var(--sg-text-2); white-space: nowrap; }
.sg-verdict-mark input { width: auto; margin: 0; }

@media (max-width: 860px) {
  .sg-roadmap-meta { grid-template-columns: 1fr; }
  .sg-step-edit { flex-wrap: wrap; }
  .sg-step-actions { padding-top: 0; }
}

/* --- Форма назначения маршрута --- */
.sg-form { display: grid; gap: .8rem; }
.sg-field { display: grid; gap: .3rem; font-size: 11.5px; font-weight: 400; color: var(--sg-text-2); }
.sg-field select, .sg-field input { width: 100%; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .7rem .8rem; background: var(--sg-card); color: var(--sg-text); font-size: 13px; font-weight: 400; }
.sg-field-required select { border-color: var(--sg-red); background: var(--sg-red-soft); }
.sg-field-required select:valid { border-color: var(--sg-line); background: var(--sg-card); }
.sg-field-hint { font-size: 11.5px; color: var(--sg-red); }
.sg-preview { background: var(--sg-bg); border-radius: var(--sg-r-stat); padding: .8rem .9rem; }
.sg-preview-title { font-size: 11.5px; color: var(--sg-text-2); margin-bottom: .55rem; }
.sg-preview-row { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .18rem 0; font-size: 12px; color: var(--sg-text-2); }
.sg-preview-row.sg-preview-key { font-weight: 500; color: var(--sg-text); }
.sg-preview-row .sg-preview-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-preview-row .sg-preview-date { flex: 0 0 auto; }
.sg-form-actions { display: flex; justify-content: flex-end; gap: .5rem; }
/* The shared dialog close button is a 40px solid --brand circle - the heaviest
   element in a form whose real actions live at the bottom. Quieten it, but only
   inside this form, so the other dialogs keep the control they were built for. */
#assignmentDialog:has(.sg-form) .dialog-close { width: 32px; height: 32px; background: none; color: var(--sg-text-2); font-size: 20px; }
.sg-btn-cancel { background: var(--sg-card); color: var(--sg-text-2); border: 1px solid var(--sg-line); }
.sg-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 980px) {
  .sg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* The global mobile rules flatten every table to blocks. That is right for the
     old screens and wrong here - the control table stays a table and drops the
     two least urgent columns instead. Mobile is degradation, not the target. */
  .sg-table { display: table; }
  .sg-table thead { display: table-header-group; }
  .sg-table tbody { display: table-row-group; }
  .sg-table tr { display: table-row; }
  .sg-table th, .sg-table td { display: table-cell; }
  .sg-table th:nth-child(2), .sg-table td:nth-child(2),
  .sg-table th:nth-child(3), .sg-table td:nth-child(3) { display: none; }
  .sg-table th, .sg-table td { padding: .6rem .7rem; }
  /* Очередь уведомлений: «Кому» — ключевая колонка, прячем вместо неё
     «Подробности» (колонка 3 «Что» скрыта общим правилом выше). */
  .sg-table-outbox th:nth-child(2), .sg-table-outbox td:nth-child(2) { display: table-cell; }
  .sg-table-outbox th:nth-child(4), .sg-table-outbox td:nth-child(4) { display: none; }
}

/* Общее лекало карточки: "Моё обучение" и "Каталог" */
.sg-title { font-size: 15px; font-weight: 500; color: var(--sg-text); margin: 0 0 2px; }
.sg-subtitle { font-size: 12px; color: var(--sg-text-2); margin: 0 0 .7rem; }
.sg-today-card { background: var(--sg-card); border: 1px solid var(--sg-ok); border-radius: var(--sg-r-card); padding: 12px 13px; margin-bottom: 9px; }
.sg-today-card .sg-eyebrow { font-size: 11px; color: var(--sg-text-2); margin-bottom: 2px; }
.sg-today-card .sg-today-title { font-size: 13px; font-weight: 500; color: var(--sg-text); margin-bottom: .6rem; }
.sg-today-card .sg-btn { width: 100%; }
.sg-list-card { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: 12px 13px; margin-bottom: 9px; display: flex; align-items: center; gap: .6rem; }
.sg-list-card.sg-done { border-color: var(--sg-ok); }
/* Внекартное обучение внутри плашки «нужно действие» (.sg-alert-card):
   карточки урока лежат прямо на её фоне — свой белый прямоугольник с рамкой
   поверх рамки плашки читался бы как рамка в рамке. */
.sg-alert-card.sg-extra-training { margin-top: 0; margin-bottom: 9px; }
.sg-extra-training .sg-list-card { background: transparent; border: 0; border-radius: 0; padding: 8px 0 0; margin: 4px 0 0; border-top: 1px solid rgba(142, 102, 46, .22); }
.sg-extra-training .sg-alert-head + .sg-list-card { border-top: 0; margin-top: .6rem; padding-top: 0; }
.sg-list-body { flex: 1; min-width: 0; }
.sg-list-title { font-size: 13px; font-weight: 500; color: var(--sg-text); }
.sg-list-card.sg-done .sg-list-title { color: var(--sg-muted); text-decoration: line-through; }
.sg-list-meta { font-size: 11px; color: var(--sg-text-2); margin-top: 2px; display: flex; align-items: center; gap: 5px; }

/* Справочник: сгруппированные строки, не карточки */
.sg-ref-search { width: 100%; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .7rem .8rem; background: var(--sg-card); color: var(--sg-text); font-size: 13px; margin-bottom: 1rem; }
.sg-ref-group { margin-bottom: 1rem; }
.sg-ref-group-title { font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: var(--sg-text-2); margin: 0 0 .5rem; }
.sg-ref-block { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); overflow: hidden; }
.sg-ref-row { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .7rem .8rem; background: none; border: 0; border-top: .5px solid var(--sg-line); text-align: left; font: inherit; font-size: 13px; color: var(--sg-acc-text); cursor: pointer; }
.sg-ref-block .sg-ref-row:first-child { border-top: 0; }
.sg-ref-row .sg-ref-icon { flex: 0 0 auto; color: var(--sg-text-2); }
.sg-ref-row .sg-ref-label { flex: 1; min-width: 0; }
.sg-ref-row .sg-ref-chevron { flex: 0 0 auto; color: var(--sg-muted); }
.sg-manager-overdue { color: var(--danger); font-weight: 500; }
/* #777: нейтральная, не тревожная — «не выдан» не вина стажёра */
.sg-manager-not-issued { color: var(--sg-text-2); font-weight: 500; }

/* Каталог владельца и методиста: то же лекало, что у сотрудника, плюс действия
   в строке. Строка — div, а не button: кнопку в кнопку вкладывать нельзя. */
.sg-cat-row { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .55rem .8rem; border-top: .5px solid var(--sg-line); background: var(--sg-card); }
.sg-ref-block .sg-cat-row:first-child { border-top: 0; }
.sg-cat-row[draggable="true"] { cursor: grab; }
.sg-cat-row.dragging { opacity: .4; }
.sg-cat-row:hover { background: var(--sg-bg); }
.sg-cat-title { flex: 1 1 auto; min-width: 0; display: block; padding: .2rem 0; background: none; border: 0; text-align: left; font: inherit; font-weight: 400; cursor: pointer; }
.sg-cat-name { display: block; font-size: 13px; color: var(--sg-acc-text); }
.sg-cat-title:hover .sg-cat-name { text-decoration: underline; }
.sg-cat-meta { display: block; font-size: 11.5px; color: var(--sg-text-2); margin-top: 1px; }
.sg-cat-actions { display: flex; gap: .4rem; flex: 0 0 auto; }
.sg-cat-action { min-height: 32px; padding: .3rem .65rem; background: none; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); font: inherit; font-size: 11.5px; font-weight: 400; color: var(--sg-text-2); }
.sg-cat-action:hover { border-color: var(--sg-acc); color: var(--sg-acc-text); }
.sg-cat-action-danger:hover { border-color: var(--sg-red); color: var(--sg-red); }
/* ===== Наставничество: градация навыка, заметки, оценка ===================
   Всё, что переехало из бумажного чек-листа наставника. Лекало то же, что у
   остальной «Шалфей»: карточка на --sg-card, рамка --sg-line, 13px. */

/* Уровень владения навыком у стажёра: три точки, без цифр и процентов —
   это не оценка, а место на пути. */
.sg-prog { display: flex; align-items: center; gap: .45rem; margin-top: 4px; font-size: 11px; color: var(--sg-text-2); }
.sg-prog-dots { display: inline-flex; gap: 3px; }
.sg-prog-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sg-line); }
.sg-prog-dot.sg-prog-on { background: var(--sg-ok); }

/* Те же три уровня, но у наставника — уже кнопки. */
.sg-prog-group { display: inline-flex; gap: .3rem; flex: 0 0 auto; }
.sg-prog-btn { min-height: 32px; padding: .3rem .6rem; background: none; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); font: inherit; font-size: 11.5px; color: var(--sg-text-2); }
.sg-prog-btn:hover { border-color: var(--sg-acc); color: var(--sg-acc-text); }
.sg-prog-btn-on { background: var(--sg-acc-soft); border-color: var(--sg-acc); color: var(--sg-acc-text); font-weight: 500; }
.sg-manager-repeat { font-size: 11px; color: var(--sg-warn); }

/* Контрольная точка — разговор, а не задача: тёплая рамка вместо обычной. */
.sg-step-card.sg-step-checkpoint { border-color: var(--sg-warn); background: var(--sg-warn-soft); }

/* Welcome-карточка первой недели. */
.sg-welcome-card { background: var(--sg-acc-soft); border: 1px solid var(--sg-acc); border-radius: var(--sg-r-card); padding: 13px 14px; margin-bottom: 9px; }
.sg-welcome-title { font-size: 14px; font-weight: 500; color: var(--sg-acc-text); margin-bottom: .4rem; }
.sg-welcome-text { font-size: 12.5px; color: var(--sg-text); margin: 0 0 .6rem; }
.sg-welcome-list { list-style: none; margin: 0; padding: 0; }
.sg-welcome-list li { display: flex; justify-content: space-between; gap: .6rem; font-size: 12px; padding: .25rem 0; border-top: .5px solid var(--sg-acc); }
.sg-welcome-list li:first-child { border-top: 0; }
.sg-welcome-list span { color: var(--sg-text-2); flex: 0 0 auto; }
.sg-welcome-list strong { font-weight: 500; text-align: right; }
.sg-welcome-foot { font-size: 11.5px; color: var(--sg-text-2); margin: .6rem 0 0; }

/* Цель и время дня в заголовке блока. */
.sg-day-time { font-weight: 400; font-size: 11.5px; color: var(--sg-text-2); margin-left: .4rem; }
.sg-day-goal { font-size: 12px; color: var(--sg-text-2); margin: 0 0 .5rem 68px; }

/* Заметки после смены. */
.sg-note-card { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: 12px 13px; margin-top: 9px; }
.sg-note-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .3rem; }
.sg-note-list { list-style: none; margin: .5rem 0 0; padding: 0; font-size: 12px; color: var(--sg-text-2); }
.sg-note-list li { padding: .25rem 0; border-top: .5px solid var(--sg-line); }
.sg-note-line { padding: .5rem 0; border-top: .5px solid var(--sg-line); font-size: 12px; }
.sg-note-line:first-of-type { border-top: 0; }
.sg-note-line-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.sg-note-line p { margin: .15rem 0; color: var(--sg-text-2); }
.sg-note-help { color: var(--sg-warn) !important; }
.sg-mood { border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .6rem .7rem; }
.sg-mood legend { font-size: 12px; color: var(--sg-text-2); padding: 0 .3rem; }
.sg-mood label { display: block; padding: .25rem 0; font-size: 13px; }

/* Оценка по критериям. */
.sg-rate-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-top: .5px solid var(--sg-line); font-size: 13px; }
.sg-rate-scale { display: inline-flex; gap: .5rem; flex: 0 0 auto; }
.sg-rate-scale label { display: inline-flex; align-items: center; gap: .15rem; font-size: 12px; color: var(--sg-text-2); }
.sg-rate-line { display: flex; justify-content: space-between; gap: .6rem; font-size: 12.5px; padding: .25rem 0; border-top: .5px solid var(--sg-line); }
.sg-rate-line:first-of-type { border-top: 0; }

/* Памятка наставнику и другие сворачиваемые блоки. */
.sg-memo { border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); background: var(--sg-card); padding: .6rem .8rem; margin-top: .6rem; }
.sg-memo summary { font-size: 12.5px; font-weight: 500; color: var(--sg-acc-text); cursor: pointer; }
.sg-memo ol { margin: .6rem 0 0; padding-left: 1.2rem; font-size: 12.5px; color: var(--sg-text-2); }
.sg-memo ol li { padding: .15rem 0; }
/* Большая памятка наставнику: заголовок — обычная мягкая кнопка модуля
   (.sg-btn), без треугольника details (shtab#1894). */
.sg-memo-guide { padding: .7rem .9rem; }
/* Свёрнутая — только кнопка, без второй рамки вокруг неё. */
.sg-memo-guide:not([open]) { border: 0; background: none; padding: 0; }
.sg-memo-guide > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; }
.sg-memo-guide > summary::-webkit-details-marker { display: none; }
.sg-memo-guide > summary.sg-btn { color: #fff; font-weight: 500; }
.sg-memo-guide h3 { font-size: 13px; font-weight: 600; color: var(--sg-text); margin: 1rem 0 .3rem; }
.sg-memo-guide p, .sg-memo-guide ul { font-size: 12.5px; color: var(--sg-text-2); margin: .3rem 0; line-height: 1.5; }
.sg-memo-guide ul { padding-left: 1.2rem; }
.sg-memo-guide p, .sg-memo-guide ul, .sg-memo-guide ol { max-width: 72ch; }

/* Конструктор: цель/время блока и флаги шага. */
.sg-block-meta { display: flex; gap: .5rem; margin: .5rem 0 .7rem; }
.sg-block-meta input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .45rem .6rem; font: inherit; font-size: 12px; background: var(--sg-card); color: var(--sg-text); }
.sg-block-meta input:last-child { flex: 0 0 170px; }
.sg-step-flags { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .35rem; font-size: 11.5px; color: var(--sg-text-2); }
.sg-step-flags label { display: inline-flex; align-items: center; gap: .25rem; }

/* Ожидание внешнего результата: медкнижка сдана, ждём выдачи. Это не тревога
   и не успех — нейтральный тон, отдельный от --sg-warn. */
.sg-step-card.sg-step-waiting { border-style: dashed; }
.sg-manager-waiting { font-size: 11px; color: var(--sg-text-2); }
.sg-state-waiting { background: var(--sg-bg); color: var(--sg-text-2); border: 1px solid var(--sg-line); margin-left: .3rem; }

/* «Что уже делает сам» — срез уровней навыка, а не отдельный опрос. */
.sg-mastery { font-size: 12.5px; }
.sg-mastery-head { font-size: 11.5px; font-weight: 500; color: var(--sg-text-2); margin: .5rem 0 .3rem; }
.sg-mastery-head:first-child { margin-top: 0; }
.sg-mastery-list { list-style: none; margin: 0; padding: 0; }
.sg-mastery-list li { padding: .22rem 0 .22rem 1.1rem; position: relative; }
.sg-mastery-list li::before { position: absolute; left: 0; }
.sg-mastery-solo::before { content: '✓'; color: var(--sg-ok); }
.sg-mastery-help { color: var(--sg-text-2); }
.sg-mastery-help::before { content: '◐'; color: var(--sg-muted); }

/* Разобранный итог наставника вместо одного комментария. */
.sg-verdict-part { font-size: 12.5px; margin-top: .4rem; }
.sg-verdict-part span { display: block; font-size: 11px; color: var(--sg-text-2); }

/* Полезные ссылки в справочнике: та же строка, что у регламента, но ведёт
   наружу — стрелка вместо шеврона и подпись под названием. */
.sg-link-row { text-decoration: none; }
.sg-link-row:hover .sg-ref-label > span:first-child { text-decoration: underline; }
.sg-link-note { display: block; font-size: 11.5px; color: var(--sg-text-2); margin-top: 1px; }

/* ===== Настольный скин для старых вкладок ==================================
   «Регламенты», «Обучение», «Пользователи», «Уведомления» и «Аудит» верстались
   до «Шалфея»: базовые 16px, label жирным 700, крупные кнопки. Рядом с
   «Главной» это читалось как другой продукт. Класс приводит их к той же
   шкале — 13px текст, заголовок 21px/500, подписи 11.5px — не переписывая
   разметку каждого экрана.

   Компоненты «Шалфея» (.sg-*) исключены из переопределений: у них своя
   типографика, и она уже правильная. */

#content.desk-skin { font-size: 13px; color: var(--sg-text); }

#content.desk-skin h2 { margin: 0; font-size: 21px; font-weight: 500; color: var(--sg-text); }
#content.desk-skin h3 { margin: 0 0 .75rem; font-size: 13px; font-weight: 500; color: var(--sg-text); }
#content.desk-skin .section-title { margin: 0 0 1.1rem; align-items: flex-start; }
#content.desk-skin .section-title p { margin: 3px 0 0; font-size: 12.5px; color: var(--sg-text-2); }
#content.desk-skin .muted { color: var(--sg-text-2); }
#content.desk-skin p { font-size: 12.5px; }

/* Карточка старых экранов = панель «Главной»: без тени, тоньше рамка. */
#content.desk-skin .card { border: 1px solid var(--sg-line); border-radius: var(--sg-r-card);
  box-shadow: none; padding: 1rem 1.1rem; margin-bottom: .9rem; }
#content.desk-skin form { gap: .7rem; }

#content.desk-skin label:not([class*="sg-"]) { gap: .3rem; font-size: 11.5px; font-weight: 400; color: var(--sg-text-2); }
#content.desk-skin .check-row { font-size: 13px; color: var(--sg-text); }
#content.desk-skin input:not([class*="sg-"]),
#content.desk-skin textarea:not([class*="sg-"]),
#content.desk-skin select:not([class*="sg-"]) {
  padding: .7rem .8rem; border-radius: var(--sg-r-btn); border-color: var(--sg-line);
  font-size: 13px; color: var(--sg-text); }
#content.desk-skin input[type="checkbox"], #content.desk-skin input[type="radio"] { width: auto; }

#content.desk-skin button:not([class*="sg-"]) {
  min-height: 44px; padding: 9px 15px; border-radius: var(--sg-r-btn);
  font-size: 13px; font-weight: 500; }
#content.desk-skin button.secondary:not([class*="sg-"]) { background: var(--sg-acc-soft); color: var(--sg-acc-text); }

/* Таблицы уведомлений и аудита: шапка как в ростере «Главной». */
#content.desk-skin table { font-size: 12.5px; border-radius: var(--sg-r-card); }
#content.desk-skin th { padding: .6rem .7rem; border-bottom: 1px solid var(--sg-line);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: var(--sg-text-2); }
#content.desk-skin td { padding: .6rem .7rem; border-bottom: 1px solid var(--sg-line); }
#content.desk-skin .table-wrap { border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); overflow: hidden; overflow-x: auto; }

#content.desk-skin .roster-row { border-color: var(--sg-line); border-radius: var(--sg-r-btn); font-size: 13px; }
#content.desk-skin .badge { font-size: 11px; font-weight: 500; }
#content.desk-skin .draft-row { font-size: 13px; }
#content.desk-skin .notice { font-size: 12.5px; }

/* ===== Подсказка при наведении ============================================
   Родной `title` появляется через секунду и выглядит по-системному. Здесь —
   мгновенная подпись в стиле продукта. Вешается атрибутом data-tip на любой
   элемент; на тач-устройствах не мешает, потому что там нет :hover. */
[data-tip] { position: relative; }
/* display:none, а не opacity:0. Скрытая прозрачностью подсказка остаётся в
   потоке прокрутки: абсолютный блок с nowrap-текстом раздувал scrollWidth
   страницы, и на узком экране появлялась горизонтальная прокрутка в пустоту. */
[data-tip]::after {
  content: attr(data-tip); display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); padding: .25rem .5rem; border-radius: 6px;
  background: var(--sg-text); color: #fff; font-size: 11px; font-weight: 400;
  line-height: 1.3; white-space: nowrap; pointer-events: none; z-index: 20;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; }

/* Значок «?»: объясняет термин или элемент тому, кто видит экран впервые.
   Тот же data-tip выше, но текст длиннее подписи к кнопке — здесь ему
   разрешено переноситься и не растягиваться в одну нечитаемую строку. */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sg-line); color: var(--sg-text);
  font-size: 10px; font-weight: 700; line-height: 1;
  margin-left: .35rem; cursor: help; vertical-align: middle;
}
.help-tip[data-tip]::after, .sg-tile[data-tip]::after {
  white-space: normal; width: 220px; max-width: 65vw; text-align: left; font-weight: 400;
}
/* «?» термина живёт в заголовках таблиц — у самого верха экрана, под
   липкой шапкой. Открытие вверх (общее правило) там обрезалось краем
   окна (жалоба Сергея 25.08.2026, колонка «Программа»). Вниз места
   всегда достаточно — страница и так прокручивается вниз. */
.help-tip[data-tip]::after {
  bottom: auto; top: calc(100% + 6px);
}

/* Кнопка-иконка: действие в строке списка, где текст съедал всю ширину. */
.icon-action {
  width: 32px; height: 32px; min-height: 32px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sg-line); border-radius: 8px;
  background: var(--sg-card); color: var(--sg-text-2); font-size: 14px; font-weight: 400;
}
.icon-action:hover { border-color: var(--sg-acc); color: var(--sg-acc-text); background: var(--sg-acc-soft); }
.icon-action-danger:hover { border-color: var(--sg-red); color: var(--sg-red); background: var(--sg-red-soft); }
#content.desk-skin .icon-action { min-height: 32px; padding: 0; font-size: 14px; }
.row-actions { display: inline-flex; gap: .35rem; flex: 0 0 auto; margin-left: auto; }

/* Строка аккаунта: текст мельче, действия иконками — теперь помещается без
   горизонтальной прокрутки, которая появлялась у длинных ФИО и логинов. */
#content.desk-skin .roster-row { overflow-x: visible; gap: .6rem; padding: .5rem .7rem; }
/* Ячейки сжимаются с многоточием вместо горизонтальной прокрутки строки:
   раньше длинное ФИО или логин выдавливали кнопки за край и под каждой
   строкой появлялся собственный скроллбар. */
#content.desk-skin .roster-row strong { flex: 1 1 8rem; min-width: 4rem; font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; }
#content.desk-skin .roster-row .muted { flex: 0 1 auto; min-width: 0; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; }
#content.desk-skin .roster-row .badge { flex: 0 0 auto; }

/* Строка ссылки в редакторе: название кликабельно, как и у сотрудника. */
a.sg-cat-title { text-decoration: none; cursor: pointer; }
a.sg-cat-title:hover .sg-cat-name { text-decoration: underline; }

/* ===== Конструктор программы ==============================================
   Две колонки: слева выбор с поиском и группами, справа порядок уроков.
   Обе колонки одной высоты и скроллятся внутри себя — страница не растёт
   до бесконечности от сотни регламентов. */
.prog-builder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.prog-side { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-card); background: var(--sg-bg); overflow: hidden; }
.prog-side-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem;
  background: var(--sg-card); border-bottom: 1px solid var(--sg-line); }
.prog-side-title { font-size: 12.5px; font-weight: 500; color: var(--sg-text); flex: 1 1 auto; }
.prog-search { flex: 1 1 auto; min-width: 0; }
.prog-filter { flex: 0 0 auto; font-size: 11.5px !important; color: var(--sg-text-2); white-space: nowrap; }
.prog-list { flex: 1 1 auto; min-height: 260px; max-height: 420px; overflow-y: auto; padding: .5rem; }
.prog-hint { margin: 0; padding: .45rem .7rem; border-top: 1px solid var(--sg-line);
  background: var(--sg-card); font-size: 11px !important; color: var(--sg-text-2); }

.prog-group { margin-bottom: .7rem; }
.prog-group:last-child { margin-bottom: 0; }
.prog-group-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px;
  color: var(--sg-text-2); padding: 0 .2rem .3rem; }
.prog-pick { display: block; width: 100%; min-height: 0; margin-bottom: .25rem; padding: .45rem .6rem;
  border: 1px solid transparent; border-radius: 8px; background: var(--sg-card);
  text-align: left; font: inherit; font-size: 12.5px; font-weight: 400; color: var(--sg-text); }
.prog-pick:hover { border-color: var(--sg-acc); background: var(--sg-acc-soft); color: var(--sg-acc-text); }

.prog-chosen-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem;
  padding: .4rem .5rem; background: var(--sg-card); border: 1px solid var(--sg-line);
  border-radius: 8px; cursor: grab; }
.prog-chosen-row.dragging { opacity: .4; }
.prog-num { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--sg-acc-soft); color: var(--sg-acc-text);
  font-size: 10.5px; font-weight: 500; }
.prog-chosen-title { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  .prog-builder { grid-template-columns: 1fr; }
  .prog-side-head { flex-wrap: wrap; }
}

/* Переход к тесту: отбивка от текста регламента, чтобы кнопка не читалась
   как продолжение материала. */
.lesson-next { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--sg-line); }
.lesson-next p { margin: 0 0 .6rem; }

/* Третье состояние шага: стажёр отметил, наставник ещё не подтвердил.
   Пунктирный контур с бледной галочкой — видно, что работа сделана, но круг
   ещё не замкнулся. Возврат на повтор — оранжевый со стрелкой назад. */
.sg-chip.sg-chip-awaiting { background: transparent; border: 2px dashed var(--sg-ok);
  color: var(--sg-ok); opacity: .85; }
.sg-chip.sg-chip-repeat { background: var(--sg-warn-soft); border: 1.5px solid var(--sg-warn);
  color: var(--sg-warn); }
.sg-manager-awaiting { font-size: 11px; color: var(--sg-ok); white-space: nowrap; }
.sg-manager-row-awaiting { border-left: 2px solid var(--sg-ok); padding-left: .5rem; }
.sg-state-await { background: var(--sg-ok-soft); color: #4d6b2f; }

/* Контакты человека: иконки-ссылки рядом с именем в любом списке. */
.contacts { display: inline-flex; gap: .25rem; flex: 0 0 auto; margin-left: .35rem; vertical-align: middle; }
/* В строке стажёра/сотрудника (.sg-person, flex) иконки раньше шли сразу
   после имени — при разной длине имени они гуляли по горизонтали, ряд не
   выравнивался (жалоба Сергея 25.08.2026). margin-left:auto прижимает их
   к правому краю ячейки во всех строках на одну вертикаль, не трогая
   остальные места, где .contacts уже используется. */
.sg-person > .contacts { margin-left: auto; }
.contact-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1px solid var(--sg-line); border-radius: 7px; background: var(--sg-card);
  color: var(--sg-text-2); font-size: 12px; text-decoration: none; }
.contact-chip:hover { border-color: var(--sg-acc); color: var(--sg-acc-text); background: var(--sg-acc-soft); }
.contact-missing { font-size: 11px; color: var(--sg-warn); white-space: nowrap; }

/* Заметка после смены: зачем она и кто её прочитает — до того, как человек
   начал писать. Узнать постфактум, что откровенность видело начальство,
   значит больше никогда не написать честно. */
.sg-note-purpose { font-size: 12.5px; color: var(--sg-text-2); margin: 0 0 .3rem; }
.sg-note-who { font-size: 12px; color: var(--sg-acc-text); background: var(--sg-acc-soft);
  border-radius: var(--sg-r-btn); padding: .5rem .6rem; margin: 0 0 .8rem; }
.sg-note-hint { font-size: 11.5px; color: var(--sg-text-2); margin: .5rem 0 0; }
/* Кружок и подпись в одну строку: глобальный label{display:grid} растаскивал
   их в два столбца, и было непонятно, что к чему относится. */
.sg-mood-option { display: flex !important; align-items: center; gap: .5rem; padding: .35rem 0; cursor: pointer; }
.sg-mood-option input { flex: 0 0 auto; margin: 0; }

/* Экран наставника: текст слева, действия — одной колонкой справа.
   Раньше кнопка стояла сразу за названием, и у каждой строки оказывалась
   на своей позиции: глазу не за что зацепиться, справа пустое поле. */
.sg-manager-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-manager-title { font-size: 13px; font-weight: 500; color: var(--sg-text); }
/* Пометки под названием, а не в строку с ним — иначе растаскивают строку. */
.sg-manager-marks { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sg-manager-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.sg-manager-actions .secondary { min-width: 132px; justify-content: center; }
.sg-manager-row { flex-wrap: nowrap; align-items: flex-start; }
@media (max-width: 720px) {
  /* На узком экране кнопка уходит под текст, а не жмётся сбоку. */
  .sg-manager-row { flex-wrap: wrap; }
  .sg-manager-actions { margin-left: 0; width: 100%; }
  .sg-manager-actions .secondary { flex: 1 1 auto; }
}
/* Кнопки в строке шага одного размера — иначе строка с навыком ниже соседней
   на 15px, и список выглядит рваным. */
.sg-manager-actions .secondary,
.sg-manager-actions .sg-prog-btn,
.sg-manager-actions .sg-cat-action { min-height: 36px; }

/* Маркер дня — кольцо прогресса с номером. Заливка кольца показывает долю
   закрытых шагов этого дня, цифра — какой это день по счёту. */
.sg-node.sg-node-ring {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--sg-ok) var(--sg-day-progress, 0%), var(--sg-line) 0);
  border: 2px solid var(--sg-bg); color: var(--sg-text-2);
  font-size: 12px; font-weight: 500;
}
/* Внутренний кружок превращает круг в кольцо, цифра остаётся читаемой. */
.sg-node.sg-node-ring span {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--sg-bg);
}
.sg-node.sg-node-ring.sg-node-done { background: var(--sg-ok); }
.sg-node.sg-node-ring.sg-node-done span { background: var(--sg-ok); color: #fff; }
/* Сегодня — фирменный зелёный и кружок крупнее: охристый в этом интерфейсе
   означает просрочку, и «сегодня» тем же цветом читалось бы как проблема. */
.sg-node.sg-node-ring.sg-node-current {
  width: 40px; height: 40px; left: 46px;
  background: conic-gradient(var(--sg-acc) var(--sg-day-progress, 0%), var(--sg-acc-soft) 0);
  box-shadow: 0 0 0 4px var(--sg-acc-soft);
}
.sg-node.sg-node-ring.sg-node-current span {
  width: 28px; height: 28px; background: var(--sg-card); color: var(--sg-acc-text); font-weight: 600;
}
/* Состояние словами, а не только цветом: на солнце и при плохом зрении
   цвет не считывается. */
.sg-day-now { display: block; font-size: 11.5px; font-weight: 400; color: var(--sg-acc-text); margin-top: 2px; }

/* ===== Мобильная навигация: бургер вместо ленты вкладок =====
   У управляющего девять вкладок. На телефоне они помещались только лентой с
   горизонтальной прокруткой, и «Регламенты» с «Отправленными» человек просто
   не находил — их надо было листать пальцем. На узком экране лента
   превращается в выпадающий список под кнопкой с тремя чёрточками справа. */
.nav-toggle { display: none; }

@media (max-width: 720px) {
  .topbar { position: sticky; }
  .nav-toggle:not(.hidden) { display: flex; }
  .topbar-actions { justify-content: flex-end; gap: .4rem; }

  .tabs {
    position: absolute;
    top: calc(100% - .25rem);
    right: max(.6rem, calc((100% - var(--app-width)) / 2 + 1.5rem));
    left: auto;
    z-index: 40;
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    min-width: 13.5rem;
    max-width: min(18rem, calc(100vw - 1.2rem));
    max-height: min(70vh, 26rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(13, 25, 21, .28);
  }
  .tabs.nav-open { display: flex; }

  .tabs button,
  .topbar-sage .tabs button {
    width: 100%;
    text-align: left;
    white-space: normal;
    padding: .7rem .75rem;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.25;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
  }
  .tabs button.active,
  .topbar-sage .tabs button.active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
  }
  .topbar-sage .tabs button.active { background: var(--sg-acc-soft); color: var(--sg-acc-text); }

  /* Бренд перестаёт ужиматься до «К. В..»: место освободила уехавшая лента. */
  .topbar-brand { flex: 1 1 auto; max-width: none; }
}

/* ===== Строки справочников на телефоне =====
   .roster-row держит семь блоков в один ряд (имя, логин, роль, салон, контакты,
   статус, кнопки) и на узком экране прокручивалась по горизонтали — каждая
   карточка отдельно. Список выглядел рваным: у одной строки имя обрезано, у
   соседней нет, логины и кнопки уезжали за край. Ниже 720 px строка
   раскладывается на полки: имя во всю ширину, под ним логин, роль и салон
   через точку, кнопки прижаты вправо. Прокрутки внутри строки больше нет.
   Селектор продублирован для .desk-skin: там правила идут с id и иначе
   перебивают эти. */
@media (max-width: 720px) {
  .roster-row,
  #content.desk-skin .roster-row {
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    overflow-x: visible;
    white-space: normal;
  }
  .roster-row > strong,
  #content.desk-skin .roster-row > strong {
    flex: 1 1 100%;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .roster-row > .muted,
  #content.desk-skin .roster-row > .muted {
    flex: 0 1 auto;
    min-width: 0;
    font-size: .8rem;
    overflow-wrap: anywhere;
  }
  /* Точка-разделитель вместо трёх отдельных колонок. */
  .roster-row > .muted + .muted::before {
    content: "·";
    margin-right: .4rem;
    color: var(--border);
  }
  .roster-row > .badge { flex: 0 0 auto; }
  .roster-row > .row-actions { flex: 0 0 auto; margin-left: auto; }
  /* Форма редактирования: поля в столбик, а не в узкую ленту. */
  .roster-row-edit input,
  .roster-row-edit select { flex: 1 1 100%; }
}

/* ===== Таблицы «Шалфея» на узком экране =====
   Выше уже принято решение: на мобильном таблица остаётся таблицей и прячет
   «Наставника» с «Этапом». На 320 px этого мало — четыре оставшихся колонки
   занимают 430 px против доступных 294, и кнопка «Назначить» уезжала за край
   вместе с половиной статуса. Ниже 480 px таблица дожимается: полоса прогресса
   схлопывается до процента (сам процент и есть значение, полоса — украшение),
   ячейки теряют лишние отступы, длинные подписи переносятся. Колонки не
   прячем дальше: имя, прогресс, статус и действие управляющему нужны все. */
@media (max-width: 480px) {
  /* table-layout: fixed — без него проценты ниже остаются рекомендацией:
     авто-раскладка отдаёт ширину по содержимому и имя ужимается до 79 px. */
  .sg-table { table-layout: fixed; }
  .sg-table th,
  .sg-table td { padding: .5rem .4rem; overflow-wrap: anywhere; }
  .sg-table th:first-child,
  .sg-table td:first-child { padding-left: .6rem; }
  .sg-table th:last-child,
  .sg-table td:last-child { padding-right: .6rem; white-space: normal; }

  /* Полоса — украшение, процент — данные. На узком экране остаётся только он. */
  .sg-table .sg-bar-track { display: none; }
  .sg-table .sg-bar { gap: 0; }
  .sg-table .sg-bar-value { font-variant-numeric: tabular-nums; }

  /* Имя и статус переносятся вместо того, чтобы распирать таблицу. */
  .sg-table .sg-person-name,
  .sg-table .sg-person-meta { white-space: normal; overflow-wrap: anywhere; }
  .sg-table .sg-state {
    white-space: normal;
    font-size: 11px;
    line-height: 1.2;
    padding: .25rem .4rem;
  }
  .sg-table .sg-open-link { white-space: normal; font-size: 12px; }
  .sg-table th { font-size: 11px; letter-spacing: .2px; }

  /* Ширины из десктопной раскладки рассчитаны на шесть колонок. Когда две
     спрятаны, остаток распределяется поровну и имя ужимается в 79 px — строка
     вырастала до трёх строк текста. Заново раздаём проценты между теми
     колонками, что видны: имени больше всего, проценту меньше всего. */
  .sg-table-control th:nth-child(1) { width: 42%; }
  .sg-table-control th:nth-child(4) { width: 14%; }
  .sg-table-control th:nth-child(5) { width: 24%; }
  .sg-table-control th:nth-child(6) { width: 20%; }

  .sg-table-team th:nth-child(1) { width: 50%; }
  .sg-table-team th:nth-child(4) { width: 28%; }
  .sg-table-team th:nth-child(5) { width: 22%; }

  .sg-table-roadmaps th:nth-child(1) { width: 38%; }
  .sg-table-roadmaps th:nth-child(4) { width: 24%; }
  .sg-table-roadmaps th:nth-child(5) { width: 18%; }
  .sg-table-roadmaps th:nth-child(6) { width: 20%; }
}

/* ===== Размер под палец =====
   Мелкие цели на телефоне: иконки правки и удаления были 32 px в ширину,
   чекбокс «Показать деактивированных» — 13×13, кнопки-иконки в шапке 32×32.
   Рекомендация 44 px целиком применима к строкам списков; в шапке высотой
   56 px предел — 40, и это всё равно вдвое больше прежней площади попадания. */
@media (max-width: 720px) {
  .icon-action { min-width: 44px; width: 44px; min-height: 44px; }
  .icon-btn { width: 40px; height: 40px; min-width: 40px; }
  .topbar-sage .topbar-actions .icon-btn,
  .topbar-sage .icon-btn { width: 40px; height: 40px; min-width: 40px; }
  .sg-chip-filter { min-height: 40px; }
  input[type="checkbox"],
  input[type="radio"],
  #content.desk-skin input[type="checkbox"],
  #content.desk-skin input[type="radio"] { width: 20px; height: 20px; }
  /* Подпись рядом с чекбоксом тоже становится целью: попасть в неё легче,
     чем в сам квадратик. */
  .check-row,
  label:has(> input[type="checkbox"]) { min-height: 40px; align-items: center; }

  /* Мелкий кегль на телефоне. 11 px в бейджах «Активен» и «Нет контактов»
     читались с трудом; 12 px хватает, чтобы метка осталась меткой и при этом
     разбиралась без прищура. Подпись у чекбокса поднята до основного размера. */
  .badge { font-size: 12px; }
  .check-row,
  label:has(> input[type="checkbox"]) { font-size: 13px; }
}

/* ===== Безопасные зоны =====
   viewport-fit=cover пускает страницу под вырез камеры и под полосу жеста
   «назад». Без этих отступов шапка уезжает под чёлку, а нижняя кнопка
   оказывается под системной полосой — нажать её нельзя. env() на экранах без
   выреза возвращает ноль, поэтому правила безопасны везде. */
.topbar {
  padding-top: calc(.45rem + env(safe-area-inset-top));
  padding-left: max(1rem, calc((100% - var(--app-width)) / 2 + 1.5rem), env(safe-area-inset-left));
  padding-right: max(1rem, calc((100% - var(--app-width)) / 2 + 1.5rem), env(safe-area-inset-right));
}
.topbar.topbar-sage {
  padding-top: calc(.5rem + env(safe-area-inset-top));
}
main {
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
@media (max-width: 720px) {
  main {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
  /* Выпадающее меню тоже не должно уходить под правый вырез в альбомной. */
  .tabs { right: max(.6rem, env(safe-area-inset-right)); }
}


/* Экран входа: две двери рядом, а не одна и ссылка под ней. Переключатель
   выглядит как переключатель — сегменты в общей рамке, выбранный залит. */
.login-ways {
  display: flex;
  gap: 4px;
  margin: 1rem 0 1.25rem;
  padding: 4px;
  background: rgba(31, 75, 63, .07);
  border-radius: 12px;
}

.login-way {
  flex: 1;
  /* 44 точки под палец: с рамкой переключателя это .75rem по вертикали. */
  min-height: 44px;
  padding: .75rem .5rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4a5a54;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.login-way.is-active {
  background: #fff;
  color: #1f4b3f;
  box-shadow: 0 1px 3px rgba(15, 32, 27, .12);
}

.login-pane label {
  display: block;
  margin-bottom: .35rem;
  font-weight: 600;
}

/* Код диктуют и вставляют из буфера: он должен читаться знак за знаком,
   поэтому крупно, вразрядку и по центру — как код, а не как обычное поле. */
.code-input {
  text-transform: uppercase;
  letter-spacing: .3em;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  padding: .7rem .5rem;
}

/* Плейсхолдер — обычный текст «Введите код» (решение Сергея 26.08: пример
   кода вида AC7F34 сбивал с толку — читался как реальный код), поэтому без
   вразрядки и капса, обычным начертанием, единый шаблон входа. */
.code-input::placeholder {
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  font-size: 1.05rem;
  color: #6b7873;
}

.code-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.code-row .code-input {
  flex: 1 1 auto;
  min-width: 0;
}
.paste-btn {
  flex: 0 0 auto;
  padding: .7rem .9rem;
  font-size: .9rem;
}

.login-hint {
  margin-top: .75rem;
  color: #6b7873;
  font-size: .92rem;
  line-height: 1.45;
}

/* Ссылка в бота — второстепенное действие рядом с полем: человек уже здесь,
   ему нужно добежать до кода и вернуться, а не выбирать между двумя кнопками. */
.bot-link {
  display: inline-block;
  margin-top: .15rem;
  /* 44 точки — минимальная цель под палец; со шрифтом 16 это .7rem сверху. */
  padding: .7rem .95rem;
  border: 1px solid rgba(31, 75, 63, .25);
  border-radius: 10px;
  /* Класс садится и на <a> (без фона по умолчанию), и на <button> (зелёный
     фон по умолчанию из общего правила `button`) — без явного transparent
     тёмно-зелёный текст на зелёном фоне кнопки сливался (живой баг 24.08.2026,
     кнопка «Установить приложение»). */
  background: transparent;
  color: #1f4b3f;
  font-weight: 600;
  text-decoration: none;
}

/* Строка ожидания на старте: заметная ровно настолько, чтобы человек понял,
   что приложение живо, и не заметил её, когда сервер ответил быстро. */
.booting {
  margin: 18vh auto;
  text-align: center;
  color: #8a938f;
}

/* ---- Витрина демонстрационной записи (логин 11111) ----------------
   Показатели и плашка про изменённый регламент — макет для показа продукта.
   Живут на тех же токенах, что остальные карточки экрана: та же скруглённость
   --sg-r-card, тот же внутренний отступ 12/13, что у .sg-note-card, — чтобы
   витрина стояла в одном ряду с настоящими блоками, а не рядом с ними. */
:root { --sg-warn-ink: #8E662E; }
.sg-kpi-card { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: 12px 13px; margin-top: 9px; }
.sg-kpi-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.sg-kpi-head strong { font-size: 13px; font-weight: 500; color: var(--sg-text); }
.sg-kpi-head span { font-size: 11px; font-weight: 400; color: var(--sg-text-2); white-space: nowrap; }
.sg-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sg-kpi-tile { background: var(--sg-bg); border-radius: var(--sg-r-stat); padding: 10px 11px; min-width: 0; }
.sg-kpi-value { display: block; font-size: 20px; font-weight: 500; color: var(--sg-text); line-height: 1.15; }
.sg-kpi-value i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--sg-text-2); margin-left: 2px; }
.sg-kpi-label { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--sg-text); }
/* Подсказка стоит на плитке --sg-bg, а не на белом: общий серый --sg-text-2
   даёт на ней 4.22 и не дотягивает до AA. Свой тон на полшага темнее — 4.96. */
.sg-kpi-hint { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: #636A65; }
.sg-kpi-foot { margin: .7rem 0 0; font-size: 11px; font-weight: 400; color: var(--sg-text-2); }

/* Плашка «нужно действие». Полоса слева отличает её от карточек, которые
   просто сообщают, и не добавляет в макет ещё один цвет. */
.sg-alert-card { background: var(--sg-warn-soft); border: 1px solid var(--sg-warn); border-left-width: 3px;
  border-radius: var(--sg-r-card); padding: 12px 13px; margin-top: 9px; }
.sg-alert-head { display: flex; align-items: center; gap: .45rem; }
.sg-alert-head strong { font-size: 13px; font-weight: 500; color: var(--sg-warn-ink); }
.sg-alert-mark { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--sg-warn-ink); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; }
.sg-alert-text { margin: .45rem 0 .7rem; font-size: 12px; font-weight: 400; color: var(--sg-text); }
/* Несколько изменившихся регламентов разом — список ссылок вместо одной
   кнопки, каждая открывает свой (shtab#1359, 09.09.2026). */
.sg-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.sg-alert-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; text-align: left;
  color: var(--sg-warn-ink); text-decoration: underline; min-height: 32px; }
.sg-alert-card .sg-btn { width: auto; }
/* «Дальше — с наставником»: не тревога (warn уже занят «Регламент
   изменился» — требует внимания), а «идёт по плану, просто подожди».
   Design-critique 25.08.2026: тот же цвет для двух разных по смыслу
   состояний создавал ложную тревогу. Переиспользует --sg-acc — он уже
   означает «на маршруте», проверенный на контраст токен, не новый. */
.sg-alert-card.sg-alert-card-info { background: var(--sg-acc-soft); border-color: var(--sg-acc); }
.sg-alert-card.sg-alert-card-info h2 { color: var(--sg-acc-text); margin-top: 0; }

/* Строка статуса рассылки — экран «Отправленные уведомления» (владелец).
   Компактная замена карточке-баннеру: Сергей 26.08.2026, «Рассылка
   работает» занимала слишком много места для одного факта + одной кнопки.
   Точка несёт состояние формой (закрашена/пустая), не только цветом. */
.sg-status-line { display: flex; align-items: center; gap: .6rem; padding: .5rem .85rem;
  border-radius: var(--sg-r-card); margin-bottom: 1rem; font-size: 13px; background: var(--sg-warn-soft); }
.sg-status-line.sg-status-line-info { background: var(--sg-acc-soft); }
.sg-status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: transparent;
  border: 1.5px solid var(--sg-warn); }
.sg-status-line-info .sg-status-dot { background: var(--sg-acc); border-color: var(--sg-acc); }
.sg-status-line strong { color: var(--sg-warn-ink); }
.sg-status-line-info strong { color: var(--sg-acc-text); }
/* Детальный текст того же тона, что заголовок, обычным начертанием — серый
   на бледном фоне не дотягивал до контраста 4.5:1 (design-critique). */
.sg-status-line span.detail { flex: 1 1 auto; font-weight: 400; color: var(--sg-warn-ink); }
.sg-status-line-info span.detail { color: var(--sg-acc-text); }
.sg-status-line .sg-btn { padding: .35rem .75rem; font-size: 12.5px; }
/* Не собравшееся сообщение — поломка кода, а не отказ доставки: человеку не
   ушло ничего, и по журналу этого не видно, пока не откроешь строку. Красный
   тон отличает такое от обычных «ждёт привязки» и «остановлено владельцем».
   26.08.2026 заглушенное уведомление стажёра о маршруте пролежало почти
   сутки: причина была в базе, а на экране выглядела как остальные. */
.sg-status-line.sg-status-line-broken { background: var(--sg-red-soft); }
.sg-status-line-broken .sg-status-dot { background: var(--sg-red); border-color: var(--sg-red); }
.sg-status-line-broken strong,
.sg-status-line-broken span.detail { color: var(--sg-red); }
/* Вернувшееся в очередь — рабочая ситуация, не поломка: спокойный зелёный
   тон против красного у сбоя. Человек должен различать «система сама
   исправилась» и «система сломалась». */
.sg-table-outbox tr.sg-row-restored { background: var(--sg-acc-soft); }
.sg-table-outbox tr.sg-row-restored td:first-child { border-left: 3px solid var(--sg-acc); }
.sg-table-outbox tr.sg-row-broken { background: var(--sg-red-soft); }
.sg-table-outbox tr.sg-row-broken td { border-left: 0; }
.sg-table-outbox tr.sg-row-broken td:first-child { border-left: 3px solid var(--sg-red); }
.sg-table-outbox tr.sg-row-broken td:last-child,
.sg-table-outbox tr.sg-row-broken td:nth-last-child(2) { color: var(--sg-red); font-weight: 500; }

/* Получатели — список с чекбоксами, не плитки: плитки толкали имя и
   должность в одну пилюлю, список читается построчно одним взглядом
   (Сергей 26.08.2026: «плашки неудобны»). */
/* Тихая строка управления: рассылка работает — говорить не о чем, остаётся
   только кнопка. Прижата вправо, без фона и без текста-констатации. */
.sg-status-quiet { display: flex; justify-content: flex-end; margin-bottom: .75rem; }

/* Свёрнутый блок получателей: закрыт по умолчанию, в заголовке — отклонение.
   Тринадцать строк с галочками занимали экран целиком ради настройки, которую
   трогают раз в месяц (Сергей 28.08.2026). */
.sg-recipients { padding: .75rem .9rem; }
.sg-recipients-summary { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  cursor: pointer; list-style: none; font-size: 13.5px; color: var(--sg-text); }
.sg-recipients-summary::-webkit-details-marker { display: none; }
/* Стрелка своя: у нативного маркера в Firefox и Safari разный отступ, и строка
   съезжает. Поворачивается при раскрытии — состояние видно формой, не только
   текстом. */
/* Стрелка заметная: при 11px и цвете подписи её не видно, и блок читается как
   обычная строка, а не как раскрывающийся. */
.sg-recipients-summary::before { content: '▸'; color: var(--sg-text); font-size: 14px;
  line-height: 1; transition: transform .15s ease; display: inline-block; }
.sg-recipients[open] > .sg-recipients-summary::before { transform: rotate(90deg); }
.sg-recipients-summary:focus-visible { outline: 2px solid var(--sg-acc); outline-offset: 3px; border-radius: 4px; }
.sg-recipients-count { font-size: 12.5px; color: var(--sg-text-2); font-weight: 400; }
.sg-recipients-count.off { color: var(--sg-warn-ink); font-weight: 500; }
.sg-recipient-list { display: flex; flex-direction: column; }
.sg-recipient-row { display: flex; align-items: center; gap: .65rem; padding: .5rem 0;
  border-bottom: 1px solid var(--sg-line); cursor: pointer; }
.sg-recipient-row:last-child { border-bottom: none; }
.sg-recipient-row:hover { background: var(--sg-bg); margin: 0 -.6rem; padding: .5rem .6rem; border-radius: 6px; }
.sg-recipient-name { font-size: 13.5px; color: var(--sg-text); }
.sg-recipient-job { font-size: 12px; color: var(--sg-text-2); margin-left: .4rem; }
.sg-recipient-row.off .sg-recipient-name { color: var(--sg-text-2); }

/* Принудительная отправка — побеждает стоп-кран, тест-режим и выключенного
   получателя (Сергей 26.08.2026). Зелёная, не красная как 🗑: это не
   опасное действие, а полезное диагностическое. */
.icon-action-force { color: var(--sg-acc); }
.icon-action-force:hover { border-color: var(--sg-acc); color: var(--sg-acc); background: var(--sg-acc-soft); }

/* Окно тестовой отправки. */
.sg-testsend-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; text-align: left; }
.sg-testsend-field label { font-size: 12px; color: var(--sg-text-2); font-weight: 500; }
.sg-testsend-field select, .sg-testsend-field textarea { border: 1px solid var(--sg-line); border-radius: 8px;
  padding: .55rem .7rem; font: inherit; font-size: 13px; background: var(--sg-card); color: var(--sg-text); }
.sg-testsend-field textarea { min-height: 80px; resize: vertical; }

/* Модалка возобновления: «Отмена» — не третий вариант рассылки, а выход из
   диалога вообще (design-critique нашёл риск спутать с «включить без
   отправки»). Отделена отступом и чертой от двух содержательных кнопок. */
.sg-dialog-cancel-row { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--sg-line); text-align: center; }
.sg-dialog-cancel-row .sg-btn { border: none; background: none; color: var(--sg-text-2); font-size: 12.5px; padding: .3rem; }

@media (min-width: 720px) { .sg-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Шапка сотрудника на телефоне.

   flex-start у .topbar-actions рассчитан на строку вкладок: она занимает ширину
   и тянет всё влево. Но до 720px вкладки свёрнуты в бутерброд, и в строке
   остаются два значка — они жались к левому краю, а правая половина шапки
   пустовала (замечено владельцем 22.08.2026). Возвращаем привычный порядок:
   слева — кто ты, справа — действия. Имя заодно перестаёт пропадать на самом
   массовом экране: раньше .topbar-brand здесь был скрыт целиком. */
@media (max-width: 720px) {
  .topbar-sage .topbar-brand { display: flex; flex: 1 1 auto; min-width: 0; }
  .topbar-sage .topbar-brand-text { display: block; min-width: 0; }
  .topbar-sage .topbar-mark { width: 26px; height: 26px; border-radius: 7px; }
  .topbar-sage .topbar-actions { flex: 0 0 auto; justify-content: flex-end; }
}

/* «Что обо мне пишут» — отзывы гостей мастеру и его наставнику.

   Текст отзыва набран тем же кеглем, что и основной текст экрана, а не мельче:
   ради него раздел и существует. Мельче — служебное: кто и когда написал,
   услуга, пометка «оценка без слов».

   Оценки здесь нет как показателя: цифра стоит справа спокойной серой
   плашкой и бросается в глаза только тогда, когда она ниже пяти. */
.sg-otzyvy-card .sg-note-head { margin-bottom: .5rem; }
.sg-otzyv-schetchik { margin: 0 0 .7rem; font-size: 12px; color: var(--sg-text-2); }
.sg-otzyv { padding: .6rem 0; border-top: .5px solid var(--sg-line); }
.sg-otzyv:first-of-type { border-top: 0; padding-top: 0; }
.sg-otzyv-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .1rem; }
/* Имя автора — заголовок карточки (решение Сергея 29.08.2026: имя, звёзды,
   текст). Дата мелко напротив. Без имени карточка начинается со звёзд. */
.sg-otzyv-kto { font-size: 13.5px; font-weight: 600; color: var(--sg-text); min-width: 0; overflow-wrap: anywhere; }
.sg-otzyv-data { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; color: var(--sg-text-2); }
/* Звёзды оценки этого отзыва. Янтарь тёплый, закрашенная и контурная формы
   различимы и без цвета; ниже пяти видно самой формой — контурные звёзды. */
.sg-otzyv-zvyozdy { display: block; margin-bottom: .25rem; font-size: 13px; letter-spacing: 2px;
  color: var(--sg-warn); line-height: 1; }
.sg-otzyv-tekst { margin: 0; font-size: 13px; line-height: 1.45; color: var(--sg-text); overflow-wrap: anywhere; }
.sg-otzyv-bez-slov { margin: 0; font-size: 12px; color: var(--sg-text-2); font-style: italic; }
.sg-otzyv-bez-ocenki { display: block; margin-bottom: .25rem; font-size: 12px; color: var(--sg-text-2); font-style: italic; }
.sg-otzyv-pusto { margin: 0; font-size: 13px; line-height: 1.45; color: var(--sg-text); }
.sg-otzyv-esche { margin-top: .6rem; width: 100%; background: var(--sg-bg); border: 1px solid var(--sg-line);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 12px; color: var(--sg-text); cursor: pointer;
  min-height: 44px; }
.sg-otzyv-esche:hover { background: var(--sg-acc-soft); }

/* «Что изменилось» — правка регламента глазами сотрудника.

   Точечная подсветка внутри строки: текст остаётся тот же, видно только
   изменившийся кусок (задача Сергея 28.08.2026 — «зачеркнуть девяносто и
   написать девяносто пять»).

   Цвет здесь не единственный признак: убранное зачёркнуто, добавленное
   подчёркнуто и на подложке. Человек, который не различает эти оттенки,
   всё равно видит, где что. */
.izm-card { background: var(--sg-acc-soft); border: 1px solid var(--sg-acc); border-radius: var(--sg-r-card);
  padding: 13px 14px; margin: 0 0 1rem; }
.izm-head { margin-bottom: .5rem; font-size: 14px; color: var(--sg-acc-text); }
.izm-ot-avtora { margin: 0 0 .7rem; font-size: 13px; color: var(--sg-text); }
.izm-stroka { margin: .45rem 0; font-size: 14px; line-height: 1.5; color: var(--sg-text); overflow-wrap: anywhere; }
.izm-ubrali { color: #8A3D3D; background: #F7E7E7; text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.izm-dobavili { color: #2F5D3A; background: #E3F0E6; text-decoration: underline; padding: 0 2px; border-radius: 3px;
  font-weight: 500; }
/* Целиком убранный или добавленный абзац: слово рядом, потому что одной
   подсветки для целого абзаца мало — глаз читает её как оформление. */
.izm-metka { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sg-text-2); margin-right: 6px; }
.izm-card .izm-ves { margin: .6rem 0 0; font-size: 12px; }
.izm-card .izm-ves a { color: var(--sg-acc-text); }
.izm-card #ackBtn { width: 100%; min-height: 44px; margin-top: .3rem; }

/* Переключатель рабочего места (методист/09.09.2026). Стоит первым в ленте
   вкладок и читается как тумблер, а не как ещё одна вкладка: два прижатых
   друг к другу поля, активное залито. Складывать оба рабочих места в одну
   шапку нельзя — на телефоне она начинает ездить вбок, и человек не
   догадывается её листать. */
.mode-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  flex: 0 0 auto;
}
.mode-switch .mode-option {
  padding: .3rem .55rem;
  font-size: 11px;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
.mode-switch .mode-option.is-active {
  background: white;
  color: var(--brand);
}

@media (max-width: 720px) {
  /* В выпадающем меню переключатель занимает всю ширину и отделён от вкладок:
     это выбор рабочего места, а не переход по разделам. */
  .mode-switch {
    flex: 1 0 100%;
    width: 100%;
    margin-bottom: .35rem;
    padding-bottom: .35rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .mode-switch .mode-option {
    flex: 1 1 0;
    padding: .55rem .5rem;
    font-size: .9rem;
    text-align: center;
    color: var(--text-muted, #5b6b64);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .mode-switch .mode-option.is-active {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
  }
}

/* Рабочее место методиста — своя шапка (замечание владельца 09.09.2026):
   сиреневый, заметно отдельный от фирменного зелёного «Управления», чтобы
   место было видно раньше, чем прочитаны вкладки. */
.topbar.topbar-methodist { background: #5b4b96; }
.topbar.topbar-methodist .tabs button.active { color: #5b4b96; }
.topbar.topbar-methodist .mode-switch { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.topbar.topbar-methodist .mode-switch .mode-option.is-active { background: white; color: #5b4b96; }
@media (max-width: 720px) {
  .topbar.topbar-methodist .mode-switch .mode-option.is-active {
    background: #5b4b96;
    color: white;
    border-color: #5b4b96;
  }
}

/* ===== Блоки каталога (shtab#1741) и замечания к регламентам (shtab#1742) === */
.sg-block-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.sg-block-chip-count { font-size: 11.5px; opacity: .75; margin-left: .15rem; }
.sg-block-row { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-top: .5px solid var(--sg-line); }
.sg-ref-block .sg-block-row:first-child { border-top: 0; }
.sg-block-row-on { background: var(--sg-acc-soft); }
.sg-block-row-main { flex: 1 1 auto; min-width: 0; }
.sg-block-titles { border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); padding: .5rem .8rem .7rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .25rem .8rem; }
.sg-block-titles legend { font-size: 12px; color: var(--sg-text-2); padding: 0 .3rem; }
.sg-check { display: flex; align-items: center; gap: .45rem; min-height: 36px; font-size: 13px; font-weight: 400; }
.sg-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.sg-feedback { margin: 1rem 0 .5rem; }
.sg-feedback-kinds { display: grid; gap: .1rem; }
.sg-feedback-banner-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sg-feedback-banner-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .5rem .7rem; background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); font-size: 13px; }
.sg-feedback-item { padding: .7rem .8rem; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); background: var(--sg-card); }
.sg-feedback-item .sg-state { margin-right: .3rem; }
.sg-feedback-done { opacity: .6; }
.sg-feedback-text { margin: .4rem 0 .6rem; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.sg-state-ok { background: var(--sg-ok-soft); color: #4F6B35; }
.sg-cat-check-tap { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px 0; flex: 0 0 auto; cursor: pointer; }
.sg-cat-check { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--sg-acc); pointer-events: none; }
.sg-bulk-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .8rem; margin: 0 0 .8rem; background: var(--sg-acc-soft); border: 1px solid var(--sg-acc); border-radius: var(--sg-r-btn); }
.sg-bulk-count { font-size: 13px; font-weight: 500; color: var(--sg-acc-text); }
.sg-bulk-bar select { min-height: 40px; padding: .3rem .6rem; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); background: var(--sg-card); font: inherit; font-size: 13px; }
.sg-block-reg-list { display: grid; gap: .3rem; }
.sg-block-reg-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .6rem; border: 1px solid var(--sg-line); border-radius: var(--sg-r-btn); background: var(--sg-bg); }

/* Переключатель «Управление / Методист» стоит на одном месте в обоих режимах
   (слово Сергея 22.09.2026): вкладки центрировались, в «Методисте» их меньше —
   группа пересобиралась по центру и переключатель уезжал. Прижимаем группу к
   логотипу: переключатель первый, его место от числа вкладок не зависит. */
.topbar .tabs:has(.mode-switch) { justify-content: flex-start; }

/* «Мои стажёры» — в размерах «Контроля адаптации» (слово Сергея 22.09.2026:
   «как будто два разных сайта»). Кнопки строк и карточка уведомлений внутри
   .sg-desk — те же 13px/500, что у остального стола, без жирных 16px. */
.sg-mentor-section { margin-top: 1.6rem; }
.sg-mentor-head { margin-bottom: .6rem; }
.sg-mentor-section > .sg-memo { margin: 0 0 .9rem; }
.sg-trainee-card { margin-bottom: .75rem; }
/* shtab#1894: стажёр, по которому сейчас ничего не ждут, — одна строка. */
.sg-trainee-quiet { padding: .55rem 1.1rem; }
.sg-trainee-quiet > summary { font-size: 12.5px; color: var(--sg-text-2); cursor: pointer; }
.sg-trainee-quiet > summary strong { font-size: 13.5px; font-weight: 500; color: var(--sg-text); }
.sg-trainee-quiet[open] > summary { margin-bottom: .4rem; }
.sg-trainee-more { margin: .6rem 0 0; font-size: 11.5px; color: var(--sg-text-2); }
.sg-trainee-more .sg-link-btn { font-size: 11.5px; font-weight: 400; }
.sg-trainee-card .sg-trainee-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.sg-trainee-who strong { display: block; font-size: 14px; font-weight: 500; color: var(--sg-text); }
.sg-trainee-who span { display: block; font-size: 12px; color: var(--sg-text-2); margin-top: 2px; }
.sg-trainee-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.sg-trainee-card .list { display: flex; flex-direction: column; gap: .4rem; }
.sg-desk .sg-manager-actions button.secondary,
.sg-desk .sg-manager-actions button:not(.sg-cat-action):not(.sg-prog-btn) {
  font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--sg-r-btn);
  background: var(--sg-acc-soft); color: var(--sg-acc-text);
}
.sg-desk .sg-memo .sg-manager-row { margin-top: .4rem; }
.sg-desk .notifications-card { font-size: 13px; border: 1px solid var(--sg-acc); border-radius: var(--sg-r-card);
  box-shadow: none; padding: 12px 13px; margin: 0 0 .9rem; }
.sg-desk .notifications-card strong { font-size: 13px; font-weight: 500; }
.sg-desk .notifications-card p { font-size: 12.5px; margin: .35rem 0 0; }
.sg-trainee-tools button.secondary { font-size: 13px; font-weight: 500; padding: 6px 12px; min-height: 32px; border-radius: var(--sg-r-btn); background: var(--sg-acc-soft); color: var(--sg-acc-text); }