/* ============================================================================
 * Грид · Граждане и отделы — Модуль Родословной, Наставничества и Памяти
 * Файл: genealogy.css · Стандарты: WCAG 2.2 AAA, Закон Модульности (< 800 строк)
 * Проверка: GET /api/design/discord -> 0 нарушений
 * ============================================================================ */

/* ---------- 0. Плашка происхождения в карточке гражданина (Origin Box) ---------- */
.citizen-origin-box {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  background: var(--canvas-alpha-60);
  border: 1px solid var(--white-alpha-04);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--tx2);
  user-select: none;
  min-width: 0;
  box-sizing: border-box;
  transition: all var(--dur-normal) var(--ease-spring);
}
.citizen-origin-box:hover {
  background: var(--violet-alpha-08);
  border-color: var(--violet-alpha-30);
}
.citizen-origin-box.clone {
  border-left: 2px solid var(--violet-light);
}
.citizen-origin-box.native {
  border-left: 2px solid var(--green);
}
.citizen-origin-box .origin-icon {
  font-size: var(--fs-sm);
  line-height: 1;
  display: inline-flex;
  flex-shrink: 0;
  color: var(--violet-light);
}
.citizen-origin-box.native .origin-icon {
  color: var(--tx-pastel-green);
}
.citizen-origin-box .origin-label {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.citizen-origin-box .origin-mentor {
  font-size: var(--fs-xs);
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.citizen-origin-box .origin-mentor b.mentor-link {
  color: var(--violet-light);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) ease;
}
.citizen-origin-box .origin-mentor b.mentor-link:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.citizen-origin-box .origin-clone-num {
  font-size: var(--fs-2xs);
  color: var(--violet-light);
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-30);
  padding: var(--sp-0-5) var(--sp-1);
  border-radius: var(--r-xs);
  flex-shrink: 0;
  font-weight: 700;
}
.citizen-origin-box .origin-mission-pill {
  font-size: var(--fs-2xs);
  color: var(--blue);
  background: var(--blue-alpha-12);
  border: 1px solid var(--blue-alpha-20);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
  flex-shrink: 0;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 1. Блок Родословной и Наставника (Modal Lineage Block) ---------- */
.modal-lineage-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2-5);
  padding: var(--sp-3) var(--sp-3-5);
  background: var(--slate-900-alpha-60);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-sizing: border-box;
  transition: background var(--dur-normal) var(--ease-spring), border-color var(--dur-normal) var(--ease-spring);
}

.modal-lineage-block:hover {
  background: var(--violet-alpha-08);
  border-color: var(--violet-alpha-30);
}

.modal-lineage-block.clone {
  border-left: 3px solid var(--violet);
}

.modal-lineage-block.native {
  border-left: 3px solid var(--green);
}

.lineage-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-0-5) var(--sp-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-family: var(--mono);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.lineage-status-badge.clone {
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-30);
  color: var(--violet-light);
}

.lineage-status-badge.native {
  background: var(--green-alpha-15);
  border: 1px solid var(--green-alpha-30);
  color: var(--tx-pastel-green);
}

/* ---------- 2. Интерактивная цепочка предков (Lineage Chain Row) ---------- */
.lineage-chain-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-2-5);
  background: var(--canvas-alpha-70);
  border: 1px solid var(--white-alpha-04);
  border-radius: var(--r-sm);
  box-sizing: border-box;
}

.lineage-chain-node {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  background: var(--slate-900-alpha-80);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--tx2);
  user-select: none;
  box-sizing: border-box;
  transition: all var(--dur-fast) var(--ease-spring);
}

.lineage-chain-node.is-clickable {
  cursor: pointer;
}

.lineage-chain-node.is-clickable:hover {
  background: var(--violet-alpha-20);
  border-color: var(--violet-light);
  color: var(--white);
  transform: translateY(-1px);
}

.lineage-chain-node.is-target {
  background: var(--violet-alpha-20);
  border-color: var(--violet-light);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 0 8px var(--violet-alpha-30);
  cursor: default;
}

.chain-node-avatar {
  font-size: var(--fs-sm);
  line-height: 1;
  display: inline-flex;
  flex-shrink: 0;
}

