/* ══════════════════════════════════════════════════════════════════════ color.css · СЛОЙ ЦВЕТА, ГЛУБИНЫ, РАДИУСА (ЭТАП 4 «Докрутка каталога») DESIGN_SYSTEM §3 · §6 · §15 · §36 · §37. Подключается ПОСЛЕ lumen.css, figure.css и type.css. Зачем отдельный файл: см. шапку type.css — вендоренное ядро не правится, роли радиуса, три рецепта тени, матрица ролей цвета и знак «наш» живут здесь как слой поверх вендора. Что было до 07.09.2026 на странице каталога (замер в браузере, 1440, светлая тема, все 199 примеров отрисованы): 19 значений радиуса, включая два литерала пилюли (999 и 9999); 25 рецептов box-shadow, из них 8 разных геометрий падающей тени; статус полным тоном по площади на 4.1 · 4.3 · 4.6; 16 вхождений полосы 3 px как знака «наш» (нарушение §37, правило О1); 6 размеров иконки и 2 толщины штриха; 4 тёмных острова в светлой теме вне рамки носителя. Один и тот же смысл выглядел по-разному, и опереться на скругление, тень или цвет читатель не мог: они ничего не значили. ПОЧЕМУ ВЕЗДЕ ПРЕФИКС `:root`. Скин донора §27 (`.lm-cv …`) и модули контуров (alfa/edino/domus/akvilon) задают геометрию селекторами из двух классов. Слой, стоящий позже, но с одним классом, проигрывает им по весу. `:root` добавляет ровно один разряд специфичности — этого хватает, чтобы слой выигрывал, и не хватает, чтобы он перебивал точечные правки контура, сделанные с явным намерением (три класса и больше). Разделы: 1 радиус · 2 глубина · 3 роли цвета · 4 тихая площадь статуса · 5 потолок категорий · 6 знак «наш» · 7 иконки · 8 носитель со своей темой · 9 язык выбора · 10 один контур на элемент. ══════════════════════════════════════════════════════════════════════ */ /* ══ 1. РАДИУС: ЧЕТЫРЕ РОЛИ + ПИЛЮЛЯ + КРУГ ═══════════════════════════════ Скругление — не украшение, а размер объекта: чем крупнее поверхность, тем больше радиус, иначе угол выглядит рубленым. Ролей ровно четыре, и роль выбирается не на глаз, а по тому, ЧЕМ элемент является. микро 4 px — свотч, тег, инлайн-код, мелкий бейдж, клавиша контроль 8 px — кнопка, поле, вкладка, сегмент, чип, строка-плитка карточка 12 px — карточка, панель, поповер, состояние, пузырь сцена 20 px — кадр, показ, модальный слой, рамка устройства Вне лестницы: pill — капсула (пилюля, дельта, трек): половина высоты; circle — круг (точка, аватар, узел); геометрия данных — свой токен --sp-fig-r (figure.css §46а): столбик, клетка, засечка НЕ принимают радиус контейнера, иначе фигура начинает выглядеть как набор кнопок. */ :root{ --r-micro:4px; --r-control:8px; --r-card:12px; --r-scene:20px; --r-pill:999px; --r-circle:50%; /* Легаси-имена сводятся к ролям: старый код работает, новых значений на экране не появляется. */ --r-xs:var(--r-micro); --r-sm:var(--r-control); --r-btn:var(--r-control); --r-md:var(--r-card); --r-lg:var(--r-card); --r-xl:var(--r-scene); --r-ambient:var(--r-scene); --lm-card-r:var(--r-card); --cell-radius:var(--r-micro); --lm-heat6-r:var(--sp-fig-r,3px); } /* Скин донора §27 переопределял --r-card и --lm-card-r литералом 16 px. */ .lm-cv{--r-card:12px;--lm-card-r:var(--r-card)} /* 1.1 сцена — самое крупное, что бывает на экране */ :root .lm-scene,:root .lm-ambient,:root .lm-show,:root .lm-pipe, :root .lm-agent,:root .lm-login,:root .lm-ins-lt,:root .lm-ins-stat{ border-radius:var(--r-scene); } /* 1.2 карточка */ :root .lm-card,:root .lm-kpi,:root .lm-state,:root .lm-float, :root .lm-cv .lm-card,:root .lm-cv .lm-kpi,:root .lm-cv .lm-state, :root .lm-bench .it,:root .lm-strip,:root .lm-pipe .ans, :root .lm-k6-conf,:root .lm-kp .sum,:root .lm-k6-drv .r, :root .lm-k6-pass .it,:root .lm-k6-rice .it,:root .lm-k6-out .it, :root .lm-k6-ladder .b{border-radius:var(--r-card)} /* пузырь реплики: три угла карточки, четвёртый — «хвост» к собеседнику */ :root .lm-rag .q,:root .lm-cv .lm-rag .q{border-radius:var(--r-card) var(--r-card) var(--r-micro)} :root .lm-rag .a,:root .lm-cv .lm-rag .a{border-radius:var(--r-card) var(--r-card) var(--r-card) var(--r-micro)} /* 1.3 контроль — один радиус у сайдбара, шапки и тела страницы: вкладка слева и кнопка справа не должны быть скруглены по-разному. */ :root .lm-btn,:root .lm-ibtn,:root .lm-input,:root .lm-seg,:root .lm-a6-seg, :root .lm-cnav a.c,:root .lm-state .ic,:root .lm-gate .ic, :root .lm-brand .mark,:root .lm-inbox .lm-item .ic,:root .lm-item .ic, :root .lm-cv .lm-btn,:root .lm-cv .lm-input,:root .lm-cv .lm-seg, :root .lm-cv .lm-banner,:root .lm-cv .lm-evid,:root .lm-cv .lm-span, :root .lm-cv .lm-flow .n,:root .lm-cv .lm-health .it,:root .lm-cv .lm-rag .src, :root .lm-cv .lm-card-b > .lm-card,:root .lm-cv .lm-card-b .lm-kpis > .lm-kpi, :root .lm-review .err,:root .lm-cv .lm-review .err,:root .lm-patterns blockquote, :root .lm-a6-track .stg .box,:root .lm-a6-stage .pane.add, :root .lm-a6-appr .it,:root .lm-a6-appr .w,:root .lm-a6-meet .dt, :root .lm-health .it,:root .lm-trace .lm-span,:root .lm-portrait .it, :root .lm-insights .row,:root .pane.add{border-radius:var(--r-control)} /* обёртки каталога (шапка, поиск, полка, врезка, лист описания) */ :root .cat-logo .m,:root .cat-tabs a,:root .cat-search,:root .cat-nav a, :root .ex .meta{border-radius:var(--r-control)} :root .cat-rule{border-radius:var(--r-card)} /* 1.4 микро */ :root .lm-badge-period,:root .lm-kbd,:root .lm-check, :root .lm-seg button,:root .lm-cv .lm-seg button, :root .lm-cv .lm-seg.lm-sliding > .pill,:root .lm-seg span.pill, :root .lm-cnav .sw .c,:root .sp-crumbs a,:root .lm-d6-nt-tg, :root .lm-d6-lg .thr.none,:root .lm-pipe .stack,:root .lm-ins-lt .bar, :root .lm-e6-shiftgrid td.c, :root .lm-cv .lm-kpi .lm-kpi-i,:root .lm-cv .lm-kpi > .i{border-radius:var(--r-micro)} :root .ex .api{border-radius:var(--r-micro)} /* хром китов (шапка раздела, логотип, врезка правила, вызов формы кодом): один и тот же скелет повторяется на всех страницах КИТ, поэтому роль назначается здесь, а не двадцатью копиями в каждом файле страницы */ :root .ex .lm-card-h .api,:root .sec > header code,:root .pane .api, :root .b-card .lm-card-f code,:root .lm-skel{border-radius:var(--r-micro)} :root .sec > header .rule,:root .rule{border-radius:var(--r-card)} :root .v5-logo .m,:root .b-top nav a,:root .ask{border-radius:var(--r-control)} /* 1.5 капсула — один токен вместо двух литералов (999 и 9999) */ :root .lm-pill,:root .lm-tag,:root .lm-delta,:root .sp-mark,:root .lm-evid-t, :root .lm-usage .meter,:root .lm-usage .meter i, :root .lm-aging .bar,:root .lm-aging .bar i,:root .lm-bench .b i, :root .lm-cv .lm-pill,:root .lm-cv .lm-tag,:root .lm-cv .lm-bar,:root .lm-cv .lm-bar i, :root .lm-a6-foot-p,:root .lm-a6-foot-p i,:root .lm-a6-tasks .lb, :root .lm-ins-cta,:root .lm-pipe .ft .lm-btn.primary, :root .lm-d6-bar,:root .lm-d6-bar i, :root .lm-d6-so-rows .tr,:root .lm-d6-so-rows i, :root .lm-d6-mos-rows .tr,:root .lm-d6-mos-rows i, :root .lm-d6-l4l-rows .lm-d6-bar{border-radius:var(--r-pill)} /* 1.6 круг — точка остаётся точкой при любом размере */ :root .lm-particles i,:root .lm-legend .it .sw.dot{border-radius:var(--r-circle)} /* 1.7 геометрия данных — один токен рисунка, а не пять близких значений. Раньше клетка календаря жила на 2 px, полоса состава на 5 px, свотч легенды на 1 px: три разных «почти квадрата» в одной фигуре. */ :root .lm-bullet,:root .lm-bullet .fact,:root .lm-bullet .plan,:root .lm-bullet .band, :root .lm-stage .bar,:root .lm-stage .bar i, :root .lm-legend .it .sw,:root .lm-cal i,:root .lm-cal-scale i, :root .lm-acc-tbl td.c i,:root .lm-access .sw, :root .lm-insights .row .bar,:root .lm-portrait .it .bar, :root .lm-up .bar i,:root .lm-up .sw,:root .lm-flow .c i, :root .lm-rag .src .sc,:root .lm-rag .src .sc i,:root .lm-cmp .bar, :root .lm-heat6 .cell,:root .lm-heat6-lg .sc i,:root .lm-heat6-lg .it i, :root .lm-heat6-lg .thr i, :root .lm-pipe .rail,:root .lm-pipe .bits i,:root .lm-pipe .rr .bar, :root .lm-pipe .rr .bar i, :root .lm-e6-zlegend i,:root .lm-e6-zlegend i.ln,:root .lm-e6-zlegend i.sg, :root .lm-e6-ladder .bar,:root .lm-e6-ladder .bar i, :root .lm-e6-shares .bar,:root .lm-e6-shares .bar i, :root .lm-e6-zbar,:root .lm-e6-wbars .refl,:root .lm-e6-cal .c .out, :root .lm-e6-daywin .track,:root .lm-e6-daywin .win, :root .lm-d6-lg .it i,:root .lm-d6-lg .thr i,:root .lm-d6-so .tr .mark, :root .lm-k6-lg .sw,:root .lm-k6-lg .sw.cap,:root .lm-k6-unit, :root .lm-k6-scale .track,:root .lm-k6-scale .track > i,:root .lm-k6-scale .pin b, :root .lm-k6-dbar,:root .lm-k6-dbar i, :root .lm-table i,:root .lm-unitbar{border-radius:var(--sp-fig-r,3px)} /* столбик, стоящий на оси: скруглена только вершина — низ упирается в ноль */ :root .lm-kpi .lm-kpi-spark.bars i, :root .lm-e6-wbars .tr i, :root .lm-e6-season .tr i{border-radius:var(--sp-fig-r,3px) var(--sp-fig-r,3px) 0 0} :root .lm-k6-dbar i.pos{border-radius:0 var(--sp-fig-r,3px) var(--sp-fig-r,3px) 0} :root .lm-k6-dbar i.neg{border-radius:var(--sp-fig-r,3px) 0 0 var(--sp-fig-r,3px)} :root .lm-e6-topics .m i{border-radius:var(--sp-fig-r,3px) 0 0 var(--sp-fig-r,3px)} :root .lm-e6-topics .p i{border-radius:0 var(--sp-fig-r,3px) var(--sp-fig-r,3px) 0} /* трек шкалы с зонами: капсула снаружи, стык зон внутри — прямой */ :root .lm-band .track i{border-radius:0} :root .lm-band .track i:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)} :root .lm-band .track i:last-of-type{border-radius:0 var(--r-pill) var(--r-pill) 0} /* 1.8 украшения сцены (§9б): узел, орбита, призрак, рамка устройства. Они рисуются реже прочего и потому дольше всех жили на своих числах — 9 · 14 · 16 · 30 px. Роль у них та же, что у остальных: узел и центр — карточка, адресная строка и значок — контроль, частица — рисунок, корпус устройства — сцена. */ :root .lm-scene .node.dark,:root .lm-hubscene .center{border-radius:var(--r-card)} :root .lm-float .ic,:root .lm-browser .url{border-radius:var(--r-control)} :root .lm-phone{border-radius:var(--r-scene)} :root .lm-ghost i,:root .lm-orbscene .eq i{border-radius:var(--sp-fig-r,3px)} /* примыкающие элементы: скруглён только внешний край */ :root .lm-evid,:root .lm-span,:root .lm-proj .one,:root .lm-cv .lm-proj .one{ border-radius:0 var(--r-control) var(--r-control) 0; } /* ══ 2. ГЛУБИНА: ТРИ РОЛИ ═════════════════════════════════════════════════ Тень отвечает на один вопрос: элемент лежит в потоке или поднят над ним. Третьего смысла у неё нет, поэтому и рецептов три. в потоке — тени нет; отделяет поверхность и волосяной контур; над потоком — попап, дровер, плавающая карточка, подсказка; модальный — один слой, перекрывающий всё; глубже него ничего нет. Тень «ради дороговизны» (мягкое свечение под кнопкой, блик внутрь, тень у элемента, который никуда не поднимается) запрещена: она врёт про слой и на печати превращается в грязь. Кольцо `inset 0 0 0 1px` тенью не считается — это контур (§10), у него своя роль и свой запрет на удвоение. */ :root{ --lm-sh-flow:none; --lm-sh-float:0 8px 24px -12px color-mix(in srgb,var(--ink) 22%,transparent); --lm-sh-modal:0 24px 60px -30px color-mix(in srgb,var(--ink) 40%,transparent); /* Легаси-имена tokens.css сводятся к трём ролям. */ --shadow:var(--lm-sh-flow); --shadow-md:var(--lm-sh-float); --shadow-lg:var(--lm-sh-modal); } html[data-theme="dark"]{ /* В тёмной теме тень почти не видна: глубину держит ступень поверхности. Рецепт остаётся тот же, чтобы иерархия совпала на паре снимков (§36), но замешивается от фона, а не от чернил — иначе тёмное на тёмном. */ --lm-sh-float:0 8px 24px -12px color-mix(in srgb,var(--bg) 80%,transparent); --lm-sh-modal:0 24px 60px -30px color-mix(in srgb,var(--bg) 90%,transparent); } /* 2.1 в потоке: кнопка, пилюля, плитка, строка — контур и поверхность */ :root .lm-btn,:root .lm-ibtn,:root .lm-seg button,:root .lm-seg button.on, :root .lm-cv .lm-btn,:root .lm-cv .lm-btn.primary,:root .lm-cv .lm-seg button.on, :root .lm-cv .lm-seg.lm-sliding > .pill, :root .lm-pipe .body{box-shadow:var(--lm-sh-flow)} /* 2.2 над потоком: единый рецепт вместо шести близких */ :root .lm-float,:root .lm-bulk,:root .lm-pop,:root .lm-drawer,:root .lm-tip, :root .lm-cv .lm-float{box-shadow:var(--lm-shadow-border),var(--lm-sh-float)} /* Объекты сцены (§9б) тоже подчиняются трём ролям: узел, спутник и окно браузера лежат НАД полем сцены, значит берут «над потоком», а не свои четыре рецепта, отличавшиеся на пару пикселей размытия. */ :root .lm-scene .node,:root .lm-hubscene .sat,:root .lm-browser{ box-shadow:var(--lm-sh-float); } /* Бегущая точка конвейера: кольцо вокруг марки — зазор до дорожки, а не выделение; берёт тот же токен, что и остальные марки на фигуре (§10). */ :root .lm-pipe .rail .pos{ box-shadow:0 0 0 var(--sp-fig-ring,2px) color-mix(in srgb,var(--c,var(--lm-emph)) 22%,transparent); } /* 2.3 модальный слой: один и самый глубокий */ :root .lm-modal,:root .lm-sheet,:root .lm-ins-lt{ box-shadow:var(--lm-shadow-border),var(--lm-sh-modal); } /* ══ 3. МАТРИЦА РОЛЕЙ ЦВЕТА ═══════════════════════════════════════════════ Цвет на витрине занят под четыре роли и больше ни подо что: поверхность — --bg · --surface · --surface-2…4; три уровня, не больше; чернила — --ink…--ink-5; текст, ось, засечка; данные — --lm-emph и категориальный ряд; принадлежность ряду; статус — --ok · --warm · --cold · --info; ТОЛЬКО марка, пилюля, текст и точка. Площадь статусом не заливается (§4). Литерал белого и чёрного — дефект: он не знает про тему и в тёмной даёт дыру. Поверхность назначается только токеном. */ :root{ /* Чернила на заливке: подпись внутри тёмной марки берёт этот токен, а не литерал белого — в тёмной теме заливка светлеет, текст темнеет. */ --lm-ink-on-fill:var(--surface); /* Доля статусного тона, разрешённая под площадь (§4). */ --lm-area-tone:35%; --lm-area-edge:60%; } html[data-theme="dark"]{--lm-area-tone:30%;--lm-area-edge:70%} /* ══ 4. ПЛОЩАДЬ ТИХАЯ, МАРКА ГРОМКАЯ ══════════════════════════════════════ Статус, залитый полным тоном на всю площадь, перекрикивает цифру, ради которой фигуру открыли: глаз читает красный прямоугольник, а не значение внутри него. Полный тон остаётся у марки, пилюли, точки и текста — там, где он занимает несколько квадратных миллиметров. Площадь получает не больше 35–40 % тона, а границу зоны держит засечка: она различима и на ТВ-пресете, и на чёрно-белой печати, где подложка в 35 % сливается с фоном. */ /* 4.3 · шкала с зонами (LM.viz.band): зона — подложка с засечкой края */ :root .lm-band .track > i{opacity:var(--lm-area-tone);border-right:1px solid var(--surface)} :root .lm-band .track > i:last-of-type{border-right:0} /* 4.6 · распределение (LM.vis.distribution): корзина держит тон вполсилы, зону называет легенда и подпись, а не насыщенность заливки */ :root .lm-dist .bin{fill-opacity:.35} :root .lm-dist .bin:hover{fill-opacity:.55} /* 4.1 · столбик, несущий СТАТУС площадью: зона порога у гистограммы (класс `zone`) и знак расхождения у диверджинга (класс `stat`). Столбик красится через presentation-атрибут fill, поэтому гасится прозрачностью. Крючки системные — их ставит lumen-viz.js, а не адрес карточки каталога: до 07.09.2026 правило било по [data-form^="LM.viz.histogram"] и во внедрения не уезжало, а расхождение от базы (2.2) не гасилось вовсе. */ :root .chart-bar.zone,:root .chart-bar.stat{fill-opacity:.38} :root .chart-bar.zone:hover,:root .chart-bar.stat:hover{fill-opacity:.6} /* Число, лежащее на тихой площади, берёт обычные чернила: цвет «на заливке» рассчитан на полный тон и по трети тона не читается ни в одной теме. */ :root .chart-vallbl.on-quiet,:root .chart-vallbl.on-fill.on-quiet{fill:var(--ink)} /* Зона под фигурой вообще: подложка + засечка границ, а не плотный тон. */ :root .lm-zone,:root .sp-zone{ background:color-mix(in srgb,currentColor var(--lm-area-tone),transparent); box-shadow:inset 0 -1px 0 color-mix(in srgb,currentColor var(--lm-area-edge),transparent); } /* Печать: подложка гаснет совсем, границу зоны держит только засечка — иначе на бумаге зоны сливаются в один серый прямоугольник. */ @media print{ :root .lm-band .track > i{opacity:.22;border-right:1px solid var(--ink-4)} :root .lm-dist .bin{fill-opacity:.22;stroke:var(--ink-4);stroke-width:1} :root .chart-bar.zone,:root .chart-bar.stat{fill-opacity:.22;stroke:var(--ink-4);stroke-width:1} :root .lm-zone,:root .sp-zone{background:transparent;box-shadow:inset 0 -1px 0 var(--ink-4)} } /* Пресет «печать» — та же логика, что и @media print: на бумаге зона держится засечкой, подложка уходит. */ html[data-preset="печать"] .lm-band .track > i{opacity:.22;border-right:1px solid var(--ink-4)} html[data-preset="печать"] .lm-dist .bin{fill-opacity:.22;stroke:var(--ink-4);stroke-width:1} html[data-preset="печать"] .chart-bar.zone,html[data-preset="печать"] .chart-bar.stat{fill-opacity:.22;stroke:var(--ink-4);stroke-width:1} /* ТВ смотрят с трёх метров: там 35 % тона не читаются, поэтому предел поднимается до половины — но не до полного тона (риск этапа, §5). */ html[data-preset="тв"] .lm-band .track > i{opacity:.5} html[data-preset="тв"] .lm-dist .bin{fill-opacity:.5} html[data-preset="тв"] .chart-bar.zone,html[data-preset="тв"] .chart-bar.stat{fill-opacity:.5} /* ── 4.7 · КАРТОЧКА СО СТАТУСОМ: ТИХАЯ ПЛОЩАДЬ, НЕЙТРАЛЬНАЯ РАМКА, ЗАСЕЧКА ── Замечание Дениса 07.09.2026: «всё ещё жирные и не красивые, я устал править». Дефект оказался не в отдельных карточках, а в рецепте, по которому их собирали: у карточки со статусом было ТРИ цветных канала сразу — пилюля тоном, заливка тем же тоном и рамка тем же тоном. Почему три канала хуже одного. Цвет на витрине различает: увидел оранжевое — знаешь, что там оговорка. Когда оранжевым покрашены и ярлык, и подложка, и контур, различать становится нечего: оранжевого на экране столько, что глаз перестаёт считать его сигналом и читает как фактуру. Ровно это и даёт ощущение «пёстро и жирно» — не толщина линий сама по себе, а то, что одна сущность названа три раза. Рецепт после правки — один канал на сущность: · площадь — тон долей --lm-area-quiet (8 %), это подложка, а не сигнал; · рамка — нейтральная волосяная --border-2, как у любой карточки; · засечка — 1 px тоном по левому краю: она называет статус там, где внутри карточки нет пилюли, и не спорит с сеткой (§37 п.4); · пилюля, иконка и текст внутри остаются полным тоном — им положено. Числа лежат здесь и только здесь: `--lm-area-quiet` для площади, `--lm-edge-tone` — потолок тона в контуре, `--lm-edge-mark` — тон в односторонней засечке. Ядро и слои контуров ссылаются на них, чтобы следующая карточка не завела свой четвёртый оттенок оранжевого. */ :root{ --lm-area-quiet:8%; /* тон под крупной площадью: подложка, не сигнал */ --lm-edge-tone:40%; /* потолок тона в контуре, когда контур — единственный канал */ --lm-edge-mark:55%; /* тон в односторонней волосяной засечке */ } /* На тёмной подложке 8 % светлого тона почти не отделяются от поверхности: тёмная тема считает долю от меньшей светлоты, и подложка пропадает. */ html[data-theme="dark"]{--lm-area-quiet:11%} /* Тон карточки объявляется один раз — по классу состояния. */ :root .lm-banner.ok, :root .lm-evid-how, :root .lm-a6-fr .st.d-keep,:root .lm-a6-appr .it.d-keep{--lm-t:var(--ok)} :root .lm-banner.warn,:root .lm-warn.lm-method,:root .lm-date.next, :root .lm-hitl-row.diff, :root .lm-a6-fr .st.d-change,:root .lm-a6-appr .it.d-change{--lm-t:var(--warm)} :root .lm-banner.bad{--lm-t:var(--cold)} :root .lm-banner.info,:root .lm-verbar:not(.quiet){--lm-t:var(--info)} /* Один рецепт на все адреса. `.lm-banner` без класса состояния под правило не попадает намеренно: серый баннер статуса не несёт. */ :root .lm-banner:is(.ok,.warn,.bad,.info), :root .lm-warn.lm-method, :root .lm-date.next, :root .lm-hitl-row.diff, :root .lm-verbar:not(.quiet), :root .lm-evid-how, :root .lm-a6-fr .st.d-keep,:root .lm-a6-fr .st.d-change, :root .lm-a6-appr .it.d-keep,:root .lm-a6-appr .it.d-change{ background:color-mix(in srgb,var(--lm-t) var(--lm-area-quiet),var(--surface)); border-color:var(--border-2); box-shadow:inset 1px 0 0 color-mix(in srgb,var(--lm-t) var(--lm-edge-mark),transparent); } /* Подложка без рамки (`.lm-evid-how` — сноска внутри цитаты) засечку получает, а нейтральную рамку рисовать не с чего: рамки у неё нет. */ :root .lm-evid-how{border:0} /* Печать: подложка гаснет (на бумаге 8 % тона — это грязное пятно), статус держит одна засечка, и она темнеет до чернил. */ @media print{ :root .lm-banner:is(.ok,.warn,.bad,.info),:root .lm-warn.lm-method, :root .lm-date.next,:root .lm-hitl-row.diff,:root .lm-verbar:not(.quiet), :root .lm-evid-how,:root .lm-a6-fr .st.d-keep,:root .lm-a6-fr .st.d-change, :root .lm-a6-appr .it.d-keep,:root .lm-a6-appr .it.d-change{ background:transparent;box-shadow:inset 2px 0 0 -1px var(--ink-3),inset 1px 0 0 var(--ink-3); } } html[data-preset="печать"] :is(.lm-banner.ok,.lm-banner.warn,.lm-banner.bad,.lm-banner.info, .lm-warn.lm-method,.lm-date.next,.lm-hitl-row.diff,.lm-verbar:not(.quiet),.lm-evid-how, .lm-a6-fr .st.d-keep,.lm-a6-fr .st.d-change,.lm-a6-appr .it.d-keep,.lm-a6-appr .it.d-change){ background:transparent;box-shadow:inset 1px 0 0 var(--ink-3); } /* ТВ смотрят с трёх метров: там 8 % не долетают, предел поднимается, но остаётся подложкой — не половиной тона, как у зон на фигуре. */ html[data-preset="тв"]{--lm-area-quiet:16%} /* ── 4.8 · ЧЕРНИЛА МАРКИ: ТОН, КОТОРЫЙ ЧИТАЕТСЯ ──────────────────────────── Продолжение того же правила с другой стороны. Раз площадь стала тихой, весь статус теперь несёт марка — и она обязана ЧИТАТЬСЯ. Замер контраста на тинте (светлая тема, 12 % тона на поверхности): пилюля «оговорка» — 5.0, у неё давно есть свои чернила --warm-ink; пилюля «в норме» — 2.1; пилюля «эскалация» — 2.9; пилюля «справка» — 3.1. То есть зелёная и красная подпись на своём же тинте не добирали даже до 3:1 — их читали по форме слова, а не по буквам. Система эту задачу один раз уже решила (--warm-ink), но только для тёплого; здесь тот же приём доводится до остальных трёх. Светлая тема подмешивает чернила — тон темнеет, оттенок остаётся; тёмная берёт тон как есть: на графитовой поверхности он и так даёт 4.2–5.8. Литералов нет, только смесь токенов (правило G4). */ :root{ --lm-ok-ink:color-mix(in srgb,var(--ok) 60%,var(--ink)); --lm-cold-ink:color-mix(in srgb,var(--cold) 60%,var(--ink)); --lm-info-ink:color-mix(in srgb,var(--info) 60%,var(--ink)); } html[data-theme="dark"]{ --lm-ok-ink:var(--ok); --lm-cold-ink:var(--cold); --lm-info-ink:var(--info); } /* Только марка: пилюля, дельта, тег. На фигуре и на иконке вне марки тон остаётся полным — там он и есть данные (§3). */ :root .lm-pill.ok,:root .lm-delta.up,:root .lm-delta.down.good,:root .lm-tag.ok{color:var(--lm-ok-ink)} :root .lm-pill.bad,:root .lm-delta.down,:root .lm-delta.up.bad,:root .lm-tag.bad{color:var(--lm-cold-ink)} :root .lm-pill.info,:root .lm-tag.info{color:var(--lm-info-ink)} /* ══ 5. ПОТОЛОК КАТЕГОРИЙ ═════════════════════════════════════════════════ Четыре цвета человек удерживает в голове без возврата к легенде; пятый заставляет сверяться на каждой марке. Поэтому на фигуре не больше четырёх категорий, оттенки — из одного ряда и в неизменном порядке, легенда обязательна. Пять и больше — таблица или малые кратные, цвет с фигуры снимается. Ряд задан здесь один раз, чтобы порядок не зависел от того, в каком месте формы цвет попросили первым. Рампа (тепло, когорта, календарь) категориями не считается: это один оттенок и ступени светлоты, её потолок — обязательная шкала с засечкой. */ :root{ --lm-cat-1:var(--lm-emph); --lm-cat-2:var(--cyan); --lm-cat-3:var(--orange); --lm-cat-4:var(--green); /* пятая и далее категория цвета не получает: ряд уходит в нейтраль, различает подпись — это дешевле, чем пятый оттенок */ --lm-cat-rest:var(--ink-4); } /* ══ 6. ОДИН ЗНАК «НАШ» ═══════════════════════════════════════════════════ Было четыре знака принадлежности: полоса 3 px слева от строки, заливка строки, жирное имя и таблетка с иконкой дома. Полоса нарушает §37 (линия толще 1 px вне фокуса), заливка спорит с наведением, жирность спорит с лестницей весов, а вместе они не читаются как одно и то же. Знак один и одинаковый в таблице, на фигуре и в плитке: точка акцента 6 px слева от имени плюс слово «наш» микро-кеглем. */ :root{--sp-own-dot:6px} /* 6.1 базовый знак: марка own из SP.mark — не таблетка, а точка и слово */ :root .sp-mark.own{background:transparent;padding-left:0;gap:6px;color:var(--ink)} :root .sp-mark.own .d{ width:var(--sp-own-dot);height:var(--sp-own-dot);border-radius:var(--r-circle); background:var(--lm-emph);flex:none; } :root .sp-mark.own > span{font-size:var(--lm-micro);color:var(--ink-3);letter-spacing:.02em} /* 6.2 строка таблицы: полоса 3 px снимается, на её месте точка перед именем */ :root .lm-d6 .lm-table tr.ours td, :root .lm-d6-nt .hd.ours td, :root .lm-k6-konk tr.ours td{background:transparent;font-weight:inherit;box-shadow:none} :root .lm-d6 .lm-table tr.ours > td:first-child, :root .lm-d6-nt .hd.ours > td:first-child, :root .lm-k6-konk tr.ours > td:first-child{position:relative;padding-left:20px} :root .lm-d6 .lm-table tr.ours > td:first-child::before, :root .lm-d6-nt .hd.ours > td:first-child::before, :root .lm-k6-konk tr.ours > td:first-child::before, :root .lm-d6-so .row.ours::before, :root .lm-d6-mos .row.ours::before{ content:'';position:absolute;left:6px;top:calc(50% - var(--sp-own-dot) / 2); width:var(--sp-own-dot);height:var(--sp-own-dot);border-radius:var(--r-circle); background:var(--lm-emph); } :root .lm-d6 .lm-table tr.ours > td:first-child::after, :root .lm-d6-nt .hd.ours > td:first-child::after, :root .lm-k6-konk tr.ours > td:first-child::after{ content:'наш';margin-left:8px;font-size:var(--lm-micro); color:var(--ink-3);letter-spacing:.02em; } /* 6.3 строка списка (распроданность, мозаика): та же точка, тот же отступ */ :root .lm-d6-so .row.ours,:root .lm-d6-mos .row.ours{ position:relative;background:transparent;box-shadow:none; padding-inline:20px 10px;margin-inline:-20px -10px; } /* 6.4 на фигуре: имя нашего ряда не жирнее соседей — различает точка */ :root .lm-d6-rank .row.ours .nm b{color:var(--ink);font-weight:500} :root .lm-d6-map-svg .pt.ours .lbl{font-weight:500} /* ══ 7. ИКОНКИ ════════════════════════════════════════════════════════════ Один набор (Tabler outline, 24×24, штрих 1.75), три размера по роли: 14 — внутри строки текста, пилюли, таблицы; 16 — в кнопке, поле, вкладке, шапке карточки; 20 — в плитке и там, где иконка сама является марком. Иконка не заменяет подпись там, где действие не угадывается; декоративная скрыта от скринридера (aria-hidden ставит LM.icon). */ :root{--lm-icon:20px;--lm-icon-sm:16px;--lm-icon-xs:14px;--lm-icon-stroke:1.75} /* Один штрих на набор: раньше мелкая иконка утолщалась до 2–2.4 и рядом с иконкой 16 px выглядела иконкой из другого набора. Список поимённый, потому что каждое из этих правил задано двумя-тремя классами и слоем в один класс не перебивается. */ :root svg.lm-ic,:root .lm svg.lm-ic, :root .lm svg.lm-ic.sm,:root .lm svg.lm-ic.xs, :root .lm-nav-sec .lm-ic,:root .lm-nav a .swatch .lm-ic, :root .lm-pill .lm-ic,:root .lm-delta .lm-ic,:root .lm-legend .it .sw .lm-ic, :root .lm-cat .sw .lm-ic,:root .lm-timeline .dot .lm-ic, :root .lm-cv .lm-pill .lm-ic,:root .lm-cv .lm-delta .lm-ic, :root .lm-cv b .lm-ic,:root .lm-cv h3 .lm-ic,:root .lm-cv small .lm-ic, :root .lm-cv .lm-muted .lm-ic,:root .lm-cv .lm-btn .lm-ic, :root .lm-cv .lm-btn.primary .lm-ic{stroke-width:var(--lm-icon-stroke)} /* Размеры вне лестницы сводятся к 14: навигация, пилюля, дельта, легенда, веха, клетка расписания, плитка, дисклеймер, зона. */ :root .lm-nav-sec .lm-ic,:root .lm-nav a .swatch .lm-ic, :root .lm-top .lm-crumbs .lm-ic,:root .lm-pill .lm-ic,:root .lm-delta .lm-ic, :root .lm-legend .it .sw .lm-ic,:root .lm-btn.sm .lm-ic,:root .sp-mark .lm-ic, :root .lm-cat .sw .lm-ic,:root .lm-timeline .dot .lm-ic,:root .lm-fresh .lm-ic, :root .lm-e6-shiftgrid td .lm-ic,:root .tile .lm-ic,:root .dis .lm-ic, :root .z .lm-ic,:root .lm-d6-nt-tg .lm-ic, :root .lm-pipe .st .tile .lm-ic, :root .lm-e6-breaches .th small.dis .lm-ic{ width:var(--lm-icon-xs);height:var(--lm-icon-xs); } /* Исключение по делу: во вставке в видео (§8, носитель со своей темой) иконка масштабируется вместе с кадром 1920×1080 — на экране 320 px это 32–40 px, и это не нарушение лестницы, а другой носитель. */ /* Оптическое выравнивание с текстом: контур Tabler стоит на 24-й сетке, визуальный центр иконки ниже центра строчной буквы. */ :root .lm svg.lm-ic{vertical-align:-.12em} /* 8.1 · шапка среза остаётся типографической: иконка уходит из шапки фигуры, её место — в плитке, кнопке и пилюле (zai-review-figicon). */ :root .lm-d6-lead-g .v > .ic,:root .lm-d6-hd > .ic{display:none} /* ══ 8. НОСИТЕЛЬ СО СВОЕЙ ТЕМОЙ — ЭКСПОНАТ В РАМКЕ ════════════════════════ ТВ-полоса, брендовый вход и светящаяся сцена живут в своей теме по делу: их смотрят на другом экране. Но поставленные в поток светлой страницы, они читаются как «здесь другая система». Поэтому носитель показывается экспонатом: поле вокруг, рамка устройства и тег носителя сверху — тогда тёмный прямоугольник понятен как «вот так это выглядит на ТВ». Кадр видео (группа 13) в эту рамку не берётся: его масштабом и подписью занимается этап 2, две рамки на один кадр — это уже двойной контур. */ :root .lm-tv,:root .lm-scene.dark,:root .lm-login{ position:relative;padding:24px 8px 8px; border-radius:var(--r-scene);background:var(--surface-3); /* §10: контур у рамки один. Собственная рамка носителя гасится — её роль берёт кольцо, иначе бортик читается двойной линией. */ border-color:transparent; box-shadow:inset 0 0 0 1px var(--border); } :root .lm-tv > *,:root .lm-scene.dark > *,:root .lm-login > *{ border-radius:calc(var(--r-scene) - 8px); } /* Тег живёт ВНУТРИ рамки: снаружи его срезает переполнение хоста, и носитель снова оказывается без подписи — то есть островом. */ :root .lm-tv::before,:root .lm-scene.dark::before,:root .lm-login::before{ position:absolute;left:12px;top:7px; font-size:var(--lm-micro);letter-spacing:.06em;text-transform:uppercase; color:var(--ink-4);white-space:nowrap;pointer-events:none; } :root .lm-tv::before{content:'носитель · ТВ-панель'} :root .lm-scene.dark::before{content:'носитель · показ'} :root .lm-login::before{content:'носитель · брендовый вход'} /* Тёмная тема: поле рамки берётся от поверхности темы, а не от литерала, иначе экспонат превращается в белый остров. */ html[data-theme="dark"] .lm-tv, html[data-theme="dark"] .lm-scene.dark, html[data-theme="dark"] .lm-login{background:var(--surface-2)} /* Остальные тёмные плашки носителями не являются и уходят на поверхность. Реплика собеседника отличается не инверсией, а ступенью поверхности и стороной, к которой прижата: инверсия здесь читалась как «другая тема». */ :root .lm-rag .q{background:var(--surface-4);color:var(--ink)} :root .lm-rag .q *{color:inherit} :root .lm-agentp .msgs .m.me{background:var(--surface-4);color:var(--ink)} :root .lm-agentp .msgs .m.me *{color:inherit} /* Липкая полоса итога — элемент потока, а не носитель: поднимается поверхностью и волосяной линией сверху, не инверсией. */ :root .lm-a6-foot{ background:var(--surface);color:var(--ink); box-shadow:inset 0 1px 0 var(--border-3),var(--lm-sh-float); } :root .lm-a6-foot *{color:inherit} /* ══ 9. ЯЗЫК ВЫБОРА ═══════════════════════════════════════════════════════ Решение 07.09.2026 (ЗАДАЧА §8 п.4). Две роли, и они не смешиваются: чёрная заливка — «ГДЕ Я»: текущая полка, текущая группа, открытая страница. Состояние одно на экран, снять его нельзя — можно только уйти в другое место; приподнятая пилюля — «ЧТО ПОКАЗЫВАЮ»: фильтр, пресет, тема, период. Состояний может быть несколько, каждое снимается. Практическое следствие: сегмент выбора периода не красится в чёрное, а пункт навигации не превращается в пилюлю. Если различие однажды окажется лишним — обе роли сводятся к тихой (заливка --surface-3), но НЕ наоборот: два громких стиля на одном экране спорят. */ :root .lm-nav a.on,:root .cat-nav a.on,:root .cat-tabs a.on{ background:var(--ink);color:var(--surface);box-shadow:var(--lm-sh-flow); } :root .lm-nav a.on .lm-ic,:root .cat-nav a.on .lm-ic{color:var(--surface)} :root .lm-seg button.on,:root .lm-tag.on,:root .lm-pill.on{ background:var(--surface);color:var(--ink); box-shadow:inset 0 0 0 1px var(--border-3); } /* ══ 10. ОДИН КОНТУР НА ЭЛЕМЕНТ (§37) ═════════════════════════════════════ У элемента не бывает и рамки, и кольца box-shadow: два контура в полутора пикселях друг от друга дают «двойную обводку», на которую заказчик жаловался трижды. Контур один — либо border, либо кольцо. Толще 1 px — только :focus-visible. */ :root .lm-cv .lm-card,:root .lm-cv .lm-kpi, :root .lm-bulk,:root .lm-d6-split .pt,:root .lm-e6-cal .c.today{border-color:transparent} /* Полоса-разделитель слева от строки: 3 px — это уже обводка, а не разделитель. Хватает волосяной линии: смысл несёт марка решения, а не толщина полосы (§37). */ :root .lm-appr-item.d-keep,:root .lm-appr-item.d-change,:root .lm-appr-item.d-drop, :root .lm-k6-ladder .b,:root .lm-evid,:root .lm-proj .one, :root .lm-review .err,:root .lm-patterns blockquote{border-left-width:1px} /* Кольцо поверхности вокруг марки на фигуре — это не выделение, а зазор: оно того же цвета, что фон, и отделяет точку от линии под ней. Но 3 px зазора на восьмипиксельной точке читаются как обводка — хватает двух. */ :root .dot.lm-num,:root .lm-fig .dot,:root .lm-a6-track .stg .dot{ box-shadow:0 0 0 var(--sp-fig-ring,2px) var(--surface); }