/* ob-orgchart — оргсхема-дерево первого экрана (01-SPEC.md: ИЗМЕНЕНИЕ ТЗ И8.3). Дорожка В.
   Вид — как в эталоне preview-site/assets/widgets/orgtree.css. Цвета, отступы, радиусы — переменные
   theme.css; свои числа виджета — локальными переменными ниже. Позиции блоков ставит orgchart.js. */
ob-orgchart {
  --ob-orgchart-node-h: 70px;        /* И8.3 п.1: блок 70 px — продукт в 2–3 строки помещается */
  --ob-orgchart-node-h-narrow: 56px; /* лесенка на телефоне: одна-две строки */
  --ob-orgchart-node-h-mid: 88px;    /* колонка 440–535 px: блок уже, строк больше */
  --ob-orgchart-fs-v: 11px;          /* И8.3 п.2: надписи не мельче 11 px */
  --ob-orgchart-fs-bar: 11px;        /* подпись «Вид оргсхемы» */
  --ob-orgchart-v-gap: 3px;          /* между строкой 1 и строкой вида */
  --ob-orgchart-view-py: 6px;        /* кнопка вида: отступ сверху и снизу */
  --ob-orgchart-tilt: rotateX(14deg) rotateY(-9deg);
  --ob-orgchart-line: color-mix(in srgb, var(--ink) 22%, transparent);
  --ob-orgchart-line-ai: color-mix(in srgb, var(--accent-ink) 60%, transparent);
  --ob-orgchart-shadow: 0 12px 26px rgba(0, 0, 0, .22);
  --ob-orgchart-face-tint: linear-gradient(var(--accent-soft), var(--accent-soft));
  display: block;
  width: 100%;
}
.ob-orgchart__fallback { display: block; width: 100%; height: auto; }

.ob-orgchart { position: relative; }

