/* Photo diagram: a picture (car / house from above) with camera pins for the named shots.
   Geometry is shared with the phone app (Dca.Contracts PhotoDiagrams): the stage is the image plus a margin of
   8% of the stage width on every side, and pin X/Y are percentages of the whole stage.
   The 8% padding works because .pd-wrap sets the width and the stage fills it (padding % = parent width). */
.pd-wrap { max-width: 520px; }
.pd-stage { position: relative; padding: 8%; background: #fff; border: 1px solid #dfe3ec; border-radius: .6rem; user-select: none; -webkit-user-select: none; }
.pd-stage > img { display: block; width: 100%; height: auto; pointer-events: none; }
.pd-stage.editing { touch-action: none; }

.pd-pin { position: absolute; width: 0; height: 0; z-index: 1; }
.pd-pin-cone { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; pointer-events: none; }
.pd-pin-cone::before { content: ""; position: absolute; left: 50%; top: 0; width: 32px; height: 27px; transform: translateX(-50%); background: rgba(59, 68, 88, .25); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pd-pin-dot { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #3b4458; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer; }
.pd-pin-num { position: absolute; left: 7px; top: -22px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; border: 1px solid #3b4458; background: #fff; color: #3b4458; font-size: .62rem; font-weight: 700; line-height: 15px; text-align: center; pointer-events: none; }
.pd-pin.done .pd-pin-dot { background: #2f8a4c; }
.pd-pin.done .pd-pin-cone::before { background: rgba(47, 138, 76, .3); }
.pd-pin.missing .pd-pin-dot { background: #b7791f; }
.pd-pin.missing .pd-pin-cone::before { background: rgba(183, 121, 31, .3); }
.pd-pin.selected { z-index: 3; }
.pd-pin.selected .pd-pin-dot { outline: 3px solid #7c5ce0; outline-offset: 1px; }
.pd-stage.editing .pd-pin-dot { cursor: grab; }
.pd-pin.dragging { z-index: 4; }
.pd-pin.dragging .pd-pin-dot { cursor: grabbing; transform: scale(1.15); }
.pd-pin-dot:focus-visible { outline: 3px solid #7c5ce0; outline-offset: 1px; }

/* Small version for the builder's phone preview. */
.pd-stage.pd-sm .pd-pin { transform: scale(.72); }

/* Row number that matches the pin, in the photo-type lists. */
.pd-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .25rem; border-radius: .6rem; font-size: .68rem; font-weight: 700; border: 1px solid currentColor; }