@import '_content/CSI.UI/CSI.UI.o3qr5mjzyb.bundle.scp.css';

/* /Pages/DirectoryUser.razor.rz.scp.css */
/* Issue #61 part 2 — identity header.
   Scoped to DirectoryUser.razor via Blazor's automatic .razor.css
   rewriting so the classes don't bleed into other pages. */

.person-identity-header[b-lpjqm43cug] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.person-identity-photo-img[b-lpjqm43cug],
.person-identity-photo-initials[b-lpjqm43cug] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    flex-shrink: 0;
}

.person-identity-photo-img[b-lpjqm43cug] {
    object-fit: cover;
    border: 1px solid var(--csi-color-border, #d1d5db);
}

.person-identity-photo-initials[b-lpjqm43cug] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--csi-color-muted-bg, #e5e7eb);
    color: var(--csi-color-muted-fg, #4b5563);
    font-size: 2rem;
    font-weight: 600;
}

.person-identity-text[b-lpjqm43cug] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* #61 acceptance criteria — 64px photo on tablet/mobile. */
@media (max-width: 640px) {
    .person-identity-photo-img[b-lpjqm43cug],
    .person-identity-photo-initials[b-lpjqm43cug] {
        width: 64px;
        height: 64px;
    }

    .person-identity-photo-initials[b-lpjqm43cug] {
        font-size: 1.5rem;
    }
}