/* =====================================================================
   HR-3S × IDS: тема оформления под флагом (этап 4 плана docs/DESIGN-IDS-PLAN.md).
   Перенос черновика data/design/tokens-draft.css (редакция 2 от 26.09.2026) с поправками
   на разметку этапов 1–3: общая шапка .appbar, .nav-pills, .btn-primary/.btn-secondary, .bar.is-done.

   Подключается ПОСЛЕДНИМ из стилей (после tokens.css, app.css, learn.css и стилей страницы)
   во всех шаблонах с app.css; в project.html — сразу после tokens.css (его тёмная схема
   на data-theme перекрывает тему до этапа 6.6).
   Действует только при <html data-ui="ids">: атрибут ставит сервер (app/theme.py, настройка ui_theme)
   и head-скрипт _ui_head.html (?theme=ids|classic, localStorage). Атрибут data-theme не берём:
   им /project переключает светлую и тёмную схему.
   ПРАВИЛО: каждый селектор начинается с :root[data-ui="ids"], [data-ui="ids"] или :where([data-ui="ids"]) (раздел 6) —
   иначе правило уйдёт всем. Это проверяет tests/test_theme.py.

   Слои, как в IDS:
     1. палитра --c-*: сырые значения, больше нигде в CSS их нет;
     2. роли (--bg, --ink, --accent…): значения IDS поверх классических из tokens.css;
     3. шкалы: сами — в tokens.css; здесь решения IDS (16 px и 44 на телефоне, тексты для чтения, тени, угасание 0,5 с);
     4. старые имена (--key, --sand, --line…) — псевдонимы ролей до этапа 7;
     5. правила компонентов — только то, что роли сделать не могут;
     6. шкалы IDS там, где классика держит своё число (кнопка 38 → --h-m, диалог 14 → --r-l…): :where([data-ui="ids"]) + селектор
        из app.css — та же специфичность, поэтому порядок каскада прежний, а тема побеждает только за счёт места в файле.
   Варианты примерки (data-callout, data-bar, data-cards) сюда не переносятся (план 5.1.8).
   Селекторы плоские: вложенного CSS нет в старых WebView Telegram (iOS < 17.2).
   :has() — только отдельным правилом: в общем списке селекторов он роняет всё правило там,
   где не поддерживается (iOS < 15.4).
   ===================================================================== */

