/*
 * Adopted launch instrument.
 * The existing semantic countdown stays in the DOM, while this transparent
 * canvas supplies the complete visible foreground.
 */

:root {
  --launch-style-blue: #2aaff0;
  --launch-dot-cyan: #13e1f3;
  --prediction: var(--launch-style-blue);
}

/* Repeat the launch number's brightest signal only at the two requested anchors. */
.axis-sector-prediction {
  --sign-color: var(--launch-dot-cyan);
}

.brand strong {
  color: var(--launch-dot-cyan);
  text-shadow: 0 0 9px color-mix(in srgb, var(--launch-dot-cyan) 24%, transparent);
}

/* Z order: white official axis > IF instrument > countdown projection. */
.actual-spine {
  z-index: 14 !important;
  pointer-events: none;
}

html[data-launch-visual="adopted"] .featured-panel > .featured-cutout,
html[data-launch-visual="adopted"] .featured-panel > .count-kicker,
html[data-launch-visual="adopted"] .featured-panel > .launch-countdown-button,
html[data-launch-visual="adopted"] .featured-panel > .countdown-particle-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-launch-visual="adopted"] .featured-panel::before,
html[data-launch-visual="adopted"] .featured-panel::after {
  display: none !important;
}

.launch-adopted-stage {
  position: absolute !important;
  z-index: 12 !important;
  inset: -12px -8% -14px -5%;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.launch-adopted-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.launch-adopted-source-anchor {
  position: absolute;
  left: 75.8%;
  top: 73.5%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.launch-adopted-number-top-anchor,
.launch-adopted-info-top-anchor,
.launch-adopted-number-pass-anchor,
.launch-adopted-if-pass-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.launch-adopted-stage:focus-visible {
  outline: 1px solid rgba(42, 175, 240, .58);
  outline-offset: 4px;
}

.launch-projection-layer.is-reversed .launch-projection-line {
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--prediction) 92%, transparent) 0 3px,
      transparent 3px 8px
    ) left top / 100% 2px no-repeat,
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--prediction) 92%, transparent) 0 3px,
      transparent 3px 8px
    ) left top / 2px 100% no-repeat;
}

/* When the launch-day reading sits under the large countdown, only the
   downward relation is needed. Once it passes to the left, JS hides it. */
.launch-projection-layer.is-direct-drop .launch-projection-line {
  background:
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--prediction) 92%, transparent) 0 3px,
      transparent 3px 8px
    ) left top / 2px 100% no-repeat;
}

/* Keep the original dotted route intact. Only remove the rectangular
   compositing surface that darkened the scene inside its bounds. */
.launch-projection-layer,
.launch-projection-line {
  background-color: transparent !important;
}

.launch-projection-line {
  opacity: 1;
  filter: none;
}

@media (max-width: 760px) {
  .launch-adopted-stage {
    inset: -4px -4% -8px -4%;
  }
}