/* Illustrative warning on the final practice diagram. It describes a
   simulated signal, never a live incident. */
.closing-practice .breach-alert {
  position: absolute;
  z-index: 2;
  top: 26.6%;
  right: 7.8%;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 9px 5px 7px;
  overflow: hidden;
  border: 1px solid #b8423266;
  border-left: 3px solid #b84232;
  background: #f4f3eef0;
  color: #842d23;
  box-shadow: 0 3px 12px #18212715;
  pointer-events: none;
}

.breach-alert-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  animation: breach-symbol-pulse 4.8s linear infinite;
}
.breach-alert-icon svg { display: block; width: 21px; height: 21px; overflow: visible; }
.breach-alert-icon path:first-child { fill: #b84232; stroke: none; }
.breach-alert-icon path:nth-child(2) { fill: none; stroke: #f4f3ee; stroke-width: 2; stroke-linecap: square; }
.breach-alert-icon circle { fill: #f4f3ee; }

.breach-alert-label {
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
  font: 600 9px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .065em;
}

.breach-alert-sweep {
  position: absolute;
  inset: 0 auto 0 -12%;
  width: 16%;
  background: linear-gradient(90deg, transparent, #b842321b, transparent);
  transform: translateX(0);
  animation: breach-signal-sweep 4.8s linear infinite;
}

@keyframes breach-symbol-pulse {
  0%, 58%, 100% { opacity: .65; filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  61%, 67%, 73% { opacity: 1; filter: drop-shadow(0 0 5px #b84232a8); transform: scale(1.08); }
  64%, 70% { opacity: .22; filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  78% { opacity: .65; filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
}
@keyframes breach-signal-sweep {
  0%, 22% { transform: translateX(0); opacity: 0; }
  26% { opacity: 1; }
  58% { transform: translateX(760%); opacity: .7; }
  62%, 100% { transform: translateX(760%); opacity: 0; }
}

body.motion-paused .breach-alert-icon,
body.motion-paused .breach-alert-sweep { animation-play-state: paused; }

@media (max-width: 760px) {
  .closing-practice .breach-alert { top: 25.5%; right: 7%; min-height: 29px; gap: 5px; padding: 3px 6px 3px 4px; }
  .breach-alert-icon, .breach-alert-icon svg { width: 18px; height: 18px; flex-basis: 18px; }
  .breach-alert-label { font-size: 8px; letter-spacing: .025em; }
}

@media (prefers-reduced-motion: reduce) {
  .breach-alert-icon, .breach-alert-sweep { animation: none; }
  .breach-alert-icon { opacity: 1; filter: none; }
  .breach-alert-sweep { display: none; }
}