/* ══ THE VERIFIED MARK ════════════════════════════════════════  11 Sep 2026 ══
   Sir: "to show verified, next to the trade profile description and on the left
   of payment protection section, put a flashing hyyryn arch that is grey."

   BUILT, AND BUILT IN THE VERSION THAT SURVIVES. Three things the research
   found, each of which would have bitten the literal reading, and each of which
   is handled here rather than argued about:

   1 · IT CANNOT FLASH FOREVER. WCAG **2.2.2 Pause, Stop, Hide is Level A**, and
       it defines blinking as "switch back and forth between two visual states
       in a way that is meant to draw attention" — which is precisely what this
       is for. Its three exceptions are: under **five seconds**, not presented
       in parallel with other content, or essential. A badge pulsing
       indefinitely beside a page of text meets none of them.
       So it pulses **three times over 4.5 seconds and then rests**, which
       clears the five-second threshold and needs no pause control.
       At 0.67Hz it is also nowhere near 2.3.1's three-flashes-per-second.

   2 · THE MARK ITSELF NEVER CHANGES OPACITY, and that is not fussiness. 1.4.11
       wants **3:1 against adjacent colours** for a graphic you need in order to
       understand the content. `--muted` on cream measures **5.51**; the same
       grey at 0.6 alpha composites to about 2.9 and fails. So the pulse is a
       HALO on a pseudo-element and the arch sits at full strength through every
       frame — which is also `interaction.md` i48, animate opacity on a
       pseudo-element rather than repainting the thing itself.

   3 · IT CARRIES A NAME. An icon-only badge has no accessible name by default
       and is not focusable; Red Hat's design system says so outright. The
       visually hidden text is the claim in words, and it is the exact claim:
       Hyyryn checked the credentials, which is not the same as Hyyryn
       endorsing the work.

   AND THE ONE HONEST OBJECTION, RECORDED RATHER THAN BURIED. A brand mark
   doing duty as a status indicator carries a semantic collision: the same
   shape says "this is us" in the masthead and "this is verified" inline.
   E-Verify's own guidance is the nearest published parallel and it is blunt —
   the seal "does not constitute DHS endorsement of any employer's business,
   goods, services, or policies." Here the collision is smaller than it looks,
   because the claim IS Hyyryn's: §22 already gives the platform's guarantee to
   the platform's own marks. What it must never become is a quality rating.
   Measured evidence on that risk is genuinely mixed — CHI 2019 (n=2,789 across
   two waves) found users CAN tell authenticity from credibility, while
   NewsGuard/YouGov found 60% misread X's check once the rule behind it
   changed. The lesson is the second one: **a badge's meaning is only as stable
   as the rule behind it, and users do not re-learn the rule.**
   ═══════════════════════════════════════════════════════════════════════════ */
.vmark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  /* 1.05em keeps it in proportion to whatever it sits beside, and the floor
     keeps it legible where that line is small: at the rail summary's 10.5px
     label the arch computed 11px and its posts started to close up. 13 is the
     smallest the trilithon still reads as a trilithon, measured rather than
     guessed. */
  width: 1.05em; height: 1.05em;
  min-width: 13px; min-height: 13px;
  flex: none;
  vertical-align: -0.14em;
  color: var(--muted, #636976);
}
.vmark svg {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: block;
  fill: currentColor;
}

/* THE HALO IS THE THING THAT MOVES. A radial wash rather than a ring, so it
   reads as the mark catching the light rather than as a notification dot. */
.vmark::before {
  content: '';
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--muted, #636976) 34%, transparent),
    transparent 72%);
  opacity: 0;
  pointer-events: none;
  animation: vmark-pulse 1.5s ease-in-out 3 both;
}
@keyframes vmark-pulse {
  0%, 100% { opacity: 0;   transform: scale(.72); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* i39 and the WebKit guidance: scaling is one of the two things actually named
   as a vestibular trigger, so under `reduce` the halo does not run at all. The
   mark still says what it says — which is the point of the preference, and why
   this is not `animation: none` bolted onto everything. */
@media (prefers-reduced-motion: reduce) {
  .vmark::before { animation: none; opacity: 0; }
}

/* On a navy ground the grey would sink, so the mark takes the cream. Stated
   here rather than left to whoever puts one on a dark surface next. */
.vmark--on-dark { color: var(--cream-2, #F3EFE4); }
.vmark--on-dark::before {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--cream, #FAF8F3) 30%, transparent),
    transparent 72%);
}

/* Beside a line of text it needs a gap; on the left of a summary row it needs
   the same gap and nothing else, because the row is already a grid. */
.ov-desc .vmark { margin-right: .42em; }