/* ============================================================
   Дизайн-система «Метод Цифры» — ДОПОЛНЕНИЯ 2: решения из Apple HIG
   Добавлено 21.10.2026 (решение Юрия): основа — ДС МЦ как есть
   (светлая тема, Montserrat, кнопки, поля, карточки, окна), сверху —
   только отдельные приёмы Apple, проверенные на «Курсах»:
     1. сегментированный переключатель вместо вкладок-пилюль;
     2. аватарки сотрудников (фото или цветные инициалы) и группа аватарок;
     3. компактный поиск с лупой в строке фильтров;
     4. визуальный редактор текста (.rte) — как в Word, без разметки;
     5. кнопки размера приложения: 40 px (маленькая — 32 px) вместо 48 px сайта.
   С 1.5.0 (21.10.2026, docs/ds-marketplace-design.md в tm-reports) — шкала
   текста и отступов приложения и компоненты 6–19 ниже: флажки и радио,
   кнопка-иконка, меню, всплывающая панель, окно подтверждения, тост,
   пустое состояние, прогресс, список, таблица, шапка страницы, подсказка,
   счётчик, баннер и поля приложения. Правила поведения — README, раздел
   «Приложения Маркета».
   С 1.6.0 (21.10.2026, аудит дизайна «Курсов») — компоненты 20–26: навигация
   приложения на телефоне, статус с точкой, закреплённая панель действий,
   полоса распределения, список шагов, зона нажатия на тач-экране, фокус
   только с клавиатуры; сегменты 14 px / 40 px, капс без широкой разрядки,
   KPI и поля фильтров в виде приложения, без зашитых цветов.
   Включается атрибутом <html data-dx-theme="light" data-dx-ui="2">,
   подключать после components.css и marketplace.css. Токены и
   существующие классы ДС не меняются — всё в области html[data-dx-ui="2"],
   поэтому приложения без атрибута выглядят как раньше.
   ============================================================ */

/* ---------- 1. сегментированный переключатель ---------- */
/* Та же разметка .tabs > .tab.is-here. Серая «дорожка», выбранный сегмент —
   белая плашка с тенью. Подходит и для навигации приложения, и для подвкладок,
   и для фильтров. Сегментов — до 5–6; больше — список или выпадающий выбор. */
html[data-dx-ui="2"] .tabs{display:inline-flex;flex-wrap:nowrap;gap:0;padding:3px;border-radius:12px;
  background:var(--dx-surface-inset)}
html[data-dx-ui="2"] .tab{display:inline-flex;align-items:center;gap:6px;height:34px;border:0;border-radius:9px;padding:0 16px;font-size:var(--dx-fs-ui);font-weight:var(--dx-fw-medium);
  color:var(--dx-text-muted);background:transparent;transition:background var(--dx-dur-fast) var(--dx-ease),box-shadow var(--dx-dur-fast) var(--dx-ease)}
html[data-dx-ui="2"] .tab:hover{color:var(--dx-text-strong);background:var(--dx-tab-hover)}
html[data-dx-ui="2"] .tab.is-here{color:var(--dx-text-strong);font-weight:var(--dx-fw-semibold);background:var(--dx-surface-card);border:0;
  box-shadow:0 1px 2px rgba(14,22,38,.08),0 3px 8px rgba(14,22,38,.10)}
html[data-dx-ui="2"] .tabs-scroll{mask-image:none;-webkit-mask-image:none}
@media (max-width:860px){html[data-dx-ui="2"] .tab{padding:0 12px;font-size:var(--dx-fs-sm)}}

/* ---------- 2. аватарки ---------- */
/* <span class="av" style="width:36px;height:36px;font-size:13px;background:…"><b>ИП</b><img src="…" alt=""></span>
   Фото — из Битрикс24 (PERSONAL_PHOTO), без фото — инициалы на цвете, стабильном
   для имени. Фото ложится поверх инициалов: не загрузилось — инициалы видны. */
html[data-dx-ui="2"] .av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;
  overflow:hidden;color:var(--dx-on-fill);font-weight:var(--dx-fw-semibold);letter-spacing:0}
html[data-dx-ui="2"] .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
html[data-dx-ui="2"] .av b{font-weight:inherit}
/* группа: «кто участвует» в одну строку, с наложением */
html[data-dx-ui="2"] .av-stack{display:inline-flex;align-items:center}
html[data-dx-ui="2"] .av-stack .av{box-shadow:0 0 0 2px var(--dx-surface-card)}
html[data-dx-ui="2"] .av-stack .av + .av{margin-left:-8px}
html[data-dx-ui="2"] .av-stack .av-more{background:var(--dx-surface-inset);color:var(--dx-text-muted);font-size:12px}