:root[data-ui="ids"]{
  /* ---------- 1. Палитра ---------- */
  --c-white:#ffffff;
  --c-sand-50:#faf6f1;    /* почти белый: прошедшее, чужой месяц, наведение на белом, неактивная кнопка */
  --c-sand-100:#f3ece4;   /* фирменный фон */
  --c-sand-200:#e8dfd3;   /* заливка: трек сегмента, чипы, метки, врезки, вторичная кнопка */
  --c-sand-300:#ddd2c4;   /* заливка сильнее: наведение на заливке, трек прогресса, аватар */
  --c-stone-400:#857d74;  /* рамки полей, значки, неактивное: 4,05 к белому, 3,46 к фону, 3,07 к заливке (норма 3:1). Не для текста */
  --c-stone-500:#665f57;  /* приглушённый текст: 4,77 на заливке, 5,37 на фоне, 6,29 на белом */
  --c-stone-700:#4d4b43;  /* вторичный текст: 6,63 на заливке, 7,46 на фоне */
  --c-stone-900:#1b1b1b;  /* основной текст: 13,06 на заливке, 14,71 на фоне */
  --c-umber:59 39 22;     /* тёплый тёмный для линий, теней и подложки: rgb(var(--c-umber) / .14) */
  --c-indigo-50:#e8e8f8;  /* акцент 10 % на белом: выбранное */
  --c-indigo-100:#d5d5f2; /* акцент 18 % на белом: кольцо фокуса поля (украшение, не признак) */
  --c-indigo-500:#3a39f0; /* наведение: белый на нём 6,95, на фоне 5,93 */
  --c-indigo-600:#1716b7; /* фирменный акцент: 9,77 на фоне, 8,68 на заливке; белый на нём 11,44 */
  --c-indigo-800:#11108c; /* нажатие: белый на нём 14,22 */
  --c-green-50:#e4efea;  --c-green-100:#cfe3d9; --c-green-700:#086048;  /* бывший фирменный зелёный = «сделано»: 5,74 на заливке */
  --c-amber-50:#fbefc9;  --c-amber-700:#855700;  /* «внимание»: 4,74 на заливке, 5,44 на своём тинте; тинт желтее, чем у ошибки */
  --c-red-50:#fbe9e7;    --c-red-700:#b3261e;    /* ошибка, просрочка, выходные: 4,96 на заливке, 5,58 на фоне; белый на нём 6,54 */
  --c-slate-50:#e8eced;  --c-slate-700:#3f5d6b;
  --c-peach-100:#ffecd1; --c-peach-300:#ffdc9e;
  --c-signal:#f00c0c;     /* только линия «сейчас», не текст: 4,41 к белому, 3,34 к своей брони (#ff0c0c давал 2,99) */

  /* ---------- 2. Роли ---------- */
  --bg:var(--c-sand-100);
  --surface:var(--c-white);          /* плашки: карточки, списки, шторки, поля, нижняя панель */
  --surface-2:var(--c-sand-50);      /* тихое состояние на белом: наведение строки, прошедшее, неактивное */
  --fill:var(--c-sand-200);          /* заливка: сегмент, чип, метка, врезка, вторичная кнопка (как --ids__surface) */
  --fill-2:var(--c-sand-300);
  --hairline:rgb(var(--c-umber) / .14);        /* разделители строк, рамка вложенной плашки */
  --hairline-faint:rgb(var(--c-umber) / .08);  /* сетка часов в календаре */
  --border:rgb(var(--c-umber) / .22);          /* декоративная рамка плашки на белом: вариант ответа, выбор-чип */
  --border-strong:var(--c-stone-400);          /* всё, по чему видно, что это поле или переключатель: поля, чекбоксы, пустой статус */
  --ink:var(--c-stone-900);
  --ink-2:var(--c-stone-700);
  --ink-3:var(--c-stone-500);        /* 4,5:1 проходит на фоне, белом, --surface-2, --fill и тинтах; на --fill-2 — нет */
  --ink-disabled:var(--c-stone-400);
  --icon:var(--c-stone-400);
  --accent:var(--c-indigo-600);      /* действие: кнопки, ссылки, выбранное, текущее, фокус */
  --accent-hover:var(--c-indigo-500);
  --accent-press:var(--c-indigo-800);
  --accent-tint:var(--c-indigo-50);
  --accent-tint-2:var(--c-indigo-100);
  --on-color:var(--c-white);         /* текст на насыщенной заливке: акцент, успех, ошибка */
  --focus:var(--c-indigo-600);
  --focus-ring:var(--c-indigo-100);
  --emphasis:var(--c-stone-900);     /* голос лонгридов: номера шагов, маркеры, цифры, итоговая линия. Нейтрально: синий = действие */
  --emphasis-tint:var(--c-sand-200);
  --attention:var(--c-amber-700);    /* «Важно», «Правило» в лонгридах: не синий (действие) и не зелёный (сделано) */
  --success:var(--c-green-700);  --success-tint:var(--c-green-50);
  --warning:var(--c-amber-700);  --warning-tint:var(--c-amber-50);
  --danger:var(--c-red-700);     --danger-tint:var(--c-red-50);
  --info:var(--c-slate-700);     --info-tint:var(--c-slate-50);
  --event:var(--c-green-700);    --event-tint:var(--c-green-50); --event-tint-2:var(--c-green-100);  /* мероприятие: пока тот же зелёный, роль своя */
  --weekend:var(--c-red-700);
  --now:var(--c-signal);
  --bk:var(--c-sand-100);        --bk-mine:var(--c-sand-200);   --bk-past:var(--c-sand-50);  /* блоки броней на белой сетке */
  --mark:var(--c-peach-300);     /* подсветка найденного */
  --backdrop:rgb(var(--c-umber) / .35);
  /* цвета оболочки Telegram: JS читает их из CSS. Не --tg-*: этот префикс пишет inline-стилем SDK Telegram */
  --shell-header:var(--c-sand-100); --shell-bg:var(--c-sand-100);

  /* ---------- 3. Шкалы: сами шкалы — в tokens.css (одинаковые числа в обеих темах), здесь только решения IDS ---------- */
  --fs-prose:calc(clamp(1rem, .875rem + .4vw, 1.1875rem) * var(--fs-k));  /* лонгриды, база знаний: 16 px до 390, 19 px от 1280; × размер текста (tokens.css, --fs-k) */
  --fs-field:var(--fs-m);   /* поиск и поля — основным кеглем: 15 на десктопе, 16 на телефоне (iOS не зумит) */
  --lh-tight:1.15; --lh-heading:1.25; --lh-ui:1.4; --lh-prose:1.5;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;  /* других файлов у Visuelt нет */
  --tracking-caps:.05em; --tracking-tight:-.01em;
  --w-read:40em;  /* колонка чтения ≈ 70 знаков (у IDS .ids__text-width) */
  --gap-s:var(--space-xs); --gap-m:var(--space-m); --gap-l:var(--space-l);  /* как у IDS при корне 16 px */
  --gutter:16px;
  --dur-out:.5s;  /* наведение гаснет за 0,5 с, загорается мгновенно (раздел 5.3) */
  --shadow-1:0 1px 2px rgb(var(--c-umber) / .10);   /* поднятый сегмент */
  --shadow-2:0 8px 30px rgb(var(--c-umber) / .14);  /* всплывающее: меню, подсказки, диалог, тост, FAB */
  --shadow-3:0 -8px 30px rgb(var(--c-umber) / .18); /* шторка снизу */
  --shadow-card:none;                                /* карточки на фоне — без тени (решение 3) */
  --shadow-bar:0 -8px 30px rgb(var(--c-umber) / .08);
  --shadow-fab:var(--shadow-2);
  --shadow-focus:0 0 0 1px var(--accent),0 0 0 4px var(--focus-ring);  /* поле в фокусе: 2 px акцентом (рамка + тень) и мягкое кольцо */

  /* ---------- 4. Старые имена → роли (псевдонимы до этапа 7; в tokens.css те же, кроме персикового наведения) ---------- */
  --sand:var(--fill);
  --sand-2:var(--fill-2);
  --line:var(--border);            /* у полей и пустых статусов переопределено на --border-strong ниже */
  --line-soft:var(--hairline);
  --line-faint:var(--hairline-faint);
  --card:var(--bk);
  --card-mine:var(--bk-mine);
  --key:var(--accent);             /* оставшиеся var(--key) с пометкой «IDS: …» разведены ниже */
  --key-hover:var(--accent-hover);
  --key-tint:var(--accent-tint);
  --key-tint-2:var(--accent-tint-2);
  --peach:var(--c-peach-100);
  --peach-hover:var(--c-peach-300);
  --shadow:var(--shadow-2);
}
@media (max-width:700px){
  :root[data-ui="ids"]{--h-m:calc(44px * var(--fs-k));--fs-m:calc(16px * var(--fs-k))}  /* решения IDS: основной текст 16 px, кнопки и поля 44 — под палец; поле с кеглем 16 px iOS не зумит; × размер текста */
}

