/* Shared paper-and-crayon profile controls. */
.member-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--paper); }
.avatar-picker { margin: 18px 0 24px; color: var(--ink); }
.avatar-picker-head { display: flex; align-items: center; gap: 20px; }
.avatar-preview { width: 100px; height: 100px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--paper); }
.avatar-picker-head h3 { margin: 0 0 6px; font: 600 19px var(--display-font); }
.avatar-picker-head p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.avatar-upload { position: relative; display: inline-flex; min-height: 42px; align-items: center; padding: 8px 16px; border: 1px solid var(--line); border-radius: 12px 10px 13px 9px; color: var(--green); background: var(--paper); font-size: 14px; font-weight: 600; cursor: pointer; overflow: hidden; }
.avatar-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.avatar-upload:focus-within { outline: 3px solid var(--green); outline-offset: 3px; }
.avatar-upload:has(input:disabled) { opacity: .55; cursor: wait; }
.avatar-hint { margin: 12px 0 18px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.avatar-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.avatar-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 12px 6px 9px; border: 1px solid transparent; border-radius: 15px 12px 16px 11px; background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; }
.avatar-option .member-avatar { width: 64px; height: 64px; max-width: 100%; }
.avatar-option[aria-pressed=true] { background: var(--yellow-soft); background-image: var(--paper-grain); border-color: var(--line); }
.avatar-option[aria-pressed=true] > span:first-of-type { background: url('/assets/ui/crayon-wash.svg') center / 100% 100% no-repeat; }
.avatar-check { display: none; position: absolute; right: 8px; top: 5px; color: var(--green); font-size: 15px; font-weight: 700; }
.avatar-option[aria-pressed=true] .avatar-check { display: block; }
.avatar-option:hover { background-color: var(--soft); }
.avatar-option:disabled { opacity: .55; cursor: wait; }
.avatar-status { min-height: 1.5em; margin: 12px 0 0; color: var(--green); font-size: 13px; line-height: 1.5; }
.avatar-status.is-error { color: #a33930; }
.web-profile > p { color: var(--muted); overflow-wrap: anywhere; }
.web-profile .avatar-picker { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.web-profile > .member-avatar, .account-panel > .member-avatar { width: 80px; height: 80px; }
.detail-author { display: flex; align-items: center; gap: 10px; }
.web-comments .member-avatar { margin-right: 8px; }
#auth-button .member-avatar { width: 28px; height: 28px; }
.crayon-h5 .avatar-picker { margin: 0; }
.crayon-h5 .profile-avatar-card { margin: 16px; padding: 20px 16px 8px; border: 1px solid var(--line); border-radius: 18px 15px 19px 14px; background: var(--surface); }
.crayon-h5 .avatar-picker-head { gap: 14px; }
.crayon-h5 .avatar-preview { width: 80px; height: 80px; }
.crayon-h5 .avatar-picker-head h3 { font-size: 18px; }
.crayon-h5 .avatar-options { gap: 4px; }
.crayon-h5 .avatar-option .member-avatar { width: 56px; height: 56px; }
.crayon-h5 .profile-head { align-items: center; }
.crayon-h5 .profile-head > div { min-width: 0; flex: 1; }
.crayon-h5 .profile-head h4 { overflow-wrap: anywhere; }
.crayon-h5 .profile-edit-link { flex: 0 0 auto; min-height: 44px; color: var(--green); border: 0; background: transparent; font-size: 14px; }
@media(max-width:360px) { .crayon-h5 .avatar-option .member-avatar { width: 48px; height: 48px; } .crayon-h5 .avatar-picker-head { gap: 10px; } }
/* A soft pigment stroke carries selection; content and hit areas stay upright. */
.avatar-option[aria-pressed=true] { background: transparent; border-color: transparent; }
.avatar-option[aria-pressed=true]::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(100%, 108px); height: 100%; transform: translate(-50%, -50%) rotate(-3deg); background: url('/assets/ui/crayon-wash.svg') center / 100% 100% no-repeat; opacity: .55; pointer-events: none; }
.avatar-option > * { position: relative; z-index: 1; }
.avatar-option > .avatar-check { position: absolute; }
.avatar-option[aria-pressed=true] > span:first-of-type { background: none; }