.chain-node-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  min-width: 0;
}

.chain-node-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tx);
  line-height: var(--lh-tight);
}

.chain-node-meta {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  line-height: var(--lh-tight);
}

.chain-self-tag {
  color: var(--violet-light);
  font-weight: 700;
  font-size: var(--fs-2xs);
}

.lineage-chain-arrow {
  color: var(--tx3);
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  user-select: none;
  flex-shrink: 0;
}

/* ---------- 3. Карточка наставника (Lineage Mentor Card) ---------- */
.lineage-mentor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2-5) var(--sp-3);
  background: var(--slate-900-alpha-50);
  border: 1px solid var(--white-alpha-08);
  border-radius: var(--r-sm);
  cursor: pointer;
  box-sizing: border-box;
  transition: all var(--dur-normal) var(--ease-spring);
}

.lineage-mentor-card:hover {
  background: var(--blue-alpha-08);
  border-color: var(--blue-alpha-30);
}

.mentor-face-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--card2);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mentor-face-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mentor-fallback-avatar {
  font-size: var(--fs-xl);
  color: var(--tx3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mentor-card-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  flex: 1;
  min-width: 0;
}

.mentor-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.lineage-mentor-card .rank-badge,
.modal-lineage-block .rank-badge,
.modal-top-grid .rank-badge,
.modal-tags-row .rank-badge,
.detail-section .rank-badge,
.strip-card .rank-badge {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: none !important;
  height: auto !important;
  display: inline-flex !important;
}

.mentor-role-label {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  color: var(--tx3);
  text-transform: uppercase;
}

.mentor-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--tx);
}

.mentor-id {
  font-size: var(--fs-xs);
  color: var(--tx2);
}

.mentor-desc-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.mentor-note {
  font-size: var(--fs-xs);
  color: var(--tx2);
  line-height: var(--lh-snug);
}

.btn-mentor-go {
  padding: var(--sp-1-5) var(--sp-2-5);
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-30);
  border-radius: var(--r-sm);
  color: var(--violet-light);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-spring);
}

.btn-mentor-go:hover {
  background: var(--violet-alpha-30);
  border-color: var(--violet-light);
  color: var(--white);
  transform: translateY(-1px);
}

/* ---------- 4. Блок учеников (Lineage Apprentices Deck) ---------- */
.lineage-apprentices-deck {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  margin-top: var(--sp-1);
}

.apprentices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tx2);
}

.apprentices-grid {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.apprentice-pill-card {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  background: var(--slate-900-alpha-70);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-spring);
}

.apprentice-pill-card:hover {
  background: var(--violet-alpha-20);
  border-color: var(--violet-light);
  transform: translateY(-1px);
}

.apprentice-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--r-2xs);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--card2);
  flex-shrink: 0;
}

.apprentice-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apprentice-info {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.apprentice-name {
  font-size: var(--fs-xs);
  color: var(--tx);
  font-weight: 600;
}

.apprentice-num {
  font-size: var(--fs-2xs);
  color: var(--violet-light);
}

.lineage-mission-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  font-size: var(--fs-xs);
  color: var(--tx2);
  padding: var(--sp-1-5) var(--sp-2-5);
  background: var(--canvas-alpha-60);
  border: 1px solid var(--white-alpha-04);
  border-radius: var(--r-sm);
  margin-top: var(--sp-0-5);
}

.lineage-origin-wave-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.lineage-mission-footer .mission-label {
  font-weight: 600;
  color: var(--tx3);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mission-wave-badge {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-alpha-15);
  border: 1px solid var(--amber-alpha-30);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
}

.lineage-mission-footer .mission-val {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--blue);
  background: var(--blue-alpha-12);
  border: 1px solid var(--blue-alpha-30);
  padding: var(--sp-0-5) var(--sp-2);
  border-radius: var(--r-xs);
  font-weight: 600;
  font-size: var(--fs-xs);
}

.native-status-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2-5) var(--sp-3);
  background: var(--green-alpha-08);
  border: 1px solid var(--green-alpha-20);
  border-radius: var(--r-sm);
}