/* ---------- 5. Правила компонентов ---------- */

/* 5.1 Основа. Никакого поддельного начертания (правило IDS): жирный только из файлов 500 и 700.
   Исключение — реплики диалога в лонгридах (.dialog): курсива у Visuelt нет, наклон — часть текста клиники */
[data-ui="ids"] body{background:var(--bg);font-synthesis:none}
[data-ui="ids"] .prose .dialog{font-synthesis:style}
[data-ui="ids"] ::placeholder{color:var(--ink-3);opacity:1}
[data-ui="ids"] .dlg::backdrop{background:var(--backdrop, rgb(59 39 22 / .35))}  /* старый WebKit не передаёт переменные в ::backdrop — тогда сработает запасное значение */

/* 5.2 Фокус виден только с клавиатуры: обводка 2 px цветом акцента с зазором 2 px, как в IDS */
[data-ui="ids"] :focus:not(:focus-visible){outline:none}
[data-ui="ids"] :where(a,button,summary,select,[tabindex],input[type=checkbox],input[type=radio]):focus-visible{outline:var(--bw-m) solid var(--focus);outline-offset:2px}
/* строки, брони и ячейки лежат в контейнерах с overflow — обводка внутрь, иначе её срежет */
[data-ui="ids"] :is(.crs-row,.step,.pick,.dp-row,.list-row,.menu-act,.menu-item,.menu-head,.bk,.mchip,.mday,.ds-day,.dp-day,.picker-item,.r-link):focus-visible{outline-offset:-2px}
/* выбор-чипы: поле скрыто визуально, но остаётся в порядке Tab; обводку получает подпись */
[data-ui="ids"] :is(.type-chip,.wd-chip){position:relative}
[data-ui="ids"] :is(.type-chip,.wd-chip) input{display:block;position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
[data-ui="ids"] :is(.type-chip,.wd-chip) input:focus-visible+span{outline:var(--bw-m) solid var(--focus);outline-offset:2px}

/* 5.3 Движение. Наведение — другой цвет: загорается мгновенно, гаснет за 0,5 с, и только при мыши.
   Переключатели (день, сегмент, чипы, вкладки) не анимируются вовсе: иначе полсекунды видны два выбранных */
[data-ui="ids"] :is(.btn,.seg-btn,.chip,.room-toggle,.room-tab,.ds-day,.dp-day,.mday,.menu-item,.picker-item){transition:none}
@media (hover:hover){
  [data-ui="ids"] :is(a,.btn:not(.mine-btn),.icon-btn,.crs-row,.step,.pick,.dp-row,.list-row,.menu-card,.menu-act,.mchip,.date-title,.user-chip){
    transition:color var(--dur-out) var(--ease),background-color var(--dur-out) var(--ease),border-color var(--dur-out) var(--ease)}
  [data-ui="ids"] :is(a,.btn:not(.mine-btn),.icon-btn,.crs-row,.step,.pick,.dp-row,.list-row,.menu-card,.menu-act,.mchip,.date-title,.user-chip):hover{transition-duration:var(--dur-instant)}
  [data-ui="ids"] :is(.prose a,.lnote a,.notice a,.link-btn,.lsec-link,.pdfv-open,.room-toggle-all,.tg-wait-text a,.tg-msg a,.kb-crumbs a,.r-link,.tbl-stats a,.btn-ghost):hover{color:var(--accent-hover)}
}
@media (hover:hover){
  /* у брони и узла карты персонала тень и рамка плавные (--dur-out в app.css и staffmap.css): загораются тоже мгновенно */
  [data-ui="ids"] .bk:hover,[data-ui="ids"] button.mm-node:hover{transition-duration:var(--dur-instant)}
}
@media (prefers-reduced-motion:reduce){[data-ui="ids"] *{transition-duration:0s!important}}

/* 5.4 Кнопки. Главная (.btn-primary, прежнее имя .btn-key) — синяя и одна на экран; FAB тоже.
   Вторичная (.btn-secondary), мини-кнопки и кнопки в строках (.r-act) — заливка и текст акцентом.
   В классике часть главных персиковые (app.css, .btn-primary:where(#newBooking…)) — здесь они синие.
   Специфичность ровная: .btn + :where(…), порядок правил решает — главная, вторичная, наведение, нажатие, неактивная */
[data-ui="ids"] .btn:where(.btn-primary,.btn-key),[data-ui="ids"] .fab{background:var(--accent);color:var(--on-color)}
[data-ui="ids"] .btn:where(.btn-secondary,.btn-mini,.r-act .btn:not(.btn-danger)){background:var(--fill);color:var(--accent)}
[data-ui="ids"] .btn-ghost{color:var(--accent)}
[data-ui="ids"] .mine-btn.is-active{background:var(--accent-tint);color:var(--accent)}
@media (hover:hover){
  [data-ui="ids"] .btn:where(.btn-primary,.btn-key):hover,[data-ui="ids"] .fab:hover{background:var(--accent-hover);color:var(--on-color)}
  [data-ui="ids"] .btn:where(.btn-secondary,.btn-mini,.r-act .btn:not(.btn-danger)):hover{background:var(--fill-2);color:var(--accent-hover)}
}
[data-ui="ids"] .btn:where(.btn-primary,.btn-key):active,[data-ui="ids"] .fab:active{background:var(--accent-press)}
/* неактивная: светлее вторичной и с контуром — не путается ни с главной, ни с вторичной; без прозрачности.
   Рядом — подсказка, почему недоступна («Попытки закончились» уже говорит сама) */
[data-ui="ids"] .btn[disabled],[data-ui="ids"] .btn[disabled]:hover{opacity:1;background:var(--surface-2);color:var(--ink-disabled);box-shadow:inset 0 0 0 1px var(--hairline);cursor:default}
[data-ui="ids"] #qnext[disabled]{opacity:1}
[data-ui="ids"] .fab{box-shadow:var(--shadow-2)}

/* 5.5 Поля: рамка 3:1 (и в таблицах админки), фокус — 2 px акцентом плюс мягкое кольцо.
   Селекторы списком без :is(): у каждого своя специфичность, состояния из app.css не перебиваются */
[data-ui="ids"] .field input,[data-ui="ids"] .field select,[data-ui="ids"] .field textarea,[data-ui="ids"] .search,[data-ui="ids"] .ch-row input[type=text],[data-ui="ids"] .stats-f select,[data-ui="ids"] .pl-day input,[data-ui="ids"] .dp-btn,[data-ui="ids"] .table input,[data-ui="ids"] .table select,[data-ui="ids"] .picker,[data-ui="ids"] .opt .rd{border-color:var(--border-strong)}
[data-ui="ids"] .opt.is-on .rd{border-color:var(--accent)}
[data-ui="ids"] .field input:focus,
[data-ui="ids"] .field select:focus,
[data-ui="ids"] .field textarea:focus,
[data-ui="ids"] .ch-row input[type=text]:focus,
[data-ui="ids"] .stats-f select:focus,
[data-ui="ids"] .pl-day input:focus,
[data-ui="ids"] .table input:focus,
[data-ui="ids"] .table select:focus,
[data-ui="ids"] .search:focus-within,
[data-ui="ids"] .picker:focus-within,
[data-ui="ids"] .dp-btn.is-open{
  border-color:var(--accent);box-shadow:var(--shadow-focus);outline:none}

/* 5.6 Плашки на фоне: без рамки и тени (у IDS плашку отличает только заливка) */
[data-ui="ids"] :is(.crs,.steps,.test-card,.prog,.q-card,.file-card,.stat,.res-card,.rev-q,.day-panel,.list,.month,.day,.menu-card,.menu-sec,.pdfv,.rules-wrap,.tbl-stats,.panel){border-color:transparent;box-shadow:none}
[data-ui="ids"] .lopt{background:var(--surface)}
[data-ui="ids"] :is(.notice,.lsect-next,.repeat-panel){background:var(--fill);color:var(--ink-2)}
[data-ui="ids"] .crs-note{background:var(--surface-2)}
[data-ui="ids"] .pdfv-pages{background:var(--fill)}
/* «Ознакомлен»: плашка-подсказка, не действие — нейтральная заливка и полоса, синей остаётся только кнопка */
[data-ui="ids"] .ack-card:not(.is-done){background:var(--fill);border-left-color:var(--border-strong)}
/* сообщения: белая плашка с полосой цвета статуса — тинт на фоне формы не держит (1,00–1,04:1) */
[data-ui="ids"] .flash{background:var(--surface);color:var(--ink);box-shadow:inset 4px 0 0 var(--success)}
[data-ui="ids"] .form-error{box-shadow:inset 4px 0 0 var(--danger)}

/* 5.7 Шапки и навигация. Шапки цвета фона, одним листом с Telegram (вариант: --bar surface) */
[data-ui="ids"] .appbar{background:var(--bg)}
/* текущий пункт: тинт, акцент и начертание 500 (остальные 400) — не только цвет */
[data-ui="ids"] .nav-pills a{font-weight:var(--fw-regular)}
[data-ui="ids"] .nav-pills a[aria-current="page"]{background:var(--accent-tint);color:var(--accent);font-weight:var(--fw-medium)}
/* сегмент: активный — белая плашка с контуром и тенью, текст 500; остальные 400 */
[data-ui="ids"] .seg-btn{font-weight:var(--fw-regular)}
[data-ui="ids"] .seg-btn.is-active{font-weight:var(--fw-medium);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--border)}

