/* ops-field.css — ЛК как одно поле из вложенных виджетов (прототип).
   Поле и блок укладывают узлы flex-строками: не-последний фиксируется по доле
   колонок, последний растягивается на остаток → пустых слотов не бывает.
   Виджеты рисуются классами .ws-* из ops-workspace.css; здесь — только .of-*. */

.of {
  --of-u: 8px;
  --of-row: 132px;
  --of-gap: 16px;
  --ws-scale: 1;            /* чтобы ws-* примитивы считали свои calc-размеры */
  /* шкала радиусов — три ступени вместо девяти (#3 aesthetic) */
  --of-r-card: 12px;
  --of-r-ctl: 8px;
  --of-r-pill: 999px;
  font-size: 15px;
}

/* видимый фокус на всех контролах (#8 thorough / a11y) — фокуса не было вовсе */
.of :focus-visible,
.of-menu :focus-visible, .of-pop :focus-visible, .of-modal :focus-visible {
  outline: 2px solid var(--primary, #1a1714);
  outline-offset: 2px;
}
/* самый мелкий тип не ниже 11px — была подпись 6.8px (#3/#8) */
.of .ws-metric small { font-size: 11px !important; }

/* ── тулбар ── */
.of-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--card) 74%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--border-subtle); border-radius: 12px;
}
.of-bar-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.of-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--secondary); border-radius: 8px; }
.of-seg button {
  border: none; background: none; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: var(--text-tertiary); padding: 6px 12px;
}
.of-seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); }
.of-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9999px;
  border: 1px solid var(--border-subtle); background: var(--card); color: var(--text-secondary);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.of-btn:hover { color: var(--foreground); }
