/* ============================================================
   Mythox - Constellation (interactive concept map) styles
   Uses brand.css tokens. Sandboxed by .cos-constel.
   ============================================================ */
.cos-constel{
  position:relative;width:100%;
  /* No black box: the orbs float directly on the page's living dot-field (the
     "sky"), so the constellation reads as native to the page. (2026-06-18) */
  background:transparent;
  overflow:visible;
}
.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:6px;
  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:1px solid rgba(0,0,0,.5);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), 0 5px 14px -8px rgba(0,0,0,.68);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease);
}
.cos-label{
  font-family:var(--sans);font-size:9.65px;font-weight:600;color:var(--ivory-soft);
  text-align:center;max-width:78px;line-height:1.12;letter-spacing:0;
  text-shadow:0 1px 5px rgba(0,0,0,.74);transition:color .25s var(--ease);
  /* edge-aware inward nudge (var set per node in constellation.js; 0 at center) */
  transform:translateX(var(--lshift,0));
}
/* The constellation now floats on the page (transparent background), so labels
   follow the normal theme tokens and read correctly in both light and dark mode. */

/* 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:11.25px;color:var(--ivory);font-weight:600;max-width:104px}
@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.08);box-shadow:0 0 18px -2px color-mix(in srgb, var(--c) 55%, transparent),0 0 0 1px 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-node{gap:4px;}
  .cos-label{font-size:8px;max-width:64px;color:var(--text);line-height:1.1;text-shadow:0 1px 4px rgba(0,0,0,.32)}
  .cos-node-core .cos-label{font-size:9.25px;max-width:76px;color:var(--text)}
  .cos-node.hot .cos-label{color:var(--text)}
  .cos-constel.has-hot .cos-node:not(.hot):not(.near){opacity:1}
}