/* ---------- холст ---------- */
.ob-orgchart__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 340;
  perspective: 1400px;
}
.ob-orgchart__stage::before {          /* мягкое свечение под схемой */
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: var(--radius-lg);
  background: radial-gradient(60% 60% at 50% 40%, var(--accent-soft), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.ob-orgchart__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.ob-orgchart__wires,
.ob-orgchart__node { transform: var(--ob-orgchart-tilt); }

.ob-orgchart__line { stroke: var(--ob-orgchart-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ob-orgchart__line--ai { stroke: var(--ob-orgchart-line-ai); stroke-dasharray: 5 5; }
.ob-orgchart__task {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.ob-orgchart__dot { fill: var(--accent); opacity: .85; }
.ob-orgchart__dot--task { fill: var(--ok); opacity: 0; transition: opacity .5s var(--ease); }

/* ---------- блок ---------- */
.ob-orgchart__node {
  position: absolute;
  height: var(--ob-orgchart-node-h);
  margin: calc(var(--ob-orgchart-node-h) / -2) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  perspective: 600px;
  border-radius: var(--radius-sm);
}
.ob-orgchart__f {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.ob-orgchart__node.is-flipped .ob-orgchart__f { transform: rotateY(180deg); }

.ob-orgchart__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-1) var(--sp-2);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--ob-orgchart-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--ob-orgchart-shadow);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.ob-orgchart__bk {
  transform: rotateY(180deg);
  background: var(--ob-orgchart-face-tint), var(--card);
  border-color: var(--accent);
}
.ob-orgchart__node:hover .ob-orgchart__fr { transform: translateY(calc(var(--ob-orgchart-v-gap) * -1)); }

.ob-orgchart__name {
  display: block;
  font-size: var(--fs-kick);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.ob-orgchart__v {
  display: none;
  margin-top: var(--ob-orgchart-v-gap);
  font-size: var(--ob-orgchart-fs-v);
  line-height: 1.2;
  color: var(--muted);
}
.ob-orgchart__v--back { display: block; color: var(--ink-2); }
.ob-orgchart[data-view="0"] .ob-orgchart__v0,
.ob-orgchart[data-view="1"] .ob-orgchart__v1,
.ob-orgchart[data-view="2"] .ob-orgchart__v2,
.ob-orgchart[data-view="3"] .ob-orgchart__v3 { display: block; }
.ob-orgchart__v1 { color: var(--accent-ink); }
.ob-orgchart__v3 { color: var(--ink-2); }
.ob-orgchart__v--up { color: var(--ok); font-weight: 700; }
.ob-orgchart__v--down { color: var(--bad); font-weight: 700; }
.ob-orgchart__sr {          /* слово «растёт / падает» для экранного чтеца вместо стрелки */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* собственник — заливка акцента */
.ob-orgchart__node--top .ob-orgchart__fr { background: var(--accent); border-color: transparent; }
.ob-orgchart__node--top .ob-orgchart__fr .ob-orgchart__name { color: var(--on-accent); }
.ob-orgchart__node--top .ob-orgchart__fr .ob-orgchart__v { color: color-mix(in srgb, var(--on-accent) 86%, transparent); }

/* ИИ-сотрудники подсвечены */
.ob-orgchart__node--ai .ob-orgchart__fr {
  background: var(--ob-orgchart-face-tint), var(--card);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--ob-orgchart-shadow), 0 0 24px var(--accent-soft);
}

/* отдел продаж — красный во всех видах */
.ob-orgchart__node--bad .ob-orgchart__fr {
  border-color: color-mix(in srgb, var(--bad) 65%, transparent);
  animation: ob-orgchart-pulse 1.8s infinite;
}
@keyframes ob-orgchart-pulse {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 18%, transparent), var(--ob-orgchart-shadow); }
}

/* ---------- focus 0–5 (пункт крутилки) ---------- */
.ob-orgchart[data-focus="1"] .ob-orgchart__node[data-key="sales"] .ob-orgchart__face {
  outline: 4px solid var(--accent-soft); outline-offset: 0;
}
.ob-orgchart[data-focus="2"] .ob-orgchart__node[data-key="sales"] .ob-orgchart__face {
  outline: 4px solid color-mix(in srgb, var(--bad) 35%, transparent); outline-offset: 0;
}
.ob-orgchart[data-focus="3"] .ob-orgchart__node[data-key="secretary"] .ob-orgchart__face {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 40px var(--accent);
}
.ob-orgchart[data-focus="4"] .ob-orgchart__task,
.ob-orgchart[data-focus="4"] .ob-orgchart__dot--task { opacity: 1; }
.ob-orgchart[data-focus="5"] .ob-orgchart__fr {
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--accent-soft), var(--ob-orgchart-shadow);
}

/* ---------- переключатель «Вид оргсхемы» ---------- */
.ob-orgchart__bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  max-width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--ob-orgchart-shadow);
}
.ob-orgchart__bar-label {
  margin-right: var(--sp-1);
  font-size: var(--ob-orgchart-fs-bar);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ob-orgchart__view {
  padding: var(--ob-orgchart-view-py) var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-kick);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.ob-orgchart__view:hover:not([aria-pressed="true"]) { color: var(--ink); }
.ob-orgchart__view[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- колонка 440–535 px: то же дерево, блоки выше ---------- */
.ob-orgchart--mid .ob-orgchart__node {
  height: var(--ob-orgchart-node-h-mid);
  margin-top: calc(var(--ob-orgchart-node-h-mid) / -2);
}
.ob-orgchart--mid .ob-orgchart__view,
.ob-orgchart--narrow .ob-orgchart__view { padding-left: var(--sp-2); padding-right: var(--sp-2); }   /* переключатель в одну строку */
.ob-orgchart--mid .ob-orgchart__bar-label,
.ob-orgchart--narrow .ob-orgchart__bar-label { margin-right: 0; letter-spacing: .06em; }

/* ---------- узкий виджет: лесенка, без наклона ---------- */
.ob-orgchart--narrow .ob-orgchart__wires,
.ob-orgchart--narrow .ob-orgchart__node { transform: none; }
.ob-orgchart--narrow .ob-orgchart__node {
  height: var(--ob-orgchart-node-h-narrow);
  margin-top: calc(var(--ob-orgchart-node-h-narrow) / -2);
}
.ob-orgchart--narrow .ob-orgchart__face { text-align: left; padding: var(--sp-1) var(--sp-3); }
.ob-orgchart--narrow .ob-orgchart__bar { border-radius: var(--radius-sm); }

/* ---------- reduced-motion: без огоньков, пульсации, автопереворота и анимации ---------- */
.ob-orgchart.is-still .ob-orgchart__f,
.ob-orgchart.is-still .ob-orgchart__face,
.ob-orgchart.is-still .ob-orgchart__task,
.ob-orgchart.is-still .ob-orgchart__view { transition: none; }
.ob-orgchart.is-still .ob-orgchart__node--bad .ob-orgchart__fr { animation: none; }
.ob-orgchart.is-still .ob-orgchart__node:hover .ob-orgchart__fr { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ob-orgchart__dot { display: none; }
  .ob-orgchart__f, .ob-orgchart__face, .ob-orgchart__task, .ob-orgchart__view { transition: none; }
  .ob-orgchart__node--bad .ob-orgchart__fr { animation: none; }
}