.of-btn--primary { background: var(--ink, #1a1714); color: #fff; border-color: transparent; }
.of-spacer { flex: 1; }

/* ── холст: сетка 6 колонок — dense заполняет дыры слева ── */
.of-field {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--of-gap);
  align-items: start;
  grid-auto-flow: dense;
  min-width: 0;
  max-width: 100%;
}
.hub .of { min-width: 0; max-width: 100%; }
.of-row { display: contents; }

.of-node { min-width: 0; position: relative; transition: opacity .15s; }
.of-node.is-dragging, .of-cell.is-dragging { opacity: .4; pointer-events: none; }
.of-empty { grid-column: 1 / -1; }

/* слот вставки при DnD */
.of-drop-before::before,
.of-drop-after::after {
  content: '';
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border-radius: 3px;
  background: var(--primary, #1a1714);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a1714) 22%, transparent);
}
.of-drop-before::before {
  left: -6px; top: 2px; bottom: 2px; width: 4px;
}
.of-drop-after::after {
  right: -6px; top: 2px; bottom: 2px; width: 4px;
}
.of-cell { position: relative; }
.of-field.is-dragging .of-node:not(.is-dragging),
.of-block-body.is-dragging .of-cell:not(.is-dragging) {
  outline: 1.5px dashed color-mix(in srgb, var(--primary, #1a1714) 18%, transparent);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ── свободный виджет ── */
.of-w {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 0;
  padding: 20px; border-radius: var(--lk-r-card, 22px);
  /* белая карточка на кремовом холсте: мягкая размытая тень вместо контурной
     линии — рамка почти белая и работает как блик, а не как обводка. */
  box-shadow: var(--lk-shadow-card, 0 13px 25px rgba(70,75,86,.055));
  /* через токен --card: в тёмной теме подложка остаётся тёмной */
  background: var(--ws-card-bg, color-mix(in srgb, var(--card) 90%, transparent));
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  transition: box-shadow .22s ease-out, transform .22s ease-out;
  border: 1px solid var(--ws-line, var(--border-subtle));
  color: var(--ws-fg, var(--foreground));
  container-type: inline-size;
}
/* наведение — карточка чуть всплывает (эталонный приём темы) */
.of-w:hover {
  transform: translateY(-2px);
  box-shadow: var(--lk-shadow-card-hover, 0 17px 32px rgba(70,75,86,.09));
}
/* во время перетаскивания подъём не нужен — иначе грид «дышит» под курсором */
.of.is-dragging .of-w:hover { transform: none; }
/* светлая тема: рамка почти белая — работает бликом, а не обводкой */
html:not([data-theme="dark"]) .of-w { border-color: rgba(255, 255, 255, .9); }
html:not([data-theme="dark"]) .of-block { border-color: rgba(255, 255, 255, .8); }
[data-theme="dark"] .of-w { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3); }
[data-theme="dark"] .of-w:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.45);
}

/* ── группа (блок) ── */
.of-block {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  padding: 18px; border-radius: var(--lk-r-group, 26px);
  box-shadow: 0 8px 22px rgba(70, 75, 86, .04);
  background: var(--ws-card-bg, color-mix(in srgb, var(--card) 55%, transparent));
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid var(--ws-line, var(--border-subtle));
  color: var(--ws-fg, var(--foreground));
}
.of-w[data-color-mode="outline"],
.of-block[data-color-mode="outline"] {
  --ws-card-bg: initial;
  background: color-mix(in srgb, var(--rp-surface, var(--card)) 72%, transparent);
  border: 1.5px solid var(--ws-outline, var(--ws-line, var(--border-subtle)));
}
.of-block[data-color-mode="outline"] {
  background: color-mix(in srgb, var(--rp-surface, var(--card)) 60%, transparent);
}

/* Тёмная тема: пастельная заливка темы (cardVars смешивает цвет со СВЕТЛЫМ
   холстом) давала мутное светлое пятно на тёмном фоне. Здесь тема группы —
   цветной контур + лёгкий тон на тёмной подложке, текст обычными токенами. */
[data-theme="dark"] .of-block[data-color]:not([data-color="default"]) {
  background:
    color-mix(in srgb, var(--ws-outline, var(--card)) 12%, color-mix(in srgb, var(--card) 62%, transparent));
  border-color: color-mix(in srgb, var(--ws-outline, var(--border-subtle)) 52%, transparent);
  --ws-fg: var(--foreground) !important;
  --ws-fg-sub: var(--text-secondary) !important;
}

/* Корешок секции: цветная полоса слева — тема читается даже при беглом
   скролле и в свёрнутом виде. Цвет не единственный признак темы: рядом
   всегда название группы (a11y: color-not-only). */
.of-block[data-color]:not([data-color="default"]) {
  border-left-width: 3px;
  border-left-color: var(--ws-outline, var(--border-subtle));
}

.of-block-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-shrink: 0;
}
/* тонкий разделитель под шапкой группы в тон темы — отделяет заголовок от сетки */
.of-block[data-color]:not([data-color="default"]) > .of-block-head {
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ws-outline, var(--border-subtle)) 26%, transparent);
}
/* ручка DnD: маленький маркер, крупная зона клика через padding, без hover-«таблетки» */
.of-grip {
  border: none; background: none; padding: 0; margin: 0;
  color: var(--ws-fg-sub, var(--text-tertiary));
  cursor: grab; display: grid; place-items: center;
  flex-shrink: 0; touch-action: none; line-height: 0;
  transition: opacity .15s ease-out, color .15s ease-out;
}
.of-grip:active { cursor: grabbing; }
.of-grip.is-locked { cursor: default; opacity: .35; pointer-events: none; }
.of-grip--corner {
  position: absolute; top: 4px; right: 4px; z-index: 5;
  width: 28px; height: 28px; border-radius: 8px;
  opacity: .22; color: var(--ws-fg-sub, var(--text-tertiary));
}
.of-block:hover .of-grip--corner { opacity: .55; }
.of-grip--corner:hover,
.of-grip--corner:focus-visible {
  opacity: .9; color: var(--ws-fg, var(--foreground));
  background: color-mix(in srgb, var(--ws-track, var(--secondary)) 70%, transparent);
  outline: none;
}
.of-grip--tool {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  border-radius: 8px; opacity: .7; padding: 0; margin: 0;
  box-sizing: border-box;
}
.of-grip--tool:hover,
.of-grip--tool:focus-visible {
  opacity: 1; color: var(--ws-fg, var(--foreground));
  background: var(--ws-track, var(--secondary));
}
@media (hover: none) {
  .of-grip--corner { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .of-grip { transition: none; }
}

/* слот свободных колонок: только в дыре, клик → меню виджетов */
.of-freeslot {
  min-height: 56px;
  align-self: start;
  border: 1px dashed color-mix(in srgb, var(--primary, #1a1714) 16%, var(--border-subtle));
  border-radius: var(--lk-r-card, 22px);
  background: transparent;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; font-family: inherit;
  color: var(--text-tertiary);
  opacity: .72;
  transition: border-color .15s ease-out, color .15s ease-out, background .15s ease-out, box-shadow .15s ease-out, opacity .15s ease-out;
}
.of-freeslot--in { min-height: 52px; }
.of-freeslot-plus {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--foreground);
}
.of-freeslot-lbl { font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.of-freeslot:hover, .of-freeslot:focus-visible {
  border-color: var(--primary, #1a1714); color: var(--foreground);
  background: color-mix(in srgb, var(--primary, #1a1714) 6%, transparent);
  opacity: 1;
  outline: none;
}
.of-freeslot:hover .of-freeslot-plus, .of-freeslot:focus-visible .of-freeslot-plus {
  background: var(--primary, #1a1714); color: var(--primary-foreground, #fff);
}
.of-freeslot.is-hot {
  border-style: solid; border-width: 2px; border-color: var(--primary, #1a1714); color: var(--foreground);
  background: color-mix(in srgb, var(--primary, #1a1714) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a1714) 26%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primary, #1a1714) 20%, transparent);
  opacity: 1;
}
.of-freeslot.is-hot .of-freeslot-plus {
  background: var(--primary, #1a1714); color: var(--primary-foreground, #fff); border-color: transparent;
}
.of-freeslot.is-hot .of-freeslot-lbl { font-weight: 700; }
.of-field.is-dragging .of-freeslot,
.of-block-body.is-dragging .of-freeslot,
.of.is-dragging .of-freeslot {
  pointer-events: auto;
  z-index: 6;
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  .of-freeslot { transition: none; }
}
/* KSH-366: сворачивание блока-зоны */
.of-block-fold { flex-shrink: 0; margin-right: 2px; color: var(--text-secondary, var(--foreground)); }
.of-block-fold:hover { color: var(--foreground); }
.of-block.is-collapsed { padding-bottom: 0; }
.of-block-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ws-fg, var(--foreground)); background: none; border: none; font-family: inherit; padding: 2px 4px; border-radius: 6px; }
.of-block-name:focus { outline: none; background: var(--ws-track, var(--secondary)); }
.of-block-name[readonly] { cursor: inherit; }

.of-tools {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  padding: 2px; border-radius: 9px;
  background: var(--ws-card-bg, var(--card));
  border: 1px solid var(--border-subtle);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
/* тулбар группы — скрыт до наведения на блок */
.of-block:hover > .of-block-head > .of-tools, .of-tools:focus-within { opacity: 1; pointer-events: auto; }
.of-tools .of-icon,
.of-tools .of-grip--tool {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
}
.of-icon {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  border-radius: 8px; border: none; background: none; padding: 0; margin: 0;
  color: var(--ws-fg-sub, var(--text-tertiary)); cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0; line-height: 0; box-sizing: border-box;
}
.of-icon > span,
.of-icon svg,
.of-tools .of-icon > span,
.of-tools .of-icon svg {
  display: block; width: 14px; height: 14px; margin: 0; flex-shrink: 0;
}
.of-icon:hover { background: var(--ws-track, var(--secondary)); color: var(--ws-fg, var(--foreground)); }
.of-icon.on { color: var(--ws-fg, var(--foreground)); background: var(--ws-track, var(--secondary)); }

/* хром свободного виджета — в правом верхнем углу, скрыт до наведения на виджет.
   Геометрия из референса темы (.widget-controls): высокая пилюля, крупные
   кнопки со своим скруглением, мягкая тень вместо жёсткой рамки. */
.of-w-tools {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 2px;
  height: 40px; padding: 4px; border-radius: 13px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 10px rgba(63, 70, 84, .04);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
html:not([data-theme="dark"]) .of-w-tools { background: rgba(255, 255, 255, .86); border-color: var(--lk-line, #e5e8ed); }
.of-w-tools .of-icon,
.of-w-tools .of-grip--tool { width: 33px; height: 30px; min-width: 33px; min-height: 30px; border-radius: 9px; }
.of-w-tools .of-icon:hover,
.of-w-tools .of-grip--tool:hover { background: #eff1f4; color: var(--lk-ink, #252832); }
.of-w-tools .of-icon,
.of-w-tools .of-grip--tool {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
}
.of-w-tools .of-icon > span,
.of-w-tools .of-icon svg,
.of-w-tools .of-grip--tool > span,
.of-w-tools .of-grip--tool svg {
  display: block; width: 14px; height: 14px; margin: 0; flex-shrink: 0;
}
.of-w:hover .of-w-tools, .of-w-tools:focus-within { opacity: 1; pointer-events: auto; }
@media (hover:none){ .of-w-tools, .of-tools { opacity: 1; pointer-events: auto; } }
/* заголовок карточки: 70% непрозрачности — тише крупной метрики, но выше AA */
.of-w-title { font-size: 25px; font-weight: 600; letter-spacing: -.055em; margin-bottom: 8px; color: color-mix(in srgb, var(--ws-fg, var(--foreground)) 70%, transparent); overflow: hidden; padding-right: 100px; display: flex; align-items: flex-start; min-width: 0; }
/* крупный кегль не влезает в узкую карточку одной строкой — даём перенос до
   двух строк (в фикс-высоте остаётся одна строка, там места нет) */
.of-w-title-t {
  min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.18; overflow-wrap: anywhere;
}
.of-w--fixed .of-w-title-t { display: block; white-space: nowrap; text-overflow: ellipsis; }
/* карточка фикс-высоты (1 ряд, 132px): крупный кегль съедал тело и включал
   скроллбар — здесь заголовок компактнее (паддинг правится ниже, после
   правила .of-cell .of-w, иначе оно перебивает по порядку) */
.of-w--fixed .of-w-title { font-size: 21px; line-height: 1.15; margin-bottom: 6px; }
.of-w-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* KSH-364: вспомогательный текст (sub/оси/легенда/статы) на дефолтных карточках —
   контраст WCAG AA. Раньше падал на --text-tertiary (~2.6:1). Цветные карточки
   задают свой --ws-fg-sub инлайном (colorStyle) и этот дефолт не трогает. */
.of-w, .lk-wgt, .lk-kpi { --ws-fg-sub: #656c7c; }
html[data-theme="dark"] .of-w, html[data-theme="dark"] .lk-wgt, html[data-theme="dark"] .lk-kpi { --ws-fg-sub: #a9b0bd; }
/* KSH-360: в короткой карточке (fixedH:1) блок метрики ужимается, а не выдавливает
   спарклайн за нижний край. Спарк с flex-shrink:0 остаётся в кадре; клипается метрика. */
.of-w .ws-mstack > div:first-child { min-height: 0; overflow: hidden; }

.of-lock { position: absolute; top: 8px; left: 10px; font-size: 11px; color: var(--ws-fg-sub, var(--text-tertiary)); display: inline-flex; align-items: center; gap: 3px; opacity: .7; z-index: 2; }

/* тело блока — сетка по ширине группы (node.w колонок) */
.of-block-body {
  display: grid;
  gap: 10px; min-height: 0; flex: 1;
  grid-auto-flow: dense;
  align-items: stretch;
  color: var(--foreground);
  --ws-card-bg: initial;
  --ws-fg: initial;
  --ws-fg-sub: initial;
  --ws-line: initial;
  --ws-track: initial;
}
.of-block-row { display: contents; }
.of-cell { min-width: 0; display: flex; }

/* KSH-367 — masonry-упаковка группы: ширины прежние (span по колонкам), высота
   через grid-row span из измеренной высоты (FieldKit.useMasonry). Мелкий трек +
   dense убирают «воздух» под короткими виджетами. Внутренний контент — натуральной
   высоты (не flex-растяжка), иначе замер упрётся в высоту трека. */
.of-block-body.is-masonry {
  grid-auto-rows: 8px;
  grid-auto-flow: row dense;
  align-items: start;
}
.of-block-body.is-masonry > .of-cell { align-self: start; }
.of-block-body.is-masonry > .of-cell > * { flex: 0 0 auto; height: auto; min-height: 0; }
.of-block-body.is-masonry > .of-freeslot { align-self: start; grid-row-end: span 7; }
.of-cell .of-w { border-radius: var(--lk-r-card, 22px); padding: 20px; flex: 1; width: 100%; min-height: 0; }
/* фикс-высота: просторный паддинг темы не помещается в 132px — компактнее */
.of-cell .of-w--fixed, .of-w--fixed { padding: 14px; }
.of-w[data-h] { min-height: var(--of-row); }
.of-w.of-w--fixed { overflow: hidden; }
.of-w.of-w--fixed .of-w-body { overflow-y: auto; overflow-x: hidden; }

/* «+» слот */
.of-add {
  min-height: var(--of-row); border: 1.5px dashed var(--c-subtle, #cfc7bb); border-radius: var(--lk-r-card, 22px);
  background: color-mix(in srgb, var(--primary, #1a1714) 3%, transparent);
  display: grid; place-items: center; cursor: pointer; color: var(--text-tertiary);
}
.of-add:hover { border-color: var(--primary, #1a1714); color: var(--foreground); }
.of-add--field { min-height: 88px; }
.of-add--slot { min-height: var(--of-row); }
/* пустая группа как drop-слот (спека §5): тот же hot-визуал, что у .of-freeslot.is-hot */
.of-add--slot.is-hot {
  border-style: solid; border-width: 2px; border-color: var(--primary, #1a1714); color: var(--foreground);
  background: color-mix(in srgb, var(--primary, #1a1714) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a1714) 26%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primary, #1a1714) 20%, transparent);
}
.of-add-inline { align-self: flex-start; margin-top: 2px; }
.of-add small { display: block; font-size: 11px; margin-top: 4px; }

/* ── меню каталога ── */
.of-menu {
  position: fixed; z-index: 500; width: 288px; max-height: 60vh; overflow-y: auto;
  padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 44px rgba(20,18,14,.18); color: var(--foreground);
}
.of-menu-head { padding: 4px 10px 8px; border-bottom: 1px solid var(--border-subtle); margin: 0 2px 8px; }
.of-menu-lbl { font-size: 12px; font-weight: 800; color: var(--foreground); }
.of-menu-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.of-menu-search {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 8px;
  padding: 7px 9px; border-radius: 9px; border: 1px solid var(--border-subtle); background: var(--secondary); color: var(--text-tertiary);
}
.of-menu-search input {
  border: none; outline: none; background: none; flex: 1; min-width: 0;
  font-family: inherit; font-size: 12.5px; color: var(--foreground);
}
.of-menu-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); padding: 9px 10px 5px; }
.of-menu-i { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--foreground); text-align: left; }
.of-menu-i--quick { background: color-mix(in srgb, var(--primary, #1a1714) 7%, transparent); }
.of-menu-i:hover { background: var(--secondary); }
.of-menu-i .tag { margin-left: auto; font-size: 10px; color: var(--text-tertiary); }
.of-menu-sep { height: 1px; background: var(--border-subtle); margin: 6px 4px; }
.of-menu-i.accent { color: var(--foreground); font-weight: 700; }

/* ── popover настроек ── */
.of-pop { position: fixed; z-index: 520; width: 260px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 13px; border-radius: 16px; background: var(--card); border: 1px solid var(--border-subtle); box-shadow: 0 18px 44px rgba(20,18,14,.18); color: var(--foreground); display: grid; gap: 12px; }
.of-pop--viz { width: 318px; }
.of-pop-row { display: grid; gap: 6px; justify-items: stretch; }
.of-pop-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.of-pop .of-seg { background: var(--secondary); }
.of-pop-hint { font-size: 11px; line-height: 1.4; color: var(--text-tertiary); }

/* тип графика — 2×2 превью в настройках */
.of-viz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}
.of-viz-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 7px;
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: var(--secondary);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1), background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.of-viz-opt:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 22%, var(--border-subtle)); }
.of-viz-opt.is-on {
  color: var(--foreground);
  background: var(--card);
  border-color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--foreground);
}
.of-viz-opt:focus-visible { outline: 2px solid var(--ring, var(--foreground)); outline-offset: 2px; }
.of-viz-glyph { width: 28px; height: 28px; display: block; }
.of-viz-lab { font-size: 11px; font-weight: 650; letter-spacing: 0.01em; }

/* горизонтальный рейтинг */
.of-donut-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.of-hbar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  width: 100%;
}
.of-hbar-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 16px;
}
.of-hbar-lab {
  font-size: 11px;
  font-weight: 600;
  color: var(--ws-fg-sub, var(--text-secondary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.of-hbar-track {
  height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ws-fg, var(--foreground)) 16%, transparent);
  overflow: hidden;
  min-width: 0;
}
.of-hbar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ws-accent-hi, var(--foreground));
  min-width: 4px;
}
.of-hbar-val {
  font-family: var(--lk-num, inherit);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ws-fg, var(--foreground));
  min-width: 1.4em;
  text-align: right;
}
.of-hbar.is-dense { gap: 4px; }
.of-hbar.is-dense .of-hbar-row { min-height: 12px; gap: 5px; grid-template-columns: 28px minmax(0, 1fr) auto; }
.of-hbar.is-dense .of-hbar-lab { font-size: 9.5px; }
.of-hbar.is-dense .of-hbar-track { height: 6px; }
.of-hbar.is-dense .of-hbar-val { font-size: 10px; }
/* fill: рейтинг заполняет остаток высоты, ряды распределяются равномерно */
.of-hbar.is-fill { flex: 1 1 auto; height: auto; min-height: 60px; justify-content: space-evenly; overflow: hidden; }

/* метрика + адаптивный график: шапка фикс, график тянется на остаток высоты */
.of-metricchart { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 6px; }
.of-metricchart-head { flex: 0 0 auto; min-height: 0; }
.of-metricchart-head .ws-metric { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* невысокие виджеты (фикс-высота): график ужимается под остаток карточки, не режется
   и не даёт скролл. min-height у зон графика инлайновый (из JS) — перебиваем !important.
   В masonry/авто-картах min-height остаётся → график читаемого размера. */
.of-w--fixed .ws-chart-frame.is-fill,
.of-w--fixed .ws-fill,
.of-w--fixed .of-hbar.is-fill { min-height: 0 !important; }
/* слишком мало места под график (шапка съела высоту) — прячем, чтобы не было полоски-обрезка */
.of-w--fixed .of-metricchart > .ws-chart-frame.is-fill,
.of-w--fixed .of-metricchart > .ws-fill { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .of-viz-opt { transition: none; }
}

/* выбор числа колонок */
.of-colpick {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  width: 100%; padding: 6px 8px; border-radius: 10px; background: var(--secondary);
}
.of-colpick-frac, .of-colpick-end {
  font-size: 11px; font-weight: 800; color: var(--foreground); font-variant-numeric: tabular-nums; min-width: 1.6em;
}
.of-colpick-end { text-align: right; color: var(--text-tertiary); font-weight: 700; }
.of-colpick-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; height: 14px; }
.of-colpick-cell {
  border: none; padding: 0; border-radius: 3px; cursor: pointer;
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}
.of-colpick-cell.is-on { background: var(--foreground); }
.of-colpick-cell:hover { filter: brightness(1.08); }

/* RowPicker — «ступеньки» высоты в том же контейнере, что ColPicker */
.of-rowpick-track { display: flex; grid-template-columns: none; align-items: flex-end; gap: 4px; height: 28px; }
.of-rowpick-auto {
  border: none; cursor: pointer; border-radius: 4px; align-self: stretch;
  padding: 0 7px; font-size: 10px; font-weight: 800; line-height: 1;
  background: color-mix(in srgb, var(--foreground) 12%, transparent); color: var(--foreground);
}
.of-rowpick-auto.is-on { background: var(--foreground); color: var(--card); }
.of-rowpick-auto:hover { filter: brightness(1.08); }
.of-rowpick-cell { width: 13px; align-self: flex-end; }

/* Smart queue — портируемый контент-виджет (lk-content-widgets) */
.lkc-queue { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lkc-queue-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border-subtle); }
.lkc-queue-row:last-child { border-bottom: none; }
.lkc-queue-main { flex: 1; min-width: 0; }
.lkc-queue-who { font-size: 12.5px; font-weight: 600; color: var(--foreground); line-height: 1.3; }
.lkc-queue-meta { font-size: 11px; color: var(--ws-fg-sub, var(--text-tertiary)); margin-top: 2px; }
.lkc-queue-sum { font-size: 12px; font-weight: 700; color: var(--foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lkc-queue-act { flex-shrink: 0; border: none; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; background: var(--primary, #1a1714); color: var(--primary-foreground, #fff); }
.lkc-queue-act:hover { filter: brightness(1.1); }

.of-size-map { display: none; }

/* Grouped Palette — нейтрали / акценты с подписями (mockup: 4 + 6 в ряд) */
.ws-pal, .of-pal {
  display: grid;
  gap: 10px;
  width: 100%;
}
.ws-pal-group-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.ws-pal-row {
  display: grid;
  gap: 6px 2px;
  width: 100%;
}
.ws-pal-row--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ws-pal-row--n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ws-pal-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-secondary);
}
.ws-pal-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid transparent;
  background: var(--card);
  flex-shrink: 0;
  transition: box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ws-pal-sw.is-none .ws-pal-dot {
  border: 1.5px dashed rgba(26, 23, 20, 0.35);
  background: transparent;
}
.ws-pal-sw.is-ring .ws-pal-dot {
  background: transparent;
  border-width: 2px;
  border-style: solid;
}
.ws-pal-sw.is-on .ws-pal-dot {
  box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3.5px var(--foreground);
}
.ws-pal-sw:hover .ws-pal-dot { filter: brightness(0.97); }
.ws-pal-sw:focus-visible {
  outline: 2px solid var(--ring, var(--foreground));
  outline-offset: 2px;
  border-radius: 8px;
}
.ws-pal-name {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-tertiary);
}
.ws-pal-sw.is-on .ws-pal-name { color: var(--foreground); }
.of-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.of-sw {
  width: 22px; height: 22px; border-radius: 8px; cursor: pointer; padding: 0;
  box-sizing: border-box;
  background: transparent;
}
.of-sw[aria-pressed="true"] { outline: 2px solid var(--foreground); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ws-pal-dot { transition: none; }
}
.of-pop-act { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--foreground); text-align: left; }
.of-pop-act:hover { background: var(--secondary); }
.of-pop-act.danger { color: var(--destructive); }

/* ── контент-примитивы (лёгкие, где не тянем ws-*) ── */
.of-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; }

/* ── поп-ап ── */
.of-modal-ov {
  position: fixed; inset: 0; z-index: 600;
  background: color-mix(in srgb, var(--foreground) 42%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.of-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 48px)); max-width: 96vw;
  max-height: 88vh; height: auto;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border-subtle);
  border-radius: 20px; box-shadow: 0 28px 72px -18px rgba(20,18,15,.38);
  z-index: 601;
}
.of-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.of-modal-ic {
  width: 34px; height: 34px; border-radius: 10px; background: var(--secondary);
  display: grid; place-items: center; color: var(--primary); flex-shrink: 0;
}
.of-modal-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.of-modal-body { padding: 16px 20px 20px; overflow-y: auto; min-height: 0; }
.of-modal-grid { display: flex; flex-direction: column; gap: 14px; }
.of-modal .of-icon {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--secondary); color: var(--text-secondary); display: grid; place-items: center; cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.of-modal .of-icon:hover { color: var(--foreground); background: var(--card); border-color: var(--c-subtle, var(--border-subtle)); }

/* деталь .lk-modal поверх зоны: прячем нижний of-modal — один визуальный слой */
body[data-lk-modal="1"] .of-modal-ov,
body[data-lk-modal="1"] .of-modal {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* дребезг перетаскивания */
.of-node.is-dragging { opacity: .35; }
.of-ph { border: 2px dashed var(--c-subtle, #cfc7bb); border-radius: var(--lk-r-card, 22px); background: color-mix(in srgb, var(--primary, #1a1714) 4%, transparent); }

.of-bar-hint { font-size: 12px; color: var(--text-tertiary); max-width: 420px; line-height: 1.4; }
.of-node[data-zone-anchor] { scroll-margin-top: 72px; }
.of-block-zone-head { margin: -2px 0 12px; }
.of-block-zone-head .ph { margin-bottom: 0; }
/* внутри группы название уже в of-block-name — прячем дубль h1/eyebrow */
.of-block-zone-head--lede .ph-eyebrow,
.of-block-zone-head--lede .ph-h1 { display: none; }
.of-block-zone-head--lede .ph-lede { margin: 0; font-size: 13px; color: var(--text-secondary); }

.of-w[data-embed="1"] { overflow: visible; min-height: auto; height: auto; }
.of-w[data-embed="1"] .of-w-body { overflow: visible; min-height: auto; }
.of-w--in-block[data-embed="1"] { position: relative; }
.of-w-chrome {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.of-w-chrome-title { flex: 1; min-width: 0; font-size: 24.5px; font-weight: 700; letter-spacing: -.02em; color: var(--text-secondary); }
.of-w-tools--inline { position: static; opacity: 1; pointer-events: auto; padding: 0; background: none; }
.of-cell .of-w[data-embed="1"]:not(.of-w--in-block) { padding: 0; border: none; background: transparent; backdrop-filter: none; }
.of-cell .of-w--in-block {
  border-radius: 10px; padding: 0;
  border: none; background: transparent; backdrop-filter: none;
  color: var(--ws-fg, var(--foreground));
}
.of-w--in-block > .of-w-tools { display: none; }
.of-zone-embed { width: 100%; min-width: 0; color: inherit; }
/* тулбар встроенной зоны (lk-arrange) — скрыт до наведения на карточку */
.of-zone-embed .lk-arr--wgt .lk-arr-tools,
.of-zone-embed .lk-arr--kpi .lk-arr-tools { z-index: 6; opacity: 0; pointer-events: none; }
.of-zone-embed .lk-arr--wgt:hover .lk-arr-tools,
.of-zone-embed .lk-arr--kpi:hover .lk-arr-tools,
.of-zone-embed .lk-arr--wgt .lk-arr-tools:focus-within,
.of-zone-embed .lk-arr--kpi .lk-arr-tools:focus-within { opacity: 1; pointer-events: auto; }
.of-zone-embed .ov-wgt-grid { min-width: 0; }
.of-zone-embed .lk-arr--wgt > .lk-wgt,
.of-zone-embed .lk-arr--kpi > .lk-kpi { position: relative; z-index: 1; }
@container (max-width: 760px) {
  .of-w[data-embed="1"] .of-zone-embed .ov-wgt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .of-w[data-embed="1"] .of-zone-embed .ov-wgt-grid > .lk-arr--wgt[data-size="wide"],
  .of-w[data-embed="1"] .of-zone-embed .ov-wgt-grid > .lk-arr--wgt[data-size="full"],
  .of-w[data-embed="1"] .of-zone-embed .ov-wgt-grid > .ov-wgt-gap {
    grid-column: 1 / -1 !important;
  }
}
/* цвет виджета: заливка не протекает в nested как «чужой» контур */
.of-w[data-color]:not([data-color="default"]):not([data-color-mode="outline"]) .lk-wgt {
  background: var(--card);
  border-color: var(--ws-outline, var(--border-subtle));
  color: var(--foreground);
}
.of-w[data-color]:not([data-color="default"]):not([data-color-mode="outline"]) .lk-wgt-title {
  color: var(--foreground);
}
.of-w[data-color-mode="outline"] .lk-wgt {
  background: var(--rp-surface, #ffffff);
  border-color: var(--ws-outline, var(--border-subtle));
  color: var(--ws-fg, var(--foreground));
}
.of-w[data-color-mode="outline"] .lk-wgt-title {
  color: var(--ws-fg, var(--foreground));
}
/* nested lk-arr с собственным outline — не перебивать заголовки токенами родителя */
.of-w[data-color] .lk-arr[data-color-mode="outline"] .lk-wgt-title {
  color: var(--ws-fg, #1a1714);
}
.of-w[data-color] .lk-arr[data-color-mode="outline"] > .lk-wgt {
  background: var(--rp-surface, #ffffff) !important;
  border-color: var(--ws-outline, var(--ws-line));
  color: var(--ws-fg, #1a1714);
}

.of-modal--wide { width: min(1000px, calc(100vw - 48px)); }
.of-modal--wide .of-modal-body { max-height: calc(88vh - 72px); }

@media (max-width: 900px) {
  .of-field { grid-template-columns: 1fr; }
  .of-node, .of-cell { grid-column: 1 / -1 !important; }
  .of-block-body { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) { .of-w-tools, .of-node, .of-w { transition: none; } }

/* пустое поле (#8 thorough — состояние было не спроектировано) */
.of-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 56px 24px; border: 1.5px dashed var(--c-subtle, #cfc7bb); border-radius: var(--of-r-card, 12px); color: var(--text-tertiary); }
.of-empty-t { font-size: 15px; font-weight: 700; color: var(--foreground); }
.of-empty-s { font-size: 12.5px; max-width: 340px; line-height: 1.5; }
.of-empty .of-btn { margin-top: 8px; }

/* AI-ассистент виджет */
.of-ai { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
.of-ai-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  color: var(--ws-fg, var(--foreground)); background: color-mix(in srgb, var(--ws-accent-hi, #c8871a) 18%, transparent); }
.of-ai-text { font-size: 13.5px; line-height: 1.5; color: var(--ws-fg, var(--foreground)); flex: 1; min-height: 0; overflow: auto; }
.of-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.of-ai-chip { border: 1px solid var(--ws-line, var(--border-subtle)); background: none; color: var(--ws-fg-sub, var(--text-secondary));
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.of-ai-chip:hover, .of-ai-chip:focus-visible { color: var(--ws-fg, var(--foreground)); border-color: var(--ws-fg-sub, var(--text-tertiary)); outline: none; }