/* ============================================================
   Orgship · Ship Map view
   Корпус корабля + позиционирование отсеков + аватары экипажа
   Координаты комнат — в tokens.css (--room-*).
   ============================================================ */

.ship-view {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ship-title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 14px;
}
.ship-title strong { color: var(--text-primary); }

/* Container — корабль 1060×1484, fitting под вьюпорт без обрезки */
.ship-stage {
  position: relative;
  width: min(1100px, 94vw);
  aspect-ratio: 1060 / 1484;
  container-type: inline-size;
  container-name: ship;
  margin: 0 auto;
}

.ship-hull {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 36px rgba(79, 123, 196, 0.18));
}

/* Лого MF Stream — «капитанское знамя» над мостиком */
.ship-logo {
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  max-width: 220px;
  min-width: 110px;
  height: auto;
  user-select: none;
  pointer-events: none;
  opacity: 0.88;
  filter:
    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 18px rgba(123, 211, 255, 0.32));
  z-index: var(--z-content);
}

/* ============================================================
   Compartments — одна нарисованная комната = один .compartment.
   Рамка комнаты НЕ кликабельна. Hover — soft glow.
   ============================================================ */

.compartment {
  position: absolute;
  border-radius: 14px;
  background: transparent;
  transition: background var(--t-normal), box-shadow var(--t-normal),
              transform var(--t-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-content);
}

.compartment:hover {
  background: radial-gradient(ellipse at center,
              var(--accent-color-soft, rgba(122, 155, 215, 0.22)) 0%,
              transparent 72%);
  box-shadow:
    inset 0 0 28px var(--accent-color-soft, rgba(122, 155, 215, 0.22)),
    0 0 22px var(--accent-color-soft, rgba(122, 155, 215, 0.18));
}

.compartment.product-bay:hover,
.compartment.engine-core:hover {
  box-shadow:
    inset 0 0 36px var(--accent-color-soft, rgba(63, 224, 197, 0.36)),
    0 0 28px var(--accent-color-soft, rgba(63, 224, 197, 0.28));
}

/* Позиции комнат — из переменных tokens.css */
.compartment.bridge {
  top: var(--room-bridge-top); left: var(--room-bridge-left);
  width: var(--room-bridge-w); height: var(--room-bridge-h);
  --accent-color: var(--accent-bridge);
  --accent-color-soft: var(--accent-bridge-soft);
}

.compartment.command-left {
  top: var(--room-cmd-l-top); left: var(--room-cmd-l-left);
  width: var(--room-cmd-l-w); height: var(--room-cmd-l-h);
  --accent-color: var(--accent-command);
  --accent-color-soft: var(--accent-command-soft);
}
.compartment.command-right {
  top: var(--room-cmd-r-top); left: var(--room-cmd-r-left);
  width: var(--room-cmd-r-w); height: var(--room-cmd-r-h);
  --accent-color: var(--accent-command);
  --accent-color-soft: var(--accent-command-soft);
}

.compartment.cross-deck {
  top: var(--room-cross-top); left: var(--room-cross-left);
  width: var(--room-cross-w); height: var(--room-cross-h);
  --accent-color: var(--accent-cross);
  --accent-color-soft: var(--accent-cross-soft);
}

.compartment.bay-acquiring {
  top: var(--room-bay-top); left: var(--room-bay-acq-left);
  width: var(--room-bay-w); height: var(--room-bay-h);
  --accent-color: var(--accent-acquiring);
  --accent-color-soft: var(--accent-acquiring-soft);
}
.compartment.bay-grusha {
  top: var(--room-bay-top); left: var(--room-bay-grusha-left);
  width: var(--room-bay-w); height: var(--room-bay-h);
  --accent-color: var(--accent-grusha);
  --accent-color-soft: var(--accent-grusha-soft);
}
.compartment.bay-arbitrage {
  top: var(--room-bay-top); left: var(--room-bay-arbitrage-left);
  width: var(--room-bay-w); height: var(--room-bay-h);
  --accent-color: var(--accent-arbitrage);
  --accent-color-soft: var(--accent-arbitrage-soft);
}
.compartment.bay-otc {
  top: var(--room-bay-top); left: var(--room-bay-otc-left);
  width: var(--room-bay-w); height: var(--room-bay-h);
  --accent-color: var(--accent-otc);
  --accent-color-soft: var(--accent-otc-soft);
}

