/* §30.3 · КАРТОЧКА С ТАБЛИЦЕЙ В УЗКОМ МЕСТЕ (Speculator)
   Дефект-образец: таблица «план и факт» шире карточки — обрезаются первая и последняя
   колонки, «%» отрывается от числа, шапка ломается в три строки. Причина: таблица
   держит свои минимумы, а обёртка режет вместо прокрутки и вместо перестроения. */

/* 1 · число и его единица не разрываются никогда */
.lm .lm-nb{white-space:nowrap}
.lm .lm-table td.num,.lm .lm-table th.num{white-space:nowrap}
.lm .lm-table td.num .lm-vs{display:block;margin-left:0;white-space:nowrap}

/* 2 · обёртка честно прокручивается, а не режет: тень-подсказка у края */
.lm .lm-tblwrap{overflow-x:auto;overscroll-behavior-x:contain;
  background:linear-gradient(to right,var(--surface) 30%,transparent),linear-gradient(to left,var(--surface) 30%,transparent) 100% 0,
             radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 12%,transparent),transparent),
             radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 12%,transparent),transparent) 100% 0;
  background-repeat:no-repeat;background-size:34px 100%,34px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll}
.lm .lm-tblwrap > table{min-width:max-content}

/* 3 · в узкой карточке таблица перестраивается в карточки-строки, а не прокручивается вбок */
@container (max-width: 560px){
  .lm .lm-table.lm-pf{min-width:0}
  .lm .lm-table.lm-pf thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .lm .lm-table.lm-pf tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--border-2)}
  .lm .lm-table.lm-pf tbody td{border:0;padding:0;min-width:0}
  .lm .lm-table.lm-pf tbody td:nth-child(1){grid-column:1;font-weight:var(--w-semibold);color:var(--ink)}
  .lm .lm-table.lm-pf tbody td:nth-child(2){grid-column:1/-1;order:3}
  .lm .lm-table.lm-pf tbody td:nth-child(3){grid-column:2;text-align:right}
  .lm .lm-table.lm-pf tbody td:nth-child(4){grid-column:2;order:2;text-align:right}
  .lm .lm-table.lm-pf tbody td:nth-child(3)::before{content:'доля потока · ';font-size:var(--lm-micro);color:var(--ink-4);font-weight:400}
  .lm .lm-table.lm-pf tbody td:nth-child(4)::before{content:'нагрузка в день · ';font-size:var(--lm-micro);color:var(--ink-4);font-weight:400}
}

/* 4 · шапка таблицы не ломается в три строки: подпись переносится по словам, иконка не отрывается */
.lm .lm-table th{white-space:normal;text-wrap:balance;line-height:1.25} .lm .lm-table th .lm-ic{vertical-align:-2px;margin-right:4px}

/* 5 · карточка не даёт контенту растянуть себя: минимум по содержимому снимается вглубь */
.lm .lm-card,.lm .lm-card-b,.lm .lm-card-b > *{min-width:0}
.lm .lm-card-b{container-type:inline-size}

/* 6 · KPI-плитка в мелкой сетке: подпись не режется многоточием при живом месте,
   а «к прошлой неделе» не рвётся на «к» + перенос (осиротевший предлог) */
.lm .lm-kpi{min-width:0}
.lm .lm-kpi-h{align-items:flex-start}
.lm .lm-kpi-h .lm-truncate{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-overflow:clip;line-height:1.25}
.lm .lm-kpi-d{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:min-content}
.lm .lm-kpi-d .lm-vs{white-space:nowrap}
@container (max-width: 180px){
  .lm .lm-kpi{grid-template-columns:minmax(0,1fr)}
  .lm .lm-kpi-h .lm-truncate{-webkit-line-clamp:3;line-clamp:3}
  .lm .lm-kpi-v,.lm .lm-kpi-d{grid-column:1}
  .lm .lm-kpi-d{grid-row:3;align-items:flex-start}
}
/* спарклайн и график в плитке тянутся на всю ширину, а не оставляют поле справа */
.lm .lm-kpi .lm-chart,.lm .lm-kpi .lm-kpi-spark,.lm .lm-kpi svg{width:100%}

