/* The chart lives on an engraved plate, not a glowing app card - a deep
   indigo inset with a double gold rule, like a hand-tinted plate bound into
   an antique star atlas. */
.constellation-field.panel {
  background: var(--plate);
  border: 1px solid var(--plate-rule);
  box-shadow: inset 0 0 0 5px var(--plate), inset 0 0 0 6px var(--plate-rule);
  padding: 0;
}

.constellation-field {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 360px;
  overflow: hidden;
}

.constellation-field svg {
  width: 100%;
  height: 100%;
  display: block;
}

.constellation-line {
  stroke: var(--gold-bright);
  stroke-width: 0.75;
  fill: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}

.constellation-line.is-drawn {
  opacity: var(--line-opacity, 0.5);
}

.constellation-target {
  fill: var(--gold-bright);
  stroke: var(--plate);
  stroke-width: 1.5;
}

.constellation-star {
  fill: var(--paper);
  stroke: var(--gold-bright);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.3);
  transition: opacity 280ms var(--ease-pop), transform 280ms var(--ease-pop);
}

.constellation-star.is-lit {
  opacity: 1;
  transform: scale(1);
}

.constellation-star.is-hovered {
  fill: var(--gold-bright);
}

/* Label bubbles live in a layer above all circles/lines, so they're always
   legible. Hovering re-appends a bubble to the end of that layer so it
   paints above any other label it overlaps. */
.constellation-label {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}

.constellation-label.is-lit {
  opacity: 1;
}

.constellation-label.is-faded {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.constellation-label.is-hovered {
  opacity: 1 !important;
  transition: opacity 150ms var(--ease-out);
}

.constellation-label-bg {
  fill: var(--plate);
  fill-opacity: 0.85;
  stroke: var(--plate-line);
  stroke-width: 0.75;
}

.constellation-label text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--paper);
  text-anchor: middle;
}

.constellation-label.is-hovered .constellation-label-bg {
  stroke: var(--gold-bright);
  stroke-width: 1;
}

.constellation-label.is-hovered text {
  fill: var(--gold-bright);
}

.constellation-target-label text {
  font-family: var(--font-heading);
  font-size: 17px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  fill: var(--gold-bright);
}

.constellation-target-label .constellation-label-bg {
  fill: none;
  stroke: none;
}