/* ═══════════════════════════════════════════════════════════
   LUNAR TEAM — MEMBERS PAGE
   Extends style.css. Uses the same tokens; adds member-card
   and presence-status treatments only.
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE HEADER ── */
.members-header {
    width: 100%; max-width: 1160px; margin: 0 auto;
    padding: 128px 24px 36px;
}
.members-header .hero-eyebrow { margin-bottom: 14px; }
.members-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 450; font-style: italic;
    letter-spacing: -0.01em; line-height: 1;
    color: var(--text);
    margin-bottom: 16px;
}
.members-header p {
    font-family: var(--font-body);
    font-size: 0.95rem; color: var(--silver-dim);
    max-width: 480px; line-height: 1.65; margin-bottom: 18px;
}
.live-indicator {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(124, 77, 221, 0.08); border: 1px solid var(--border);
    padding: 7px 16px; border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 0.68rem; color: var(--silver-dim); font-weight: 400;
}
.live-indicator-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--muted);
}
.live-indicator.connected .live-indicator-dot {
    background: var(--ok); box-shadow: 0 0 8px var(--ok);
    animation: blink 1.6s ease-in-out infinite;
}
.members-count {
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
    margin-top: 12px;
}

/* ── CONTROL BAR (reuse main page pattern) ── */
.members-controls {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 28px;
}

/* ── MEMBERS GRID ── */
.members-main {
    width: 100%; margin: 0 auto; padding: 36px 20px 80px;
    position: relative; flex: 1;
}
.members-main::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 100%;
    background:
        radial-gradient(ellipse 900px 500px at 20% 0%, rgba(124, 77, 221, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 800px 600px at 85% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 55%),
        linear-gradient(180deg, rgba(11, 7, 25, 0.4) 0%, rgba(5, 2, 13, 0) 12%);
    pointer-events: none; z-index: -1;
}
.members-inner { width: 100%; max-width: 1160px; margin: 0 auto; position: relative; }
.members-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* ── MEMBER CARD ──
   Modeled on an actual Discord profile popout: a full banner panel,
   the avatar overlapping its seam with a cut-out status ring (not
   just a colored dot on top), and a dark content panel below. */
.member-card {
    --member-accent: var(--accent-bright);
    background: #111214;
    border: 1px solid var(--border); border-radius: var(--radius);
    position: relative;
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(22px);
    animation: card-in 0.52s var(--ease-out) forwards;
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.3s;
}
.member-card:hover { border-color: var(--member-accent); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--member-accent) 25%, transparent); transform: translateY(-3px); }
.member-card.is-offline { opacity: 0.62; }
.member-card.is-offline:hover { opacity: 1; }

/* the banner — the member's real Discord profile banner image when
   cached (see api/profiles.js), falling back to a gradient wash in
   their accent color when no banner is set or not yet fetched.
   The actual image URL is applied inline via style="background-image"
   from members.js; this class just swaps the sizing/positioning and
   removes the gradient fallback so the real photo shows cleanly. */
.member-banner {
    height: 92px; width: 100%; flex-shrink: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background:
        radial-gradient(ellipse 260px 140px at 85% -20%, color-mix(in srgb, var(--member-accent) 55%, white 8%) 0%, transparent 65%),
        linear-gradient(135deg, color-mix(in srgb, var(--member-accent) 85%, black 10%) 0%, color-mix(in srgb, var(--member-accent) 45%, black 35%) 100%);
    position: relative;
}
.member-banner.has-image {
    background-color: var(--member-banner-color, var(--member-accent));
    background-size: cover; background-position: center;
}