/* ---------- 3. поиск в строке фильтров ---------- */
/* Высота как у переключателя (40 px), лупа слева, без рамки до фокуса. */
html[data-dx-ui="2"] .dx-app .filters input:not([type=checkbox]):not([type=radio]),
html[data-dx-ui="2"] .dx-app input.search{height:40px;width:260px;max-width:100%;padding:0 12px 0 36px;font-size:var(--dx-fs-sm);
  border-color:transparent;background:var(--dx-surface-inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%}
html[data-dx-ui="2"] .dx-app .filters input:not([type=checkbox]):not([type=radio]):focus,
html[data-dx-ui="2"] .dx-app input.search:focus{background-color:var(--dx-surface-field);border-color:var(--dx-accent-line)}
html[data-dx-ui="2"] .dx-app .filters select{height:40px;padding-top:0;padding-bottom:0;background-color:var(--dx-surface-inset);border-color:transparent}
html[data-dx-ui="2"] .dx-app .filters select:focus{background-color:var(--dx-surface-field);border-color:var(--dx-accent-line)}
html[data-dx-ui="2"] .filters .tabs{align-self:center}
@media (max-width:560px){html[data-dx-ui="2"] .dx-app .filters input:not([type=checkbox]):not([type=radio]){width:100%}}

/* ---------- 4. визуальный редактор текста ---------- */
/* Разметка — в courses-app/static/app.js, richEditor(): панель .rte-bar
   (стиль абзаца, Ж/К/З, списки, цитата, ссылка, «убрать оформление»),
   строка ссылки .rte-link, поле .rte-area[contenteditable]. Хранится Markdown. */
html[data-dx-ui="2"] .rte{border:1px solid var(--dx-border-strong);border-radius:var(--dx-radius-field);background:var(--dx-surface-field);overflow:hidden}
html[data-dx-ui="2"] .rte:focus-within{border-color:var(--dx-accent-edge);box-shadow:0 0 0 3px var(--dx-accent-ring)}
html[data-dx-ui="2"] .rte-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;border-bottom:1px solid var(--dx-border);background:var(--dx-surface-inset)}
html[data-dx-ui="2"] .rte-bar button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border:0;
  border-radius:8px;background:transparent;color:var(--dx-text-strong);cursor:pointer}
html[data-dx-ui="2"] .rte-bar button:hover{background:var(--dx-accent-wash)}
html[data-dx-ui="2"] .rte-bar button.is-on{background:var(--dx-accent-tint);color:var(--dx-accent-soft)}
html[data-dx-ui="2"] .rte-sep{width:1px;height:20px;background:var(--dx-border-strong);margin:0 4px}
html[data-dx-ui="2"] .rte-area{min-height:220px;max-height:46vh;overflow:auto;padding:14px 16px;outline:none;line-height:var(--dx-lh-body)}
html[data-dx-ui="2"] .rte-area:empty::before{content:attr(data-ph);color:var(--dx-text-faint);pointer-events:none}

/* ---------- 5. кнопки размера приложения ---------- */
/* Базовая .btn ДС (48 px) рассчитана на сайт и лендинги. В приложении кнопок на
   экране много — как у Apple: 40 px обычная, 32 px маленькая; без подпрыгивания
   и цветной тени при наведении. Вид (заливка, контур, «пилюля») — прежний, ДС. */
html[data-dx-ui="2"] .btn{height:40px;padding:0 20px;gap:8px;font-size:var(--dx-fs-ui);box-shadow:none}
html[data-dx-ui="2"] .btn-sm{height:32px;padding:0 14px;font-size:var(--dx-fs-sm)}
html[data-dx-ui="2"] .btn-main:hover{transform:none}
html[data-dx-ui="2"] .btn .ico,html[data-dx-ui="2"] .btn .ico-sm{width:16px;height:16px}

/* ============================================================
   1.5.0 — шкала и компоненты приложения (Apple HIG, перенесено на ДС МЦ)
   ============================================================ */

/* ---------- 6. шкала текста и отступов приложения ---------- */
/* Сайтовая шкала (заголовок до 42 px, текст 16) в приложении крупна: вокруг
   Битрикс с текстом 14 px. Здесь — фиксированные размеры по пропорциям macOS,
   на шаг крупнее (Montserrat шире SF): страница 24/30, раздел 18/24,
   карточка 16/22, текст 14/20, вторичный 13/18, шапка таблицы 12/16. */
