COMPONENT: Map Pin (consumer-only)
VARIANTS: map-pin-accepting (orange) | map-pin-soon (green) | map-pin-closed (red) | map-pin-neutral (gray)

Teardrop pin marker for the providers Map view. 22×28px wrapper with drop-shadow filter. Caller supplies the SVG path inside the <span>; the CSS fills the path based on the tone variant class.

All 4 tone variants

Tones map to application status: Orange = Accepting | Green = Opening soon | Red = Closed | Gray = Unknown/neutral.

Accepting
map-pin-accepting
Opening soon
map-pin-soon
Closed
map-pin-closed
Neutral
map-pin-neutral
<span class="map-pin map-pin-accepting"><svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg></span>

Pins in context — overlaid on a map placeholder

Context: Pins are positioned via tw:absolute + inline style="left/top" percentage offsets (data-driven, justified). The wrapper uses tw:transform tw:-translate-x-1/2 tw:-translate-y-full so the pin tip lands at the coordinate.