.result-spotlight {
  position: relative;
  outline: 3px solid var(--wa-color-brand-60);
  outline-offset: 2px;
  border-radius: var(--wa-border-radius-m);
  animation: result-spotlight-pulse 1.2s ease-out 2;
  transition: outline-color 300ms ease;
}

@keyframes result-spotlight-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa-color-brand-60) 50%, transparent);
  }
  100% {
    box-shadow: 0 0 0 14px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-spotlight {
    animation: none;
  }
}

/* HMS-1426 — Blink paints outlines broken on rows of collapsed-borders tables (horizontal
   bands only, no side edges), so the row frame is composed of inset box-shadows on the cells. */
tr.result-spotlight {
  outline: none;
  border-radius: 0;
  animation: none;
}

tr.result-spotlight > td,
tr.result-spotlight > th {
  box-shadow: inset 0 3px 0 var(--wa-color-brand-60), inset 0 -3px 0 var(--wa-color-brand-60);
}

tr.result-spotlight > td:first-child,
tr.result-spotlight > th:first-child {
  box-shadow: inset 3px 0 0 var(--wa-color-brand-60), inset 0 3px 0 var(--wa-color-brand-60), inset 0 -3px 0 var(--wa-color-brand-60);
}

tr.result-spotlight > td:last-child,
tr.result-spotlight > th:last-child {
  box-shadow: inset -3px 0 0 var(--wa-color-brand-60), inset 0 3px 0 var(--wa-color-brand-60), inset 0 -3px 0 var(--wa-color-brand-60);
}

tr.result-spotlight > td:only-child,
tr.result-spotlight > th:only-child {
  box-shadow: inset 3px 0 0 var(--wa-color-brand-60), inset -3px 0 0 var(--wa-color-brand-60), inset 0 3px 0 var(--wa-color-brand-60), inset 0 -3px 0 var(--wa-color-brand-60);
}