html[data-dx-ui="2"]{
  --dx-fs-h1:24px; --dx-fs-h2:18px; --dx-fs-h3:16px; --dx-fs-lead:14px;
  --dx-fs-body:14px; --dx-fs-ui:14px; --dx-fs-sm:13px; --dx-fs-xs:13px;
  --dx-fs-label:13px; --dx-fs-caps:12px;
  --dx-lh-body:1.43; --dx-lh-snug:1.38;
  --dx-space-6:24px; --dx-card-pad:20px; --dx-block-gap:32px;
  --dx-toast-action:var(--dx-blue-300);
  --dx-on-fill:#FFFFFF;                          /* текст и значок на цветной заливке */
  --dx-tab-hover:rgba(255,255,255,.55);          /* наведение на сегмент в серой дорожке */
  --dx-neutral-fill:#C9D2E0;                     /* «не начато» в полосе распределения */
  --dx-ls-caps:.04em; --dx-ls-eyebrow:.04em;     /* кириллица капсом — без широкой разрядки */
  --dx-shadow-float:0 12px 32px rgba(14,22,38,.14),0 2px 6px rgba(14,22,38,.06);
}
html[data-dx-ui="2"] .dx-app h1{font-size:var(--dx-fs-h1);font-weight:var(--dx-fw-bold);line-height:1.25;letter-spacing:-.01em}
html[data-dx-ui="2"] .dx-app h2{font-size:var(--dx-fs-h2);font-weight:var(--dx-fw-bold);line-height:1.33;letter-spacing:-.005em}
html[data-dx-ui="2"] .dx-app h3{font-size:var(--dx-fs-h3);font-weight:var(--dx-fw-semibold);line-height:1.38;letter-spacing:0}
html[data-dx-ui="2"] .sub{line-height:var(--dx-lh-body)}
html[data-dx-ui="2"] .kpi .k{background:var(--dx-surface-card);border-color:var(--dx-border);box-shadow:none}
html[data-dx-ui="2"] .kpi .k b{font-size:24px;line-height:30px;font-weight:var(--dx-fw-bold)}
html[data-dx-ui="2"] .kpi .k span,html[data-dx-ui="2"] .result,html[data-dx-ui="2"] .fold-meta{font-size:var(--dx-fs-sm)}

/* ---------- 7. поля приложения ---------- */
/* 40 px, как кнопка рядом. :where — чтобы частные классы (поле с плашками,
   поиск в списке) по-прежнему перебивали. textarea — тем же видом. */
html[data-dx-ui="2"] :where(.dx-app) :where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select){
  height:40px;padding:0 12px;font-size:var(--dx-fs-ui)}
html[data-dx-ui="2"] :where(.dx-app) select{padding-right:36px;background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%}
html[data-dx-ui="2"] :where(.dx-app) textarea{display:block;width:100%;min-height:96px;padding:10px 12px;font:inherit;font-size:var(--dx-fs-ui);
  line-height:var(--dx-lh-body);color:var(--dx-text-strong);background:var(--dx-surface-field);border:1px solid var(--dx-border-strong);
  border-radius:var(--dx-radius-field);resize:vertical;transition:border-color var(--dx-dur-fast) ease,box-shadow var(--dx-dur-fast) ease}
html[data-dx-ui="2"] :where(.dx-app) textarea:hover{border-color:var(--dx-border-hover)}
html[data-dx-ui="2"] :where(.dx-app) textarea:focus{outline:none;border-color:var(--dx-accent-focus);box-shadow:0 0 0 3px var(--dx-accent-ring)}
html[data-dx-ui="2"] .dx-app .f{gap:6px}

/* ---------- 8. флажки и радио ---------- */
/* Браузерные — мелкие и системного цвета. Свои: 18×18, заливка акцентом,
   белая галочка; радио — круг с белой точкой. У флажка третье состояние
   «выбраны не все» — input.indeterminate = true (ставит приложение).
   Разметка: <label class="check"><input type="checkbox"><span>Текст<small>пояснение</small></span></label>.
   Правило Apple: радио — до 5 вариантов, больше — выпадающий список. */
html[data-dx-ui="2"] :where(.dx-app) input:where([type=checkbox],[type=radio]):not(:where(.switch *)){
  appearance:none;-webkit-appearance:none;flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;padding:0;
  border:1.5px solid var(--dx-border-hover);border-radius:5px;background:var(--dx-surface-field) no-repeat center/14px 14px;
  cursor:pointer;vertical-align:-4px;transition:background-color var(--dx-dur-fast) ease,border-color var(--dx-dur-fast) ease}