.member-body { padding: 0 18px 18px; border-radius: 0 0 var(--radius) var(--radius); display: flex; flex-direction: column; flex: 1; background: #111214; }
.member-top { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; padding: 0 4px; }

/* avatar with a cut-out ring: the card background color "bites" a
   notch out of the avatar border so the status badge sits inset into
   the ring rather than stacked as a flat dot on top of it. It's an
   <a> to the member's Discord profile, so reset default link styles. */
.member-avatar-wrap {
    position: relative; flex-shrink: 0; width: 76px; height: 76px;
    margin-top: -38px;
    display: block; text-decoration: none;
}
.member-avatar-wrap:focus-visible {
    outline: 2px solid var(--member-accent); outline-offset: 3px; border-radius: 50%;
}
.member-avatar {
    /* deliberately smaller than its container — this is what leaves
       room for the decoration ring to sit around the avatar instead
       of overlapping its edge (matching how Discord's own client
       lays this out), rather than relying entirely on however much
       transparent padding a given decoration asset happens to have */
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 86%; height: 86%; border-radius: 50%; object-fit: cover;
    background: #111214;
    display: block;
    -webkit-mask-image: radial-gradient(circle 16px at 88% 88%, transparent 98%, #000 100%);
    mask-image: radial-gradient(circle 16px at 88% 88%, transparent 98%, #000 100%);
    transition: filter 0.2s;
}
.member-avatar-wrap:hover .member-avatar { filter: brightness(1.08); }
/* real Discord avatar decoration — decoration assets are square PNGs
   with the transparent padding already baked in around their ring
   art, so the decoration spans the full wrap while the avatar photo
   underneath is sized down (see .member-avatar above) to leave it
   room, rather than the decoration trying to bleed past a
   full-sized avatar entirely on its own. */
.member-avatar-decoration {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
}
.member-avatar-wrap.has-decoration .member-status-badge { z-index: 3; }
.member-status-badge {
    position: absolute; bottom: 0; right: 0;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: #111214;
    background: var(--muted);
}
.member-status-badge.status-online  { background: var(--ok); }
.member-status-badge.status-idle    { background: var(--warn); }
.member-status-badge.status-dnd     { background: var(--danger); }
.member-status-badge.status-offline { background: #5c5e66; }
.member-status-badge i { line-height: 1; }

.member-id { min-width: 0; padding-bottom: 6px; }
.member-name {
    font-family: var(--font-ui); font-size: 1.08rem; font-weight: 700;
    color: #fff; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-username {
    font-family: var(--font-body); font-size: 0.72rem;
    color: var(--muted); margin-top: 1px;
}
.member-copy-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 0; margin-top: 1px;
    font-family: var(--font-body); font-size: 0.72rem; color: var(--muted);
    cursor: pointer; transition: color 0.2s;
}
.member-copy-btn i { font-size: 0.58rem; opacity: 0.6; transition: opacity 0.2s; }
.member-copy-btn:hover { color: var(--member-accent); }
.member-copy-btn:hover i { opacity: 1; }
.member-copy-btn:focus-visible {
    outline: 2px solid var(--member-accent); outline-offset: 3px; border-radius: 4px;
    color: var(--member-accent);
}

.member-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.member-role {
    display: inline-block;
    font-family: var(--font-mono); font-size: 0.62rem;
    color: var(--member-accent); letter-spacing: 0.3px;
    background: color-mix(in srgb, var(--member-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--member-accent) 30%, transparent);
    padding: 3px 9px; border-radius: 20px;
}

/* status pill — a light inline indicator (dot + label), not a boxed
   chip competing visually with the activity card below it */
.member-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--silver-dim);
}
.member-status-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.member-status-pill.status-online  .member-status-pill-dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.member-status-pill.status-idle    .member-status-pill-dot { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.member-status-pill.status-dnd     .member-status-pill-dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.member-status-pill.status-offline .member-status-pill-dot { background: #5c5e66; }

/* activity — custom status is a plain line; rich activities (game,
   Spotify, streaming, watching...) get an image + two-line block,
   the same shape Discord itself uses for rich presence */
.member-activity { margin-bottom: 12px; }
.member-activity-custom {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-body); font-size: 0.78rem; color: var(--silver-dim);
    line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-status-emoji-img { width: 16px; height: 16px; vertical-align: -3px; }

.member-activity-rich {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px; padding: 8px 10px;
}
.member-activity-art { width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.member-activity-art-fallback {
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--member-accent) 20%, transparent);
    color: var(--member-accent); font-size: 1.05rem;
}
.member-activity-info { min-width: 0; }
.member-activity-kicker {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 0.6rem; color: #1db954;
    text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px;
}
.member-activity-title {
    font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-activity-sub {
    font-family: var(--font-body); font-size: 0.68rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-activity-spotify .member-activity-kicker { color: #1db954; }

.member-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.member-link-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--silver-dim); font-size: 0.85rem; text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.member-link-btn:hover {
    border-color: var(--member-accent); color: var(--member-accent);
    background: color-mix(in srgb, var(--member-accent) 12%, transparent);
}
.member-link-btn:focus-visible {
    outline: 2px solid var(--member-accent); outline-offset: 2px;
    border-color: var(--member-accent); color: var(--member-accent);
}

/* ── LOADING / EMPTY / ERROR STATES ── */
.member-card.skeleton-state { padding: 0; }
.member-skel-row { display: flex; align-items: center; gap: 14px; }
.member-skel-avatar { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; }
.member-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.members-empty {
    grid-column: 1 / -1; text-align: center; padding: 70px 0;
    color: var(--muted); font-size: 0.85rem; font-family: var(--font-body);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.members-empty i { font-size: 2rem; color: rgba(124, 77, 221, 0.3); }
.members-empty code {
    font-family: var(--font-mono); font-size: 0.76rem; color: var(--silver-dim);
    background: rgba(124, 77, 221, 0.08); padding: 2px 8px; border-radius: 6px;
}

@media (max-width: 600px) {
    .members-header { padding: 100px 18px 28px; }
    .members-main { padding: 0 14px 60px; }
    .members-grid { gap: 14px; }
}

@media (min-width: 601px) and (max-width: 920px) {
    .members-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .member-card, .live-indicator-dot, .member-status-pill-dot {
        animation: none !important;
    }
    .member-card { opacity: 1; transform: none; }
}