/* Friends list (the invite card's pairs), 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; justify-items: start; } /* direct child only: the townsfolk pill inside stretched to the column */

.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 entry: avatar | name, plaques, date (own line); the note below at full width on phones, under the name from
   768px. Report and Delete sit behind one 44px "..." button pinned top right. Its card opens in the entry's flow under
   the header and pushes the note down, so it never hangs past the guestbook card, even on the last entry. */
.guestbook li { position: relative; padding: 12px 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "av head" "menu menu" "note note"; column-gap: 12px; align-items: start; }
.guestbook .gb-av { grid-area: av; }
.guestbook .gb-av svg { display: block; border-radius: 50%; background: var(--tint); }
.guestbook .gb-head { grid-area: head; min-width: 0; }
.guestbook li:has(> .gb-menu) .gb-head { padding-right: 56px; min-height: 44px; }
.guestbook .gb-head :is(.townsfolk, .title-tag) { white-space: normal; max-width: 100%; }
.guestbook .gb-when { display: block; margin-top: 2px; }
.guestbook .gb-note { grid-area: note; margin: 8px 0 0; overflow-wrap: anywhere; }
.guestbook form { margin: 0; }
.guestbook .gb-menu { grid-area: menu; min-width: 0; }
.guestbook .gb-menu > summary { position: absolute; top: 12px; right: 0; list-style: none; width: 44px; height: 44px; min-height: 44px; padding: 0; }
.guestbook .gb-menu > summary::before { display: none; } /* no gloss stripe on a round button this small */
.guestbook :is(.gb-menu, .report-box) > summary::-webkit-details-marker { display: none; }
.guestbook .gb-menu > summary svg { fill: currentColor; }
.guestbook .gb-menu[open] > summary { --b1: var(--pick); --b2: var(--pick); }
.guestbook .gb-menu-pop { display: grid; gap: 12px; width: min(300px, 100%); margin: 8px 0 0 auto; padding: 12px; box-sizing: border-box;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-sm); box-shadow: 4px 4px 0 var(--ink); }
.guestbook .gb-menu-pop > * { margin: 0; }
.guestbook .gb-menu-pop .report-box { display: grid; gap: 12px; }
.guestbook .report-box > summary { list-style: none; }
.guestbook .gb-menu-pop :is(summary, button) { width: 100%; }
.guestbook .gb-menu-pop .inline-form { display: grid; gap: 12px; }
.guestbook .gb-menu-pop .inline-form :is(select, input) { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (min-width: 768px) {
  .guestbook li { grid-template-areas: "av head" "av menu" "av note"; }
}

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