html[data-dx-ui="2"] :where(.dx-app) input[type=radio]:not(:where(.switch *)){border-radius:50%}
html[data-dx-ui="2"] :where(.dx-app) input:where([type=checkbox],[type=radio]):not(:where(.switch *)):hover{border-color:var(--dx-accent-edge)}
html[data-dx-ui="2"] :where(.dx-app) input[type=checkbox]:not(:where(.switch *)):checked{border-color:var(--dx-accent);background-color:var(--dx-accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E")}
html[data-dx-ui="2"] :where(.dx-app) input[type=checkbox]:not(:where(.switch *)):indeterminate{border-color:var(--dx-accent);background-color:var(--dx-accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E")}
html[data-dx-ui="2"] :where(.dx-app) input[type=radio]:not(:where(.switch *)):checked{border-color:var(--dx-accent);
  background:radial-gradient(circle,var(--dx-on-fill) 0 3.5px,var(--dx-accent) 4px)}
html[data-dx-ui="2"] :where(.dx-app) input:where([type=checkbox],[type=radio]):not(:where(.switch *)):disabled{opacity:.45;cursor:default}
html[data-dx-ui="2"] :where(.dx-app) input:where([type=checkbox],[type=radio]):not(:where(.switch *)):focus{box-shadow:none}
html[data-dx-ui="2"] :where(.dx-app) input:where([type=checkbox],[type=radio]):not(:where(.switch *)):focus-visible{outline:var(--dx-focus);outline-offset:2px}
/* строка выбора: флажок + текст + пояснение мелким */
html[data-dx-ui="2"] .check{display:flex;align-items:flex-start;gap:10px;font-weight:var(--dx-fw-regular);font-size:var(--dx-fs-ui);
  color:var(--dx-text-strong);cursor:pointer}
html[data-dx-ui="2"] .check small{display:block;margin-top:2px;font-size:var(--dx-fs-sm);color:var(--dx-text-muted)}

/* ---------- 9. кнопка-иконка ---------- */
/* .ico-btn ДС (40 px, круг с рамкой) в приложении — 32×32 без рамки, фон по
   наведению. .is-danger — красная по наведению (удалить, убрать). Подпись —
   aria-label и data-tip (подсказка, п. 17). */
html[data-dx-ui="2"] .ico-btn{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--dx-text-muted);
  transition:background var(--dx-dur-fast) ease,color var(--dx-dur-fast) ease}
html[data-dx-ui="2"] .ico-btn:hover{background:var(--dx-surface-inset);color:var(--dx-text-strong)}
html[data-dx-ui="2"] .ico-btn.is-danger:hover{background:var(--dx-danger-tint);color:var(--dx-danger)}
html[data-dx-ui="2"] .ico-btn[aria-expanded="true"]{background:var(--dx-surface-inset);color:var(--dx-text-strong)}
html[data-dx-ui="2"] .ico-btn[disabled]{opacity:.35;cursor:default;background:transparent}
html[data-dx-ui="2"] .ico-btn .ico,html[data-dx-ui="2"] .ico-btn .ico-sm{width:16px;height:16px}

/* ---------- 10. меню действий ---------- */
/* Открывается кнопкой «⋯» (.ico-btn + icons.svg#dots) или «Действия». Правила
   Apple: частые пункты сверху, группы — через .menu-sep, опасный пункт —
   последним и красным, недоступное приглушено, подменю — не глубже одного
   уровня. 1–2 действия — это кнопки, меню не нужно; исключение — строка
   таблицы: там меню уже с двух действий (кнопки переносятся и раздувают строку).
   <div class="menu" popover role="menu">
     <button class="menu-item" role="menuitem">Ответы</button>
     <hr class="menu-sep">
     <button class="menu-item is-danger" role="menuitem">Отменить назначение</button>
   </div>
   Атрибут popover даёт закрытие по клику мимо и Esc; положение (top/left)
   ставит приложение — под кнопкой, по правому краю. */
html[data-dx-ui="2"] .menu{min-width:200px;max-width:320px;padding:6px;border:1px solid var(--dx-border);border-radius:12px;
  background:var(--dx-surface-card);box-shadow:var(--dx-shadow-float);color:var(--dx-text-strong);font-family:var(--dx-font)}
html[data-dx-ui="2"] .menu[popover],html[data-dx-ui="2"] .popover[popover]{position:fixed;inset:auto;margin:0}
html[data-dx-ui="2"] .menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 10px;border:0;border-radius:7px;
  background:transparent;color:var(--dx-text-strong);font:inherit;font-size:var(--dx-fs-ui);text-align:left;cursor:pointer}
html[data-dx-ui="2"] .menu-item:hover,html[data-dx-ui="2"] .menu-item:focus-visible{background:var(--dx-accent-tint);outline:none}
html[data-dx-ui="2"] .menu-item .ico,html[data-dx-ui="2"] .menu-item .ico-sm{width:16px;height:16px;color:var(--dx-text-muted)}
html[data-dx-ui="2"] .menu-item.is-danger{color:var(--dx-danger)}
html[data-dx-ui="2"] .menu-item.is-danger:hover{background:var(--dx-danger-tint)}
html[data-dx-ui="2"] .menu-item[disabled]{color:var(--dx-text-faint);cursor:default;background:transparent}
html[data-dx-ui="2"] .menu-sep{height:1px;margin:6px 4px;border:0;background:var(--dx-border)}
html[data-dx-ui="2"] .menu-title{padding:6px 10px 2px;font-size:var(--dx-fs-caps);font-weight:var(--dx-fw-semibold);color:var(--dx-text-faint)}

/* ---------- 11. всплывающая панель ---------- */
/* Рядом с источником: фильтр, выбор, «кто проходит». Одна за раз, закрывается
   кликом мимо и Esc, введённое не теряется. Для предупреждений — не она. */
html[data-dx-ui="2"] .popover{width:min(360px,calc(100vw - 32px));padding:16px;border:1px solid var(--dx-border);border-radius:14px;
  background:var(--dx-surface-card);box-shadow:var(--dx-shadow-float);color:var(--dx-text-strong);font-family:var(--dx-font);font-size:var(--dx-fs-ui)}
html[data-dx-ui="2"] .popover h3{margin-bottom:8px}
@keyframes dx-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html[data-dx-ui="2"] .menu:popover-open,html[data-dx-ui="2"] .popover:popover-open{animation:dx-pop .15s var(--dx-ease)}

/* ---------- 12. окна ---------- */
/* Обычное окно — плотнее сайтового. Окно подтверждения .dialog-confirm:
   заголовок-вопрос, одна строка последствий, до 3 кнопок; основная справа,
   «Отмена» слева, Esc = «Отмена». Кнопки — глаголы («Удалить», «Перевести
   в архив»), не «ОК/Да/Нет». Красная кнопка — только если человек разрушения
   не просил; в окне «Удалить шаг?» он его уже выбрал — кнопка обычная.
   Фокус при открытии — на первом поле (в подтверждении — на «Отмене»),
   не на крестике. */
html[data-dx-ui="2"] .dialog{padding:24px;border-color:var(--dx-border);box-shadow:var(--dx-shadow-float)}
html[data-dx-ui="2"] .dialog h2{font-size:var(--dx-fs-h2);margin-bottom:12px}
html[data-dx-ui="2"] .dialog p{font-size:var(--dx-fs-ui)}
html[data-dx-ui="2"] .dialog-actions,html[data-dx-ui="2"] .dialog .form-actions{gap:8px;justify-content:flex-end;margin-top:20px}
html[data-dx-ui="2"] .dialog.dialog-confirm{max-width:420px}
html[data-dx-ui="2"] .dialog::backdrop{backdrop-filter:none}

/* ---------- 13. тост ---------- */
/* Внизу по центру, 4–6 с. Частое и отменяемое (убрать из списка, удалить
   вопрос до сохранения) окном не подтверждаем — делаем сразу и даём
   «Вернуть» в тосте. Ошибку ввода показываем у поля, а не тостом.
   <div class="toast" role="status">Вопрос удалён <button class="toast-act">Вернуть</button></div> */
html[data-dx-ui="2"] .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:calc(var(--dx-z-dialog) + 10);
  display:flex;align-items:center;gap:16px;max-width:min(560px,calc(100% - 32px));padding:10px 12px 10px 16px;border-radius:12px;
  background:var(--dx-text-strong);color:var(--dx-surface-raised);font-size:var(--dx-fs-ui);line-height:1.4;box-shadow:var(--dx-shadow-float);
  animation:dx-toast .2s var(--dx-ease)}
html[data-dx-ui="2"] .toast[hidden]{display:none}
html[data-dx-ui="2"] .toast.err{background:var(--dx-danger)}
html[data-dx-ui="2"] .toast-act{flex:0 0 auto;margin-left:auto;padding:6px 10px;border:0;border-radius:7px;background:transparent;
  color:var(--dx-toast-action);font:inherit;font-weight:var(--dx-fw-semibold);cursor:pointer}
html[data-dx-ui="2"] .toast-act:hover{background:color-mix(in srgb,var(--dx-on-fill) 10%,transparent)}
html[data-dx-ui="2"] .toast.err .toast-act{color:var(--dx-on-fill);text-decoration:underline}
@keyframes dx-toast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 14. пустое состояние ---------- */
/* Одна фраза — что здесь появится, и кнопка следующего шага (если человек
   может его сделать). Без пунктира: обычная карточка.
   <div class="empty"><b>Курсов пока нет</b>Соберите первый курс…<button class="btn btn-main">Создать курс</button></div> */
html[data-dx-ui="2"] .empty{padding:40px 24px;border:1px solid var(--dx-border);border-radius:var(--dx-radius-card);background:var(--dx-surface-card);
  text-align:center;color:var(--dx-text-muted);font-size:var(--dx-fs-ui)}
html[data-dx-ui="2"] .empty b{display:block;margin-bottom:4px;color:var(--dx-text-strong);font-size:var(--dx-fs-h3);font-weight:var(--dx-fw-semibold)}
html[data-dx-ui="2"] .empty .btn{margin-top:16px}
html[data-dx-ui="2"] .empty .ico-lg{margin:0 auto 12px;color:var(--dx-text-faint)}

/* ---------- 15. полоса прогресса ---------- */
/* <div class="progress"><i style="width:40%"></i></div><div class="progress-label">Пройдено 2 из 5</div>
   .is-done — зелёная. Долгая операция — с подписью и кнопкой «Прервать». */
html[data-dx-ui="2"] .progress{height:6px;border-radius:6px;background:var(--dx-surface-inset);overflow:hidden}
html[data-dx-ui="2"] .progress > i{display:block;height:100%;border-radius:6px;background:var(--dx-accent);transition:width var(--dx-dur) var(--dx-ease)}
html[data-dx-ui="2"] .progress.is-done > i{background:var(--dx-ok)}
html[data-dx-ui="2"] .progress-label{margin-top:6px;font-size:var(--dx-fs-sm);color:var(--dx-text-muted)}

/* ---------- 16. список ---------- */
/* Сгруппированный список на карточке: люди, участники роли, файлы.
   Строка от 52 px; разделитель — от текста, а не от края (с аватаркой —
   .list.has-av). Действия справа видны при наведении, на тач-экране — всегда.
   <ul class="list has-av"><li class="list-row"><span class="av">…</span>
     <div class="who"><b>Анна Соколова</b><span>HR-директор</span></div>
     <div class="row-act"><button class="ico-btn is-danger">…</button></div></li></ul> */
html[data-dx-ui="2"] .list{list-style:none;margin:0;padding:0 16px;border:1px solid var(--dx-border);border-radius:var(--dx-radius-card);background:var(--dx-surface-card)}
html[data-dx-ui="2"] .list.is-plain{padding:0;border:0;background:transparent}
html[data-dx-ui="2"] .list-row{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0}
html[data-dx-ui="2"] .list-row + .list-row:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--dx-border)}
html[data-dx-ui="2"] .list.has-av .list-row + .list-row:before{left:48px}
html[data-dx-ui="2"] .list-row .who{flex:1;min-width:0}
html[data-dx-ui="2"] .list-row .who b{display:block;font-weight:var(--dx-fw-semibold);color:var(--dx-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-dx-ui="2"] .list-row .who span{display:block;font-size:var(--dx-fs-sm);color:var(--dx-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-dx-ui="2"] .list-row .row-act{display:flex;align-items:center;gap:4px;flex:0 0 auto}
@media (hover:hover){
  html[data-dx-ui="2"] .list-row .row-act{opacity:0;transition:opacity var(--dx-dur-fast) ease}
  html[data-dx-ui="2"] .list-row:hover .row-act,html[data-dx-ui="2"] .list-row:focus-within .row-act{opacity:1}
}

/* ---------- 17. таблица приложения ---------- */
/* Строка 44 px, текст 14. Сортировка — кнопка в заголовке, стрелка по
   aria-sort. Выбранная строка подсвечена постоянно (.is-selected).
   Зебра — только в широких таблицах (от 6 колонок): table.zebra.
   <th aria-sort="ascending"><button class="th-sort">Срок</button></th> */
html[data-dx-ui="2"] .dx-app th{padding:10px 16px}
html[data-dx-ui="2"] .dx-app td{padding:11px 16px}
html[data-dx-ui="2"] .th-sort{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;cursor:pointer}
html[data-dx-ui="2"] .th-sort:hover{color:var(--dx-text-strong)}
html[data-dx-ui="2"] .th-sort:after{content:"";width:8px;height:8px;opacity:.35;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l3 3H1zM4 8L1 5h6z' fill='%235B6B84'/%3E%3C/svg%3E") no-repeat center/8px}
html[data-dx-ui="2"] th[aria-sort] .th-sort{color:var(--dx-text-strong)}
html[data-dx-ui="2"] th[aria-sort="ascending"] .th-sort:after{opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1l3.5 4h-7z' fill='%230E1626'/%3E%3C/svg%3E")}
html[data-dx-ui="2"] th[aria-sort="descending"] .th-sort:after{opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7L.5 3h7z' fill='%230E1626'/%3E%3C/svg%3E")}
html[data-dx-ui="2"] .dx-app tr.is-selected td{background:var(--dx-accent-tint)}
html[data-dx-ui="2"] .dx-app table.zebra tbody tr:nth-child(even) td{background:var(--dx-row-alt)}

/* ---------- 18. шапка страницы ---------- */
/* «‹ назад», заголовок со статусом, строка-пояснение; справа — одна основная
   кнопка и вторичные. Основная — одна на экран.
   <div class="page-head"><div><button class="back">‹ Курсы</button><h1>…</h1><div class="sub">…</div></div>
     <div class="page-actions"><button class="btn btn-ghost">…</button><button class="btn btn-main">…</button></div></div> */
html[data-dx-ui="2"] .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
html[data-dx-ui="2"] .page-head h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html[data-dx-ui="2"] .page-head .sub{margin-top:4px;font-size:var(--dx-fs-sm);color:var(--dx-text-muted)}
html[data-dx-ui="2"] .page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-dx-ui="2"] .back{display:inline-flex;align-items:center;gap:4px;margin-bottom:8px;padding:0;border:0;background:none;
  font:inherit;font-size:var(--dx-fs-sm);color:var(--dx-text-link);text-decoration:none;cursor:pointer}
html[data-dx-ui="2"] .back:hover{color:var(--dx-text-strong)}

/* ---------- 19. подсказка, счётчик, баннер ---------- */
/* Подсказка — атрибут data-tip: до 75 знаков, не повторяет название кнопки,
   по наведению (с задержкой) и фокусу с клавиатуры. */
html[data-dx-ui="2"] [data-tip]{position:relative}
html[data-dx-ui="2"] [data-tip]:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;z-index:40;
  width:max-content;max-width:260px;padding:5px 8px;border-radius:6px;background:var(--dx-text-strong);color:var(--dx-surface-raised);
  font-size:var(--dx-fs-xs);font-weight:var(--dx-fw-medium);line-height:1.35;letter-spacing:0;text-transform:none;text-align:center;white-space:normal;
  transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .12s ease}
html[data-dx-ui="2"] [data-tip]:hover:after{opacity:1;transition-delay:.45s}
html[data-dx-ui="2"] [data-tip]:focus-visible:after{opacity:1}
html[data-dx-ui="2"] [data-tip].tip-end:after{left:auto;right:0;transform:none}
/* Счётчик — число в сегменте, пункте меню, заголовке. .is-alert — красный,
   только для срочного (просрочено), и никогда не единственный сигнал. */
html[data-dx-ui="2"] .count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--dx-radius-pill);background:var(--dx-surface-inset);color:var(--dx-text-muted);font-size:12px;
  font-weight:var(--dx-fw-semibold);font-variant-numeric:tabular-nums;line-height:1;vertical-align:1px}
html[data-dx-ui="2"] .tab.is-here .count{background:var(--dx-accent-tint);color:var(--dx-accent-soft)}
html[data-dx-ui="2"] .count.is-alert{background:var(--dx-danger);color:var(--dx-on-fill)}
/* Баннер в приложении — заливка без рамки, 14 px: он сообщает, а не кричит. */
html[data-dx-ui="2"] .banner{align-items:center;gap:12px;padding:12px 16px;border-color:transparent;border-radius:12px;font-size:var(--dx-fs-ui)}
html[data-dx-ui="2"] .banner .dot{margin-top:0}

/* ---------- 20. навигация приложения ---------- */
/* Разделы приложения: сегменты от 561 px, на телефоне — выбор раздела списком
   на всю ширину. Показывать только разделы своей роли; один раздел — меню нет.
   <nav class="app-nav"><div class="tabs">…</div><select aria-label="Раздел">…</select></nav> */
html[data-dx-ui="2"] .app-nav{display:flex;align-items:center;min-width:0}
html[data-dx-ui="2"] .app-nav select{display:none}
@media (max-width:560px){
  html[data-dx-ui="2"] .app-nav{width:100%}
  html[data-dx-ui="2"] .app-nav .tabs{display:none}
  html[data-dx-ui="2"] .app-nav select{display:block;width:100%;height:44px;font-weight:var(--dx-fw-semibold)}
}

/* ---------- 21. статус с точкой ---------- */
/* Один смысл — один цвет, как у рядов графика: .s-ok (сдан, пройден),
   .s-accent (в процессе), .s-warn (скоро срок), .s-danger (просрочен, не сдан),
   .s-faint (не начат). Пилюля .pill — только у статуса курса в шапке страницы.
   <span class="status s-ok">Сдан</span> */
.s-danger{--series:var(--dx-danger)}
.s-neutral{--series:var(--dx-neutral-fill, var(--dx-border-strong))}
html[data-dx-ui="2"] .status{display:inline-flex;align-items:center;gap:8px;font-size:var(--dx-fs-ui);line-height:20px;
  font-weight:var(--dx-fw-semibold);color:var(--dx-text-strong);white-space:nowrap}
html[data-dx-ui="2"] .status:before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--series,var(--dx-text-faint))}
html[data-dx-ui="2"] .status.s-faint{color:var(--dx-text-muted)}
html[data-dx-ui="2"] .status small{font-weight:var(--dx-fw-regular);color:var(--dx-text-muted);font-size:var(--dx-fs-sm)}

/* ---------- 22. закреплённая панель действий ---------- */
/* Внизу карточки или страницы: шаг курса («Прочитано, дальше»), несохранённые
   правки формы, массовый выбор. Одна .btn-main справа, слева — что происходит.
   Над панелью — затухание, чтобы текст не обрывался.
   <div class="action-bar"><span class="action-bar-info">Шаг 1 из 4</span><button class="btn btn-main">Прочитано, дальше</button></div> */
html[data-dx-ui="2"] .action-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;min-height:56px;
  padding:8px 20px;background:var(--dx-surface-card);border-top:1px solid var(--dx-border)}
html[data-dx-ui="2"] .action-bar:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--dx-surface-card))}
html[data-dx-ui="2"] .action-bar-info{display:flex;align-items:center;gap:12px;min-width:0;font-size:var(--dx-fs-sm);color:var(--dx-text-faint)}
html[data-dx-ui="2"] .action-bar .btn:last-child{margin-left:auto}
html[data-dx-ui="2"] .action-bar.is-warn .action-bar-info b{color:var(--dx-warn)}
@media (max-width:560px){
  html[data-dx-ui="2"] .action-bar{flex-wrap:wrap;padding:12px 16px 16px}
  html[data-dx-ui="2"] .action-bar .btn-main{width:100%;height:44px;margin-left:0}
}

