.identity-image { position:relative; display:inline-grid; place-items:center; flex:0 0 auto; width:40px; height:40px; overflow:hidden; border-radius:50%; background:var(--lavender, #d8edc7); color:var(--ink, #130823); vertical-align:middle; font-family:var(--font-ui, sans-serif); font-size:.875rem; font-weight:800; line-height:1; }
.identity-image[data-identity-kind="organization"] { border-radius:var(--app-radius, 8px); background:var(--surface-muted, #eeebf2); }
.identity-image[data-identity-size="medium"] { width:48px; height:48px; font-size:1rem; }
.identity-image[data-identity-size="large"] { width:96px; height:96px; font-size:1.75rem; }
.identity-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.identity-image img.is-loaded { opacity:1; }
.identity-image[data-identity-kind="organization"]:has(img.is-loaded) { background:#fff; }
.identity-image[data-identity-kind="organization"] img { object-fit:contain; padding:8%; }
.identity-image .identity-initials[hidden] { display:none; }
.identity-settings { display:flex; align-items:center; gap:24px; padding:24px 0; margin-bottom:24px; border-bottom:1px solid var(--line); }
.identity-settings-compact { padding:0 0 24px; margin:0; }
.identity-settings-copy { flex:1; min-width:0; }
.identity-settings h3 { margin:0 0 8px; font-size:1.25rem; line-height:1.4; overflow-wrap:anywhere; }
.identity-settings p { max-width:60ch; margin:0 0 8px; color:var(--muted); font-size:.875rem; line-height:1.6; }
.identity-settings .identity-settings-note { font-size:.8rem; }
.identity-settings .identity-settings-recommendation { margin:0; font-size:.8125rem; }
.identity-image-control { position:relative; display:block; flex:none; width:96px; height:96px; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:var(--surface); color:var(--text); cursor:pointer; }
.identity-image-control .identity-image { width:100%; height:100%; }
[data-identity-settings-kind="organization"] > .identity-image-control { border-radius:var(--app-radius); }
.identity-image-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-radius:inherit; background:rgb(19 8 35 / 88%); color:#fff; opacity:0; font:700 .8125rem var(--font-ui); }
.identity-image-overlay svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.identity-image-control:is(:hover,:focus-visible) .identity-image-overlay { opacity:1; }
.identity-settings > .button { flex:none; }
.identity-editor button { min-height:44px; }
.identity-editor-feedback[data-error="true"] { color:var(--error); }
.identity-editor { width:min(44rem, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:0; border-radius:var(--app-radius, 8px); background:var(--surface); color:var(--text); }
.identity-editor::backdrop { background:var(--overlay, rgb(19 8 35 / 65%)); }
body[data-app-scope] dialog.identity-editor { width:min(44rem, calc(100vw - 32px)); padding:0; }
body[data-app-scope] .identity-editor .identity-editor-form { display:block; padding:28px; }
.identity-editor h2 { margin:0 0 12px; font-size:1.5rem; }
.identity-editor-intro { margin:0 0 24px; color:var(--muted); }
.identity-editor-body { display:grid; grid-template-columns:192px minmax(0,1fr); gap:24px; align-items:start; }
.identity-editor-preview { display:grid; place-items:center; width:192px; min-height:192px; background:var(--surface-subtle); border-radius:var(--app-radius); }
.identity-crop-preview { display:block; width:192px; height:192px; background:#fff; border-radius:var(--app-radius); }
.identity-crop-preview.is-portrait { border-radius:50%; }
.identity-editor-fields { min-width:0; }
.identity-editor-fields label { display:grid; gap:8px; margin:0 0 16px; font-weight:700; font-size:.875rem; }
.identity-editor-fields input[type=file] { width:100%; min-width:0; padding:8px; border:1px solid var(--line-strong); border-radius:var(--app-radius); font:inherit; }
.identity-editor-fields input[type=file]::file-selector-button { min-height:36px; margin-right:8px; padding:6px 10px; border:0; border-radius:var(--app-radius); background:var(--surface-muted); color:var(--text); font:inherit; cursor:pointer; }
.identity-editor-fields input[type=range] { width:100%; min-height:44px; margin:0; accent-color:var(--violet); padding:0; border:0; }
.identity-editor-hint { margin:0 0 20px; color:var(--muted); font-size:.8rem; line-height:1.5; }
.identity-editor-feedback { min-height:1.6em; margin:20px 0 12px; font-size:.875rem; }
.identity-editor-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.identity-editor-actions .identity-remove { margin-right:auto; color:var(--error); }
.identity-editor-actions .identity-remove[hidden] { display:none; }
.profile-visual-identity { display:flex; align-items:center; gap:20px; min-width:0; }
.profile-visual-identity > div { min-width:0; }
.record-visual-identity { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.record-visual-identity strong { font-size:.875rem; overflow-wrap:anywhere; }
.member-detail-heading > .identity-image { margin-bottom:16px; }
.member-identity:has(.identity-image) { position:relative; padding-left:56px; }
.member-identity > .identity-image { position:absolute; left:0; top:0; }
@media(max-width:40rem) { .identity-editor-body { grid-template-columns:minmax(0,1fr); } .identity-editor-preview { justify-self:center; } body[data-app-scope] .identity-editor .identity-editor-form { padding:20px; } .identity-settings { gap:16px; flex-wrap:wrap; } .identity-settings-copy { flex-basis:calc(100% - 80px); } .identity-settings > :is(.identity-image,.identity-image-control) { width:64px; height:64px; font-size:1.3rem; } .identity-settings h3 { font-size:1.125rem; } .identity-settings > .button { margin-left:80px; } .profile-visual-identity { gap:12px; } .profile-visual-identity > :is(.identity-image,.identity-image-control) { width:64px; height:64px; } }
@media(hover:none), (pointer:coarse) { .identity-image-overlay { inset:auto 0 0 auto; width:28px; height:28px; border-radius:var(--app-radius); opacity:1; } .identity-image-overlay svg { width:16px; height:16px; } .identity-image-overlay > span { display:none; } .identity-image-control[data-identity-change] .identity-image-overlay { border:2px solid var(--surface); } }