/* 5.8 Выбранное — заливка акцентом; «сегодня» — везде кольцо (раньше в месяце была заливка) */
[data-ui="ids"] .ds-day.is-sel{background:var(--accent);border-color:var(--accent)}
[data-ui="ids"] .ds-day.is-sel.is-today{box-shadow:inset 0 0 0 2px var(--surface)}   /* выбран сегодняшний день: кольцо не пропадает */
[data-ui="ids"] .dp-day.is-sel.is-today{box-shadow:inset 0 0 0 2px var(--surface)}
@media (hover:hover){[data-ui="ids"] .ds-day.is-sel:hover{background:var(--accent-hover)}}
[data-ui="ids"] .mday.is-today .mday-num{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
[data-ui="ids"] .room-tab.is-active{background:var(--accent);border-color:var(--accent)}
[data-ui="ids"] .type-chip input:checked+span{background:var(--accent);border-color:var(--accent)}
[data-ui="ids"] .slot.is-sel{background:var(--accent);border-color:var(--accent)}
/* чипы: наведение — темнее заливка, выбранный — тинт, акцент и контур (раньше наведение и выбор совпадали) */
[data-ui="ids"] .chips .chip.is-picked{background:var(--accent-tint);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
@media (hover:hover){[data-ui="ids"] .chips :is(a,button).chip:not(.is-picked):hover{background:var(--fill-2)}}

/* 5.9 «Сделано» — зелёное, прогресс в работе — нейтральный, цифры — цветом текста */
[data-ui="ids"] .st{border-color:var(--border-strong)}   /* пустой кружок «не начато»: 4,05:1 (был 1,5:1) */
[data-ui="ids"] .st-part{border-color:var(--success);background:conic-gradient(var(--success) 0 50%,transparent 50% 100%)}
[data-ui="ids"] :is(.st-ok,.ln-ok,.step.is-done .step-n,.res-ic:not(.is-fail)){background:var(--success);border-color:var(--success);color:var(--on-color)}
[data-ui="ids"] .st-fail{background:var(--danger);border-color:var(--danger)}
[data-ui="ids"] .st-late{border-color:var(--danger)}
[data-ui="ids"] .tag-ok{background:var(--success-tint);color:var(--success)}
[data-ui="ids"] :is(.stat.is-ok b,.r-eng .ok,.crs-sub .ok,.step-sub .ok,.lsect-r .ok){color:var(--success)}
[data-ui="ids"] :is(.prog-title b,.lsect-r b,.med-types .chip b){color:var(--ink)}
[data-ui="ids"] .bar i{background:var(--ink-2)}
[data-ui="ids"] .bar.is-late i{background:var(--danger)}
[data-ui="ids"] .bar.is-done i{background:var(--success)}
[data-ui="ids"] .qbar i.is-done{background:var(--ink-2)}
[data-ui="ids"] .qbar i.is-cur{background:var(--accent)}
[data-ui="ids"] .att i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border-strong)}   /* осталось: кольцо (заливка --fill-2 была 1,49:1) */
[data-ui="ids"] .att i.is-used{background:var(--ink-3);box-shadow:none}                        /* потрачено: серая точка, не красная */
[data-ui="ids"] .ch-num{background:var(--fill);color:var(--ink-2)}
[data-ui="ids"] .user-avatar{background:var(--fill-2);color:var(--ink)}   /* аватар — не действие; у IDS он серый */

