/* ═══════════════════════════════════════════════════════════════════════════════
ПАЛИТРА КАБИНЕТА — единственная копия канона кремовой темы.
Раньше этот :root лежал КОПИЕЙ на 52 страницах (676 объявлений), потом переехал
в JS-слой (shell.js). Здесь — второй шаг того же переезда: палитра перестала
зависеть от JS. Лист подключается ссылкой в каждой страницы кабинета
(), то есть цвета приезжают ДО первой
отрисовки и остаются на месте, даже если shell.js не доехал.
:where(:root) = специфичность 0 → любой свой :root страницы перебивает канон
целиком или по одному токену. Так тёмные/особые темы (Гермес, витрина агента)
остаются собой, а «фича не ломает текущие сценарии» соблюдается буквально.
Порядок подключения при этом не важен: страничный :root (0,1,0) сильнее всегда.
Правка цвета кабинета — здесь и только здесь. Инвариант держат два гарда:
test/cabinet-palette-single-source.test.ts (единственность канона) и
test/theme-dark.test.ts (полнота тёмной темы и порядок блоков ниже).
═══════════════════════════════════════════════════════════════════════════════ */
:where(:root) {
--bg: #F4EFE6;
--panel: #FFFFFF;
--panelHi: #F7F1E7;
--line: rgba(32,28,23,0.09);
--lineHi: rgba(32,28,23,0.18);
--txt: #201C17;
--dim: #6B6258;
--dim2: #8E877E;
--violet: #9A6250;
--green: #3D7A3E;
--amber: #B8863C;
--red: #B24A32;
--cyan: #4C7A6B;
--blue: #5E7E86;
}
/* ── ТЁМНАЯ ТЕМА (хотелка #728). Второй набор ЗНАЧЕНИЙ тех же токенов — ни одного нового имени,
поэтому экрану, который красится палитрой, переключение не стоит ни строки.
`:where(html[data-theme='dark'])` — специфичность НОЛЬ, ровно как у канона выше. Это не
придирка: обычный `html[data-theme=dark]` весит (0,1,1) и перебил бы СВОИ :root у прототипов
Гермеса и витрин — девять экранов с собственной тёмной палитрой стали бы «нашей» тёмной.
При нулевой специфичности спор решает порядок: этот блок ниже канона → выигрывает у него,
когда атрибут стоит; страничный :root (0,1,0) сильнее обоих и остаётся собой. Правило 2.5
держится буквально: без атрибута не меняется ни один пиксель ни на одной странице.
Тон намеренно тёплый, а не сине-графитовый: кабинет кремовый и терракотовый, и «ночь» у него
должна быть той же комнатой при другом свете, а не чужим продуктом.
Акценты подняты по светлоте, но НЕ до максимума, и вот почему. У каждого акцента здесь две
работы сразу: он и текст на тёмном фоне, и заливка сплошной кнопки с белой подписью. Эти две
тянут в разные стороны — светлее лучше первой и хуже второй. Первый набор был выбран только
под чтение (терракота #C98670, 6,3:1 на фоне) — и белая подпись на кнопке «Нанять» получила
2,95:1, то есть ниже порога для элемента управления. Значения ниже держат ОБА конца:
--violet #BE7357 → 5,1:1 текстом на фоне, 3,6:1 белым по нему
--green #4E9450 → 5,0:1 / 3,7:1 --red #D3654A → 5,0:1 / 3,7:1
Текст: --txt ≈ 15:1, --dim ≈ 8:1, --dim2 ≈ 5:1 (в кремовой теме --dim2 даёт 3,6:1 — тёмная
тут строже светлой, и это не повод ослаблять её до паритета).
Атрибут ставит инлайн-скрипт в (apps/control/src/theme.ts) — до первой отрисовки,
иначе на каждом переходе была бы кремовая вспышка. Гард: test/theme-dark.test.ts (порядок блоков, полнота, копии цвета). */
:where(html[data-theme='dark']) {
--bg: #17130F;
--panel: #201B16;
--panelHi: #2A241E;
--line: rgba(244,239,230,0.10);
--lineHi: rgba(244,239,230,0.20);
--txt: #F1EAE0;
--dim: #B4A99C;
--dim2: #8C8479;
--violet: #BE7357;
--green: #4E9450;
--amber: #BE8C3F;
--red: #D3654A;
--cyan: #62A48D;
--blue: #7FA3AB;
}
/* ── Производные поверхности. Раньше каждый экран подбирал свой хекс под наведение
и подсветку («#F1EADD», «#EAF2E4», «#2F5F30») — и на тёмной теме они врали,
потому что живут мимо палитры. Здесь они СЧИТАЮТСЯ из канона: экран со своим
:root получает свои же оттенки, ничего не подкручивая.
Считаются от токенов страницы (var), а не от канонных литералов, — иначе
тёмная тема снова получила бы кремовые подсветки. */
:where(:root) {
/* Значения кремовой темы «как есть» — на случай браузера без color-mix (Chrome <111,
Safari <16.2). Без них там пропал бы сам фон наведения: невычислимый var()
обнуляет свойство, и белая подпись на сплошной кнопке легла бы на пустоту. */
--uk-hover: #EFE5DB;
--uk-tint-accent: #F4EEEC;
--uk-tint-ok: #E9F0E9;
--uk-ok-deep: #326433;
--uk-paper: #FBF8F4;
/* Полупрозрачные поверхности каркаса. Раньше они лежали литералами прямо в shell.js
(rgba(154,98,80,.12) — подсветка активного пункта меню, 92 вхождения по кабинету), и на тёмной
теме давали грязное пятно: терракота #9A6250 сама тёмная, поверх тёмной панели она её топит,
а не подсвечивает. Поэтому в тёмной теме это ДРУГИЕ значения, а не та же плёнка. */
--uk-accent-soft: rgba(154,98,80,.12); /* фон выбранного пункта/вкладки */
--uk-accent-faint: rgba(154,98,80,.08); /* фон наведения на акцентном элементе */
--uk-accent-line: rgba(154,98,80,.40); /* рамка выбранного */
--uk-scrim: rgba(32,28,23,.45); /* затемнение под модалкой */
--uk-shade: rgba(32,28,23,.07); /* нейтральная подложка (дорожка прогресса, плашка) */
--uk-ok-line: rgba(61,122,62,.28); /* рамка «хорошо/сделано» (фон к ней — --uk-tint-ok) */
--uk-line-solid: #E5DCCD; /* СПЛОШНАЯ бумажная рамка (там, где прозрачная не годится) */
/* Тушь НА ЦВЕТНОЙ ПЛАШКЕ. Отдельные токены нужны потому, что сам акцент тут не годится: на
кремовой янтарной плашке #B8863C даёт 2,6:1 и текст плывёт, поэтому экраны и подбирали
тёмный оттенок хекcом. Кремовые значения ниже — ровно те хексы, что стояли на экранах,
так что светлая тема не сдвигается ни на тон; в тёмной они становятся светлыми. */
--uk-on-amber: #6F521D;
--uk-on-ok: #2F5F45;
--uk-on-cyan: #2F4F45;
}
/* Те же пять поверхностей, посчитанные от тёмного канона, — тоже НА СЛУЧАЙ браузера без color-mix.
Обязаны стоять ДО блока @supports: там значения считаются через var() и потому верны для любой
темы сами по себе; окажись эти литералы ниже — они (при равной нулевой специфичности) победили
бы вычисленные, и современный браузер получил бы жёстко зашитые оттенки вместо живых. */
:where(html[data-theme='dark']) {
--uk-hover: #362A23;
--uk-tint-accent: #30241D;
--uk-tint-ok: #25281C;
--uk-ok-deep: #407942;
--uk-paper: #1C1713;
/* Подсветки на тёмном обязаны СВЕТЛЕТЬ, а не темнеть: плёнка тёмного акцента поверх тёмной
панели неотличима от тени. Берём акцент тёмной темы и кладём чуть плотнее кремового. */
--uk-accent-soft: rgba(190,115,87,.18);
--uk-accent-faint: rgba(190,115,87,.11);
--uk-accent-line: rgba(190,115,87,.45);
--uk-scrim: rgba(0,0,0,.62);
--uk-shade: rgba(244,239,230,.09);
--uk-ok-line: rgba(78,148,80,.38);
--uk-line-solid: #3A322B;
--uk-on-amber: #E7C489;
--uk-on-ok: #A9D9B4;
--uk-on-cyan: #A6D4C4;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
:where(:root) {
/* Наведение на нейтральной строке/кнопке: та же бумага, чуть теплее и плотнее. */
--uk-hover: color-mix(in srgb, var(--violet, #9A6250) 8%, var(--panelHi, #F7F1E7));
/* Подсветка выбранного/изменённого — акцентом, очень слабо. */
--uk-tint-accent: color-mix(in srgb, var(--violet, #9A6250) 10%, var(--panel, #FFFFFF));
/* Подсветка «хорошо/сделано» — зелёным, так же слабо. */
--uk-tint-ok: color-mix(in srgb, var(--green, #3D7A3E) 11%, var(--panel, #FFFFFF));
/* Наведение на сплошной зелёной кнопке — тот же зелёный, глубже. */
--uk-ok-deep: color-mix(in srgb, var(--green, #3D7A3E) 82%, #000);
/* Бумага «на полтона от белого»: карточки внутри панели, боковой чат. */
--uk-paper: color-mix(in srgb, var(--panel, #FFFFFF) 55%, var(--bg, #F4EFE6));
}
}
/* ССЫЛКА БЕЗ КЛАССА — ЦВЕТОМ ПАЛИТРЫ, А НЕ БРАУЗЕРНЫМ СИНИМ.
Правила для в листе не было вовсе, и каждая ссылка, которой не поставили класс или инлайн-цвет,
рисовалась дефолтным #0000EE. На кремовой бумаге это единственное пятно чужого цвета на экране —
поймано живым кадром прода 15.08.2026 в карточке кандидата Тетради («Поправить инструкцию скрининга →»,
«Прежний экран: …»), но правило это не про Тетрадь: бесклассовые ссылки есть на любом экране кабинета.
Специфичность НУЛЕВАЯ (`:where`) — своё правило страницы, класс и инлайн-стиль бьют канон, как и у
токенов выше; то есть ни один экран, где ссылку уже покрасили, не сдвигается ни на тон. */
:where(a) { color: var(--violet); }
:where(a:hover), :where(a:focus-visible) { color: var(--txt); }
/* ── СПИСОК ДЕЙСТВИЙ («Действие ▾») — КАНОН ПО ОПТ-ИНУ, КЛАСС `uk-acts` ──────────────────────────
Идиома одна: кнопка со стрелкой вместо россыпи кнопок в ряд, пояснение к пункту — текстом ПОД
названием, а не hover-тултипом (на планшете тултипа нет, а «В резерв» и «Отказать» человек обязан
различать ДО нажатия).
ПОЧЕМУ ПО ОПТ-ИНУ, А НЕ НА ГОЛОМ `.menu-wrap`. Этот лист грузят 64 страницы кабинета, и своё
описание того же меню есть ещё у `documents.html` и `circles.html`. Голое правило доставало бы до
них через голову их собственных: `.menu-wrap .menu .btn:hover:not(:disabled)` — специфичность 0,5,0
против 0,4,0 у документов, и порядок документа тут не спасает, более сильный селектор выигрывает
из листа, который идёт раньше. Подсветка пункта под курсором у документов сменилась бы с
`--uk-hover` на `--panelHi` и на светлой теме почти пропала бы; правило узкого экрана растащило бы
их полосу инструментов по строкам. То есть общий носитель, заведённый ПРОТИВ разъезда копий, сам
поехал бы в чужие экраны — та же болезнь с другой стороны. Класс `uk-acts` делает канон явным
выбором страницы: кто дописал его к `menu-wrap`, тот получает канон целиком.
ЧТО СВЕДЕНО. До 20.08.2026 копий было ДВЕ — своя в `recruiter.html` и своя в
`recruiter-board.html`, — и они разъехались молча. Разъезд стоил не оформления: вкладка откликов
поймала на узком экране, что меню при `left:0` уезжает за правый край, и починила это У СЕБЯ
(`max-width` от ширины окна, `max-height` с прокруткой, правило ≤760px). Тетрадь не получила ни
одной из трёх, хотя список у неё самый длинный в кабинете: девять действий плюс группа «Отметить
этап», где этапов семнадцать по канону, — потолка высоты нет вовсе, и хвост списка уходил за
нижний край без способа до него добраться. Обратно: `.mdesc` жил только у Тетради.
Здесь НАБОР ОБОИХ, а не пересечение. Рабочие пределы и правило узкого экрана — из копии вкладки,
`.mdesc` и `.mnote` — из копии Тетради. Тень переехала с хекса `rgba(32,28,23,.16)` на
`--uk-scrim`: это было единственное место обоих экранов, где тень шла мимо палитры. Значения,
расходившиеся без причины, сведены к одному, и вот они поимённо: радиус 11→12 и отступ 5→6 (у
Тетради), `min-width` 250→280 и `max-width` 330→340 (у вкладки откликов — список там становится
шире прежнего на 30px, ниже 760px это правило и так снимается).
`.mgrp`, `.mnote` и `.mdesc` пишутся ЧЕРЕЗ `.menu-wrap`, хотя копия Тетради писала первые два
голым `.menu .mgrp`: в разметке обеих страниц все их употребления лежат внутри `.menu-wrap`,
случая «без обёртки» нет ни одного, а голый селектор доставал бы до чужих меню.
ЧТО ЭТИМ ПРИЕЗЖАЕТ В ТЕТРАДЬ ВПЕРВЫЕ — правило ≤760px. Своих границ у Тетради две, 560 и 1200, а
этой полосы не было: на 561–760px кнопка списка встанет отдельной строкой во всю ширину полосы,
чего раньше не было. Беру это сознательно, а не «оно само приехало с каноном»: ниже 560px Тетрадь
пачечную работу снимает целиком, выше 1200 места хватает, и 561–760 — единственная полоса, где её
список ничем не защищён от выезда за правый край. Остальные пределы у Тетради выигрывают её же
правила: `max-height:min(62vh,460px)` карточки бьёт каноновские 68vh/420px порядком документа. */
.menu-wrap:where(.uk-acts) { position:relative; display:inline-flex; }
.menu-wrap:where(.uk-acts) .menu { position:absolute; top:calc(100% + 5px); left:0; z-index:60;
min-width:280px; max-width:min(340px, calc(100vw - 32px)); max-height:min(68vh, 420px); overflow:auto;
display:none; flex-direction:column; gap:2px;
background:var(--panel); border:1px solid var(--lineHi); border-radius:12px; padding:6px;
box-shadow:0 10px 28px var(--uk-scrim); }
.menu-wrap:where(.uk-acts) .menu.open { display:flex; }
.menu-wrap:where(.uk-acts) .menu .btn { border:0; border-radius:7px; width:100%; text-align:left; padding:8px 11px;
background:none; color:var(--txt); font-weight:600; font-size:13px; }
/* Подсветка под курсором — `:not(:disabled)`, а НЕ `:enabled`, и разница здесь не стилистическая.
`:enabled` — псевдокласс форменных элементов, и ссылка (``) под него не подходит ни
при каких условиях: пункт-ссылка в списке действий не подсвечивался бы вовсе, читаясь погашенным.
Первым таким пунктом стал «резюме на hh.ru →» на карточке Тетради (п.12 эпика карточки кандидата,
26.08.2026), но правило не про него: список действий — общий канон, и ссылка в нём законный пункт.
`:not(:disabled)` держит ту же половину договора (погашённая кнопка не светится: `` под
`:disabled` не подходит тоже, значит светится) и ту же специфичность 0,5,0, на которой стоит довод
об опт-ине выше, — то есть чужие меню по-прежнему не задеты. */
.menu-wrap:where(.uk-acts) .menu .btn:hover:not(:disabled) { background:var(--panelHi); }
/* Пояснение к пункту — часть пункта, а не подпись рядом: оно объясняет ЭТОТ вход. */
.menu-wrap:where(.uk-acts) .menu .mdesc { display:block; font-size:11px; font-weight:400; color:var(--dim2); margin-top:2px; white-space:normal; }
/* Заголовок группы внутри списка («Отметить этап») — не действие, и кликать его нечего. */
.menu-wrap:where(.uk-acts) .menu .mgrp { padding:8px 10px 4px; margin-top:4px; border-top:1px solid var(--line);
font-size:11.5px; font-weight:700; color:var(--dim2); text-transform:uppercase; letter-spacing:.03em; }
.menu-wrap:where(.uk-acts) .menu .mgrp:first-child { margin-top:0; border-top:0; padding-top:2px; }
/* Пояснение ко ВСЕМУ списку — тоже не пункт. */
.menu-wrap:where(.uk-acts) .menu .mnote { padding:8px 11px 2px; margin:4px 0 0; border-top:1px solid var(--line);
font-size:11px; color:var(--dim2); }
/* Узкий экран: список кладём во всю ширину карточки. Прибитый к `left:0`, он уезжает за правый край,
как только кнопки строки влезают в одну линию — в английском кабинете это начинается уже с ~394px,
то есть на обычном телефоне. Проверка «на 390 работает» этого не задевала: по-русски кнопка там
переносится на вторую строку. */
@media(max-width:760px){
.menu-wrap:where(.uk-acts) { flex-basis:100%; }
.menu-wrap:where(.uk-acts) .menu { left:0; right:0; min-width:0; max-width:none; }
}
/* ── Разметка встречи: формы «папка» и «регулярка/разовая» (`SlazhShell.mshelf`) ──────────────────
Стили ЗДЕСЬ, а не в