/* blast-radius.css: Blast radius (component 20). Owner: group B (P2.T5).
   An inline callout: --surface-sunken, 1 px --border, 3 px --border-strong inline-start, --radius-control, padding --space-4 by
   --space-5, a target icon (16, --text-secondary), text --type-body with the counts in weight 600 and tabular. While recomputing the
   counts are skeleton bars; arriving values flash --brand-subtle once (opacity on a pseudo-element, so only opacity animates). */
[data-component="blast-radius"] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-sizing: border-box;
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border);
  border-inline-start: var(--border-width-accent) solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  font: var(--type-body);
}
[data-component="blast-radius"] > .icon { margin-block-start: var(--space-1); color: var(--text-secondary); }
.blast-radius__text { position: relative; isolation: isolate; flex: 1 1 auto; min-inline-size: 0; margin: 0; }
.blast-radius__count { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
a.blast-radius__count { color: var(--brand); text-decoration: underline; text-decoration-thickness: var(--border-width); text-underline-offset: var(--space-1); }
a.blast-radius__count:hover { color: var(--brand-hover); }

.blast-radius__skeleton {
  display: inline-block;
  inline-size: var(--size-skeleton-chip-w);
  block-size: var(--size-skeleton-title-h);
  border-radius: var(--radius-chip);
  background: var(--border);
  vertical-align: middle;
  animation: skeleton-pulse var(--duration-pulse) ease-in-out infinite;
}

.blast-radius__text[data-flash="true"]::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
  z-index: calc(var(--z-base) - 1);
  border-radius: var(--radius-chip);
  background: var(--brand-subtle);
  opacity: 0;
  pointer-events: none;
  animation: blast-radius-flash var(--duration-flash) var(--ease-standard) 1;
}
@keyframes blast-radius-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
/* Reduced motion: no animation runs (base.css), so the flash is the static --brand-subtle background until the script clears it (3 s). */
@media (prefers-reduced-motion: reduce) {
  .blast-radius__text[data-flash="true"]::before { opacity: 1; }
}