/* =========================================================== SPECULATOR v6.3 · figure.css — ЕДИНЫЙ РИСУНОК ФИГУРЫ DESIGN_SYSTEM §46. Подключается ПОСЛЕ lumen.css и после _v6/charts.css. Правит только РИСУНОК: тип линии, толщину, окончания, маркеры, заливку, сетку, кегль подписей — и обозначения (.sp-mark). Данных и контрактов форм не трогает. Ни одного литерала цвета: только токены и color-mix. Почему файл нужен. До 06.09.2026 каталог из 199 форм рисовал линию девятью толщинами (1 · 1.2 · 1.5 · 1.6 · 1.8 · 2 · 2.5 · 10 · 16), четырьмя парами окончаний (butt/miter · round/round · round/miter · butt/round), шестью кеглями подписи на экране (7 · 9.1 · 10.5 · 11 · 12.6 · 12.7 px) и восемнадцатью радиусами марки. Один и тот же смысл выглядел по-разному — рисунок читался как набор чужих картинок. =========================================================== */ /* ── 1. Токены рисунка ───────────────────────────────────────────────── Одна лестница на систему. Все значения в ЭКРАННЫХ пикселях: штрих несёт vector-effect:non-scaling-stroke, текст компенсируется --lm-cs. */ :root{ --sp-fig-line:2px; /* несущая линия ряда */ --sp-fig-aux:1.5px; /* вспомогательная: призрак базы, скользящее среднее, ус, направляющая */ --sp-fig-hair:1px; /* волосяная: сетка, ось нуля, порог, разделитель */ --sp-fig-dash:4 3; /* единственный пунктир системы: порог, план, ожидание */ --sp-fig-dash-soft:2 3; /* пунктир второго плана: «сегодня», прогноз, зона без данных */ --sp-fig-fill:.14; /* заливка под линией — одна на систему */ --sp-fig-dot:3px; /* спокойная точка ряда (диаметр 6) */ --sp-fig-mark:4.5px; /* маркер аномалии и наведения (диаметр 9 ≥ 8, §46) */ --sp-fig-ring:2px; /* кольцо поверхности вокруг маркера */ --sp-fig-lbl:11px; /* подпись внутри фигуры */ --sp-fig-r:3px; /* скругление столбика и плитки */ /* Масштаб фигуры, нарисованной не один к одному (§42). Значение ставит движок на хосте: `host.style.setProperty('--lm-cs', ширина/600)`. Здесь объявлен нейтральный по умолчанию — иначе на экране без движка компенсация кегля превратилась бы в деление на пустоту. */ --lm-cs:1; } /* ── 2. Линия ряда: ломаная со скруглёнными стыками ──────────────────── Скругление стыка и конца — не украшение: на изломе в 2 px острый miter даёт шип длиной до 6 px, и ряд выглядит колючим. */ .lm-chart .chart-line, .lm-chart path.chart-line, .lm-f51 .line, .lm-fig-line{ fill:none; stroke-width:var(--sp-fig-line); stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; } /* Ломаная гнётся только у path — у него и скругляем стык. Линии сетки и оси (``) прямые: стык у них не участвует, а butt-конец там правильный — круглый конец вылез бы за поле данных на пол-толщины. */ .lm-chart path,.lm-f51 path,.lm-e6-svg path,.lm-k6-svg path,.lm-d6-map-svg path{stroke-linejoin:round} /* Спарклайн — вспомогательная линия: он стоит в строке таблицы и в плитке рядом с текстом того же кегля, и несущие 2 px там спорят с цифрой. Движок рисовал 1.6 — значение вне лестницы; приводим к 1.5. */ .chart-line{fill:none;stroke-width:var(--sp-fig-aux);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke} /* цель в буллете — вспомогательная засечка, а не третья толщина */ .lm-chart .chart-bullet-target{stroke-width:var(--sp-fig-line)} /* вспомогательные линии — тоньше несущей, но той же формы стыка */ .lm-f51 .ma,.lm-f51 .expect,.lm-f51 .forecast,.lm-f51 .today,.lm-f51 .thr,.lm-f51 .you,.lm-f51 .mk, .lm-fig-aux{ stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke; } .lm-fig-aux{stroke-width:var(--sp-fig-aux);fill:none} /* волосяная сетка и оси: линия сетки не спорит с рядом */ .lm-chart .chart-grid,.lm-f51 .grid,.lm-fig-grid{ stroke-width:var(--sp-fig-hair);stroke:var(--border-2);vector-effect:non-scaling-stroke; } /* ось без собственной линии — её роль держат подписи и волосяная сетка; остаётся только ось нуля, потому что ноль — это база, а не оформление */ .lm-chart .chart-axis,.lm-fig-axis{ stroke-width:var(--sp-fig-hair);stroke:var(--border-3);vector-effect:non-scaling-stroke; } /* Единый пунктир. Было пять шагов на систему (2 3 · 2 4 · 3 3 · 4 3 · 4 4) — читатель считывал их как разные сущности, хотя это всегда «то, чего ещё нет» или «то, что назначено». Осталось два: 4 3 — назначенное (порог, план, ожидание); 2 3 — второй план («сегодня», прогноз, разделитель лет). */ .lm-fig-dash{stroke-dasharray:var(--sp-fig-dash)} .lm-fig-dash-soft{stroke-dasharray:var(--sp-fig-dash-soft)} .lm-chart .chart-refline{stroke-width:var(--sp-fig-hair);stroke-dasharray:var(--sp-fig-dash);vector-effect:non-scaling-stroke} .lm-f51 .expect,.lm-f51 .thr{stroke-dasharray:var(--sp-fig-dash)} .lm-f51 .forecast,.lm-f51 .today,.lm-f51 .mk{stroke-dasharray:var(--sp-fig-dash-soft)} /* ── 3. Ступенчатая линия ────────────────────────────────────────────── Величина держится до следующего изменения (цена, тариф, ставка, порог, штат). Рисуется теми же командами L, отличие в геометрии — здесь только объявляем, что ступень носит ту же толщину и те же стыки. */ .lm-fig-step{fill:none;stroke-width:var(--sp-fig-line);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke} /* ── 4. Заливка под линией ───────────────────────────────────────────── Только один ряд и только как поддержка величины: две залитые серии перекрываются, и читатель видит цвет пересечения, а не данные. */ .lm-chart .chart-area,.lm-f51 .area,.lm-fig-fill{ stroke:none;fill-opacity:var(--sp-fig-fill); } .lm-f51 .area{opacity:1;fill-opacity:var(--sp-fig-fill)} /* ── 5. Маркеры ──────────────────────────────────────────────────────── Точка на каждом значении превращает ряд в бусы и мешает видеть форму. Спокойная точка — 6 px в диаметре и только на коротком ряде; маркер ≥ 8 px — только аномалия, веха и наведение, всегда с кольцом поверхности, чтобы марка читалась поверх линии и заливки. */ .lm-chart .chart-dot,.lm-fig-dot{ r:var(--sp-fig-dot); stroke:var(--surface);stroke-width:var(--sp-fig-ring); vector-effect:non-scaling-stroke; } /* В формах 5.1 точка одна на фигуру — «сегодня», «вы», текущее положение, — и это марка, а не член ряда: она обязана читаться с двух метров. */ .lm-f51 .pt{r:var(--sp-fig-mark);stroke:var(--surface);stroke-width:var(--sp-fig-ring);vector-effect:non-scaling-stroke} .lm-chart .chart-dot.lm-on,.lm-chart .chart-dot.chart-anom, .lm-chart .chart-pt.lm-on,.lm-f51 .pt.lm-on, .lm-fig-dot.lm-on,.lm-fig-mark{ r:var(--sp-fig-mark);stroke-width:var(--sp-fig-ring); } .lm-chart .chart-pt,.lm-fig-pt{stroke:var(--surface);stroke-width:var(--sp-fig-ring);vector-effect:non-scaling-stroke} /* марка на длинном ряде прячется до наведения: ряд читается формой, а не точками */ .lm-fig-quiet .chart-dot:not(.lm-on):not(.chart-anom){opacity:0} /* ── 6. Подписи в фигуре ─────────────────────────────────────────────── 11 px, табличные цифры, без обводки текста: обводка (paint-order/stroke) утолщает знак и на 11 px превращает подпись в кашу (§37, §41). */ .lm-chart text,.lm-f51 text,.lm-e6-svg text,.lm-k6-svg text,.lm-fig text{ font-family:var(--font); font-variant-numeric:tabular-nums; paint-order:normal; stroke:none; } .lm-f51 .ax,.lm-f51 .lbl,.lm-f51 .mkl,.lm-f51 .youl,.lm-f51 .annn, .lm-e6-svg .ax,.lm-k6-svg .ax,.lm-fig .ax{ font-size:var(--sp-fig-lbl); } /* подписи фигуры, нарисованной один к одному */ .lm-chart .chart-catlbl,.lm-chart .chart-hm-lbl, .lm-chart .chart-funnel-lbl,.lm-chart .chart-funnel-conv{font-size:var(--sp-fig-lbl)} /* фигуры, нарисованные в своих 600 единицах, компенсируют кегль на масштаб (§42): в коде 11 / 0.76, на экране — те же 11 px */ .lm-chart svg.lm-cs .chart-catlbl, .lm-chart svg.lm-cs .chart-funnel-lbl, .lm-chart svg.lm-cs .chart-funnel-conv, .lm-chart svg.lm-cs .chart-hm-lbl{font-size:calc(var(--sp-fig-lbl) / var(--lm-cs,1))} /* Кольцо и полукруг: общий проход §42 считает масштаб по ШИРИНЕ svg, а кольцо вписано по ВЫСОТЕ (`.lm-chart.h-ring svg{width:auto}`) — коэффициент выходит 2.15 там, где настоящий масштаб 1, и подпись в центре уезжает на 4.9 px при заданных 10.5. Пока это чинится в самом проходе, кегль держим здесь. `!important` — единственный способ перебить style, который пишет проход. */ .lm-chart.h-ring .chart-center-lbl,.lm-ringwrap .chart-center-lbl{font-size:var(--sp-fig-lbl)!important} .lm-chart.h-ring .chart-center-val,.lm-ringwrap .chart-center-val{font-size:19px!important} /* подпись внутри марки не ловит наведение — тултип принадлежит марке, а не тексту */ .lm-chart text,.lm-f51 text,.lm-e6-svg text,.lm-k6-svg text{pointer-events:none} /* ── 7. Столбики и плитки: одно скругление ───────────────────────────── Столбик — это отрезок шкалы, а не кнопка: скругление 3 px читается как аккуратный край и не съедает первый пиксель значения. */ .lm-chart .chart-bar,.lm-fig-bar{rx:var(--sp-fig-r)} /* ── 8. Неагрессивность ──────────────────────────────────────────────── Насыщенный цвет на большой площади кричит; на форме он допустим полоской и маркой, а площадь берёт прозрачность (§43). */ .lm-fig-soft{fill-opacity:var(--sp-fig-fill)} /* ═══════════════════════════════════════════════════════════════════════ 9. ОБОЗНАЧЕНИЯ · .sp-mark (SP.mark, ядро/lumen-mark.js) Четыре вида: решение · состояние данных · результат проверки · принадлежность. Правила: иконка и слово всегда вместе; цвет — второй канал; форма — таблетка с тихой подложкой без кольца: кольцо марки и круг внутри иконки давали двойной контур; статусный цвет не растягивается в градиент (§43). ═══════════════════════════════════════════════════════════════════════ */ .sp-mark{ --sp-mark-c:var(--ink-3); display:inline-flex;align-items:center;gap:5px; height:22px;padding:0 9px 0 7px; border-radius:var(--r-pill); font-size:10.75px;font-weight:500;line-height:1;letter-spacing:.005em; white-space:nowrap;vertical-align:middle; color:var(--ink-2); background:color-mix(in srgb,var(--sp-mark-c) 10%,var(--surface)); box-shadow:none; /* §45б: один контур на элемент — у марки его нет вовсе, различает подложка */ } .sp-mark .lm-ic{width:12px;height:12px;stroke-width:1.9;color:var(--sp-mark-c);flex:none} .sp-mark b{font-weight:500;color:var(--ink)} .sp-mark.sm{height:19px;padding:0 7px 0 6px;font-size:var(--lm-micro);gap:4px} .sp-mark.sm .lm-ic{width:11px;height:11px} /* марка внутри таблицы и карточки не растягивает строку */ .lm-table .sp-mark{vertical-align:middle} .lm-card .sp-mark{max-width:100%;overflow:hidden;text-overflow:ellipsis} /* 9.1 решение: взяли · не взяли · на паузе Взяли — утверждение, цвет данных; не взяли — не приговор, а «мимо», поэтому нейтраль; на паузе — ожидание, тёплый. */ .sp-mark.take{--sp-mark-c:var(--lm-emph)} .sp-mark.skip{--sp-mark-c:var(--ink-4);color:var(--ink-3)} .sp-mark.hold{--sp-mark-c:var(--warm)} /* 9.2 состояние данных: свежие · устаревшие · нет данных Это про доверие к цифре, а не про оценку бизнеса. */ .sp-mark.fresh{--sp-mark-c:var(--ok)} .sp-mark.stale{--sp-mark-c:var(--warm)} .sp-mark.nodata{--sp-mark-c:var(--ink-4);color:var(--ink-3); background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--ink-4) 5%,var(--surface)) 0 5px, var(--surface) 5px 10px)} /* 9.3 результат проверки: в норме · внимание · стоп Единственное место, где живут классические статусные цвета, — точечно. */ .sp-mark.pass{--sp-mark-c:var(--ok)} .sp-mark.watch{--sp-mark-c:var(--warm);color:var(--warm-ink)} .sp-mark.stop{--sp-mark-c:var(--cold)} /* 9.4 принадлежность: наш · чужой · общий Здесь цвет не несёт оценки, различает иконка; чужой — контур без заливки, потому что он не наш и не должен занимать площадь. */ .sp-mark.own{--sp-mark-c:var(--ink-3);color:var(--ink)} .sp-mark.ext{--sp-mark-c:var(--ink-4);color:var(--ink-3);background:transparent} .sp-mark.shared{--sp-mark-c:var(--info)} /* 9.5 ряд обозначений: одинаковый шаг, перенос без разрыва пары «иконка + слово» */ .sp-marks{display:flex;flex-wrap:wrap;gap:6px;align-items:center} /* 9.6 тёмная тема: подложка марки берётся от поверхности темы, поэтому отдельной лестницы не нужно — кольцо чуть плотнее, чтобы таблетка не растворилась в тёмном фоне */ :root[data-theme="dark"] .sp-mark{ background:color-mix(in srgb,var(--sp-mark-c) 16%,var(--surface)); box-shadow:none; } :root[data-theme="dark"] .sp-mark.ext{background:transparent} :root[data-theme="dark"] .sp-mark.nodata{ background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--ink-4) 10%,var(--surface)) 0 5px, var(--surface) 5px 10px)} @media (prefers-reduced-motion:reduce){ .sp-mark{transition:none} } /* ── 10. §46а · СКРУГЛЕНИЕ ВЕЗДЕ ─────────────────────────────────────── Решение 07.09.2026: у линии не бывает острых стыков. Раньше скругление назначалось поимённо (chart-line, .line, .lm-fig-line…), и любая новая фигура рождалась колючей, пока кто-нибудь не заметит. Теперь стык скруглён у всех path и polyline внутри витрины, а butt-конец остаётся там, где круглый конец соврал бы про длину: сетка, оси, засечки шкалы. Кривая ряда строится в ядре (LM.smoothLines, монотонная кубика Фрича–Карлсона): она проходит ровно через измеренные точки и между ними не выходит за них — то есть не придумывает значений. Отключается на странице html[data-lines="straight"] и на форме [data-lines]. */ .lm svg path, .lm svg polyline{stroke-linejoin:round;stroke-linecap:round} .lm svg .chart-grid,.lm svg .chart-axis,.lm svg .lm-fig-grid,.lm svg .lm-fig-axis, .lm svg .grid,.lm svg .axis,.lm svg .tick,.lm svg .zero{stroke-linecap:butt} .lm svg polygon,.lm svg rect{stroke-linejoin:round} /* ═══════════════════════════════════════════════════════════════════════ 11. §48 · КАРКАС ФИГУРЫ — шапка · строка данных · близнец · легенда · таблица · цитата. Этап 5 докрутки каталога, 07.09.2026. Механика — ядро (`lumen.js`, §48), здесь только рисунок рамки. Зачем. Раньше у каждой фигуры была своя рамка: источник данных был виден у 67 форм из 199, вход в таблицу-близнеца стоял в двух местах (кнопка в шапке у 22 форм, summary под фигурой у 10) и отсутствовал у 130, а бейджей периода на одной карточке набиралось до трёх. Одинаковый смысл находился каждый раз в новом месте — читатель не мог выучить движение. ═══════════════════════════════════════════════════════════════════════ */ /* ── 11.1 Шапка среза ────────────────────────────────────────────────── Ровно одна строка заголовка плюс необязательный подзаголовок; в правом крае — единственный бейдж периода. Пять движков рисовали пять похожих шапок (.lm-e6-hd · .lm-d6-hd · .lm-heat6-hd · .lm-a6-hd · .lm-k6-hd) — ядро вешает им общий класс, дальше их рисует одно правило. Заголовок уточняет СРЕЗ, а не повторяет имя карточки; форма без среза — гант, прогресс, буллет — живёт без шапки вовсе. */ .sp-fh{display:flex;align-items:baseline;justify-content:space-between;gap:10px; min-width:0;margin-bottom:8px} .sp-fh > .t{min-width:0} .sp-fh h4{margin:0;font-size:14px;font-weight:var(--w-semibold,600);line-height:1.3;color:var(--ink)} .sp-fh .sub{margin-top:2px;font-size:var(--lm-small);color:var(--ink-3)} .sp-fh .sp-per{flex:none} /* Шапка без содержания не занимает место: у форм, где она держала только уехавший вход в близнеца, остаётся пустая полоса — её не должно быть. */ .sp-fh-empty{display:none} /* Бейдж периода. Один на карточку: второй ядро снимает как дословный повтор. Тихий, потому что период — рамка чтения, а не значение. */ .sp-per{display:inline-flex;align-items:center;height:20px;padding:0 8px; border-radius:var(--r-pill,999px);background:var(--surface-3); font-size:var(--lm-micro);color:var(--ink-3);white-space:nowrap; font-variant-numeric:tabular-nums} /* ── 11.2 Строка данных ──────────────────────────────────────────────── Одна микро-строка под фигурой: точка состояния · источник · версия · возраст среза, и в правом крае — единственный вход в близнеца. Она же держит закон данных на экране, а не в подсказке (КАМЕРТОН §7б). Высота считана: 11 px в одну строку плюс 6 px отступа — это цена того, что у каждой цифры на витрине видно, откуда она. */ .sp-dl{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 6px;min-width:0; margin-top:6px;padding-top:5px;border-top:1px solid var(--border-2); font-size:var(--lm-micro);line-height:1.35;color:var(--ink-4)} /* Источник не усекается многоточием: он и есть закон данных на экране. Если строка не влезла — она переносится, а кнопка близнеца уходит вправо на следующую строку. Прятать источник в подсказку нельзя. */ .sp-dl .src{flex:1 1 200px;min-width:0;white-space:normal;overflow-wrap:normal} /* На узкой карточке строка данных встаёт в два этажа: источник сверху, вход в близнеца под ним. Базис 200 px — это порог, ниже которого предложение «источник: … · срез: …» перестаёт помещаться рядом с кнопкой; до правки оба сжимались до нечитаемого и отдавали странице фантомную прокрутку. */ .sp-dl-tw,.sp-dl-no{white-space:nowrap;min-width:max-content} /* `flex:none` мешает сжатию, но не мешает браузеру выдать строке меньше, чем нужно содержимому, когда соседи претендуют на ту же строку. Явная минимальная ширина по содержимому — единственное, что гарантирует: кнопка либо стоит целиком, либо честно уходит на свою строку. */ /* Точка состояния — второй канал к слову, а не вместо него: цветом здесь сказано только «доверять ли возрасту среза», оценки в ней нет (A1). */ .sp-dl .dot{flex:none;width:6px;height:6px;border-radius:var(--r-circle,50%);background:var(--ink-4)} .sp-dl .dot.fresh{background:var(--ok)} .sp-dl .dot.stale{background:var(--warm)} .sp-dl .dot.demo{background:var(--ink-4);opacity:.55} .sp-dl .dot.nodata{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-4)} /* Оригинал поднятой подписи не удаляется — его правит обезличивание каталога, — но на экране остаётся один экземпляр. */ .sp-lifted{display:none} /* Вход в близнеца. Одно место на всю систему: правый край строки данных. Почему не `margin-left:auto`. Так было до 07.09.2026, и два агента подряд независимо поймали одно и то же: страница получала 70–100 px горизонтальной прокрутки, при том что визуально за край не выходило ни пикселя. Причина — авто-отступ у неусыхаемого (`flex:none`) элемента внутри контейнера с переносом: браузер считает ширину строки по max-content вместе с этим отступом, и `scrollWidth` растёт, хотя рисуется всё правильно. Дефект невидим глазами и виден только замером — ровно тот случай, ради которого заведён детектор переполнений. Лечится не отступом, а раскладкой: правый край задаёт сам контейнер (`margin-inline-start:auto` заменён на `justify-content`), а левая часть умеет сжиматься. */ .sp-dl-tw{flex:none;display:inline-flex;align-items:center;gap:4px; height:18px;padding:0 7px 0 5px;border:1px solid var(--border); border-radius:var(--r-pill,999px);background:var(--surface); font:inherit;font-size:var(--lm-micro);color:var(--ink-3);cursor:pointer; transition:color var(--motion-fast,120ms),border-color var(--motion-fast,120ms)} .sp-dl-tw .lm-ic{width:12px;height:12px;flex:none} .sp-dl-tw:hover{border-color:var(--ink-4);color:var(--ink)} .sp-dl-tw:focus-visible{outline:2px solid var(--lm-accent,var(--ink));outline-offset:2px} .sp-dl-tw[aria-expanded="true"]{background:var(--surface-3);color:var(--ink)} .sp-dl-no{flex:none;white-space:nowrap;color:var(--ink-4)} /* Раскрытие — на месте, под фигурой: не тостом, не на другом экране и не в модальном слое. Ширину близнец держит сам: минимальная ширина живёт на коробке-обёртке, а не на полотне, иначе хост не прокручивается, а стирает цифры из клеток. */ /* Близнец на шестьдесят строк не должен вытеснять со страницы всё остальное: выше определённой высоты он листается внутри себя, а не растёт вниз. */ .sp-tw{margin-top:10px;min-width:0;max-width:100%;max-height:min(60vh,420px); overflow:auto;overscroll-behavior:contain} .sp-tw[hidden]{display:none} .sp-tw > .lm-tblwrap{overflow:visible} .sp-tw-cap{margin-top:6px;font-size:var(--lm-micro);color:var(--ink-4)} @media print{.sp-tw{display:block!important;max-height:none;overflow:visible}} /* на печати близнец раскрыт целиком: бумага не листается и не кликается */ /* ── 11.2а Паспорт данных: один вес на семью ─────────────────────────── (zai-review-datapassport) Было три разных веса у одной темы «откуда цифра»: тихая полоска свежести, тонированная панель «как считается» с рамкой и громкая плашка новой версии. Панель спорила с плашкой, и читатель не мог понять, что из этого важнее. Осталось: тихая строка источника (.sp-dl) — «как считается» раскрытием от неё, без панели и рамки, — и единственная громкая плашка новой версии, которая громкая ровно пока версия новая (сутки; дальше движок отдаёт .quiet). */ details.lm-method:not(.lm-warn){border:0;background:transparent;font-size:var(--lm-small)} details.lm-method:not(.lm-warn) summary{padding:5px 0;font-weight:var(--w-body,400);color:var(--ink-3)} details.lm-method:not(.lm-warn) summary:hover{color:var(--ink-2)} details.lm-method:not(.lm-warn) .body{padding:0 0 8px} details.lm-method:not(.lm-warn)[open]{border-bottom:1px solid var(--border-2)} /* Плашка версии, которая уже не новость: тот же текст, вес строки данных. */ .lm-verbar.quiet{background:transparent;border:0;padding:5px 0;color:var(--ink-4);font-size:var(--lm-micro)} .lm-verbar.quiet .lm-ic{color:var(--ink-4)} /* ── 11.3 Словарь легенд ─────────────────────────────────────────────── Три вида и ни одного между: «категории» — чипы без чисел; «состав» — абсолют и доля; «шкала» — рампа с засечкой. Вид выбирается по типу формы, а не по вкусу; одиночному ряду легенда не нужна вовсе — она объясняла бы то, что уже написано в заголовке. Геометрий свотча тоже больше не шесть: круг у категорий и состава (радиус приходит слоем цвета), полоса-рампа у шкалы. */ .lm-legend .it .sw{width:10px;height:10px;flex:none} .lm-legend .it .sw:has(.lm-ic){width:18px;height:18px} /* Свотч категории — круг одного размера, где бы легенда ни стояла: у графика, у графа слоёв, у полосы доступности, у матрицы доступа. Радиус приходит слоем цвета (§4), здесь только размер и то, что геометрия одна. Марка, которая повторяет ФОРМУ на фигуре (засечка, кольцо, штриховка «нет данных»), свотчем не считается: она показывает не категорию, а саму марку, и обязана выглядеть как на фигуре. */ .lm-k6g-lg > span > i,.lm-up .sw,.lm-access .sw{width:10px;height:10px;flex:none} .lm-k6g-lg > span,.lm-up .sw,.lm-access .sw{vertical-align:middle} .lm-legend.kind-cat{flex-direction:row;flex-wrap:wrap;gap:6px 14px} .lm-legend.kind-cat .it{display:inline-flex;align-items:center;gap:6px;font-size:var(--lm-small);color:var(--ink-3)} .lm-legend.kind-cat .it .v,.lm-legend.kind-cat .it .p{display:none} /* «категории» отвечают на «кто есть кто», а не «сколько» */ /* Шкала: рампа с засечкой. До 07.09.2026 её не было вовсе — тепловая таблица, календарь-год, треугольник когорт и матрица передач красили клетки, но не говорили, что означает насыщенность. */ .sp-scale{display:flex;align-items:center;gap:8px;min-width:0; --sp-scale-from:var(--surface-3); /* низ шкалы — тихая поверхность, а не белое: на тёмной теме белое было бы островом */ --sp-scale-to:var(--lm-emph); /* верх шкалы — акцент формы; движок подменяет его цветом ряда */ font-size:var(--lm-micro);color:var(--ink-4);font-variant-numeric:tabular-nums} .sp-scale{flex-wrap:wrap} .sp-scale .lb{color:var(--ink-3)} .sp-scale .ramp{position:relative;flex:1 1 60px;min-width:56px;max-width:220px;height:8px; border-radius:var(--r-micro,4px); background:linear-gradient(to right,var(--sp-scale-from),var(--sp-scale-to))} .sp-scale .ramp .tick{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink)} .sp-scale .ramp .tick::after{content:attr(data-label);position:absolute;left:50%;top:-14px; transform:translateX(-50%);white-space:nowrap;font-size:var(--lm-micro);color:var(--ink-3)} .sp-scale .na{display:inline-flex;align-items:center;gap:4px} .sp-scale .na i{width:10px;height:10px;border-radius:var(--r-micro,4px); background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--ink-4) 12%,var(--surface)) 0 4px,var(--surface) 4px 8px)} .sp-scale.with-tick{margin-top:14px} /* подпись засечки стоит над рампой — оставляем ей строку */ /* ── 11.4 Грамматика таблиц ──────────────────────────────────────────── Три пресета плотности, и реестр на сотни строк не приравнивается к таблице из трёх строк: у первого задача — вместить, у второй — быть прочитанной как факт. Числа вправо, единица — в заголовке столбца. Состояния наведения, фокуса и выбора одинаковы во всех трёх пресетах. */ .lm-table.roomy td{height:auto;padding-block:12px} .lm-table.roomy th{padding-block:10px} .lm-table th .u{margin-left:4px;font-weight:var(--w-body,400);color:var(--ink-4);text-transform:none;letter-spacing:0} .lm-table tbody tr:focus-within td{background:var(--surface-2)} .lm-table tbody tr[aria-selected="true"] td{background:var(--lm-accent-bg)} /* Один паттерн разворота строки: строка-родитель помечена, детали идут следующей строкой того же тела, а не поповером и не вторым экраном. */ .lm-table tr[data-open] > td:first-child{position:relative} .lm-table tr.sp-row-more td{background:var(--surface-2);white-space:normal} .lm-table tr.sp-row-more[hidden]{display:none} /* Близнец не спорит с фигурой над ним: он тише и плотнее. */ .sp-twin-t{font-size:12.5px} .sp-twin-t th{background:var(--surface);position:static} /* ── 11.5 Одна форма цитаты ──────────────────────────────────────────── Было три: светлая карточка `.lm-evid`, голый `blockquote` внутри разбора паттернов и тёмная плашка вставки в видео. Осталась одна — светлая карточка с кавычками, автором, меткой времени и входом в исходную запись. Тёмная остаётся только в кадре видео, где тёмен сам фон кадра, и это уже не вторая форма, а та же форма на носителе. Класс `.lm-evid-q` носит любой blockquote витрины: одно имя — одна форма. */ .lm-evid-q{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);quotes:'«' '»'} .lm-evid-q::before{content:open-quote;color:var(--ink-4)} .lm-evid-q::after{content:close-quote;color:var(--ink-4)} .lm-evid-q + .lm-evid-who,.lm-evid-who{margin-top:4px;font-size:var(--lm-micro);color:var(--ink-4)} /* Раскладка вставки-цитаты. Модификатор переименован из `.quote` в `.lm-evid-frame`: имя формы одно на систему, и на носителе оно то же. */ .lm-ins-body.lm-evid-frame{align-items:center;text-align:center} /* цитата внутри кадра видео: та же форма, тёмный носитель */ .lm-ins-body .lm-evid-q,.lm-slide .lm-evid-q{color:inherit} .lm-ins-body .lm-evid-q::before,.lm-ins-body .lm-evid-q::after, .lm-slide .lm-evid-q::before,.lm-slide .lm-evid-q::after{color:var(--lm-emph)} /* ── 11. КЛЮЧ ЯЩИКА С УСАМИ (§48.4, вид легенды «состав») ────────────── Замечание Дениса 07.09.2026: «тут сложно для понимания». Ящик с усами — единственная форма каталога, у которой геометрия сама по себе ничего не говорит: прямоугольник и две чёрточки надо знать. Ключ рисует те же марки в том же цвете, что фигура, — читателю остаётся сличить, а не вспомнить. */ .lm-boxkey{ display:flex;flex-wrap:wrap;gap:4px 16px; margin-top:8px;padding-top:8px; border-top:1px solid var(--border-2); color:var(--ink-3); } .lm-boxkey .it{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .lm-boxkey i{flex:none;display:inline-block} /* коробка — та же заливка и та же волосяная обводка, что у фигуры */ .lm-boxkey .k-box{ width:18px;height:11px;border-radius:var(--sp-fig-r,3px); background:color-mix(in srgb,var(--lm-emph) 22%,transparent); box-shadow:inset 0 0 0 1px var(--lm-emph); } /* медиана — несущая толщина ряда */ .lm-boxkey .k-med{width:18px;height:0;border-top:2px solid var(--lm-emph)} /* ус — вспомогательная толщина с засечкой на конце */ .lm-boxkey .k-wh{ width:18px;height:9px; border-left:1.5px solid var(--lm-emph); border-top:1.5px solid var(--lm-emph); border-bottom:1.5px solid var(--lm-emph); margin-left:8px; } .lm-boxn{margin-top:4px} /* На узкой карточке ключ становится столбиком: три строки читаются, а перенос посреди фразы «с 25-го по 75-й процентиль» — нет. */ @media (max-width:520px){ .lm-boxkey{flex-direction:column;gap:5px} .lm-boxkey .it{white-space:normal} } /* ── 12. МАЛЫЕ КРАТНЫЕ · сетка и подпись базы ────────────────────────── Замечание Дениса 07.09.2026 «тут красивее нужно». Три причины, по которым форма читалась неопрятно, и все три — раскладка, не стиль. */ /* 12.1 Число карточек задаёт число колонок. Раньше стоял auto-fill: при четырёх карточках на широком экране он ставил 3 + 1, и четвёртая висела в новом ряду одна — та же дыра ряда, которую чинил этап 2 в каталоге. Движок считает колонки от числа карточек и кладёт их в --sm-cols. */ .lm-sm{grid-template-columns:repeat(var(--sm-cols,2),minmax(0,1fr))} @media (max-width:420px){ .lm-sm{grid-template-columns:1fr} } /* 12.2 Дельта и её база — одна строка с настоящим зазором. Раньше между пилюлей и словом «к» стоял только перенос строки: предлог отрывался и висел в конце строки один. */ .lm-sm .dl{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-top:6px} .lm-sm .dl .vs{ font-size:var(--lm-micro);color:var(--ink-4); /* фраза «к прошлой неделе» не рвётся посередине: либо целиком в строке, либо целиком переносится под пилюлю */ white-space:nowrap; } /* 12.3 Спарклайн прижат к низу ячейки, а не висит между числом и подписью: у четырёх карточек в ряду глаз сравнивает формы, а не отступы. */ .lm-sm .cell{display:flex;flex-direction:column} .lm-sm .sp{margin-top:auto} /* ── 13. ГЕОМЕТРИЯ ВЫВОДА · чтобы читалось, а не только считалось ────── КАМЕРТОН §11 п.8: геометрия проверяется отдельно от данных. Здесь три правила, каждое закрывает целый класс находок детектора `bin/геометрия.js`, а не один экземпляр на одной странице. */ /* 13.1 Подвал фигуры: обозначения в ряд, фраза о пороге — в свою строку. Замечание Дениса 07.09.2026 по «Равному к равному»: «тут поплыло и наложилось». Легенда — ряд ОБОЗНАЧЕНИЙ: свотч плюс слово, 30–110 px каждое. Порог приходит в тот же ряд целой фразой — «засечка — 80 % · порог: банковская модель, 01.09» (570 px) или, когда автора нет, «разрыв от 5 % без автора не рисуется · задаёт: владелец контура» (440 px в пунктирной рамке — та самая «серая полоса»). В ряду со свотчами именно она решает, где ляжет перенос: свотчи уезжают под неё, источник со своим margin-left:auto прыгает на третью строку, а сама фраза на узком экране режется по правому краю. Фраза — не обозначение. Даём ей собственную строку под свотчами: перенос перестаёт зависеть от длины авторской подписи, а источник остаётся там, где его ищут глазами, — в конце ряда обозначений. */ .lm-d6-lg .thr,.lm-heat6-lg .thr,.lm-k6-lg .thr,.lm-k6g-lg .thr,.sp-diff-lg .thr{ flex:1 0 100%;order:1;min-width:0; /* внутри фразы перенос разрешён: лучше три строки, чем срез справа */ white-space:normal; } .lm-d6-lg .src,.lm-heat6-lg .src,.lm-k6-lg .src,.lm-k6g-lg .src,.sp-diff-lg .src{order:0} /* Пунктирная рамка «порог без автора» на своей строке замкнулась бы в полосу во всю ширину подвала — ровно то, что Денис и увидел. Тот же сигнал «этим порогом пользоваться нельзя» даёт пунктирная черта слева: это пометка на полях, а не плашка. */ .lm-d6-lg .thr.none,.lm-heat6-lg .thr.none,.lm-k6-lg .thr.none,.sp-diff-lg .thr.none{ border:0;border-left:2px dashed var(--border-3);border-radius:0; padding:1px 0 1px 8px;align-items:flex-start; } /* 13.2 Вынос выделенной строки не шире отступа карточки. Строку «мы» выносят за колонку, чтобы точка-марка встала слева от текста. Вынос — это отрицательный margin, и если он больше внутреннего отступа карточки, строка вылезает ЗА карточку целиком: фон, точка и левый край текста оказываются на полях. Просили 20 px, а карточка на экране до 820 px даёт всего 14 — строка уходила за край на 6 px. Берём вынос из того же токена, что и отступ карточки: сузилась карточка — сузился вынос. Специфичность на класс выше слоя цвета, который назначает саму марку: цвет остаётся за ним, геометрия — здесь. */ :root{--sp-row-bleed:var(--lm-card-pad,18px)} @media (max-width:820px){ :root{--sp-row-bleed:14px} } :root .lm-d6.lm-chart .row.ours, :root .lm-k6.lm-chart .row.ours{ padding-inline:var(--sp-row-bleed) 10px; margin-inline:calc(-1 * var(--sp-row-bleed)) -10px; } /* 13.3 Подпись карточки не режется многоточием на узком экране. `.lm-card-h .t .sub` — это строка данных: база, период, источник. На 390 px она обрезалась в среднем на 30 px, и первым уходил как раз источник — то есть ровно то, чем цифра подтверждается. Многоточие уместно в списке имён, где есть тултип и таблица; в строке среза его нет, поэтому там подпись переносится, а не отрезается. Правило одно, хотя строчка `white-space:nowrap;text-overflow:ellipsis` скопирована по местному