.native-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--tx);
}

.native-status-desc {
  font-size: var(--fs-xs);
  color: var(--tx2);
  line-height: var(--lh-normal);
}

/* ---------- 5. Сундук инструментов в досье (Passport Tools Section) ---------- */
.passport-tools-section {
  margin-top: var(--sp-1);
}

.tool-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  background: var(--slate-900-alpha-60);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-spring);
}

.tool-mini-pill:hover {
  background: var(--violet-alpha-15);
  border-color: var(--violet-light);
  transform: translateY(-1px);
}

.tool-mini-ext {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--violet-light);
  background: var(--violet-alpha-20);
  padding: var(--sp-0-5) var(--sp-1);
  border-radius: var(--r-2xs);
}

.tool-mini-name {
  font-size: var(--fs-xs);
  color: var(--tx);
}

.tool-mini-pill.skill {
  border-color: var(--blue-alpha-30);
  background: var(--slate-900-alpha-70);
}

.tool-mini-pill.skill:hover {
  background: var(--blue-alpha-15);
  border-color: var(--blue);
}

.tool-mini-ext.skill {
  color: var(--blue-light);
  background: var(--blue-alpha-20);
  display: inline-flex;
  align-items: center;
}

.passport-recent-lesson {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1-5) var(--sp-2-5);
  background: var(--slate-900-alpha-60);
  border: 1px solid var(--white-alpha-04);
  border-left: 2px solid var(--violet-light);
  border-radius: var(--r-sm);
  cursor: pointer;
  box-sizing: border-box;
  transition: all var(--dur-fast) var(--ease-spring);
}

.passport-recent-lesson:hover {
  background: var(--violet-alpha-12);
  border-color: var(--violet-alpha-30);
  border-left-color: var(--violet);
  transform: translateX(2px);
}

.recent-lesson-icon {
  color: var(--violet-light);
  font-size: var(--fs-xs);
  display: inline-flex;
  flex-shrink: 0;
}

.recent-lesson-text {
  font-size: var(--fs-xs);
  color: var(--tx2);
  line-height: var(--lh-tight);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-lesson-tag {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  background: var(--white-alpha-04);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-2xs);
  flex-shrink: 0;
}

/* ---------- 5.1. Багаж умений в карточке гражданина (Citizen Skills Legacy Block) ---------- */
.citizen-skills-legacy-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  padding: var(--sp-2) var(--sp-2-5);
  background: var(--card2);
  border: 1px solid var(--white-alpha-04);
  border-radius: var(--r-md);
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  transition: all var(--dur-normal) var(--ease-spring);
}

.citizen-skills-legacy-block:hover {
  background: var(--violet-alpha-12);
  border-color: var(--violet-alpha-40);
  box-shadow: 0 2px 10px var(--violet-alpha-15);
  transform: translateY(-1px);
}

.citizen-skills-legacy-block.empty {
  padding: var(--sp-1) var(--sp-2);
  background: var(--canvas-alpha-50);
}

.citizen-skills-legacy-block .legacy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.citizen-skills-legacy-block .legacy-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.citizen-skills-legacy-block .legacy-stats-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.citizen-skills-legacy-block .legacy-stat-pill {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  color: var(--tx3);
  background: var(--white-alpha-04);
  border: 1px solid var(--line);
  padding: var(--sp-0-5) var(--sp-1);
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-0-5);
}

.citizen-skills-legacy-block .legacy-empty-tag {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  color: var(--tx3);
  font-style: italic;
}

.citizen-skills-legacy-block .legacy-chips-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.citizen-skills-legacy-block .legacy-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
  background: var(--slate-900-alpha-80);
  border: 1px solid var(--line);
  color: var(--tx2);
  line-height: var(--lh-tight);
}

.citizen-skills-legacy-block .legacy-mini-chip.skill {
  background: var(--violet-alpha-15);
  border-color: var(--violet-alpha-30);
  color: var(--violet-light);
}

.citizen-skills-legacy-block .legacy-mini-chip.skill .chip-lvl {
  color: var(--amber-light);
  font-size: var(--fs-2xs);
}

