<script lang="ts">
  // Verified check — shown next to a KEZ that has ≥1 cryptographically
  // verified proof (the client checked it, X/Twitter-style). Green so it
  // reads as "verified", distinct from the cyan brand accent.
  interface Props {
    size?: number;
    /** Tooltip text. */
    title?: string;
  }
  let { size = 16, title = "Verified — controls a proven account" }: Props = $props();
</script>

<svg
  width={size}
  height={size}
  viewBox="0 0 24 24"
  class="inline-block shrink-0 align-text-bottom"
  style="color: var(--color-verified)"
  fill="currentColor"
  role="img"
  aria-label="verified"
  {title}
>
  <!-- Scalloped seal + check, the familiar verified glyph. -->
  <path d="M12 1.5l2.3 1.7 2.85-.2 1 2.67 2.45 1.46-.83 2.74.83 2.74-2.45 1.46-1 2.67-2.85-.2L12 22.5l-2.3-1.7-2.85.2-1-2.67-2.45-1.46.83-2.74-.83-2.74 2.45-1.46 1-2.67 2.85.2z"/>
  <path d="M10.6 14.6l-2.2-2.2-1.4 1.4 3.6 3.6 6-6-1.4-1.4z" fill="var(--color-bg)"/>
</svg>