.compartment.engine-core {
  top: var(--room-engine-top); left: var(--room-engine-left);
  width: var(--room-engine-w); height: var(--room-engine-h);
  --accent-color: var(--accent-engine);
  --accent-color-soft: var(--accent-engine-soft);
}

/* ============================================================
   Compartment label
   ============================================================ */
.compartment-label {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal), color var(--t-normal),
              border-color var(--t-normal), box-shadow var(--t-normal),
              transform var(--t-normal);
  z-index: var(--z-overlay);
}
.compartment:hover .compartment-label { opacity: 1; }

.compartment.bridge .compartment-label,
.compartment.command-left .compartment-label,
.compartment.command-right .compartment-label {
  bottom: auto;
  top: -28px;
}

.compartment-label.clickable {
  pointer-events: auto;
  cursor: pointer;
  color: var(--accent-color, var(--text-primary));
  border-color: var(--accent-color-soft, var(--bg-line-soft));
}
.compartment-label.clickable:hover {
  color: var(--text-primary);
  border-color: var(--accent-color, currentColor);
  box-shadow: 0 0 14px var(--accent-color-soft, rgba(63, 224, 197, 0.4));
  transform: translateX(-50%) translateY(-1px);
}

/* Engine Core — единственный compartment без экипажа.
   Label «О компании» ВСЕГДА видна и сидит ВНУТРИ компартмента,
   чтобы клик не зависел от hover-зоны и не уходил за пределы корпуса. */
.compartment.engine-core .compartment-label.clickable {
  opacity: 1;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  background: rgba(13, 22, 45, 0.78);
  border-color: var(--accent-engine, var(--accent-cyan));
  color: var(--accent-engine, var(--accent-cyan));
}
.compartment.engine-core .compartment-label.clickable:hover {
  transform: translate(-50%, calc(-50% - 1px));
  background: var(--accent-engine, var(--accent-cyan));
  color: var(--bg-dark);
  box-shadow: 0 0 22px var(--accent-engine-soft, rgba(63, 224, 197, 0.55));
}

/* Product-bay labels — тоже всегда видны, без необходимости hover.
   Видимость НЕ привязана к .clickable: у отсека, чей продукт пропал из
   справочника, клик отключён (открывать нечего), но подпись обязана
   остаться — иначе на месте комнаты просто пустота, и понять, что
   сломались данные, нельзя. */
.compartment.product-bay .compartment-label {
  opacity: 1;
}

/* ============================================================
   Crew avatars — единый размер 40px на всех отсеках
   ============================================================ */
.crew {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px;
  pointer-events: none;
}

/* Bridge: 2 founders в одну линию */
.compartment.bridge .crew {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0 4px;
}

/* Command-*: 1 аватар */
.compartment.command-left .crew,
.compartment.command-right .crew {
  flex-wrap: nowrap;
  gap: 4px;
}

/* Cross-deck: 5 аватаров в одну линию */
.compartment.cross-deck .crew {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 8px;
}

/* Product-bay: 0-1 аватар */
.compartment.product-bay .crew {
  flex-wrap: nowrap;
  gap: 4px;
  padding: 2px;
}

/* overflow здесь НЕ ставить: он срезал подсказку с именем (см. .crew-tip).
   Круг режет сама картинка — border-radius на img ниже. */
.crew-badge {
  position: relative;
  width: clamp(42px, 6.8cqw, 84px);
  height: clamp(42px, 6.8cqw, 84px);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  background: var(--bg-surface);
  border: 2px solid var(--level-c-level);
  transition: transform var(--t-normal), border-color var(--t-normal),
              box-shadow var(--t-normal), filter var(--t-normal);
  flex-shrink: 0;
}

