/* ops-workspace.css — адаптивное рабочее поле.
   Density scale (--ws-scale) каскадом управляет отступами/типографикой/строкой сетки.
   Сетка: 10 колонок × строки фиксированной высоты (--ws-row) → композиция из S/M/L
   с независимой высотой (1..3 строки). Карточки — стеклянные, контент авто-контрастный. */

.ws {
  --u: 8px;
  --ws-scale: 1;
  --ws-cols: 10;
  --gap: calc(var(--u) * 2 * var(--ws-scale));
  --card-pad: calc(var(--u) * 2 * var(--ws-scale));
  --fs-base: calc(15px * var(--ws-scale));
  --ws-row: calc(122px * var(--ws-scale));   /* базовая строка сетки: 2 S = 1 M по высоте */
  font-size: var(--fs-base);
}

/* ── тулбар ── */
.ws-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: var(--gap); row-gap: 8px; position: relative;
  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: var(--radius-lg, 14px);
}
.ws-bar-sep { width: 1px; height: 20px; background: var(--border-subtle); }
.ws-bar-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.ws-scale-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; color: var(--foreground); }
.ws-step {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-subtle);
  background: var(--card); color: var(--text-secondary); cursor: pointer; display: grid; place-items: center;
  font-family: inherit; font-size: 14px; line-height: 1;
}
.ws-step:hover { background: var(--secondary); color: var(--foreground); }
.ws .ws-bar .ws-slider { width: 96px !important; flex: 0 0 96px; max-width: 96px; accent-color: var(--primary, #1a1714); cursor: pointer; }
.ws-select {
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 9px;
  border-radius: 9px; border: 1px solid var(--border-subtle); background: var(--card); color: var(--foreground); cursor: pointer;
}
.ws-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; 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; white-space: nowrap;
}
.ws-btn:hover { color: var(--foreground); border-color: var(--c-subtle, #d6cfc3); }
.ws-btn--primary { background: var(--ink, #1a1714); color: #fff; border-color: transparent; }
.ws-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: rgba(255,255,255,.22); color: #fff;
  font-size: 10px; font-weight: 800; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* ── сетка: колонки × строки фиксированной высоты ── */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(var(--ws-cols), minmax(var(--ws-colmin, 0px), 1fr));
  grid-auto-rows: var(--ws-row);
  gap: var(--gap);
  align-items: stretch;
  position: relative;
}
/* Позиция каждой карточки (grid-column / grid-row) приходит инлайном из
   layoutWidgets. Число колонок поэтому неизменно: сжать сетку до 6 колонок
   значило бы выбросить композицию. На узких экранах колонка получает
   минимальную ширину, а холст скроллится по горизонтали. */
@media (max-width: 1500px) { .ws { --ws-colmin: 132px; } .ws-grid { overflow-x: auto; padding-bottom: 6px; } }

/* Одноколоночный режим: инлайновые grid-column/grid-row снимаем целиком,
   иначе карточки уедут за холст и наложатся друг на друга. */
@media (max-width: 900px) {
  .ws-grid { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .ws-grid .ws-card { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .ws-grid .ws-card[data-h="2"] { grid-row: span 2 !important; }
  .ws-grid .ws-card[data-h="3"] { grid-row: span 3 !important; }
  .ws-ph { display: none; }
}

/* ── карточка: стекло + авто-контрастный контент ── */
.ws-card {
  container-type: inline-size;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: var(--card-pad);
  border-radius: var(--radius-lg, 16px);
  box-shadow: none;
  background: var(--ws-card-bg, color-mix(in srgb, var(--card) 72%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--ws-line, var(--border-subtle));
  color: var(--ws-fg, var(--foreground));
  transition: border-color .18s ease, opacity .18s;
}
.ws-card[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)));
}
/* оригинал гасим — за курсором едет призрак, а цель показывает плейсхолдер */
.ws-card.is-dragging { opacity: .3; pointer-events: none; }

.ws-ph {
  border: 2px dashed var(--c-subtle, #cfc7bb);
  border-radius: var(--radius-lg, 16px);
  background: color-mix(in srgb, var(--primary, #1a1714) 4%, transparent);
  pointer-events: none;
}

.ws-ghost {
  position: fixed; z-index: 60; pointer-events: none;
  padding: var(--card-pad); border-radius: var(--radius-lg, 16px);
  background: var(--ws-card-bg, var(--card));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--ws-line, var(--border-subtle));
  color: var(--ws-fg, var(--foreground));
  box-shadow: 0 18px 44px rgba(20,18,14,.22);
  opacity: .96;
}

/* ── шапка: заголовок занимает всю ширину ──
   Ручка перетаскивания и кнопки раньше стояли в строке и съедали заголовок:
   в S-карточке (~140px) на текст оставалось ~50px, и «Сообщения клиентов»
   превращалось в «Сооб…». Теперь тащим за всю шапку, а кнопки лежат поверх. */
.ws-head { position: relative; margin-bottom: calc(var(--u) * 1.1 * var(--ws-scale)); flex-shrink: 0; cursor: grab; touch-action: none; }
.ws-head:active { cursor: grabbing; }
.ws-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: calc(13px * var(--ws-scale)); font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  color: var(--ws-fg, var(--foreground));
}
.ws-ghost .ws-title { -webkit-line-clamp: 1; }

.ws-tools {
  position: absolute; top: -3px; right: -3px; display: flex; gap: 1px; padding: 1px;
  border-radius: 9px; background: var(--ws-card-bg, var(--card));
  opacity: 0; transition: opacity .15s; cursor: default;
}
.ws-card:hover .ws-tools, .ws-tools:focus-within { opacity: 1; }
@media (hover: none) { .ws-tools { opacity: 1; } }

.ws-icon-btn {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  border-radius: 8px; border: none; background: none; flex-shrink: 0;
  color: var(--ws-fg-sub, var(--text-tertiary)); cursor: pointer;
  display: grid; place-items: center; line-height: 0; padding: 0; margin: 0;
  box-sizing: border-box;
}
.ws-icon-btn > span { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ws-icon-btn:hover { background: var(--ws-track, var(--secondary)); color: var(--ws-fg, var(--foreground)); }

/* клавиатурная альтернатива перетаскиванию: не видно, но фокусируется */
.ws-kb-grip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; background: none; color: inherit; }
.ws-kb-grip:focus-visible {
  position: absolute; top: 0; left: 0; width: auto; height: auto; clip-path: none;
  padding: 2px 6px; border-radius: 6px; font: inherit; font-size: 11px;
  background: var(--ink, #1a1714); color: #fff; z-index: 3;
}

/* ── popover настроек карточки ──
   Рендерится порталом в body с координатами из getBoundingClientRect. */
.ws-pop {
  position: fixed; z-index: 450;
  width: min(320px, calc(100vw - 24px)); padding: 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 44px rgba(20,18,14,.18);
  color: var(--foreground); font-family: inherit;
  display: grid; gap: 12px;
  animation: wsPopIn .14s cubic-bezier(.2,.8,.2,1);
}
.ws-pop--viz { width: min(318px, calc(100vw - 24px)); }
.ws-pop .of-viz { width: 100%; }
@keyframes wsPopIn { from { transform: translateY(-4px); opacity: 0; } }
.ws-pop-row { display: grid; gap: 6px; justify-items: start; }
.ws-pop-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.ws-pop-hint { font-size: 11px; line-height: 1.4; color: var(--text-tertiary); }
.ws-pop-actions { display: grid; gap: 3px; padding-top: 3px; border-top: 1px solid var(--border-subtle); }
.ws-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;
}
.ws-pop-act:hover { background: var(--secondary); }
.ws-pop-act.danger { color: var(--destructive); }
.ws-pop-act.danger:hover { background: color-mix(in srgb, var(--destructive) 9%, transparent); }

/* сегменты (размер, высота, форма, содержимое) */
.ws-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--secondary); border-radius: 8px; }
.ws-seg button {
  min-width: 26px; height: 22px; padding: 0 6px; border: none; background: none; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 800; color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); }
.ws-shape { width: 100%; }
.ws-shape button { flex: 1; gap: 5px; height: 26px; font-size: 11px; letter-spacing: 0; }
.ws-views { width: 100%; flex-wrap: wrap; }
.ws-views button { flex: 1 0 auto; height: 24px; font-size: 11px; }

/* палитра */
.ws-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-sw {
  width: 22px; height: 22px; border-radius: 7px; cursor: pointer; padding: 0;
  box-sizing: border-box; background: transparent;
  transition: transform .12s;
}
.ws-sw:hover { transform: translateY(-1px); }
.ws-sw[aria-pressed="true"] { outline: 2px solid var(--foreground); outline-offset: 2px; }

.ws-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;
}
.ws-pal-sw.is-none .ws-pal-dot { border: 1.5px dashed rgba(26,23,20,.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-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); }

/* выбор ширины 1…N — паритет с .of-colpick в поле */
.ws-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);
  box-sizing: border-box;
}
.ws-colpick-frac, .ws-colpick-end {
  font-size: 11px; font-weight: 800; color: var(--foreground); font-variant-numeric: tabular-nums; min-width: 1.6em;
}
.ws-colpick-end { text-align: right; color: var(--text-tertiary); font-weight: 700; }
.ws-colpick-track { display: grid; gap: 3px; height: 14px; }
.ws-colpick-cell {
  border: none; padding: 0; border-radius: 3px; cursor: pointer;
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}
.ws-colpick-cell.is-on { background: var(--foreground); }
.ws-colpick-cell:hover { filter: brightness(1.08); }