/* ---------- 23. полоса распределения ---------- */
/* Доли одного целого одним рядом: сколько сдали / в процессе / не начали.
   Ширина сегмента — flex по количеству, цвет — по смыслу (.s-*), подписи —
   легендой .chart-legend. Нули не рисуются.
   <div class="meter-stack" role="img" aria-label="Сдан 2, в процессе 1, не начат 1">
     <i class="s-ok" style="flex:2"></i><i class="s-accent" style="flex:1"></i><i class="s-neutral" style="flex:1"></i></div> */
html[data-dx-ui="2"] .meter-stack{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:var(--dx-surface-inset)}
html[data-dx-ui="2"] .meter-stack i{display:block;min-width:4px;background:var(--series,var(--dx-accent))}

/* ---------- 24. список шагов ---------- */
/* Шаги курса в плеере: кружок с номером или галочкой, текущий — фоном
   акцента, необязательный — меткой. До 760 px список сворачивается в строку
   «Шаг 1 из 4 · название ▾» (.steps-nav-toggle), сам список — во всплывающей панели.
   <ol class="steps-nav"><li aria-current="step"><span class="steps-nav-mark">1</span>Название</li></ol> */
html[data-dx-ui="2"] .steps-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
html[data-dx-ui="2"] .steps-nav li{display:flex;align-items:flex-start;gap:10px;min-height:40px;padding:8px 10px;border-radius:10px;
  font-size:var(--dx-fs-ui);line-height:20px;color:var(--dx-text-strong);cursor:pointer}