/* §42в · фигура тянется, штрих — нет: толщина линий и пунктир держатся в экранных
   пикселях, поэтому на широкой карточке линия не толстеет, а на узкой не исчезает */
.lm svg[data-fit-k] path,.lm svg[data-fit-k] line,.lm svg[data-fit-k] polyline,
.lm svg[data-fit-k] rect,.lm svg[data-fit-k] circle,.lm svg[data-fit-k] ellipse{vector-effect:non-scaling-stroke}

/* §44 · текст внутри фигуры не обводится: обводка съедает глифы и на растянутой
   фигуре превращается в кашу. Ореол — только осознанный, через paint-order. */
.lm svg text{stroke:none;paint-order:stroke fill markers}
.lm svg text.halo{stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke;paint-order:stroke fill markers}
.lm svg text{text-rendering:optimizeLegibility;shape-rendering:auto}

/* §45а · МЕТКА-ЗНАЧЕНИЕ (`lm-mk`): подпись и её значение одним атомом.
   Заменяет капсулы с толстой цветной обводкой: рамки нет, есть тихая подложка,
   ось различается точкой слева, а не цветом контура; значение — тем же кеглем,
   но плотнее. Цвет второй канал, слово первое (§43, КАМЕРТОН A1). */
.lm .lm-mk{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;min-width:0;
  padding:3px 9px;border-radius:8px;background:var(--surface-2);
  font-size:var(--lm-small);line-height:1.35;color:var(--ink-3);white-space:nowrap}