.crew-badge img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover; object-position: center 22%;
  display: block; user-select: none;
}

.crew-badge.level-founder  { border-color: var(--level-founder); box-shadow: 0 0 0 2px rgba(241, 201, 114, 0.25); }
.crew-badge.level-c_level  { border-color: var(--level-c-level); }
.crew-badge.level-lead     { border-color: var(--level-lead); }
.crew-badge.level-employee { border-color: var(--level-employee); }
.crew-badge.level-trial    { border-color: var(--level-trial); filter: saturate(0.7); }

.crew-badge:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 2px var(--accent-color, var(--accent-cyan)),
              0 0 18px var(--accent-color-soft, rgba(63, 224, 197, 0.7));
  z-index: var(--z-overlay);
}

/* ============================================================
   Подсказка над аватаром — ФИО + должность (2026-08-14).

   Была псевдоэлементом `.crew-badge::after` с одним именем, и её
   молча срезал `overflow: hidden` на аватаре: на корабле подсказка
   не показывалась вообще. Теперь это настоящий элемент (две строки
   с разной типографикой в псевдоэлемент не уложить), а круг аватару
   режет `border-radius` картинки.

   Экипаж растёт — по лицу человека уже не опознать, поэтому под
   именем сразу должность.
   ============================================================ */
.crew-tip {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 11px;
  background: rgba(9, 17, 36, 0.96);
  border: 1px solid var(--accent-color-soft, var(--bg-line));
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: var(--z-overlay);
}
.crew-tip b {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}
.crew-tip i {
  font-size: var(--fs-xs);
  font-style: normal;
  line-height: 1.2;
  color: var(--text-muted);
}

.crew-badge:hover > .crew-tip,
.crew-badge:focus-visible > .crew-tip,
.crew-cluster:hover > .crew-tip,
.crew-cluster:focus-visible > .crew-tip {
  opacity: 1;
  transform: translateX(-50%);
}
/* Веер раскрыт — подпись кластера мешает, она уже не нужна */
.crew-cluster.open > .crew-tip { opacity: 0; }

/* Верхние отсеки: подсказка над аватаром, иначе она легла бы на
   соседний ряд экипажа */
.compartment.bridge .crew-tip,
.compartment.command-left .crew-tip,
.compartment.command-right .crew-tip {
  top: auto;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
}

/* Аватар подсвечен — поднимаем весь отсек, иначе подсказку и
   увеличенный аватар перекроет отсек, нарисованный позже */
.compartment:has(.crew-badge:hover),
.compartment:has(.crew-badge:focus-visible) { z-index: var(--z-overlay); }

/* ============================================================
   Crew cluster (2026-08-14) — «N человек» вместо ряда, который
   не влезает в нарисованную комнату.

   Появляется только когда команда переросла отсек (см. Ship._collapseCrew).
   Лицевая сторона: приглушённая мозаика фото + число. Hover или клик —
   веер с настоящими .crew-badge, каждый кликабелен как обычно.
   Клик по кластеру «закрепляет» веер (нужно на тач-экранах и когда
   мышь идёт до дальнего аватара), повторный клик / Esc / клик мимо —
   закрывают.
   ============================================================ */
.crew-cluster {
  position: relative;
  width: clamp(42px, 6.8cqw, 84px);
  height: clamp(42px, 6.8cqw, 84px);
  flex-shrink: 0;
  cursor: pointer;
  pointer-events: auto;
}

.crew-cluster-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(10, 20, 40, 0.82);
  border: 2px solid var(--accent-color, var(--accent-cyan));
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.crew-cluster:hover .crew-cluster-face,
.crew-cluster.open .crew-cluster-face {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--accent-color, var(--accent-cyan)),
              0 0 20px var(--accent-color-soft, rgba(63, 224, 197, 0.6));
}

