/* Optional follow-on stylesheet. Existing initials remain the failure fallback.
 * White letterboxing matches the encoder's white transparency background.
 * scale-down contains the whole source without enlarging small originals. */
.avatar { position: relative; overflow: hidden; }
.avatar.profile-photo-loaded { border-radius: 0; background: #fff; }
.profile-photo-image { display: block; opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: scale-down; object-position: center; background: #fff; border-radius: 0; }
.profile-photo-image.profile-photo-ready { opacity: 1; }
.profile-photo-editor { display: grid; gap: .75rem; padding-block: 1rem; }
.profile-photo-editor input { max-width: 100%; }
.profile-photo-editor button { justify-self: start; }
.profile-photo-editor progress { width: 100%; max-width: 24rem; }
.profile-photo-editor [hidden] { display: none; }
.profile-photo-preview { width: 192px; max-width: 100%; min-width: 0; aspect-ratio: 1; background: #fff; border-radius: 0; }
.profile-photo-preview:empty { display: none; }
.profile-photo-preview canvas, .profile-photo-preview img { display: block; width: 100%; height: 100%; object-fit: scale-down; object-position: center; border-radius: 0; }
.profile-photo-crop { min-width: 0; margin: 0; padding: .75rem; border: 1px solid var(--line, #ccd5d1); border-radius: .5rem; }
.profile-photo-crop[hidden], .profile-photo-crop-fields[hidden] { display: none; }
.profile-photo-crop-toggle { display: flex; align-items: center; gap: .5rem; }
.profile-photo-crop-fields { display: grid; gap: .5rem; margin-block: .75rem; }
.profile-photo-crop-fields label { display: grid; grid-template-columns: 1fr auto; gap: .25rem; }
.profile-photo-crop-fields input { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; padding: 0; }
.profile-photo-crop-fields output { font-variant-numeric: tabular-nums; }
.profile-photo-crop button { min-height: 44px; margin-top: .5rem; }