/* 5.10 Внимание и ошибки: у каждой метки своё слово; янтарный — «внимание», красный — «плохо» */
[data-ui="ids"] .tag-warn{background:var(--warning-tint);color:var(--warning)}
[data-ui="ids"] .r-eng .warn{color:var(--warning)}
/* метка статуса на фоне страницы — на белой подложке: тинт на фоне не виден */
[data-ui="ids"] :is(.lkicker,.emp-name,.lsect-meta,.lnote) :is(.tag-ok,.tag-late,.tag-warn,.tag-event){background:var(--surface)}
[data-ui="ids"] .axis-now{color:var(--danger)}   /* подпись «сейчас» — текст 11 px: #ff0c0c давал 3,95:1, --now остаётся линии */

/* 5.11 Категории и ссылки: мероприятие — своя роль, департаменты и типы — нейтрально; ссылки — акцентом */
[data-ui="ids"] .bk-event{background:var(--event-tint)}
[data-ui="ids"] .bk-event.bk-mine{background:var(--event-tint-2)}
[data-ui="ids"] :is(.kind-event,.bk-event .bk-time,.mchip-event .mchip-title){color:var(--event)}
[data-ui="ids"] .tag-event{background:var(--event-tint);color:var(--event)}
[data-ui="ids"] .chip-dep{background:var(--fill);color:var(--ink-2)}
[data-ui="ids"] .chips .chip-kind{background:var(--surface);color:var(--ink-2)}
[data-ui="ids"] :is(.mt-video,.mt-text,.mt-document,.mt-quiz,.mt-link){background:none;color:var(--icon)}
[data-ui="ids"] :is(.mt-p,.mt-c){background:var(--fill-2);color:var(--ink)}
[data-ui="ids"] :is(.kb-count,.room-tab small){color:var(--ink-2)}
[data-ui="ids"] .room-tab.is-active small{color:var(--on-color)}
[data-ui="ids"] .chips a.chip{color:var(--accent)}
[data-ui="ids"] .tbl-stats a{color:var(--accent);text-decoration:none;font-weight:var(--fw-medium)}
@media (hover:hover){[data-ui="ids"] .tbl-stats a:hover{text-decoration:underline}}

/* 5.12 Календарь. Текст без прозрачности: прошедшее и чужой месяц — цветом */
[data-ui="ids"] .bk.bk-past{opacity:1;background:var(--bk-past);box-shadow:inset 0 0 0 1px var(--hairline)}   /* .bk — чтобы перебить своё мероприятие */
[data-ui="ids"] .bk.bk-past:hover{box-shadow:var(--shadow-2)}
[data-ui="ids"] .bk-past .bk-title{color:var(--ink-2);font-weight:var(--fw-regular)}
[data-ui="ids"] .bk-past :is(.bk-time,.bk-who,.bk-kind){color:var(--ink-3)}
[data-ui="ids"] .mday.is-other .mchip{opacity:1}
[data-ui="ids"] .mday.is-other :is(.mchip-time,.mchip-title,.mchip-who){color:var(--ink-3)}
[data-ui="ids"] .axis-label{color:var(--ink-2)}
[data-ui="ids"] .axis-half{opacity:1;color:var(--ink-3)}
[data-ui="ids"] .room-toggle.is-off{opacity:1;color:var(--ink-3)}
[data-ui="ids"] :is(.menu-card,.menu-head,.menu-act).is-soon{opacity:1;color:var(--ink-3)}
[data-ui="ids"] .dp-day.is-other{opacity:1}
[data-ui="ids"] .month-head div:nth-child(n+6),[data-ui="ids"] .mday.is-weekend .mday-num{opacity:1;color:var(--weekend)}
[data-ui="ids"] :is(.dp-row,.list-row,.mday):hover{background:var(--surface-2)}
[data-ui="ids"] :is(.mday.is-other,.col.is-past-day){background:var(--surface-2)}
[data-ui="ids"] :is(.pick:hover,.crs-row:active,.step:active){background:var(--surface-2)}
[data-ui="ids"] .slot-ghost{background:var(--accent-tint)}
[data-ui="ids"] .kb-hit mark{background:var(--mark)}
[data-ui="ids"] .vid{background:linear-gradient(135deg,rgb(var(--c-umber)) 0%,var(--ink) 100%)}
[data-ui="ids"] .brand-mark{background:var(--c-green-700)}   /* логотип не трогаем до решения пользователя */
[data-ui="ids"] :is(.menu-badge,.stat b,.ch-num,.ln,.file-ic){font-weight:var(--fw-bold)}  /* 600 → 700: так они и рисовались */

/* 5.13 Тексты для чтения .prose (этап 6.3): лонгрид курса, страница базы знаний, текст документа.
   Флюидный кегль только здесь, размеры внутри — в em. Классы контента (.callout, .idents…) не переименовываем — HTML в базе */
[data-ui="ids"] .prose{font-size:var(--fs-prose);line-height:var(--lh-prose)}
[data-ui="ids"] .prose h2{font-size:1.25em;line-height:var(--lh-heading);letter-spacing:var(--tracking-tight);margin:1.75em 0 .5em}
[data-ui="ids"] .prose h3{font-size:1.125em;line-height:1.3;margin:1.4em 0 .4em}
[data-ui="ids"] .prose h2+h3{margin-top:.6em}
[data-ui="ids"] .prose p{margin:0 0 .8em}
[data-ui="ids"] .prose>:first-child:is(h2,h3,p,ul,ol,figure,div,aside){margin-top:0}
[data-ui="ids"] .prose :is(.bracelets .desc,.duo .note,.trio .note,table,.tbl.compact th,.tbl.compact td){font-size:.875em}
[data-ui="ids"] .prose :is(figcaption,.stats .t,p.src,.fin .sig,blockquote cite,table caption){font-size:.8125em}
[data-ui="ids"] .prose .terms dd{font-size:.9375em}
[data-ui="ids"] .prose :is(.callout .pin,.example .ex-label,.role .role-label,.duo .tag,.trio .tag){font-size:.6875em}
[data-ui="ids"] .prose .stats .n{font-size:1.5em}
[data-ui="ids"] .prose .idents .id-card p{font-size:1em}   /* было 16 px: на десктопе мельче текста вокруг */
[data-ui="ids"] .prose :is(.idents .id-card,.bracelets li,.stats li,.terms div,.tbl){border-color:transparent}
[data-ui="ids"] .prose :is(.duo .box,.trio .box){border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}
[data-ui="ids"] .prose :is(.duo .good,.trio .low){border-top-color:var(--success)}
[data-ui="ids"] .prose :is(.duo .good,.trio .low) .tag{background:var(--success-tint);color:var(--success)}
[data-ui="ids"] .prose :is(.example,.role){background:var(--surface)}
/* «Важно» и «Правило» — безопасность пациента: янтарная полоса и ярлык (вариант: --callout neutral) */
[data-ui="ids"] .prose .callout{background:var(--surface);border-left-color:var(--attention)}
[data-ui="ids"] .prose .callout .pin{color:var(--attention)}
[data-ui="ids"] .prose :is(.example .ex-label,.role .role-label,.stats .n){color:var(--emphasis)}
[data-ui="ids"] .prose .rules li::before{background:var(--emphasis)}
[data-ui="ids"] .prose .howto li::before{background:var(--emphasis-tint);color:var(--emphasis)}
[data-ui="ids"] .prose .idents .num{background:var(--emphasis-tint);color:var(--emphasis)}
[data-ui="ids"] .prose .fin{border-top-color:var(--emphasis)}
[data-ui="ids"] .prose .doclink{border-color:transparent;border-left-color:var(--accent)}
[data-ui="ids"] .prose thead th{background:transparent;border-bottom:var(--bw-m) solid var(--border-strong);color:var(--ink-2)}
/* цитата спикера: крупнее, прямая, но с линией слева — голос «Из видео курса» не должен сливаться с «мы» клиники */
[data-ui="ids"] .prose blockquote{border-left:3px solid var(--border);padding:.1em 0 .1em 1em;font-style:normal;color:var(--ink)}
[data-ui="ids"] .prose blockquote p{font-size:1.125em;line-height:1.45}
/* блоки лонгридов, перенесённых из HRbox: aside.note, p.attachment, голые таблицы */
[data-ui="ids"] .prose aside.note{background:var(--surface);border-radius:var(--r-m);padding:.7em 1em;margin:1.25em 0 .8em}
[data-ui="ids"] .prose aside.note p{margin:0}
[data-ui="ids"] .prose p.attachment a{display:inline-flex;align-items:center;gap:.5em;font-weight:var(--fw-medium)}
/* значок документа с загнутым углом, цвет --icon (значки не синие, правило 1) */
[data-ui="ids"] .prose p.attachment a::before{content:"";flex:none;width:.8em;height:1em;background:var(--icon);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M2 0h8l6 6v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm7 1.5V7h5.5zM4 11h8v1.5H4zm0 3.5h8V16H4z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M2 0h8l6 6v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm7 1.5V7h5.5zM4 11h8v1.5H4zm0 3.5h8V16H4z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat}
[data-ui="ids"] .prose>table{display:block;overflow-x:auto;background:var(--surface);border-radius:var(--r-m);margin:.9em 0 1.1em}
[data-ui="ids"] .prose :is(th,td){border:0;border-bottom:1px solid var(--hairline)}   /* стиль явно: у лонгрида в learn.css задан только border-top, одна ширина обнуляла все линии */
[data-ui="ids"] .prose table{background:var(--surface);border-radius:var(--r-m)}
[data-ui="ids"] .prose tbody:first-child>tr:first-child>th{background:transparent;border-bottom:var(--bw-m) solid var(--border-strong);color:var(--ink-2)}   /* шапка без thead */
[data-ui="ids"] .prose tbody:first-child>tr:first-child:has(>td:first-child>:is(b,strong):only-child)>td{border-bottom:var(--bw-m) solid var(--border-strong);color:var(--ink-2)}   /* HRbox: шапка — первая строка из <td><b>…</b></td>; без :has остаётся жирный текст */
[data-ui="ids"] .prose a{text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.2em}

/* ---------- 6. Шкалы IDS там, где классика держит своё число (этап 5) ----------
   Селектор — как в app.css, learn.css, staffmap.css, но под :where([data-ui="ids"]): специфичность та же, что у исходного
   правила, поэтому частные правила (.dlg-actions .btn, .user-menu-plain .mine-btn, .datenav .icon-btn…) по-прежнему
   сильнее общих, а тема побеждает только местом — ids.css подключён последним. Порядок — как в исходных файлах.
   Всё остальное тема получает из токенов (app.css уже на них). Этап 7: эти значения встанут в app.css на место чисел. */
/* app.css: кнопки 38 → 40 (44 на телефоне), большая 46 → 48, кнопка-иконка и поля в таблицах 34 → 32, диалог 14 → 16 */
:where([data-ui="ids"]) .btn{height:var(--h-m)}
:where([data-ui="ids"]) .btn-lg{height:var(--h-l)}
:where([data-ui="ids"]) .icon-btn{width:var(--h-s);height:var(--h-s)}
:where([data-ui="ids"]) .appbar-in>.seg .seg-btn{height:var(--h-s)}
:where([data-ui="ids"]) .ds-day{border-radius:var(--r-m)}
:where([data-ui="ids"]) .dlg{border-radius:var(--r-l)}
:where([data-ui="ids"]) .dlg-title{font-size:var(--fs-xl)}
:where([data-ui="ids"]) .login-card{border-radius:var(--r-l)}
:where([data-ui="ids"]) .table input,:where([data-ui="ids"]) .table select{height:var(--h-s)}
:where([data-ui="ids"]) .table .btn{height:var(--h-s)}
@media (max-width:700px){
  :where([data-ui="ids"]) .seg-btn{height:var(--h-s)}
  /* шторка: низ без скругления — повтор правила app.css после общего .dlg выше */
  :where([data-ui="ids"]) .dlg,:where([data-ui="ids"]) .dlg-card{border-radius:var(--r-l) var(--r-l) 0 0}
}
:where([data-ui="ids"]) .menu-title{font-size:var(--fs-xl)}
/* learn.css: нижняя кнопка 46 → 48, вопрос теста 18 → 20, поиск и фильтр 44 → 40 (44 на телефоне), мини-кнопка 26 → 28 */
:where([data-ui="ids"]) .cta .btn{min-height:var(--h-l);height:auto}
:where([data-ui="ids"]) .cta-in .btn{line-height:1.25}
:where([data-ui="ids"]) .q-text{font-size:var(--fs-xl)}
:where([data-ui="ids"]) .search{height:var(--h-m)}
:where([data-ui="ids"]) .btn-mini{height:var(--h-xs)}
:where([data-ui="ids"]) .stats-f select{height:var(--h-m)}
:where([data-ui="ids"]) .stat b{font-size:var(--fs-3xl)}
:where([data-ui="ids"]) .ic{border-radius:var(--r-s)}
:where([data-ui="ids"]) .file-ic{border-radius:var(--r-s)}
@media (max-width:700px){:where([data-ui="ids"]) .lsect-h{font-size:var(--fs-xl)}}
:where([data-ui="ids"]) .pl-day input{height:var(--h-s)}
/* staffmap.css: заголовок 26 → 24 (20 на телефоне), кнопки инструментов на телефоне 36 → 44 */
:where([data-ui="ids"]) .sm-title{font-size:var(--fs-2xl)}
@media (max-width:700px){
  :where([data-ui="ids"]) .sm-title{font-size:var(--fs-xl)}
  :where([data-ui="ids"]) .sm-tools .btn{height:var(--h-m)}
  [data-ui="ids"] .sm-body .sm-tools .btn{min-height:var(--h-m)}   /* надпись в две строки (320, крупный текст) — кнопка растёт, 44 — нижний предел */
}

/* ---------- 5.14 Остальные пометки «IDS: …» из app.css и learn.css ---------- */
[data-ui="ids"] .picker-selected .chip button:hover{background:var(--fill-2)}

/* ---------- 5.15 Правки по проверке этапа 4 (раньше плана 6.1) ---------- */
/* счётчик «Нужно пройти» — статус, а не действие: нейтральная заливка; просрочка остаётся красной */
[data-ui="ids"] .menu-badge{background:var(--fill);color:var(--ink)}
[data-ui="ids"] .menu-badge.is-late{background:var(--danger);color:var(--on-color)}
/* карточка входа на фоне — без тени (решение 3) */
[data-ui="ids"] .login-card{box-shadow:var(--shadow-card)}

/* =====================================================================
   7. Этап 6: тема по разделам (план 5.2, этап 6; решения — data/design/DECISIONS.md)
   ===================================================================== */