.citizen-skills-legacy-block .legacy-mini-chip.tool {
  background: var(--blue-alpha-12);
  border-color: var(--blue-alpha-20);
  color: var(--blue);
}

.citizen-skills-legacy-block .legacy-mini-chip.tool .tool-ext {
  font-size: var(--fs-2xs);
  color: var(--blue-light);
  font-weight: 700;
}

/* ---------- 6. Светлая тема (Light Theme Overrides) ---------- */
html.light-theme .citizen-origin-box { background: var(--card2); border-color: var(--line); }
html.light-theme .citizen-origin-box:hover { background: var(--bg2); border-color: var(--violet-alpha-40); }
html.light-theme .citizen-skills-legacy-block { background: var(--card2); border-color: var(--line); }
html.light-theme .citizen-skills-legacy-block:hover { background: var(--bg2); border-color: var(--violet-alpha-40); }
html.light-theme .citizen-skills-legacy-block .legacy-mini-chip.skill { background: var(--violet-alpha-12); border-color: var(--violet-alpha-30); color: var(--violet-dark); }
html.light-theme .citizen-skills-legacy-block .legacy-mini-chip.skill .chip-lvl { color: var(--amber); }
html.light-theme .citizen-skills-legacy-block .legacy-mini-chip.tool { background: var(--blue-alpha-12); border-color: var(--blue-alpha-30); color: var(--blue); }
html.light-theme .modal-lineage-block { background: var(--white); border-color: var(--line); }
html.light-theme .modal-lineage-block:hover { background: var(--bg2); border-color: var(--violet-alpha-40); }
html.light-theme .lineage-chain-row { background: var(--card2); border-color: var(--line); }
html.light-theme .lineage-chain-node { background: var(--white); border-color: var(--line); color: var(--tx); }
html.light-theme .lineage-chain-node.is-clickable:hover,
html.light-theme .lineage-chain-node.is-target { background: var(--rank-senior-bg); border-color: var(--violet); color: var(--violet-dark); }
html.light-theme .lineage-mentor-card { background: var(--white); border-color: var(--line); }
html.light-theme .lineage-mentor-card:hover { background: var(--bg2); border-color: var(--blue-alpha-30); }
html.light-theme .mentor-face-avatar { background: var(--bg2); border-color: var(--line); }
html.light-theme .apprentice-pill-card { background: var(--white); border-color: var(--line); }
html.light-theme .apprentice-pill-card:hover { background: var(--rank-senior-bg); border-color: var(--violet); }
html.light-theme .native-status-card { background: var(--rank-junior-bg); border-color: var(--green); }
html.light-theme .tool-mini-pill { background: var(--white); border-color: var(--line); }
html.light-theme .tool-mini-pill:hover { background: var(--rank-senior-bg); border-color: var(--violet); }
html.light-theme .lineage-mission-footer { background: var(--card2); border-color: var(--line); color: var(--tx); }
html.light-theme .mission-wave-badge { background: var(--amber-alpha-12); border-color: var(--amber-alpha-30); color: var(--amber-dark); }
html.light-theme .lineage-mission-footer .mission-val { background: var(--blue-alpha-12); border-color: var(--blue-alpha-30); color: var(--blue); }

/* ---------- 7. Мобильная адаптивность (Mobile Responsiveness) ---------- */
@media (max-width: 768px) {
  .modal-lineage-block {
    padding: var(--sp-2) var(--sp-2-5);
    gap: var(--sp-2);
  }
  .lineage-mentor-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .btn-mentor-go {
    justify-content: center;
  }
  .lineage-chain-row {
    gap: var(--sp-1);
    padding: var(--sp-1-5) var(--sp-2);
  }
  .lineage-chain-node {
    padding: var(--sp-0-5) var(--sp-1-5);
    font-size: var(--fs-2xs);
  }
}

/* ---------- 8. Уважение prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .modal-lineage-block,
  .lineage-chain-node,
  .lineage-mentor-card,
  .btn-mentor-go,
  .apprentice-pill-card,
  .tool-mini-pill {
    animation: none !important;
    transition: none !important;
  }
}