/*
 * Граф применимости (Фаза 3) — SITE_IMPROVEMENT_PLAN.md §8 / Р9 / Р14.
 *
 * «Один анализ — вся лаборатория связана»: центр-прогон + рёбра к модулям.
 * Десктоп (≥760px) — радиальный SVG-граф: узлы спозиционированы в % через
 * inline-стиль, рёбра — линии SVG (viewBox 0..100, preserveAspectRatio none).
 * Узкие экраны — вертикальный список (узлы становятся flow, SVG скрыт) —
 * переключение чистым CSS, без JS. Подключается только на лендинге и
 * /product/map (как site-stand), а не в общий site.css (логика Р12/Р14).
 *
 * Переиспользует токены приложения (tokens.css). Секция всегда тёмная —
 * визуальное продолжение hero («второй экран»), стекло-на-авроре.
 */

.ql-graph-sec {
  position: relative; overflow: hidden;
  background: var(--dark-bg); color: #fff;
  padding: 80px 0;
}
.ql-graph-sec::after {
  content: ''; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 55% 45% at 80% 8%,  rgba(13,148,136,.30) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 12% 92%, rgba(29,78,216,.22) 0%, transparent 55%);
  animation: aurora-float 26s ease-in-out infinite alternate;
}
.ql-graph-sec > .container { position: relative; z-index: 1; }
.ql-graph-head { margin-bottom: 2.25rem; }
.ql-graph-sec .sec-title { color: #fff; }
.ql-graph-sec .sec-sub { color: rgba(255,255,255,.6); }

/* ── Холст графа ── */
.ql-map {
  position: relative; max-width: 880px; margin: 0 auto;
  height: clamp(420px, 46vw, 540px);
}

/* ── Рёбра (SVG) ── */
.ql-map-edges {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; z-index: 0;
}
.ql-map-edge-line {
  stroke: rgba(20,184,166,.34); stroke-width: 1.5; stroke-linecap: round;
  transition: stroke var(--motion-slow) var(--motion-ease), stroke-width var(--motion-slow) var(--motion-ease);
}
.ql-map-edge-line.is-hot {
  stroke: var(--accent-light); stroke-width: 2.4;
  stroke-dasharray: 4 5; animation: ql-map-flow 700ms linear infinite;
}
@keyframes ql-map-flow { to { stroke-dashoffset: -18; } }

/* ── Центральный узел (прогон/анализ) ── */
.ql-map-center {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.1rem; border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(13,148,136,.95), rgba(15,118,110,.95));
  border: 1px solid rgba(94,234,212,.5);
  box-shadow: 0 0 0 6px rgba(13,148,136,.12), 0 12px 34px rgba(13,148,136,.4);
  white-space: nowrap;
}
.ql-map-center-ic {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  background: rgba(255,255,255,.18); color: #fff;
}
.ql-map-center-tx { display: flex; flex-direction: column; line-height: 1.1; }
.ql-map-center-label { font-size: var(--text-base); font-weight: var(--weight-bold); color: #fff; }
.ql-map-center-sub { font-size: .62rem; color: rgba(255,255,255,.75); margin-top: .1rem; }

/* ── Узлы-модули ── */
.ql-map-node {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  width: 150px; text-align: center; text-decoration: none;
  padding: .75rem .65rem; border-radius: var(--radius-lg);
  background: var(--glass-bg-card);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 6px 20px rgba(3,8,22,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color var(--motion-base) var(--motion-ease),
              box-shadow var(--motion-base) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease),
              background var(--motion-base) var(--motion-ease);
}
.ql-map-node-ic {
  width: 38px; height: 38px; margin: 0 auto .45rem; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: rgba(13,148,136,.18); color: var(--accent-light);
  transition: background var(--motion-base), color var(--motion-base);
}
.ql-map-node-tx { display: block; min-width: 0; }
.ql-map-node-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: #fff; }
.ql-map-node-edge { display: none; }   /* на десктопе связь показывает ридаут */

.ql-map-node:hover,
.ql-map-node:focus-visible,
.ql-map-node.is-hot {
  border-color: var(--accent-light); background: rgba(13,148,136,.16);
  box-shadow: 0 0 0 1px var(--accent-light), 0 12px 30px rgba(13,148,136,.28);
  transform: translate(-50%, -50%) scale(1.05); outline: none; z-index: 3;
}
.ql-map-node:hover .ql-map-node-ic,
.ql-map-node:focus-visible .ql-map-node-ic,
.ql-map-node.is-hot .ql-map-node-ic { background: var(--accent); color: #fff; }

/* ── Ридаут связи (десктоп) ── */
.ql-map-readout {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  max-width: 640px; margin: 2rem auto 0; min-height: 1.5rem;
  padding: .6rem 1.1rem; border-radius: var(--radius-full);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  font-size: var(--text-sm); color: rgba(255,255,255,.78); text-align: center;
  transition: border-color var(--motion-base), color var(--motion-base);
}
.ql-map-readout.is-hot { border-color: rgba(20,184,166,.45); color: #fff; }
.ql-map-readout-dot {
  width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
  background: rgba(148,163,184,.5); transition: background var(--motion-base);
}
.ql-map-readout.is-hot .ql-map-readout-dot { background: var(--accent-light); }

/* ════════════════════════════════════════════════
 *  Узкие экраны: радиальный граф → вертикальный список
 * ════════════════════════════════════════════════ */
@media (max-width: 759px) {
  .ql-map {
    height: auto; max-width: 460px;
    display: flex; flex-direction: column; gap: .55rem;
  }
  .ql-map-edges { display: none; }
  .ql-map-center,
  .ql-map-node {
    position: static; transform: none; width: auto;
    display: flex; align-items: center; gap: .7rem; text-align: left;
  }
  .ql-map-center { align-self: center; }
  .ql-map-node {
    box-shadow: 0 4px 14px rgba(3,8,22,.3), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .ql-map-node:hover,
  .ql-map-node:focus-visible,
  .ql-map-node.is-hot { transform: none; }
  .ql-map-node-ic { margin: 0; flex-shrink: 0; }
  .ql-map-node-tx { flex: 1; text-align: left; }
  .ql-map-node-label { text-align: left; }
  .ql-map-node-edge {
    display: block; font-size: var(--text-xs); color: rgba(255,255,255,.55);
    line-height: 1.45; margin-top: .15rem;
  }
  .ql-map-node-edge::before {
    content: '↳'; color: var(--accent-light); margin-right: .3rem; opacity: .8;
  }
  .ql-map-readout { display: none; }   /* связь видна прямо в узле */
}

/* На десктопе текст узла центрируем; иконка над лейблом, поэтому обернём флоу */
@media (min-width: 760px) {
  .ql-map-node { display: block; }
}

/* ── Reduced motion: статичная аврора/рёбра, без потока и масштабирования ── */
@media (prefers-reduced-motion: reduce) {
  .ql-graph-sec::after { animation: none !important; }
  .ql-map-edge-line.is-hot { animation: none !important; }
  .ql-map-node:hover,
  .ql-map-node:focus-visible,
  .ql-map-node.is-hot { transform: translate(-50%, -50%); }
}