docs: redesign port-status SVG example — vertical card layout

Replace the cramped horizontal layout with a clean vertical card-per-state
design. Each state gets its own row with a large port swatch and readable
label + description. Removes the callout lines which were too small to read.

Author: Peter Baumert