/* people: the Members page (Explore clusters, Near you, member cards). Uses the tokens in /app.css. */

/* Toolbar: tabs on their own row so all seven fit, search beside the title */
#directory .dir-tools { grid-template-columns: 1fr; gap: 14px; }
#directory .dir-tools .kind-tabs { flex-wrap: wrap; row-gap: 8px; }
#directory .dir-tools .field { max-width: 420px; }
@media (max-width: 640px) {
  #directory .dir-tools .kind-tabs { flex-wrap: nowrap; margin: 0 -16px; padding: 0 16px; }
  #directory .dir-tools .field { max-width: none; }
}
#directory .dir-count { font-variant-numeric: tabular-nums; }
#directory .dir-count a { font-weight: 700; }

/* Explore */
.px { margin-top: 26px; display: grid; gap: 30px; }
.px[hidden] { display: none; }
.px-cluster { position: relative; }
.px-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.px-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--blue); }
.px-titles { display: grid; gap: 1px; min-width: 0; flex: 1; }
.px-head h2 { margin: 0; font-size: 21px; line-height: 1.3; }
.px-sub { color: var(--muted); font-size: 13.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.px-all { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px 0 14px; border: 0; border-radius: 99px; background: var(--sunken); color: var(--deep); font: 700 13.5px/1.3 Lato, sans-serif; cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.px-all svg { transition: transform var(--dur-2) var(--ease-out); }
.px-all:hover { background: var(--pale); }
.px-all:hover svg { transform: translateX(2px); }
.px-all:focus-visible { outline: none; box-shadow: var(--focus); }

.px-bubbles { position: relative; min-height: 120px; margin: 0 auto; }
.px-b { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; color: inherit; text-decoration: none; animation: px-pop 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 22ms); }
.px.settled .px-b { animation: none; }
.px-b > img, .px-initials { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(9, 48, 77, .45); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); background: var(--sunken); }
.px-initials { display: grid; place-items: center; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1; letter-spacing: .01em; font-variant-numeric: lining-nums;
  color: hsl(var(--h) 42% 26%); background: radial-gradient(circle at 32% 26%, hsl(var(--h) 75% 96%) 0%, hsl(var(--h) 55% 86%) 58%, hsl(var(--h) 42% 76%) 100%); }
a.px-b:hover, a.px-b:focus-visible { z-index: 5; text-decoration: none; outline: none; }
a.px-b:hover > img, a.px-b:hover .px-initials, a.px-b:focus-visible > img, a.px-b:focus-visible .px-initials { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 14px 28px -10px rgba(9, 48, 77, .5); }
a.px-b:focus-visible > img, a.px-b:focus-visible .px-initials { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(80, 148, 176, .55); }
.px-b.ghost { background: radial-gradient(circle at 34% 28%, #fff 0%, #eef3f8 55%, #e2e9f1 100%); box-shadow: inset 0 -3px 8px rgba(9, 48, 77, .05), 0 6px 14px -10px rgba(9, 48, 77, .25); opacity: .9; }
.px-online { position: absolute; right: 7%; bottom: 7%; width: 22%; height: 22%; min-width: 10px; min-height: 10px; max-width: 14px; max-height: 14px; border-radius: 50%; background: #2bb673; box-shadow: 0 0 0 2.5px #fff; }
.px-rank { position: absolute; top: -2px; left: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--saffron); color: var(--deep); box-shadow: 0 0 0 2.5px #fff; font: 700 12px/1 Lato, sans-serif; font-variant-numeric: tabular-nums lining-nums; }
.px-rank.r2 { background: #dfe6ee; }
.px-rank.r3 { background: #f1d3b3; }
.px-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 6; display: grid; gap: 1px; padding: 7px 12px 8px; border-radius: 10px; background: var(--deep); color: #fff; text-align: center; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out); box-shadow: 0 10px 24px -10px rgba(9, 48, 77, .55); }
.px-tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--deep); }
.px-tip strong { font: 700 13.5px/1.35 Lato, sans-serif; }
.px-tip span { font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
a.px-b:hover .px-tip, a.px-b:focus-visible .px-tip { opacity: 1; transform: translate(-50%, 0); }
@keyframes px-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .px-b { animation: none; } .px-b > img, .px-initials, .px-tip { transition: none; } }
@media (hover: none) { .px-tip { display: none; } }

.px-prompt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(100deg, rgba(204, 236, 255, .55), rgba(255, 189, 89, .14)); line-height: 1.45; }
.px-prompt > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 14px; color: var(--ink-2); }
.px-prompt strong { color: var(--deep); font-size: 15px; }
.px-prompt .px-icon { background: #fff; }
.px-prompt .btn { flex: none; }
@media (max-width: 640px) { .px-prompt { flex-wrap: wrap; } .px-prompt .btn { margin-left: 50px; } }

.px-loading { display: flex; justify-content: center; gap: 10px; padding: 60px 0; }
.px-loading span { width: 44px; height: 44px; border-radius: 50%; background: var(--sunken); animation: px-breathe 1.2s var(--ease-in-out) infinite alternate; }
.px-loading span:nth-child(2) { width: 60px; height: 60px; animation-delay: .15s; }
.px-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes px-breathe { from { opacity: .45; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* List cards */
#directory .member-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
#directory .member-card { gap: 14px; padding: 16px; align-items: center; border-radius: 16px; }
#directory .member-card .avatar.md { width: 56px; height: 56px; font-size: 18px; box-shadow: 0 0 0 2px #fff, 0 4px 10px -6px rgba(9, 48, 77, .4); }
#directory .member-card .avatar.md:not(img) { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; background: radial-gradient(circle at 32% 26%, hsl(var(--h) 75% 96%), hsl(var(--h) 50% 84%)); }
#directory .member-info { display: grid; gap: 2px; min-width: 0; line-height: 1.45; }
#directory .member-info strong { font-size: 15.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
#directory .member-info .bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#directory .member-card .online-dot { right: 1px; bottom: 1px; }
#directory .member-info .role-tag { justify-self: start; }
.px-b:has(.px-rank) { z-index: 2; }
.px-b > img { position: absolute; inset: 0; }