/* A photo with an optional circle drawn over it. Positions are percentages,
   so the circle stays on the right spot at any display size. */
.marked-photo { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.marked-photo img { max-width: 100%; height: auto; }
.photo-marker {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid #ff2d55;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 2px rgba(255, 255, 255, .85);
  pointer-events: none;
}
.marker-canvas { cursor: crosshair; touch-action: none; user-select: none; }
.marker-canvas img { -webkit-user-drag: none; }
.marker-canvas img { max-height: 75vh; width: auto; }

/* Gallery picker: the whole thumbnail is the radio button. */
.gallery-picker label { cursor: pointer; transition: box-shadow .15s; }
.gallery-picker .btn-check:checked + label { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .35); }
.gallery-picker .btn-check:focus-visible + label { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.gallery-picker img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }