/* MapGraph — стили карты по образцу andrewtrousdale.com.
   Размеры и отступы — из их app.css. Тёмная тема по умолчанию: цвета образца инвертированы
   (страница rgb(245,246,242) → #121211, тушь #111 → #ecebe6, серый #888 → #84837e, белая заливка значков → чёрная).
   Светлая — класс .light, один в один как у образца.
   Шрифт образца Brunswick Grotesque платный; Public Sans ближе всех по пропорциям (кегль ×14/13),
   кириллицу дорисовывает Wix Madefor Text с близкими метриками. */
.mg {
  --page: #121211;
  --ink: #ecebe6;
  --gray: #84837e;
  --fill: #000;
  --sec-stroke: #5b5a56;
  --flower: #ff5f1f;
  --flower-line: #000;

  position: relative;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: 'Public Sans', 'Wix Madefor Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

.mg.light {
  --page: rgb(245, 246, 242);
  --ink: #111;
  --gray: #888;
  --fill: #fff;
  --sec-stroke: #999;
  --flower-line: #000;
}

.mg h2,
.mg h3 {
  margin: 0;
  font: inherit;
}

.mg-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.mg .map-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
}

/* ───── связи ───── */

.mg .link {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1px;
  opacity: 0;
  transition: opacity 1000ms;
}

.mg .link.shown {
  opacity: 1;
}

.mg .link.node-type-initiative {
  stroke-dasharray: 5, 5;
}

.mg .link.secondary-link {
  stroke: var(--gray);
  stroke-dasharray: 5, 5;
}

/* ───── узлы ───── */

.mg .node {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1000ms;
}

.mg .node.shown {
  opacity: 1;
}

.mg.dragging,
.mg.dragging .node {
  cursor: grabbing;
}

.mg .node-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  transition: transform 100ms ease-in-out;
}

.mg .node:hover .node-inner,
.mg .node.hover .node-inner {
  transform: translate(-50%, -50%) scale(1.1);
}

.mg .node-inner svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.mg .sh {
  fill: var(--fill);
  stroke: var(--ink);
  stroke-width: 1px;
}

.mg .node-type-path .node-inner {
  width: 24px;
  height: 24px;
}

.mg .node-type-initiative .node-inner {
  width: 26px;
  height: 26px;
}

.mg .secondary-node:not(.current-node) {
  color: var(--gray);
}

.mg .secondary-node:not(.current-node) .sh {
  fill: var(--page);
  stroke: var(--sec-stroke);
}

/* Номер ветки */
.mg .number {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  font-size: 11.85px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.mg .current-node .number {
  display: none;
}

/* Отмеченный: точка 4 px */
.mg .highlighted-node:not(.current-node) .node-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.mg .node-type-initiative.highlighted-node:not(.current-node) .node-inner::after {
  top: 60%;
}

/* Information: залитый круг с точкой цвета страницы */
.mg .information-node .node-inner {
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
}

.mg .information-node:not(.current-node) .node-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--page);
  transform: translate(-50%, -50%);
}

/* Центр: оранжевый цветок, оборот за 10 с */
.mg .home-node .node-inner {
  width: 21px;
  height: 21px;
}

.mg .flower {
  animation: mg-rotate 10s linear infinite;
}

.mg .fl {
  fill: var(--flower);
  stroke: var(--flower-line);
  stroke-width: 2px;
}

@keyframes mg-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Связь с узлом, который уже есть на графе */
.mg .link.connected-link {
  stroke: var(--gray);
  stroke-width: 2px;
  stroke-dasharray: 2, 10;
}

/* Выбранный: цветная заливка и × (цвета образца) */
.mg .current-node.node-type-research .sh { fill: #bfa99f; }
.mg .current-node.node-type-initiative .sh { fill: #f7db45; }
.mg .current-node.node-type-path .sh { fill: #7a8743; }
.mg .current-node.node-type-artifact .sh { fill: #3573b6; }

.mg .current-node:not(.home-node) .node-inner::after {
  content: '×';
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #111;
  font-size: 14px;
  line-height: 1.45em;
  letter-spacing: -0.01em;
}

.mg .current-node.node-type-initiative .node-inner::after {
  top: 55%;
}

.mg .current-node.information-node .node-inner::after {
  color: var(--page);
}

/* Подписи на подложке цвета страницы — она перекрывает линии */
.mg .node-label {
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  width: 150px;
  transform: translate(-50%, -3px);
  pointer-events: none;
  text-align: center;
}

.mg .node-label span {
  display: inline-block;
}

.mg .node-label h2 {
  display: inline;
  padding: 1px 3px;
  border-radius: 5px;
  background: var(--page);
  font-size: 14px;
  line-height: 18.85px;
  letter-spacing: 0.005em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mg .node-label h3 {
  position: relative;
  top: 2px;
  display: inline;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--page);
  color: var(--gray);
  font-size: 11.85px;
  line-height: 15.95px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  transition: opacity 200ms;
}

.mg .node-label h3:empty {
  display: none;
}

.mg .root-node .node-label h3,
.mg .current-node .node-label h3,
.mg .node:hover .node-label h3,
.mg .node.hover .node-label h3 {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mg .flower {
    animation: none;
  }
}

/* Фокус и поиск: не подходящие узлы приглушены */
.mg .node .node-inner,
.mg .node .node-label {
  transition: opacity 250ms;
}

.mg .node.dim .node-inner,
.mg .node.dim .node-label {
  opacity: 0.16;
}

.mg .link.shown.dim {
  opacity: 0.1;
}

.mg .node.hit .node-label h2 {
  background: #ecebe6;
  color: #111;
}