/* Мозаика из первых трёх портретов — чтобы кружок читался как «люди» */
.crew-cluster-ghosts {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0.3;
  filter: grayscale(0.4);
}
.crew-cluster-ghosts img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.crew-cluster-count {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 2.6cqw, 30px);
  line-height: 1;
  color: var(--text-primary);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

/* ---------- Веер ---------- */
.crew-fan {
  position: absolute;
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  width: max-content;
  max-width: min(46cqw, 520px);
  background: rgba(9, 17, 36, 0.92);
  border: 1px solid var(--accent-color-soft, rgba(63, 224, 197, 0.35));
  border-radius: var(--r-pill);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55),
              0 0 24px var(--accent-color-soft, rgba(63, 224, 197, 0.25));
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(0.7);
  transition: opacity 0.2s ease,
              transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25),
              visibility 0.2s;
  pointer-events: none;
  z-index: var(--z-overlay);
}
.crew-fan.up   { bottom: calc(100% + 12px); transform-origin: bottom center; }
.crew-fan.down { top:    calc(100% + 12px); transform-origin: top center; }

.crew-cluster.open .crew-fan {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Веер шире своей комнаты и залезает на соседние отсеки. Отсеки —
   siblings с одним z-index, поэтому нарисованный позже (Арбитраж, OTC)
   перекрывал веер Груши и съедал клики по крайним аватарам.
   Пока веер открыт — поднимаем весь отсек над соседями. */
.compartment:has(.crew-cluster.open) { z-index: var(--z-overlay); }

/* Аватары вылетают из центра по очереди и садятся на пологую дугу
   (--arc считает Ship._makeCluster, --i — порядковый номер). */
.crew-fan .crew-badge {
  opacity: 0;
  transform: translateY(12px) scale(0.5);
  transition: opacity 0.2s ease,
              transform 0.34s cubic-bezier(0.22, 1.2, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.crew-cluster.open .crew-fan .crew-badge {
  opacity: 1;
  transform: translateY(var(--arc, 0px)) scale(1);
}
.crew-cluster.open .crew-fan .crew-badge:hover {
  transform: translateY(var(--arc, 0px)) scale(1.14);
}
/* Внутри веера подсказку всегда вниз — сверху её накроет сама панель */
.compartment .crew-fan .crew-tip {
  top: calc(100% + 9px);
  bottom: auto;
  transform: translateX(-50%) translateY(-4px);
}
.compartment .crew-fan .crew-badge:hover > .crew-tip,
.compartment .crew-fan .crew-badge:focus-visible > .crew-tip {
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .crew-fan,
  .crew-fan .crew-badge,
  .crew-cluster-face {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

/* ============================================================
   Tabs
   ============================================================ */
.ship-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 0 auto 18px;
  padding: 4px;
  background: rgba(15, 22, 38, 0.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(95, 122, 168, 0.26);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 22px rgba(0, 0, 0, 0.28);
}
.ship-tabs button {
  padding: 6px 14px;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-radius: var(--r-pill);
  transition: color var(--t-normal), background var(--t-normal);
}
.ship-tabs button.active {
  background: linear-gradient(135deg, rgba(63, 224, 197, 0.28), rgba(79, 123, 196, 0.28));
  color: #fff;
  box-shadow: 0 0 16px rgba(63, 224, 197, 0.25);
}

/* ============================================================
   Legend
   ============================================================ */
.ship-legend {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 12px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--r-lg);
  max-width: 720px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.legend-item.founder  { color: var(--level-founder); }
.legend-item.c-level  { color: var(--level-c-level); }
.legend-item.cross    { color: var(--text-secondary); }
.legend-item.trial    { color: var(--level-trial); }

/* ============================================================
   Employee card
   ============================================================ */
.emp-card-portrait {
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 3px solid var(--accent-cyan);
  background: var(--bg-surface);
  box-shadow: 0 0 28px rgba(63, 224, 197, 0.35);
}
.emp-card-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}

/* ---------- Загрузка портрета (07.09.2026) ----------
   Под портретом, а не поверх него: кнопка на самой фотографии
   закрывала бы лицо — то единственное, ради чего карточку открывают.
   Видна только тому, кто может менять это фото. */
.emp-photo-edit {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 8px;
  margin: -8px 0 16px;
}
.emp-photo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--bg-line);
  background: var(--bg-surface-soft);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
}
.emp-photo-btn:hover { border-color: var(--accent-cyan); }
.emp-photo-btn:focus-within { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.emp-photo-btn-ghost { background: transparent; color: var(--text-secondary); }
.emp-photo-btn[disabled] { opacity: .55; cursor: default; }
.emp-photo-hint {
  flex-basis: 100%; margin: 0;
  text-align: center; font-size: var(--fs-xs); line-height: 1.5;
  color: var(--text-muted);
}
/* Отказ и ход дела говорит ОДНА строка: два места для «что сейчас
   происходит» человек читает как два разных события. */
.emp-photo-hint.is-bad { color: var(--status-behind); }
.emp-photo-hint:empty { display: none; }

@media (max-width: 640px) {
  .emp-photo-btn { min-height: 44px; }   /* зона нажатия на пальце */
}

/* ============================================================
   Ушедшие из экипажа (2026-08-14).
   Видны как история — приглушённые, без цвета уровня, чтобы
   ни в карточке направления, ни в карточке человека не читались
   как действующая команда.
   ============================================================ */
.emp-card-portrait.is-alumnus {
  border-color: rgba(146, 158, 182, 0.55);
  box-shadow: 0 0 22px rgba(146, 158, 182, 0.22);
}
.emp-card-portrait.is-alumnus img { filter: grayscale(1) opacity(0.85); }

.tag.alumni-tag {
  background: rgba(146, 158, 182, 0.14);
  color: var(--text-muted);
  border-color: rgba(146, 158, 182, 0.32);
}
.alumni-mark { font-size: var(--fs-xs); color: var(--text-muted); }

.alumni-title { display: flex; align-items: center; gap: 8px; }
.alumni-count {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border: 1px solid var(--bg-line);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  letter-spacing: 0;
}

.alumni-list { display: flex; flex-direction: column; gap: 2px; }
.alumni-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--t-fast);
}
.alumni-row:hover { background: var(--bg-surface-soft); }
.alumni-row img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover; object-position: center 22%;
  border: 2px solid var(--bg-line);
  filter: grayscale(1) opacity(0.72);
  transition: filter var(--t-normal);
  flex-shrink: 0;
}
.alumni-row:hover img { filter: grayscale(0.25) opacity(1); }
.alumni-row-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.alumni-row-meta strong { font-weight: 600; color: var(--text-secondary); }
.alumni-row-meta span { font-size: var(--fs-xs); color: var(--text-muted); }
.alumni-note { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.emp-card-name {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin: 0 0 4px;
}
.emp-card-title {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--accent-cyan);
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}
.emp-card-bio {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin-bottom: 18px;
}

