/* trace-workflow-strip.css
 *
 * First-time TRACE workflow spotlight.
 *
 * Visual: the *target* element (RUN TRACE button, report card, tab strip,
 * download button) glows with a soft green halo. A small anchored
 * tooltip — navy chip with mono "NEXT" eyebrow — sits beside the target
 * explaining what to do and what they get.
 *
 * Replaces the previous top-of-canvas chip pattern; the user's eye lands
 * directly on the action, no read-then-search.
 */

/* The pulse on whichever element is currently the workflow target. */
.tws-spotlight-target {
  animation: tws-spotlight-pulse 1.8s ease-in-out infinite;
  position: relative;
  z-index: 5;
}

@keyframes tws-spotlight-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(29, 158, 117, 0.65),
      0 0 0 0 rgba(29, 158, 117, 0.00);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(29, 158, 117, 0.30),
      0 0 0 14px rgba(29, 158, 117, 0.08);
  }
}

/* Anchored tooltip — appears next to the spotlighted element. */
#tws-tooltip-root {
  position: fixed;
  z-index: 1500;
  max-width: 280px;

  background: #0D2340;
  color: rgba(242, 240, 235, 0.94);
  border-left: 3px solid #1D9E75;
  border-radius: 6px;
  padding: 12px 16px;

  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;

  display: flex;
  flex-direction: column;
  gap: 4px;

  box-shadow: 0 8px 24px -6px rgba(13, 35, 64, 0.35);
  animation: tws-tip-pop 240ms ease both;
}

.tws-tip-eyebrow {
  font-family: "Courier New", Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #1D9E75;
  text-transform: uppercase;
}

.tws-tip-body {
  display: block;
}

.tws-tip-strong {
  font-weight: 700;
  color: #FFFFFF;
}

/* Pointer triangles. The injection sets data-tws-arrow to "left" (tooltip
 * sits to the right of the target) or "up" (tooltip sits below). */
#tws-tooltip-root[data-tws-arrow="left"]::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent #0D2340 transparent transparent;
}

#tws-tooltip-root[data-tws-arrow="up"]::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #0D2340 transparent;
}

@keyframes tws-tip-pop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion — keep the spotlight, kill the animation. */
@media (prefers-reduced-motion: reduce) {
  .tws-spotlight-target { animation: none; box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.30); }
  #tws-tooltip-root { animation: none; }
}

/* Mobile (≤640px) — tooltip becomes full-width-ish at the bottom of viewport. */
@media (max-width: 640px) {
  #tws-tooltip-root {
    max-width: calc(100vw - 32px);
    font-size: 12px;
    padding: 10px 14px;
  }
}