/* 7.1 Оболочка: шапка, меню разделов, вход, ошибка, мост Telegram */
/* ссылки в тексте: акцент, подчёркивание 35 % цвета ссылки с отступом 0,2 em (как в .prose) */
[data-ui="ids"] :is(.tg-wait-text,.tg-msg,.login-card,.err-card,.notice,.lnote,.ldesc,.admin-note) a:not(.btn){color:var(--accent);text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.2em}
/* меню разделов: плашки без рамки и тени; наведение — тише белого, нажатие — заливка */
[data-ui="ids"] .menu-card{border-color:transparent}
[data-ui="ids"] .fs-card{border-color:transparent}   /* выбор размера текста на главной — такая же плашка, как раздел меню */
@media (hover:hover){
  [data-ui="ids"] :is(.menu-card,.menu-act,.menu-sec .menu-head):hover{background:var(--surface-2);border-color:transparent}
}
/* цели в шапке на телефоне — не меньше 44 px (чек-лист 5.4): зоны нажатия (::after), стрелки и дата — общие правила app.css
   для обеих тем; решение IDS — кнопка «назад» и по высоте 44 */
@media (max-width:700px){
  [data-ui="ids"] .appbar-back{min-height:44px}
}
/* пустое состояние: без эмодзи, текст --fs-s приглушённым (план 4.2) */
[data-ui="ids"] .lempty-ic{display:none}
[data-ui="ids"] :is(.empty,.lempty){font-size:var(--fs-s)}

/* 7.2 Обучение: кабинет, урок, материал, тест, результат, сотрудники, назначение, статистика, редакторы */
/* заголовок страницы на десктопе — --fs-2xl, на телефоне --fs-xl: не мельче заголовков внутри текста (h2 .prose) */
@media (min-width:701px){[data-ui="ids"] .ltitle-sm{font-size:var(--fs-2xl)}}
/* пройденное в списке: значок цветом значков, без прозрачности (текст без opacity — правило 5) */
[data-ui="ids"] .crs-row.is-done .mt{opacity:1;color:var(--icon)}
/* шапка таблицы: под ней линия 2 px --border-strong (обучение и админка) */
[data-ui="ids"] :is(.table,.tbl-stats) thead th{border-bottom:var(--bw-m) solid var(--border-strong)}
/* «Ознакомлен»: засчитанный документ — белая плашка с зелёной полосой, как сообщение об успехе */
[data-ui="ids"] .ack-card.is-done{background:var(--surface);border-left-color:var(--success)}

/* 7.3 Тексты: колонка чтения 40 em, курсив контента (базы знаний, HRbox), списки и отступы в em */
[data-ui="ids"] .prose{max-width:var(--w-read)}
[data-ui="ids"] .is-wide .prose{max-width:none}   /* широкие таблицы привилегий */
/* курсив в тексте — смысл (термины, выделения в базе знаний), а у Visuelt нет курсивного файла: наклон разрешаем */
[data-ui="ids"] .prose :is(em,i,cite){font-synthesis:style}
[data-ui="ids"] .prose :is(ul,ol):not(.rules,.bracelets,.stats,.howto){margin:0 0 1em}
[data-ui="ids"] .prose :is(ul,ol):not(.rules,.bracelets,.stats,.howto)>li+li{margin-top:.4em}
[data-ui="ids"] .prose figure{margin:1.25em 0 1.5em}
[data-ui="ids"] .prose .idents .num{width:2em;height:2em;font-size:1.125em}
[data-ui="ids"] .prose .howto li{padding-left:2.75em}
[data-ui="ids"] .prose .howto li::before{width:2em;height:2em;font-size:.9375em}
/* текст документа (извлечённый из файла): кегль текста для чтения, основной цвет */
[data-ui="ids"] .prose pre{font:inherit;line-height:var(--lh-prose);color:var(--ink)}
/* привилегии: «самостоятельно» — это «допущен», зелёный, не синий (синий — только действие) */
[data-ui="ids"] .kb-body .priv thead .lv-self::before{background:var(--success)}
[data-ui="ids"] .kb-body .priv-cards td.lv-self::before{color:var(--success)}
[data-ui="ids"] .kb-body .priv thead th{background:var(--surface);box-shadow:0 var(--bw-m) 0 var(--border-strong)}
@media (min-width:701px){ [data-ui="ids"] .kb-body table.priv{display:table;overflow:visible} }   /* .prose>table здесь — блок с прокруткой: липкий th прилипал внутри таблицы и закрывал первую строку (ревью V-P1) */

/* 7.4 Календарь: неделя — клетки тише белого, выбранная клетка — контур акцента, «сегодня» — кольцо (не заливка) */
[data-ui="ids"] .wk-cell{background:var(--surface-2)}
@media (hover:hover){[data-ui="ids"] .wk-cell:hover{border-color:var(--border-strong)}}
[data-ui="ids"] .wk-cell.is-sel{outline-color:var(--accent)}
[data-ui="ids"] .wk-day.is-today .wk-num{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
[data-ui="ids"] .wk-day.is-today.is-weekend .wk-num{color:var(--weekend)}
[data-ui="ids"] .wk-now{border-top-color:var(--now)}

/* 7.5 Админка: сообщение об ошибке — белая плашка с красной полосой (как .form-error) */
[data-ui="ids"] .flash.is-err{background:var(--surface);color:var(--ink);box-shadow:inset 4px 0 0 var(--danger)}
/* материал «Текст»: воздух между строкой «N мин чтения · прочитано» и первым заголовком текста */
[data-ui="ids"] .lnote+.prose{margin-top:var(--space-l)}
/* редакторы: форма не прилипает к заголовку страницы */
[data-ui="ids"] .ltitle+:is(form,.stack){margin-top:var(--space-m)}