/* /friends rows (src/routes/friends.js), layout A: list rows.
   The name link's ::after covers the row, so the whole row opens the profile; the land link, moment links and actions sit above it. */
.fr-rows { list-style: none; margin: 0; padding: 0; }
.fr-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.fr-who .townsfolk { margin-left: 0; }
.fr-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; font: 600 1.15rem/1.2 var(--display); overflow-wrap: anywhere; }
.fr-name svg { flex: none; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 2px var(--ink); }
.fr-name::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-sm); }
.fr-row .fr-live a, .fr-acts { position: relative; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .fr-row:has(.fr-name:hover) .fr-name b { text-decoration: underline; text-decoration-thickness: 2px; }
}
.fr-live { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.4; }
.fr-face svg { display: block; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 2px var(--ink); }

/* Write a letter, then the 44px ··· button. Its menu opens in flow under both, as on a guestbook note. */
.fr-acts { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 12px; }
.fr-acts > .btn { min-height: 44px; }
.fr-menu { grid-column: 1 / -1; min-width: 0; }
.fr-menu > summary { position: absolute; top: 0; right: 0; list-style: none; width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; }
.fr-menu > summary::before { display: none; } /* no gloss stripe on a round button this small */
.fr-menu > summary::-webkit-details-marker { display: none; }
.fr-menu > summary svg { fill: currentColor; }
.fr-menu[open] > summary { --b1: var(--pick); --b2: var(--pick); }
.fr-menu-pop { display: grid; gap: 12px; margin-top: 12px; padding: 12px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.fr-menu-pop > * { margin: 0; }
.fr-menu-pop :is(.btn, button) { width: 100%; }
.fr-fan .fr-acts { display: block; }
.fr-fan .fr-acts .btn { width: 100%; min-height: 44px; } /* Add friend on a new keeper: the row's one action, full width on phones */
@media (min-width: 768px) { .fr-fan .fr-acts .btn { width: auto; } }

/* Phone: face | name, badge, live lines; Write a letter and ··· under the row. 768px up: the actions move right. */
.fr-rows > li + li { border-top: 2px dashed var(--rule); }
.fr-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 0; }
.fr-row .fr-acts { grid-column: 1 / -1; margin-top: 12px; }
@media (min-width: 768px) {
  /* top-aligned, so an open menu grows the row downward instead of pushing the face and name to its middle */
  .fr-row { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
  .fr-row .fr-info { align-self: center; }
  .fr-row:has(.fr-menu[open]) .fr-info { align-self: start; padding-top: 8px; }
  .fr-row .fr-acts { grid-column: 3; margin-top: 10px; grid-template-columns: auto 44px; }
}