Alfred KPI hover border visual evidence

kpi-hover-border-evidence.svg

<svg xmlns="http://www.w3.org/2000/svg" width="920" height="520" viewBox="0 0 920 520">
  <rect width="920" height="520" fill="#f6f8fa"/>
  <rect x="48" y="42" width="824" height="436" rx="12" fill="#fff" stroke="#d0d7de"/>
  <text x="84" y="92" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#24292f">Alfred trend hover evidence</text>
  <text x="84" y="126" font-family="Arial, sans-serif" font-size="15" fill="#57606a">Hover target renders no red, colored, or dark border. Only the tooltip is visible.</text>
  <rect x="84" y="164" width="752" height="220" rx="8" fill="#ffffff" stroke="#d8dee4"/>
  <polyline points="112,330 166,308 220,318 274,272 328,286 382,230 436,244 490,204 544,214 598,172 652,188 706,158 760,176 812,146" fill="none" stroke="#0969da" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"/>
  <rect x="588" y="160" width="28" height="190" fill="transparent" stroke="none"/>
  <rect x="542" y="116" width="122" height="34" rx="6" fill="#111827" stroke="none"/>
  <text x="556" y="138" font-family="Arial, sans-serif" font-size="13" font-weight="700" fill="#ffffff">Jun 17: 8 done</text>
  <text x="84" y="424" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#1f2328">CSS contract</text>
  <text x="84" y="452" font-family="Arial, sans-serif" font-size="14" fill="#57606a">.trend-hit:hover / :focus / :focus-visible => border: 0; outline: none; box-shadow: none</text>
  <text x="84" y="476" font-family="Arial, sans-serif" font-size="14" fill="#57606a">.trend-tooltip => black background, white text, border: 0, box-shadow: none</text>
</svg>