.profile-photo { width: 96px; height: 96px; object-fit: contain; border: 1px solid #d3dbe5; border-radius: 8px; background: #fff; }
.profile-photo-empty { display: inline-grid; place-items: center; width: 96px; height: 96px; border: 1px dashed #8995a5; border-radius: 8px; color: #52647a; font-size: .8rem; }
.profile-image-view { display: inline-block; max-width: 100%; }
nav .profile-photo, nav .profile-photo-empty { width: 48px; height: 48px; }
.profile-image-editor { display: flex; align-items: start; flex-wrap: wrap; gap: .6rem; padding: 1rem; border: 1px solid #d3dbe5; border-radius: 8px; margin: .6rem 0; max-width: 100%; }
.profile-image-editor h3, .profile-image-editor > p, .profile-image-editor > label { flex-basis: 100%; margin: 0; }
.profile-image-editor input { max-width: 100%; min-width: 0; }
.profile-image-editor video { width: 100%; max-width: 320px; background: #172536; }
.profile-image-editor [hidden] { display: none !important; }
.profile-image-directory > div > button { margin: .3rem; white-space: normal; overflow-wrap: anywhere; }
.profile-image-directory form { flex-wrap: wrap; }
#profile-images-dialog { width: min(900px,calc(100% - 2rem)); max-width: 900px; }
@media print { .profile-image-editor, .profile-image-directory { display: none !important; } }

td .profile-photo, td .profile-photo-empty { width: 40px; height: 40px; font-size: .6rem; }
.profile-header { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.profile-header dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.profile-header dt { font-weight: 600; color: #52647a; }
.profile-header dd { margin: 0; }