/* Profile photos: the photo version of .avatar, and the profile photo card (My account, person page). */
img.avatar-photo { object-fit: cover; background: var(--surface-3); color: transparent; overflow: hidden; }

.ph-body { display: flex; gap: var(--s6); align-items: flex-start; flex-wrap: wrap; }
.ph-current { display: grid; justify-items: center; gap: var(--s2); flex: none; width: 128px; text-align: center; }
.ph-current .avatar { box-shadow: 0 0 0 4px var(--accent-soft); }
.ph-state { margin: 0; }
.ph-forms { flex: 1 1 260px; min-width: 0; }
.ph-file { padding: 7px 10px; height: auto; min-height: var(--control-h); max-width: 100%; }
.ph-note { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; }
.ph-note svg { flex: none; margin-top: 3px; }

.ph-crop { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
.ph-crop[hidden] { display: none; }
.ph-stage { position: relative; width: 200px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--surface-3); touch-action: none; cursor: grab; box-shadow: 0 0 0 1px var(--border-strong); flex: none; }
.ph-stage:active { cursor: grabbing; }
.ph-stage:focus-visible { outline: none; box-shadow: var(--focus), 0 0 0 1px var(--border-strong); }
.ph-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none;
  pointer-events: none; -webkit-user-drag: none; }
.ph-zoom { flex: 1 1 140px; min-width: 120px; }
.ph-zoom input[type=range] { width: 100%; min-height: 24px; accent-color: var(--accent); }

@media (max-width: 560px) {
  .ph-body { flex-direction: column; align-items: stretch; }
  .ph-current { width: auto; grid-auto-flow: column; justify-content: start; align-items: center; text-align: left; }
  .ph-stage { width: 180px; margin-inline: auto; }
}