/* ============================================================
   Mythox — Constellation (interactive concept map) styles
   Uses brand.css tokens. Sandboxed by .cos-constel.
   ============================================================ */
.cos-constel{
  position:relative;width:100%;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    linear-gradient(180deg,#121110,#0c0b0a);
  border:1px solid var(--line);
  overflow:hidden;
}
.cos-constel-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.cos-link{
  stroke:var(--gold);stroke-opacity:.14;stroke-width:1;
  transition:stroke-opacity .25s var(--ease),stroke-width .25s var(--ease);
}
.cos-constel.has-hot .cos-link{stroke-opacity:.05}
.cos-constel .cos-link.hot{stroke-opacity:.75;stroke-width:1.6}

/* nodes — absolutely positioned, centered on their point */
.cos-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:default;will-change:translate;
  /* no transition on `translate` — the JS rAF loop drives node position every
     frame in lockstep with the SVG link endpoints; an ease here would lag the
     nodes behind the instantly-moved links. opacity (hover dim) still eases. */
  transition:opacity .25s var(--ease);
}
.cos-dot{
  display:block;border-radius:50%;background:var(--c);
  border:2px solid rgba(0,0,0,.55);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 6px 18px -6px rgba(0,0,0,.7);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease);
}
.cos-label{
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ivory-soft);
  text-align:center;max-width:130px;line-height:1.25;letter-spacing:.005em;
  text-shadow:0 1px 6px rgba(0,0,0,.8);transition:color .25s var(--ease);
}
/* The constellation panel is an always-dark night sky (its bg gradient has no
   light-mode override), so labels must stay light in light mode too — otherwise
   the --ivory* tokens flip dark and the labels vanish on the dark panel. */
html[data-mode="light"] .cos-label{color:#e9e3d5}
html[data-mode="light"] .cos-node-core .cos-label{color:#fff}

/* core node — the equation: bigger, glowing, gently pulsing */
.cos-node-core .cos-dot{
  background:radial-gradient(circle at 38% 32%, var(--accent-2), var(--gold) 70%);
  box-shadow:0 0 24px -2px var(--gold-glow), 0 0 0 1px var(--gold-line);
  animation:cosPulse 3s ease-in-out infinite;
}
.cos-node-core .cos-label{font-family:var(--serif);font-size:15px;color:var(--ivory);font-weight:600}
@keyframes cosPulse{0%,100%{box-shadow:0 0 18px -3px var(--gold-glow),0 0 0 1px var(--gold-line)}50%{box-shadow:0 0 34px 2px var(--gold-glow),0 0 0 1px var(--gold-line)}}

/* hover highlight: lift the hot node + neighbours, dim the rest */
.cos-node.hot .cos-dot{transform:scale(1.18);box-shadow:0 0 26px 0 color-mix(in srgb, var(--c) 60%, transparent),0 0 0 2px var(--c)}
.cos-node.hot .cos-label{color:#fff}
.cos-node.near .cos-dot{box-shadow:0 0 16px -2px color-mix(in srgb, var(--c) 55%, transparent),0 0 0 1px var(--c)}
.cos-constel.has-hot .cos-node:not(.hot):not(.near){opacity:.32}

/* legend */
.cos-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;justify-content:center}
.cos-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}
.cos-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

@media (max-width:760px){
  .cos-label{font-size:10.5px;max-width:84px}
  .cos-node-core .cos-label{font-size:12px}
}