/* ЦКП должности — ценный конечный продукт, выделенный блок */
.emp-card-ckp {
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(63, 224, 197, 0.12), rgba(63, 224, 197, 0.04));
  border: 1px solid rgba(63, 224, 197, 0.28);
  box-shadow: inset 0 0 22px rgba(63, 224, 197, 0.06);
}
.emp-card-ckp-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--accent-cyan);
  margin-bottom: 6px;
}
.emp-card-ckp-value {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-primary);
}
.emp-card-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--bg-line-soft);
}
.emp-card-row:first-of-type { border-top: 0; padding-top: 0; }
.emp-card-row-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.emp-card-row-value { font-size: var(--fs-sm); color: var(--text-primary); }
.emp-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.emp-list li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.emp-list li::before {
  content: "•"; position: absolute; left: 4px; top: 0;
  color: var(--accent-cyan);
}

/* ============================================================
   Product / Company card
   ============================================================ */
.product-card {
  position: relative;
  margin: -24px -22px 0;
  padding: 0;
}
.product-card-cover {
  position: relative;
  width: 100%; height: 220px;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  border-bottom: 1px solid var(--bg-line);
}
.product-card-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, var(--bg-surface) 100%);
  pointer-events: none;
}
.product-card-cover h2,
.product-card-cover .tag { position: relative; z-index: 1; }
.product-card-cover h2 { font-size: var(--fs-2xl); margin: 0 0 6px; }
.product-card-cover .tagline {
  position: relative; z-index: 1;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.product-card-body { padding: 22px; }

.segment-card {
  padding: 14px;
  background: var(--bg-surface-soft);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  border-left: 3px solid var(--accent-cyan);
}
.segment-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: 4px;
}
.segment-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.segment-card-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.company-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.company-fact {
  padding: 12px;
  background: var(--bg-surface-soft);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--r-md);
}
.company-fact-value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--accent-cyan);
}
.company-fact-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* ============================================================
   Колония — архив экипажа
   На Ship Map мини-планета внизу-справа от корпуса.
   Отдельная view с большой планетой и сеткой карточек.
   ============================================================ */

