/* Telemetry — interactive correlation scatter plot
   "Time on confirmation vs Task complexity"
   ===================================================
   Every dot is a real Workday task, plotted by task complexity (x) against the
   time users spent on its confirmation page (y) and tinted by difficulty. The
  scatter reveals the positive correlation on scroll; selecting a task shows a
  small popover describing what it involves.

   Type / colour follow an Apple-style system: one weight step between levels,
   a muted three-tone greyscale, and generous, quiet spacing. */

/* The container box — width, max-width (800px), centring margin, 16px radius,
   overflow clipping and the inset edge shadow — is shared with the rest of the
   page's media via the .soft-inner-shadow class (see style.css), so this block
   sits at the same size as the other components. Only the telemetry-specific
   surface (aspect ratio, tinted background, typography) is declared here. */
.telemetry-component {
  --tel-text: #1d1d1f;
  --tel-text-2: #6e6e73;
  --tel-text-3: #a1a1a6;

  aspect-ratio: 5 / 4;
  background: #ececf0;
  line-height: normal;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.telemetry-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── Axes ── */
.telemetry-axis {
  fill: none;
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  pointer-events: none;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.telemetry-component.is-revealed .telemetry-axis {
  stroke-dashoffset: 0;
}

/* ── Trend line ── */
.telemetry-trend {
  fill: none;
  stroke: url(#telemetry-gradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  /* Purely decorative — let hovers pass through to the dots beneath it */
  pointer-events: none;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1) 0.95s,
    opacity 0.18s ease-out;
}

.telemetry-component.is-revealed .telemetry-trend {
  stroke-dashoffset: 0;
}

.telemetry-component.has-pinned .telemetry-trend {
  opacity: 0.42;
}

/* ── Scatter dots (one per task) ── */
.telemetry-dot {
  fill: var(--c);
  stroke: var(--c);
  fill-opacity: 0.34;
  stroke-opacity: 0.5;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  /* The stagger belongs only to the one-time reveal. Interaction never changes
     dot geometry; hover attention is rendered by the separate halo below. */
  transition:
    transform 0.4s cubic-bezier(0.33, 1, 0.68, 1) var(--reveal-delay, 0s),
    opacity 0.4s ease var(--reveal-delay, 0s),
    fill-opacity 0.16s ease-out,
    stroke-opacity 0.16s ease-out;
}

.telemetry-component.is-revealed .telemetry-dot {
  transform: scale(1);
  opacity: 1;
}

.telemetry-dots:focus-within .telemetry-dot[tabindex="0"] {
  outline: none;
  stroke: var(--tel-text);
  stroke-opacity: 1;
  stroke-width: 2.5;
  fill-opacity: 0.9;
}

/* Hover leaves the plotted mark completely invariant. Clicking pins a task and
   gently lowers the surrounding context while preserving the selected dot. */
.telemetry-component.has-pinned .telemetry-dot {
  fill-opacity: 0.12;
  stroke-opacity: 0.16;
}

.telemetry-component.has-pinned .telemetry-dot.is-active {
  fill-opacity: 0.34;
  stroke-opacity: 0.5;
}

.telemetry-component.has-pinned
  .telemetry-dots:focus-within
  .telemetry-dot[tabindex="0"] {
  fill-opacity: 0.9;
  stroke-opacity: 1;
}

/* One pointer-transparent halo handles both states: a quiet preview on hover,
   then a stronger persistent keyline when the task is clicked/pinned. */
.telemetry-sel-ring {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease-out;
}

.telemetry-sel-ring.is-on {
  opacity: 0.6;
}

.telemetry-sel-ring.is-pinned {
  opacity: 1;
  stroke-width: 2;
}

/* ── Overlay chrome ── */
.telemetry-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Legend — centred in the top margin, on the plot's horizontal axis */
.telemetry-legend {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 13.75%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.5s ease 0.15s,
    transform 0.5s ease 0.15s;
}

.telemetry-component.is-revealed .telemetry-legend {
  opacity: 1;
  transform: none;
}

.tl-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #515154;
  letter-spacing: -0.005em;
}

.tl-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

/* Axis captions — centred within their (symmetric) margins */
.tel-xlabel,
.tel-ylabel span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tel-text-2);
  white-space: nowrap;
}

.tel-xlabel {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 0;
  height: 13.75%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tel-ylabel {
  position: absolute;
  left: 0;
  width: 11%;
  top: 13.75%;
  bottom: 13.75%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tel-ylabel span {
  transform: rotate(-90deg);
}

/* ── Task popover ── */
.telemetry-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 244px;
  max-width: 70%;
  pointer-events: none;
  /* Positioned per-quadrant so it opens toward the available centre space */
  transform: translate(var(--tx, 13px), var(--ty, 13px));
}

.telemetry-card.side-left {
  --tx: calc(-100% - 13px);
}
.telemetry-card.side-right {
  --tx: 13px;
}
.telemetry-card.valign-above {
  --ty: calc(-100% - 13px);
  --card-enter-y: 4px;
}
.telemetry-card.valign-below {
  --ty: 13px;
  --card-enter-y: -4px;
}

.tc-inner {
  background: #fff;
  border-radius: 15px;
  padding: 13px 16px 15px;
  text-align: left;
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.09),
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 0 0 0.5px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translate3d(0, var(--card-enter-y, 4px), 0);
  transition:
    opacity 0.12s ease-out,
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.telemetry-card.is-open .tc-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Selection is communicated by colour, not heavier elevation. */
.telemetry-card.is-pinned .tc-inner {
  outline-color: var(--c);
}

.tc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--tel-text);
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.tc-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tel-text-2);
  line-height: 1.5;
  margin-top: 6px;
}

/* ── Card metadata (impact / time / stakeholders) ── */
.tc-stats {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tc-stat-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tc-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--tel-text-2);
  white-space: nowrap;
}

.tc-stat-value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tel-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
}

.tc-stat-track {
  margin-top: 5px;
  height: 4px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.tc-stat-track i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--c);
}

/* ── Reduced motion — no reveal or interaction transitions ── */
@media (prefers-reduced-motion: reduce) {
  .telemetry-dot {
    transform: scale(1);
    opacity: 1;
    transition: none;
  }
  .telemetry-sel-ring {
    transition: none;
  }
  .telemetry-axis,
  .telemetry-trend {
    stroke-dashoffset: 0;
    transition: none;
  }
  .telemetry-legend {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tc-inner {
    transition: none;
  }
}

/* ── Responsive ── */
@media (max-width: 620px) {
  .telemetry-legend {
    gap: 14px;
  }
  .tl-item {
    font-size: 11.5px;
  }
  .tel-xlabel,
  .tel-ylabel span {
    font-size: 10px;
  }
  .telemetry-card {
    width: 200px;
  }
  .tc-name {
    font-size: 14px;
  }
}