.lm .lm-mk::before{content:'';flex:none;align-self:center;width:5px;height:5px;border-radius:50%;background:var(--mk,var(--border-3))}
.lm .lm-mk .k{color:var(--ink-4);min-width:0;overflow:hidden;text-overflow:ellipsis}
.lm .lm-mk b{color:var(--ink);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.lm .lm-mk.t1{--mk:var(--warm)} .lm .lm-mk.t2{--mk:var(--ok)} .lm .lm-mk.t3{--mk:var(--lm-emph)}
.lm .lm-mk.lg{padding:2px 8px;font-size:var(--lm-micro)}
@media (hover:hover){.lm .lm-mk:hover{background:var(--surface-3)}}
@container (max-width: 420px){
  .lm .lm-mk{white-space:normal} .lm .lm-mk .k{white-space:normal}
}
/* ряд меток дышит и переносится по элементам, а не режет их */
.lm .lm-f2 .ax{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-width:0}
.lm .lm-f2 .t b{letter-spacing:-.005em}

/* §45б · ОДИН КОНТУР НА ЭЛЕМЕНТ УПРАВЛЕНИЯ.
   Кнопка-иконка по умолчанию без рамки: рамка появляется только при наведении и
   фокусе. Иначе рядом с сегментным контролом (у него свой контур) получается
   «капсула в капсуле» — два кольца вокруг одной иконки. Рамка возвращается
   явным классом .framed там, где кнопка стоит одна на пустом поле. */
.lm .lm-ibtn{border-color:transparent;background:transparent;box-shadow:none}
@media (hover:hover){.lm .lm-ibtn:hover{background:var(--surface-2);border-color:var(--border-2)}}
.lm .lm-ibtn:focus-visible{border-color:transparent}
.lm .lm-ibtn.framed{border-color:var(--border);background:var(--surface)}
.lm .lm-ibtn.on,.lm .lm-ibtn[aria-pressed="true"]{background:var(--lm-accent-bg);border-color:transparent;color:var(--ink)}
/* внутри контейнера с собственным контуром вложенные контролы рамок не имеют */
.lm .lm-seg .lm-ibtn,.lm .lm-seg .lm-btn,.lm .lm-toolbar .lm-ibtn{border-color:transparent;box-shadow:none}
/* ряд действий: одинаковая высота и один ритм у сегментов и кнопок-иконок */
.lm .acts,.lm .lm-row.acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.lm .acts .lm-seg{flex:0 1 auto}
/* «есть комментарий» — точка на иконке, а не вторая рамка вокруг неё */
.lm .lm-ibtn.has{position:relative;border-color:transparent;background:transparent}
.lm .lm-ibtn.has::after{content:'';position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--lm-emph);box-shadow:0 0 0 2px var(--surface)}
@media (hover:hover){.lm .lm-ibtn.has:hover{background:var(--surface-2)}}
/* узкая карточка: ряд решений не режет подписи — сегмент прокручивается целиком */
.lm .acts .lm-seg{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.lm .acts .lm-seg::-webkit-scrollbar{display:none}
@container (max-width: 460px){
  .lm .acts{gap:6px}
  /* короткие решения переносятся на вторую строку, а не уезжают в прокрутку:
     обрезанное слово читается как поломка, перенос — как норма */
  .lm .acts .lm-seg{flex-wrap:wrap;height:auto;overflow:visible;row-gap:2px}
  .lm .acts .lm-seg button{padding:0 10px}
  .lm .acts .lm-seg.lm-sliding>.pill{display:none}
  .lm .acts .lm-seg.lm-sliding>button.on{background:var(--surface);box-shadow:var(--shadow)}
}

/* §45в · ВОРОНКА: подпись читается всегда.
   Внутри полосы — только если помещается целиком; иначе уходит вправо на поле
   и красится чернилами. Ореола нет: обводка по белому на цветной заливке даёт кашу.
   Цвет ступеней — один тон, светлеющий книзу (§43): радуга на данных запрещена. */
.lm .lm-chart .chart-funnel-lbl{stroke:none;paint-order:normal;font-weight:var(--w-semibold);fill:var(--surface)}
.lm .lm-chart .chart-funnel-lbl.out{fill:var(--ink);text-anchor:start}
.lm .lm-chart .chart-funnel-bar{fill:var(--lm-emph);fill-opacity:1}
.lm .lm-chart .chart-funnel-bar:nth-of-type(1){fill-opacity:1}
.lm .lm-chart .chart-funnel-bar:nth-of-type(2){fill-opacity:.86}
.lm .lm-chart .chart-funnel-bar:nth-of-type(3){fill-opacity:.72}
.lm .lm-chart .chart-funnel-bar:nth-of-type(4){fill-opacity:.58}
.lm .lm-chart .chart-funnel-bar:nth-of-type(5){fill-opacity:.46}
.lm .lm-chart .chart-funnel-bar:nth-of-type(n+6){fill-opacity:.38}

/* ══════════════════════════════════════════════════════════════════════════
   §46 · КАРТОЧКА КАТАЛОГА — этапы 1–2 докрутки (07.09.2026)

   Одна карточка описания на четыре страницы каталога: speculator.html,
   идеи.html, ревью-zai.html, ревью-fable.html. Раньше у них был общий
   скелет и четыре редакции правил в инлайновых <style> — карточка читалась
   как четыре разные. Здесь она одна.

   Три зоны ритма и ничего между ними: ЗАГОЛОВОК (номер-адрес, имя, чип
   вызова под именем) · КОНТРАКТ (четыре строки в неизменном порядке) ·
   ПРИМЕР (живая форма и подвал словарём). Ряд не выравнивается по высоте:
   карточка своей высоты, поэтому пустоты под подвалом не бывает.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · СЕТКА. Ряд складывается без дыр: ширины считает упаковщик страницы
   (наборы 12 · 6+6 · 4+4+4 · 8+4), остаток ряда достаётся последней карточке.
   align-items:start — карточки не растягиваются до общей высоты ряда. */
.lm .sec > .lm-grid{align-items:start;grid-auto-flow:row dense}
.lm .sec > .lm-grid > .ex{display:flex;min-width:0}
.lm .sec > .lm-grid > .ex > .lm-card{flex:1;width:100%;display:flex;flex-direction:column}
.lm .ex.hide{display:none}
.lm .ex .lm-card{container-type:inline-size}
/* последняя карточка нечётной группы забирает остаток, когда колонок осталось две */
@media (max-width:1100px){ .lm .sec > .lm-grid > .ex:nth-child(odd):last-child{grid-column:span 12} }

/* 2 · ЗОНА «ЗАГОЛОВОК». Одна раскладка на все карточки: номер и имя в строку,
   чип вызова — второй строкой под именем (решение §8 п.2). Правого столбца в
   шапке нет, поэтому длина вызова на высоту шапки не влияет. */
.lm .ex .lm-card-h{display:block;padding:12px var(--lm-card-pad) 0;min-height:0}
.lm .ex .lm-card-h .t{display:block;min-width:0}
.lm .ex .lm-card-h .t h3{display:flex;align-items:baseline;gap:8px;margin:0;
  font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.lm .ex .lm-card-h .t h3 .num{flex:none;min-width:34px;margin:0;font-family:var(--font-mono);
  font-size:11.5px;font-weight:500;color:var(--ink-4);text-decoration:none}
.lm .ex .lm-card-h .t h3 .num:hover{color:var(--lm-accent)}
.lm .ex .lm-card-h .t h3 .nm{min-width:0;text-wrap:balance}
/* подпись группы снята из потока: внутри секции группа уже названа заголовком,
   боковой навигацией и липким указателем. Возвращается только в поиске, где
   карточка читается вне своей секции (риск из этапа 1 закрыт здесь). */
.lm .ex .lm-card-h .t .sub{display:none;margin-top:4px;font-size:var(--lm-small);
  color:var(--ink-4);line-height:1.3;white-space:normal}
.lm.q .ex .lm-card-h .t .sub{display:block}
/* чип второй строки — вызов, приоритет, метка: всегда на одном месте */
.lm .ex .lm-card-h > :not(.t){margin:6px 0 0;vertical-align:top}
.lm .ex .api{display:inline-block;font-family:var(--font-mono);font-size:var(--lm-micro);
  color:var(--ink-3);background:var(--surface-2);padding:2px 7px;border-radius:var(--r-xs);
  max-width:100%;overflow-wrap:anywhere;line-height:1.5}

/* 3 · ЗОНА «КОНТРАКТ». Одна грамматика листа: метка капителью НАД текстом,
   четыре строки в неизменном порядке, без тонированной панели и без рамки —
   внутри карточки остаётся два контура (сама карточка и сцена примера).
   «Когда не применять» отличается знаком circle-x, а не более серым текстом:
   серый читается как «менее важно», знак — как «другая роль строки». */
.lm .ex .meta{display:grid;gap:6px;margin:10px 0 0;padding:0;border:0;background:none}
.lm .ex .meta .r{display:block}
.lm .ex .meta dt{display:flex;align-items:center;gap:5px;margin:0 0 1px;line-height:1.3;
  font-size:var(--lm-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.lm .ex .meta dt .lm-ic{width:14px;height:14px;flex:none}
.lm .ex .meta dd{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.5;text-wrap:pretty}

/* 4 · ЗОНА «ПРИМЕР». Отделена от контракта волосяной линией. Воздух остатка
   достаётся примеру, а не подвалу: host тянется, подвал прижат книзу. */
.lm .ex .lm-card-b{display:flex;flex-direction:column;flex:1;min-width:0;
  padding:0 var(--lm-card-pad) var(--lm-card-pad)}
.lm .ex .host{min-width:0;flex:1;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-2)}
.lm .ex .host > *{max-width:100%}
/* форма, которая всё равно шире карточки, прокручивается сама — это последний
   режим адаптива, а не первый: тень у края показывает, что справа есть ещё */
.lm .ex .host > .wide{overflow-x:auto;overscroll-behavior-x:contain;
  background:linear-gradient(to right,var(--surface) 30%,transparent),linear-gradient(to left,var(--surface) 30%,transparent) 100% 0,
             radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 10%,transparent),transparent),
             radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 10%,transparent),transparent) 100% 0;
  background-repeat:no-repeat;background-size:28px 100%,28px 100%,10px 100%,10px 100%;background-attachment:local,local,scroll,scroll}