.colony-marker {
  position: absolute;
  bottom: 24%;
  right: -120px;
  width: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  z-index: var(--z-content);
  transition: transform var(--t-normal);
}

.colony-marker-planet {
  width: 110px;
  height: 110px;
  background: url("../img/colony/colony_planet.png?v=2") no-repeat center / contain;
  filter:
    drop-shadow(0 0 14px rgba(125, 211, 255, 0.32))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
  transition: filter var(--t-normal), transform var(--t-normal);
  position: relative;
}
.colony-marker-planet::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(125, 211, 255, 0.22);
  transform: rotate(18deg);
  pointer-events: none;
}

.colony-marker-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
  transition: color var(--t-normal);
  text-shadow: 0 1px 8px rgba(8, 12, 22, 0.85);
}
.colony-marker-label strong {
  color: var(--text-primary);
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.colony-marker:hover { transform: translateY(-3px); }
.colony-marker:hover .colony-marker-planet {
  filter:
    drop-shadow(0 0 22px rgba(125, 211, 255, 0.55))
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6));
}
.colony-marker:hover .colony-marker-label,
.colony-marker:hover .colony-marker-label strong { color: var(--text-primary); }

/* ============================================================
   View "Колония"
   ============================================================ */
.colony-view {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 60px;
  border-radius: 18px;
  /* Плавный градиент: космический фон с приглушённой синевой,
     тёплый акцент снизу — намёк на покой / архив. */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(79, 123, 196, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 184, 74, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #0c1631 0%, #0a1128 100%);
}
/* Лёгкая текстура поверх (через ::before — псевдо-noise) */
.colony-view::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.8  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* background/border/border-radius — ниже, у «Колония — герой-блок на
   стекле» (R-230, мега-ревью G2-1.6): та же дыра тихого переопределения
   внутри одного файла, что чинилась в mission.css/admin.css/kpi.css. */
.colony-hero {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 28px;
  padding: 24px 28px;
}

.colony-hero-planet {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  background: url("../img/colony/colony_planet.png?v=2") no-repeat center / contain;
  filter:
    drop-shadow(0 0 26px rgba(125, 211, 255, 0.35))
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
  position: relative;
}

.colony-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--bg-line); background: transparent; color: var(--text-secondary);
}
.colony-back:hover { color: var(--text-primary); border-color: var(--brand-primary-soft); }
.colony-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  margin: 0 0 6px;
}
.colony-hero-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}
.colony-hero-stats {
  display: flex;
  gap: 18px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.colony-hero-stats strong { color: var(--text-primary); font-size: var(--fs-md); }

.colony-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* background — ниже, у «живого стиля» (R-230): та же тихая перезапись.
   .colony-card:hover целиком переопределяется тем же блоком — убран
   отсюда (был мёртвым кодом целиком). */
.colony-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--t-normal), box-shadow var(--t-normal), transform var(--t-normal);
  cursor: pointer;
}

