.account-photo-card{border:1px solid var(--border,#dce4e7);border-radius:16px;padding:20px;background:var(--surface,#fff);color:var(--text,#16343d);margin:20px 0}.account-photo-card h3{font-size:1.1rem;margin:0 0 6px}.account-photo-card h4{margin:0 0 8px}.account-photo-help,.account-photo-editor p{font-size:.88rem;line-height:1.5;color:var(--muted,#52656d);margin:6px 0 14px}.account-photo-current{display:flex;align-items:center;gap:16px;margin:16px 0}.account-photo-current img,.account-photo-placeholder{width:80px;height:80px;flex-shrink:0;object-fit:cover;border-radius:50%;border:1px solid #dce4e7}.account-photo-placeholder{display:grid;place-items:center;background:#e8f2f1;font-size:1rem;font-weight:700;color:#285a60}.account-photo-current p{font-size:.9rem}.account-photo-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.account-photo-card button,.account-photo-choose{border:1px solid #b7c8ce;border-radius:9px;padding:9px 13px;background:#fff;color:#164b53;font-size:.88rem;font-weight:600;line-height:1.4;cursor:pointer;position:relative}.account-photo-choose{display:inline-flex;align-items:center;overflow:hidden}.account-photo-choose input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.account-photo-card button:focus-visible,.account-photo-choose:focus-within,.account-photo-canvas:focus-visible,.account-photo-sliders input:focus-visible{outline:3px solid #167981;outline-offset:3px}.account-photo-card button:disabled,.account-photo-choose.is-disabled{opacity:.55;cursor:not-allowed}.account-photo-choose.is-disabled input{cursor:not-allowed}.account-photo-card .account-photo-primary{background:#176970;color:#fff;border-color:#176970}.account-photo-editor{border-top:1px solid #dce4e7;margin-top:18px;padding-top:18px}.account-photo-canvas{display:block;max-width:100%;width:256px;height:auto;aspect-ratio:1;border-radius:8px;border:1px solid #bacbd0;touch-action:none;cursor:grab}.account-photo-canvas:active{cursor:grabbing}.account-photo-sliders{display:grid;gap:8px;max-width:360px;margin:16px 0}.account-photo-sliders label{font-size:.86rem;font-weight:600;display:flex;justify-content:space-between}.account-photo-sliders input{width:100%;min-height:24px;accent-color:#176970}.account-photo-status{font-size:.88rem;line-height:1.5;margin:14px 0 0;min-height:1.5em;color:#245c4d}.account-photo-status.is-error{color:#9b2f29}.account-photo-confirmation{padding:14px;margin-top:16px;border:1px solid #dcc9af;border-radius:10px;background:#fffaf1;font-size:.9rem}.account-photo-card [hidden]{display:none!important}.account-photo-card a{color:#176970;text-decoration:underline}.account-photo-card p{overflow-wrap:anywhere}@media(max-width:520px){.account-photo-card{padding:16px}.account-photo-current{align-items:flex-start}.account-photo-actions{align-items:stretch}.account-photo-actions button,.account-photo-choose{min-height:42px}.account-photo-canvas{width:min(100%,256px)}}
/* Organization logos use a square preview and fit fully by default. */
.account-photo-organization .account-photo-current img,.account-photo-organization .account-photo-placeholder{border-radius:12px;background:#fff}.account-photo-contain .account-photo-current img{object-fit:contain;padding:5px;box-sizing:border-box}.account-photo-contain .account-photo-canvas{cursor:grab;background-color:#fff;background-image:linear-gradient(45deg,#eef3f3 25%,transparent 25%),linear-gradient(-45deg,#eef3f3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef3f3 75%),linear-gradient(-45deg,transparent 75%,#eef3f3 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.account-photo-organization .account-photo-placeholder{background:#e8f2f1}.account-photo-choose:has(input:disabled){cursor:not-allowed}
.profile-avatar-option{margin:20px 0;padding:16px 20px;border:1px solid #d0dce7;border-radius:12px;background:#f7fafc;color:#172b3b}.profile-avatar-option>summary{cursor:pointer;font-weight:700;min-height:32px;line-height:1.5}.profile-avatar-option>p{font-size:13px;line-height:1.5;color:#526474;max-width:70ch}.profile-avatar-option .account-photo-card{max-width:680px}.profile-avatar-option summary:focus-visible{outline:3px solid #2384be;outline-offset:4px}