/* Feed cards and profile lists. Linked from inside "content" because hx-boost swaps only the body. */
.feed-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.feed-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 0; }
.who { display: flex; align-items: center; gap: 12px; min-height: 44px; min-width: 0; }
.note { margin: 0; padding: 0 16px 14px; }

/* A placeRow with its score chip beside it: two sibling links, never nested. */
.row-chip { display: flex; align-items: center; flex-wrap: wrap; padding-right: 16px; }
.row-chip .row { flex: 1; min-width: 0; }
.rank-no { width: 28px; padding-left: 12px; text-align: center; font: 800 0.9rem var(--font-num); color: var(--ink2); flex-shrink: 0; }
.rank-no:empty { padding-left: 0; width: 0; }
.rank-label { flex-basis: 100%; padding: 0 0 10px 52px; font-size: 0.8rem; color: var(--accent-text); font-weight: 600; }

.profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 16px; }
.profile-head h1 { margin: 8px 0 0; }
.profile-head form { margin-top: 4px; }
.profile-avatar .avatar { width: 72px; height: 72px; font-size: 1.8rem; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 12px; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 72px; padding: 8px 4px; background: var(--surface); border-radius: var(--radius-sm); }
.stat b { font: 800 1.3rem/1.2 var(--font-num); font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.7rem; color: var(--ink2); }

.match { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 56px; margin: 8px 0 0; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); }
.match span { font-size: 0.8rem; }

.seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 8px; background: var(--surface2); border-radius: 999px; }
.seg a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; font-weight: 700; color: var(--ink2); }
.seg a[aria-current] { background: var(--surface); color: var(--ink); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.fchip { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; white-space: nowrap; }
.fchip[aria-current] { background: var(--accent); color: #fff; box-shadow: none; }

.tier { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 0.9rem; color: var(--ink2); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.tier-0 { background: var(--great); } .tier-1 { background: var(--meh); } .tier-2 { background: var(--bad); }

/* Sign-up page opened from a friend's invite link. */
.invite-context { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }