/* ==========================================================================
   Field-level change highlight — METAR / TAF / ATIS
   ==========================================================================
   Replaces the old .card-flash-alert, which pulsed the whole card for ~2s and
   then vanished: it told you *a* card changed, not what, and if you glanced
   away you missed it entirely. Now the individual changed field pulses 3x and
   then STAYS amber until the crew clicks it to acknowledge.

   Keys driving these classes live in wx-changes.js; the bindings are wxMark()
   / clearWxField() in index.html.

   LOADS LAST, ON PURPOSE. Two of the targets already carry their own state
   styling that would otherwise win:
     .d-ind.clickable.active   (07) — background/border with !important
     .taf-period-block.active-period (08) — border-left + background
   So the highlight is drawn with `outline`, a channel nothing else in the app
   uses. It cannot be beaten by those rules regardless of specificity, and it
   stays visible when a field is BOTH changed and active — which matters,
   because a highlight hidden underneath the active state would get cleared by
   a click the crew never knowingly made.

   Colour is --color-accent throughout, so this is amber on dark and blue on
   light with no new colour introduced and no separate light-theme block
   needed — the token already swaps. (Verified rather than assumed; see the
   maintenance log.)
   ========================================================================== */

.wx-changed {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-radius: 5px;
  background: var(--color-accent-dim);
  cursor: pointer;
}

/* Inline .cond-item spans sit tight against their neighbours; without a little
   breathing room the outline collides with the adjacent field's text. */
span.cond-item.wx-changed {
  padding: 1px 5px;
  margin: -1px -1px;
}

/* A whole TAF period highlights when the period itself is new this issue, so the
   outline wraps the block. Inset further to sit inside the row's own divider. */
.taf-period-block.wx-changed {
  outline-offset: -3px;
}

/* Hover affordance — only on an actually-highlighted field, since these elements
   are not otherwise clickable and should not invite a click when there is nothing
   to acknowledge. */
.wx-changed:hover {
  outline-color: var(--text-main);
}

/* The opening attention grab: 3 pulses, then the element settles into the plain
   .wx-changed state above. Same 0.7s x 3 timing the card flash used, so the
   rhythm is unchanged — only its target moved. FLASH_MS in app.js (2100) must
   stay in step with this. */
.wx-flash {
  animation: wx-flash-pulse 0.7s ease-in-out 3;
}

@keyframes wx-flash-pulse {
  0%, 100% {
    outline-color: var(--color-accent);
    background: var(--color-accent-dim);
  }
  50% {
    outline-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--bg-color);
  }
}