/* ── тело ── */
.ws-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; }

/* метрики: первая крупная, остальные компактными строками; лишние не рендерятся */
.ws-mstack { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* nowrap: текстовая метрика («KSH-047») переносилась на вторую строку и рвала S 1×1 */
/* крупные числа темы: DM Mono из макета — «приборный» вид, разряды не пляшут */
.ws-metric { font-family: var(--lk-num, inherit); font-size: calc(36px * var(--ws-scale)); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--ws-fg, var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-metric small { font-size: .45em; font-weight: 700; color: var(--ws-fg-sub, var(--text-tertiary)); margin-left: 4px; }
.ws-sub { font-size: calc(11.5px * var(--ws-scale)); color: var(--ws-fg-sub, var(--text-tertiary)); margin-top: 3px; }
/* дельта = семантическая пилюля: фон-тинт берётся из currentColor (зелёный/красный) */
/* цвет дельты — классом, а не инлайном: тёмной теме нужны светлые тона,
   иначе тёмно-зелёный на тёмной подложке падает до ~2:1 */
.ws-delta.is-up { color: #276b49; }
.ws-delta.is-down { color: #a83226; }
[data-theme="dark"] .ws-delta.is-up { color: #6ddb9f; }
[data-theme="dark"] .ws-delta.is-down { color: #ff9585; }
/* бейдж дельты по макету: скругление 7, подложка 13% цвета, высота ~22 */
.ws-delta { display: inline-flex; align-items: center; gap: 3px; font-size: calc(11px * var(--ws-scale)); font-weight: 600; margin-top: 5px; padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, currentColor 13%, transparent); line-height: 1.15; font-variant-numeric: tabular-nums; }
/* тесная карточка (S 1×1 с двухстрочным заголовком): цифра уступает место заголовку,
   а подпись сжимается до одной строки — двухстрочная выдавливала контент за границу */
.ws-mstack.is-dense .ws-metric { font-size: calc(23px * var(--ws-scale)); }
.ws-mstack.is-dense .ws-sub {
  font-size: calc(10.5px * var(--ws-scale)); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-mrows { margin-top: auto; padding-top: 8px; }
.ws-mrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-top: 1px solid var(--ws-line, var(--border-subtle));
  font-size: calc(11.5px * var(--ws-scale));
}
.ws-mrow-l { color: var(--ws-fg-sub, var(--text-tertiary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mrow-v { font-family: var(--lk-num, inherit); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ws-fg, var(--foreground)); }
/* доля рисуется полосой, статус — бейджем: строка отражает тип значения */
.ws-mrow-bar {
  flex: 1 1 auto; min-width: 26px; height: 5px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--ws-fg, var(--foreground)) 12%, transparent);
  align-self: center;
}
.ws-mrow-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ws-accent-hi, var(--ws-fg, var(--foreground))); }
.ws-metric-bar {
  display: block; height: 6px; margin-top: 8px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--ws-fg, var(--foreground)) 12%, transparent);
}
.ws-metric-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ws-accent-hi, var(--ws-fg, var(--foreground))); }
/* бейдж статуса: цвет + слово (не только цвет — a11y) */
.ws-mtag {
  font-family: inherit; font-weight: 600; padding: 3px 8px; border-radius: 7px;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.ws-mtag.is-ok { color: #276b49; }
.ws-mtag.is-wait { color: #8a5a12; }
.ws-mtag.is-bad { color: #a83226; }
[data-theme="dark"] .ws-mtag.is-ok { color: #6ddb9f; }
[data-theme="dark"] .ws-mtag.is-wait { color: #f0c274; }
[data-theme="dark"] .ws-mtag.is-bad { color: #ff9585; }

/* ── Степпер этапов ────────────────────────────────────────────────────────
   Плоский список «Демонтаж 100% / Черновая 100%» не читался как процесс.
   Здесь состояние кодируется точкой на вертикальном рельсе: пройден (галка),
   текущий (кольцо + полоса), будущий (пунктирный контур). */
.lkc-steps { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lkc-steps-head { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
.lkc-steps-head b {
  font-family: var(--lk-num); font-size: calc(30px * var(--ws-scale)); font-weight: 500;
  letter-spacing: -.035em; line-height: 1; color: var(--ws-fg, var(--foreground));
}
.lkc-steps-head span { font-size: calc(11.5px * var(--ws-scale)); color: var(--ws-fg-sub, var(--muted-foreground)); }

.lkc-steps-list { list-style: none; margin: 12px 0 0; padding: 0; display: block; }
.lkc-steps-list.is-dense { margin-top: 8px; }

.lkc-step {
  position: relative; display: grid; grid-template-columns: 16px 1fr auto;
  column-gap: 9px; align-items: center; padding: 5px 0;
  font-size: calc(11.5px * var(--ws-scale));
}
.lkc-steps-list.is-dense .lkc-step { padding: 3px 0; }
/* рельс: линия от точки к точке, но не после последнего шага */
.lkc-step:not(:last-child)::before {
  content: ''; position: absolute; left: 7px; top: 21px; bottom: -3px; width: 1.5px;
  background: var(--ws-line, var(--border)); border-radius: 2px;
}
.lkc-step.is-done:not(:last-child)::before { background: var(--ws-accent-hi, var(--foreground)); opacity: .5; }

.lkc-step-dot {
  grid-column: 1; grid-row: 1; display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%; box-sizing: border-box;
}
.lkc-step.is-done .lkc-step-dot { background: var(--ws-accent-hi, var(--foreground)); color: var(--ws-card-bg, var(--card)); }
.lkc-step.is-now .lkc-step-dot {
  border: 2.5px solid var(--ws-accent-hi, var(--foreground));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-accent-hi, var(--foreground)) 18%, transparent);
}
.lkc-step.is-next .lkc-step-dot { border: 1.5px dashed color-mix(in srgb, var(--ws-fg, var(--foreground)) 38%, transparent); }

.lkc-step-t { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lkc-step.is-now .lkc-step-t { font-weight: 600; }
.lkc-step.is-next .lkc-step-t { color: var(--ws-fg-sub, var(--muted-foreground)); }

.lkc-step-v { grid-column: 3; grid-row: 1; font-family: var(--lk-num); font-size: calc(10.5px * var(--ws-scale)); }
.lkc-step.is-done .lkc-step-v { color: var(--ws-fg-sub, var(--muted-foreground)); }
.lkc-step.is-next .lkc-step-v { color: color-mix(in srgb, var(--ws-fg, var(--foreground)) 68%, transparent); }
.lkc-step.is-now .lkc-step-v {
  font-weight: 600; padding: 2px 7px; border-radius: 7px;
  color: color-mix(in srgb, var(--ws-accent-hi, var(--foreground)) 42%, var(--ws-fg, var(--foreground)));
  background: color-mix(in srgb, var(--ws-accent-hi, var(--foreground)) 15%, transparent);
}

.lkc-step-bar {
  grid-column: 2 / 4; grid-row: 2; display: block; height: 5px; margin-top: 6px;
  border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--ws-fg, var(--foreground)) 12%, transparent);
}
.lkc-steps-list.is-dense .lkc-step-bar { margin-top: 4px; height: 4px; }
.lkc-step-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ws-accent-hi, var(--ws-fg, var(--foreground))); }

.ws-spark { margin-top: 8px; height: 42px; flex-shrink: 0; display: flex; align-items: stretch; overflow: hidden; min-width: 0; width: 100%; }
/* Кольцо/рейтинг: выше spark. Рейтинг тянется на всю ширину; кольцо центрируется. */
.ws-spark.is-viz { align-items: center; overflow: hidden; }
.ws-spark.is-viz > * { min-width: 0; }
.ws-spark.is-viz .of-hbar { width: 100%; align-self: stretch; }
.ws-spark.is-viz .of-donut-wrap { margin-inline: auto; flex-shrink: 0; }
.ws-spark .ws-chartbox, .ws-spark .ws-chartbox-c { height: 100%; width: 100%; min-width: 0; }
.ws-spark .ws-chart, .ws-spark .ws-chart--fixed { width: 100%; height: 100%; max-height: 100%; display: block; }
.ws-spark.is-viz .ws-chart--fixed { width: auto; height: auto; max-height: 100%; margin: 0 auto; }

.ws-list { display: grid; gap: 0; }
.ws-row { display: flex; align-items: center; gap: 9px; padding: calc(6px * var(--ws-scale)) 0; border-bottom: 1px solid var(--ws-line, var(--border-subtle)); font-size: calc(12.5px * var(--ws-scale)); }
.ws-row:last-child { border-bottom: none; }
.ws-row-main { flex: 1; min-width: 0; }
.ws-row-t { font-weight: 600; color: var(--ws-fg, var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-row-s { font-size: calc(11px * var(--ws-scale)); color: var(--ws-fg-sub, var(--text-tertiary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-row-v { font-family: var(--lk-num, inherit); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ws-fg, var(--foreground)); }

.ws-tbl { width: 100%; border-collapse: collapse; font-size: calc(12.5px * var(--ws-scale)); }
.ws-tbl th { text-align: left; font-size: calc(10px * var(--ws-scale)); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ws-fg-sub, var(--text-tertiary)); padding: 6px 8px; border-bottom: 1px solid var(--ws-line, var(--border-subtle)); }
.ws-tbl td { padding: calc(7px * var(--ws-scale)) 8px; border-bottom: 1px solid var(--ws-line, var(--border-subtle)); color: var(--ws-fg, var(--foreground)); }
.ws-tbl td:not(:first-child), .ws-tbl th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ws-tbl tr:last-child td { border-bottom: none; }

.ws-bar-track { height: calc(5px * var(--ws-scale)); border-radius: 3px; background: var(--ws-track, var(--secondary)); overflow: hidden; margin-top: 5px; }
.ws-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--ws-fg, var(--primary)); }

.ws-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: center; height: 100%; min-height: 0; }
.ws-split-l, .ws-split-r { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; }

/* ── графики ── */
.ws-chartbox { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ws-chartbox-c { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* кадр даёт SVG пиксельную ширину: viewBox = реальный бокс, масштаб осей равный */
.ws-chart-frame { width: 100%; min-width: 0; }
/* адаптивные графики: заполняют остаток высоты карточки (fill-режим) */
.ws-chart-frame.is-fill { flex: 1 1 auto; min-height: 0; height: 100%; }
.ws-fill { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.ws-fill.of-donut-fill { padding: 2px 0; }
/* донат в fill: размер задан viewBox (=min(w,h)); auto → рендер по intrinsic, не тянем */
.ws-fill .ws-chart--fixed { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; }
.ws-chart { width: 100%; height: 100%; display: block; overflow: visible; }
.ws-chart--fixed { width: auto; max-width: 100%; max-height: 100%; }
.ws-chart .grid-line { stroke: var(--ws-line, rgba(0,0,0,.08)); stroke-width: 1; }
.ws-chart .axis-t { font-size: 9px; font-weight: 600; fill: var(--ws-fg-sub, #8a817a); }

/* акцент-подсветка ключевого значения на графиках (референс-стиль).
   На поле (.of) — дефолт каскадом, а НЕ на .of-w/.of-block: тогда цветная
   группа (её inline --ws-accent-hi из cardVars) перекрашивает графики своих
   виджетов в тон темы. Правило на карточке перебивало бы наследование. */
.ws-card, .of, .lk-arr, .ws-modal, .of-modal, .lk-modal { --ws-accent-hi: #f26445; }
:root[data-theme="dark"] .ws-card, :root[data-theme="dark"] .of,
:root[data-theme="dark"] .lk-arr, :root[data-theme="dark"] .ws-modal, :root[data-theme="dark"] .of-modal, :root[data-theme="dark"] .lk-modal { --ws-accent-hi: #e6ba52; }
.ws-mark-guide { stroke: var(--ws-accent-hi, #c8871a); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }
.ws-prev-line { opacity: .28; stroke-dasharray: 4 4; }
.ws-callout-bg { fill: var(--ws-accent-hi, #c8871a); }
.ws-callout-t { font-size: 10px; font-weight: 800; fill: #241a06; }
.ws-callout-lbl { font-size: 10px; font-weight: 800; fill: color-mix(in srgb, var(--ws-accent-hi, #c8871a) 78%, var(--ws-fg, #1a1714)); }

/* строка сводных чисел под графиком */
.ws-statrow { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 8px; font-size: calc(11px * var(--ws-scale)); color: var(--ws-fg-sub, var(--text-tertiary)); }
.ws-stat { white-space: nowrap; }
.ws-stat b { color: var(--ws-fg, var(--foreground)); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 5px; }
.ws-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; flex-shrink: 0; }
.ws-legend-i { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--ws-scale)); color: var(--ws-fg-sub, var(--text-tertiary)); }
.ws-legend-d { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.ws-donut-c { font-size: calc(19px * var(--ws-scale)); font-weight: 800; fill: var(--ws-fg, #1a1714); }
.ws-donut-s { font-size: calc(9.5px * var(--ws-scale)); font-weight: 600; fill: var(--ws-fg-sub, #8a817a); }

/* ── библиотека блоков (возврат удалённых) ── */
.ws-lib {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 14px;
  width: 300px; max-height: 60vh; overflow-y: auto; padding: 8px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--border-subtle);
  box-shadow: 0 14px 36px rgba(20,18,14,.16);
}
.ws-lib-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); padding: 8px 8px 6px; }
.ws-lib-i {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border-radius: 9px;
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--foreground); text-align: left;
}
.ws-lib-i:hover { background: var(--secondary); }
.ws-lib-i .tag { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--text-tertiary); }
.ws-lib-i.is-removed { background: color-mix(in srgb, var(--primary, #1a1714) 5%, transparent); }
.ws-lib-i.is-removed .tag { color: var(--primary, #1a1714); }
.ws-lib-i.is-removed:hover { background: color-mix(in srgb, var(--primary, #1a1714) 10%, transparent); }

/* ── undo toast ── */
.ws-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 500;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px;
  background: var(--ink, #1a1714); color: #fff; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(20,18,14,.3); font-size: 13px; font-weight: 600;
  animation: wsToast .2s ease;
}
@keyframes wsToast { from { transform: translate(-50%, 8px); opacity: 0; } }
.ws-toast button {
  border: none; background: rgba(255,255,255,.14); color: #fff; border-radius: 8px;
  padding: 6px 11px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ws-toast button:hover { background: rgba(255,255,255,.24); }

/* ── поп-ап (тир 3) — паритет с .lk-modal ── */
.ws-modal-ov {
  position: fixed; inset: 0; z-index: 400;
  background: color-mix(in srgb, var(--foreground) 42%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ws-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: 401; animation: wsPop .2s var(--ease-out, cubic-bezier(.2,.8,.2,1));
}
.lk-arr-modal.ws-modal { width: min(1000px, calc(100vw - 48px)); }
@keyframes wsPop { from { opacity: .6; transform: translate(-50%, -46%) scale(.985); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 900px) { .ws-modal { width: calc(100vw - 32px); } }
.ws-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.ws-modal-ic {
  width: 34px; height: 34px; border-radius: 10px; background: var(--secondary);
  display: grid; place-items: center; color: var(--primary); flex-shrink: 0;
}
.ws-modal-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.ws-modal-body { padding: 16px 20px 20px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.ws-modal .ws-icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--secondary); color: var(--text-secondary);
}
.ws-modal .ws-icon-btn:hover { background: var(--card); color: var(--foreground); border-color: var(--c-subtle, var(--border-subtle)); }

@media (prefers-reduced-motion: reduce) {
  .ws-card, .ws-modal, .ws-toast, .ws-pop { transition: none !important; animation: none !important; }
}