/* Friends list, profile guestbook, notifications page and trophy progress bars. */
.friend-list, .note-list, .guestbook { list-style: none; margin: 0; padding: 0; }
.friend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; }
.friend + .friend, .note-list li + li, .guestbook li + li { border-top: 2px dashed var(--rule); }
.friend-who { display: flex; align-items: center; gap: 10px; min-width: 190px; color: var(--ink); text-decoration: none; }
.friend-who svg { flex: none; border-radius: 50%; background: var(--tint); }
.friend-who span { display: grid; }
.friend-pets { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.friend-pets a { flex: none; }
.friend-pets svg { display: block; }

.note-list li { padding: 10px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.note-list li.unread { font-weight: 800; }
.note-list small { white-space: nowrap; }

.guestbook-form { display: grid; gap: 8px; margin-bottom: 14px; }
.guestbook-form textarea { width: 100%; }
.guestbook li { padding: 10px 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
.guestbook li svg { border-radius: 50%; background: var(--tint); }
.guestbook p { margin: 2px 0 0; overflow-wrap: anywhere; }
.guestbook form { margin: 0; }

.item-tile .stat-bar { width: 100%; margin-top: auto; }