.lm .ex .host svg,.lm .ex .host .lm-tblwrap{max-width:100%}
/* лестница высот примера S · M · L · XL: держит место до отложенного рендера,
   чтобы якорь не уезжал, и задаёт один ритм фигурам одного ряда */
.lm .ex .host:empty{min-height:190px}
.lm .ex[data-h="s"] .host:empty{min-height:120px}
.lm .ex[data-h="l"] .host:empty{min-height:260px}
.lm .ex[data-h="xl"] .host:empty{min-height:380px}
.lm .ex .host:empty::before{content:'';display:block}

/* 5 · ПОДВАЛ — один словарь. Ключи в неизменном порядке: близнец · состояния ·
   тултип · движение · носитель; ручная строка допускается только новым ключом
   в хвосте, а не перестановкой существующих. */
.lm .ex .foot{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:auto;padding-top:8px;
  border-top:1px solid var(--border-2);font-size:11px;line-height:1.5;color:var(--ink-4)}
.lm .ex .foot .ft{display:inline-flex;align-items:baseline;gap:5px;min-width:0;max-width:100%}
.lm .ex .foot .ft em{flex:none;font-style:normal;font-size:var(--lm-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.lm .ex .foot .ft > span{color:var(--ink-3);min-width:0}

/* 6 · КАДР НОСИТЕЛЯ в масштабе колонки. Кадр 1920×1080 не влезает в карточку —
   раньше он её и не спрашивал, а просто вылезал наружу. Теперь кадр стоит в
   рамке своего соотношения и уменьшен по ширине колонки; натуральный размер —
   по кнопке, сценой поверх страницы. Подпись называет обе величины. */
.lm .ins-frame{position:relative;width:100%;overflow:hidden;background:var(--bg);
  border:1px solid var(--border-2);border-radius:var(--r-card)}
.lm .ins-frame > .ins-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.lm .ins-cap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;
  font-size:var(--lm-micro);color:var(--ink-4)}
.lm .ins-cap .lm-btn{flex:none}
.lm .lm-modal.ins{width:min(96vw,1280px);max-width:none}
.lm .lm-modal.ins .mb{padding:16px 20px 20px}
.lm .lm-modal.ins .ins-frame{border-radius:var(--r-sm)}
/* 6а · подпись масштаба у экспоната-мокапа: тот же тихий тон, что у подписи
   кадра. Читатель должен знать, что смотрит уменьшенный носитель, а не экран
   в натуральную величину — иначе он сверит по нему кегль и плотность. */
.lm .ex .host > .sp-exh{margin-top:6px;color:var(--ink-4)}

/* 7 · СЛУЖЕБНЫЙ ПЕРЕКЛЮЧАТЕЛЬ ЧЕТЫРЁХ СОСТОЯНИЙ (этап 0, gpt-review-states).
   Стоит в липкой шапке одной строкой с крошкой, пресетом и темой — седьмого
   слоя навигации не появляется. Пока показано состояние, host держит высоту
   живого примера, поэтому соседние карточки не двигаются. */
.lm .cat-top .lm-seg.states button{white-space:nowrap}
.lm .ex .host{position:relative}
.lm .ex .host[data-shown-state] > :not(.st-over){visibility:hidden}
.lm .ex .host > .st-over{position:absolute;inset:0;display:flex;overflow:hidden;background:var(--surface)}
.lm .ex .host > .st-over > .lm-state{flex:1;min-height:0;padding:18px 16px}