.colony-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.colony-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface-soft);
  overflow: hidden;
  border: 2px solid #8A9BB6;
  flex-shrink: 0;
  filter: grayscale(0.5) saturate(0.7);
}
.colony-card-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.colony-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text-primary);
}
.colony-card-title {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.colony-card-period {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  padding: 6px 0;
  border-top: 1px solid var(--bg-line-soft);
  border-bottom: 1px solid var(--bg-line-soft);
}
.colony-card-period strong { color: var(--text-primary); }

/* ── Колония — живой стиль (стекло, вход каскадом, бирюзовый ховер) ── */
.colony-card {
  background: rgba(15, 22, 38, 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: colonyRise 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.colony-card:hover {
  border-color: rgba(63, 224, 197, 0.42);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.40);
  transform: translateY(-3px);
}
.colony-card:hover .colony-card-avatar { filter: grayscale(0) saturate(1); border-color: var(--accent-cyan); }
.colony-grid > *:nth-child(1){animation-delay:.03s}.colony-grid > *:nth-child(2){animation-delay:.06s}
.colony-grid > *:nth-child(3){animation-delay:.09s}.colony-grid > *:nth-child(4){animation-delay:.12s}
.colony-grid > *:nth-child(5){animation-delay:.15s}.colony-grid > *:nth-child(6){animation-delay:.18s}
.colony-grid > *:nth-child(7){animation-delay:.21s}.colony-grid > *:nth-child(8){animation-delay:.24s}
.colony-grid > *:nth-child(n+9){animation-delay:.27s}
@keyframes colonyRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Колония — герой-блок на стекле */
.colony-hero {
  background: rgba(15, 22, 38, 0.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(95, 122, 168, 0.22);
  border-radius: var(--r-lg);
}

.colony-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size: var(--fs-sm);
}

/* ============================================================
   Вкладка «По подчинению» — древовидная иерархия
   ============================================================ */
.manager-tree {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: auto;
  /* Фон убран — cosmos-layer виден сквозь граф. */
  background: transparent;
  border-radius: 14px;
}
.manager-tree .mg-svg {
  max-width: 1280px;
  margin: 0 auto;
}
/* На вкладке «По подчинению» отменяем высокий аспект-ratio корпуса,
   чтобы граф не уезжал вниз большого SVG. */
.ship-stage:has(.manager-tree) {
  aspect-ratio: auto;
  min-height: 720px;
  height: auto;
}

/* ============================================================
   D3 Manager Graph (SVG) — v1.4
   ============================================================ */
.mg-svg {
  width: 100%;
  height: 100%;
  min-height: 620px;
  display: block;
  font-family: var(--font-text);
  user-select: none;
}

.mg-empty {
  color: var(--text-muted);
  padding: 60px 20px;
  text-align: center;
  font-size: var(--fs-sm);
}

/* — Manager links (сплошные, видимые) — */
/* fill:none — обязательно, иначе path заливается чёрным и закрывает узлы. */
.mg-svg path.mg-link,
.mg-svg path.mg-interact {
  fill: none !important;
}
.mg-link {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.55;
  transition: opacity var(--t-normal), stroke var(--t-normal),
              stroke-width var(--t-normal);
}
.mg-svg.mg-hover-active .mg-link { opacity: 0.18; }

/* — Interaction links (изогнутые дуги, пунктир) — */
.mg-interact {
  fill: none;
  stroke: var(--accent-warm, #ffb84a);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
  opacity: 0.35;
  transition: opacity var(--t-normal), stroke-width var(--t-normal),
              stroke var(--t-normal);
}
.mg-svg.mg-hover-active .mg-interact { opacity: 0.08; }
.mg-interact.mg-interact-active {
  opacity: 0.95 !important;
  stroke-width: 2.4;
  stroke: var(--accent-warm, #ffb84a);
  filter: drop-shadow(0 0 8px rgba(255, 184, 74, 0.55));
}

/* — Узлы — */
.mg-node {
  cursor: pointer;
  transition: opacity var(--t-normal);
}
.mg-svg.mg-hover-active .mg-node { opacity: 0.35; }
.mg-svg.mg-hover-active .mg-node.mg-active,
.mg-svg.mg-hover-active .mg-node.mg-related,
.mg-svg.mg-hover-active .mg-node.mg-understudy { opacity: 1; }

.mg-ring {
  fill: var(--bg-surface);
  stroke: var(--bg-line);
  stroke-width: 2;
  transition: stroke var(--t-normal), filter var(--t-normal);
}
.mg-node.mg-level-founder  .mg-ring { stroke: var(--level-founder); }
.mg-node.mg-level-c_level  .mg-ring { stroke: var(--accent-command); }
.mg-node.mg-level-lead     .mg-ring { stroke: var(--accent-cyan); }
.mg-node.mg-level-employee .mg-ring { stroke: var(--bg-line); }

.mg-node.mg-active .mg-ring {
  stroke: var(--accent-cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(63, 224, 197, 0.55));
}
.mg-node.mg-related .mg-ring {
  stroke: var(--accent-cyan);
  stroke-width: 2.5;
}
.mg-node.mg-understudy .mg-ring {
  stroke: var(--accent-warm, #ffb84a);
  stroke-width: 3;
  stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 8px rgba(255, 184, 74, 0.55));
}

.mg-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  fill: var(--text-primary);
  letter-spacing: 0.01em;
}
.mg-title {
  font-size: 13.5px;
  fill: var(--text-muted);
}

/* R-232 (2026-09-17, мега-ревью G2-1.3): здесь жил CSS дореактового
   HTML-fallback графа подчинения (`.tree-node/.tree-card/.tree-avatar/…`)
   — `.manager-tree` (контейнер) жив и строится в ship/index.js, но его
   дети всегда только `.mg-svg` (d3), классы `tree-*` JS никогда не
   создаёт. Подтверждено grep'ом по src/. Удалено вместе с правилом,
   которое их прятало (прятать было уже нечего). */

/* Скрыть compartments в режиме manager view (на всякий случай) */
.ship-stage:has(.manager-tree) .compartment { display: none; }

/* ============================================================
   Тогглы линий в режиме «По подчинению»
   ============================================================ */
.mg-toggles {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin: 8px 0 12px;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.mg-toggles[hidden] { display: none; }
.mg-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(125, 211, 255, 0.18);
  border-radius: 999px;
  background: rgba(15, 26, 54, 0.45);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
  user-select: none;
}
.mg-toggles label:hover {
  background: rgba(15, 26, 54, 0.75);
  border-color: rgba(125, 211, 255, 0.4);
  color: var(--text-primary);
}
.mg-toggles input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(125, 211, 255, 0.5);
  border-radius: 3px;
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.mg-toggles input[type="checkbox"]:checked {
  background: var(--accent-cyan, #7BD3FF);
  border-color: var(--accent-cyan, #7BD3FF);
}
.mg-toggles input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid #0a1128;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mg-toggles .mg-toggle-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.mg-toggles .mg-toggle-dot.manager  { background: var(--accent-cyan, #7BD3FF); }
.mg-toggles .mg-toggle-dot.interact { background: var(--accent-warm, #ffb84a); }

/* Скрытие соответствующих линий */
.mg-svg.mg-hide-manager  path.mg-link    { display: none; }
.mg-svg.mg-hide-interact path.mg-interact { display: none; }

/* ============================================================
   Маркер колонии: right:-120px рассчитан на десктоп, где по бокам
   от корабля есть свободное поле. Как только корабль занимает всю
   ширину контейнера, маркер уезжает за экран — на 844px это 92px
   вылета, незаметных лишь потому, что body{overflow-x:hidden}
   в tokens.css глушит горизонтальную прокрутку глобально.
   Ниже 768px маркер и вовсе прячется (mobile.css, вид «по отсекам»).
   ============================================================ */
@media (max-width: 1100px) {
  .colony-marker { right: 4px; bottom: 8%; width: 96px; }
  .colony-marker-planet { width: 84px; height: 84px; }
}