html[data-dx-ui="2"] .steps-nav li:hover{background:var(--dx-surface-inset)}
html[data-dx-ui="2"] .steps-nav li[aria-current="step"]{background:var(--dx-accent-tint);font-weight:var(--dx-fw-semibold)}
html[data-dx-ui="2"] .steps-nav-mark{flex:0 0 auto;display:inline-grid;place-items:center;width:24px;height:24px;margin-top:-2px;border-radius:50%;
  border:1.5px solid var(--dx-border-strong);font-size:12px;font-weight:var(--dx-fw-semibold);color:var(--dx-text-muted)}
html[data-dx-ui="2"] .steps-nav li[aria-current="step"] .steps-nav-mark{border-color:var(--dx-accent);color:var(--dx-accent-soft)}
html[data-dx-ui="2"] .steps-nav li.is-done .steps-nav-mark{border-color:var(--dx-ok);background:var(--dx-ok);color:var(--dx-on-fill)}
html[data-dx-ui="2"] .steps-nav li.is-locked{color:var(--dx-text-faint);cursor:default}
html[data-dx-ui="2"] .steps-nav .opt{display:inline-flex;align-items:center;height:20px;margin-left:6px;padding:0 8px;border-radius:var(--dx-radius-pill);
  background:var(--dx-surface-inset);color:var(--dx-text-muted);font-size:12px;font-weight:var(--dx-fw-semibold)}
html[data-dx-ui="2"] .steps-nav-toggle{display:none}
@media (max-width:760px){
  html[data-dx-ui="2"] .steps-nav-toggle{display:flex;flex-direction:column;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--dx-border);
    border-radius:12px;background:var(--dx-surface-card);font:inherit;font-size:var(--dx-fs-ui);text-align:left;color:var(--dx-text-strong);cursor:pointer}
}

/* ---------- 25. зона нажатия ---------- */
/* Мышь — не меньше 32 px, тач-экран — 44 px: кнопки, пункты меню, строки списка. */
@media (pointer:coarse){
  html[data-dx-ui="2"] :is(.btn,.btn-sm,.ico-btn,.menu-item,.tab,.list-row,.text-btn){min-height:44px}
  html[data-dx-ui="2"] :is(.ico-btn){min-width:44px}
  html[data-dx-ui="2"] .tab{height:auto}
}

/* ---------- 26. фокус только с клавиатуры ---------- */
/* Рамка фокуса — по :focus-visible; от клика мышью рамки нет. */
html[data-dx-ui="2"] :is(.ico-btn,.icon-btn,.dialog-close,.tab,.btn,.text-btn,[data-close]):focus:not(:focus-visible){outline:none;box-shadow:none}