/* ═══════════════════════════════════════════════════════════════════════════
   MEMBERS LIST — /users/

   Everything the page used to carry in its own <style> block and style=""
   attributes. The block moved verbatim and first, so its rules keep the order
   they had; the three attribute rules and the signpost follow.

   The hero image is the one style="" left in user-list.php: it is chosen per
   request in PHP, which a stylesheet cannot know.
   ═══════════════════════════════════════════════════════════════════════════ */

body { overflow-x:clip; }

/* ── Hero ── */
.ot-hero { display:flex; flex-direction:column; justify-content:flex-end; }
.ot-hero__bg {
    position:absolute; inset:-15%;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    transform:scale(1.04); transition:transform 8s ease-out; will-change:transform;
}
.ot-hero__bg.ready { transform:scale(1); }
.ot-hero__content { position:relative; z-index:1; padding:1.5rem 0 2.5rem; }

/* ── Filter bar — inline, matches species-list / blog-list ── */
.filter-bar { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.filter-bar__label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); margin-right:.25rem; white-space:nowrap; }
.filter-pill { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding: .36rem .85rem .24rem; border-radius:100px; border:1px solid var(--rule); color:var(--ink-3); background:transparent; transition:border-color .2s,color .2s,background .2s; white-space:nowrap; }
.filter-pill:hover { border-color:var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim); }
.filter-pill.active { background:var(--emerald-dim); border-color:var(--emerald-rule); color:var(--emerald); }
.filter-pill--all.active { background:var(--bg-3); border-color:var(--rule); color:var(--ink-2); }

/* ── Count / heading label ── */
.ul-count-title { display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.35rem; }

/* ── User grid ── */
.ul-body { padding:3rem 0 5rem; }
.ul-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem; }

/* ── User card ── */
.user-card {
    display:flex; flex-direction:column;
    background:var(--bg-card); border:1px solid var(--rule);
    border-radius:var(--radius-lg); overflow:hidden;
    text-decoration:none;
    transition:border-color .25s, transform .25s, box-shadow .25s;
}
.user-card:hover {
    border-color:var(--emerald-rule);
    transform:translateY(-4px);
    box-shadow:0 16px 44px rgba(0,0,0,.4);
}

/* Card header — avatar + level badge */
.user-card__head {
    position:relative;
    background:var(--bg-3);
    padding:1.5rem 1.25rem 1rem;
    display:flex; align-items:flex-end; gap:1rem;
    border-bottom:1px solid var(--rule);
}
.user-card__avatar {
    width:62px; height:62px; border-radius:50%; flex-shrink:0;
    border:2px solid var(--emerald-rule);
    background:var(--bg-2);
    display:flex; align-items:center; justify-content:center;
    color:var(--emerald); font-size:1.5rem; overflow:hidden;
}
.user-card__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.user-card__head-info { flex:1; min-width:0; }
.user-card__name {
    font-family:var(--font-display); font-size:1rem; font-weight:700;
    color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:.2rem;
    transition:color .2s;
}
.user-card:hover .user-card__name { color:var(--emerald-lt); }
.user-card__username {
    font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--emerald);
    display:flex; align-items:center; gap:.25rem;
}
.user-card__level {
    position:absolute; top:.75rem; right:.75rem;
    font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
    padding: .27rem .6rem .13rem; border-radius:100px;
    border:1px solid var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim);
}

/* Card body */
.user-card__body { padding:1rem 1.25rem; flex:1; }
.user-card__bio {
    font-size:.82rem; color:var(--ink-3); line-height:1.7;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.user-card__empty-bio {
    font-family:var(--font-mono); font-size:.65rem; color:var(--ink-4); font-style:italic;
}

/* Card footer — stats */
.user-card__footer {
    display:flex; align-items:center; gap:0;
    border-top:1px solid var(--rule);
    background:var(--bg-2);
}
.user-card__stat {
    flex:1; display:flex; flex-direction:column; align-items:center;
    padding:.7rem .5rem; gap:.2rem;
    border-right:1px solid var(--rule);
}
.user-card__stat:last-child { border-right:none; }
.user-card__stat-val {
    font-family:var(--font-mono); font-size:.82rem; font-weight:700; color:var(--ink-2);
}
.user-card__stat-lbl {
    font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-4);
}

/* ── Empty state ── */
.ul-empty {
    text-align:center; padding:5rem 1rem;
    font-family:var(--font-mono); color:var(--ink-4);
}
.ul-empty i { font-size:2.5rem; margin-bottom:1rem; display:block; color:var(--ink-4); }
.ul-empty p { font-size:.75rem; letter-spacing:.08em; }

/* ── Breadcrumb ── */
.art-breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1.25rem; }
.art-breadcrumb a { color:var(--ink-3); text-decoration:none; transition:color .15s; }
.art-breadcrumb a:hover { color:var(--emerald); }
.art-breadcrumb__sep { color:var(--ink-4); }



/* ── AJAX spinner ── */
.ul-spinner {
    display:none; align-items:center; justify-content:center;
    padding:4rem 1rem; gap:.75rem;
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-4);
}
.ul-spinner.is-visible { display:flex; }
.ul-spinner__ring {
    width:22px; height:22px; border-radius:50%;
    border:2px solid var(--rule);
    border-top-color:var(--emerald);
    animation:ul-spin .7s linear infinite;
    flex-shrink:0;
}
@keyframes ul-spin { to { transform:rotate(360deg); } }
#ulGrid { transition:opacity .15s ease; }
#ulGrid.is-loading { opacity:0; pointer-events:none; }

/* ── Formerly style="" attributes ── */
/* The filter bar sits on a row divider, not an outline. */
.ul-filterbar { border-bottom: 1px solid var(--rule); }
.ul-count-title { color: var(--emerald); }
.ul-count-num {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--ink); margin: 0;
}

/* ── The signpost back to /community/ ──
   Same component as .clubs-community and .comm-join. */
.ul-community {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    margin-top: 2rem; padding: 1.25rem 1.5rem;
    background: var(--bg-2); border-radius: var(--radius-lg);
}
.ul-community__text {
    flex: 1; min-width: 220px; margin: 0;
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
    color: var(--ink-2);
}
.ul-community__text i { color: var(--emerald); flex-shrink: 0; }

/* --emerald measures 4.04:1 on the ivory ground; --emerald-drk gives 7.30. */
html[data-theme="light"] .ul-community__text i { color: var(--emerald-drk); }
/* .btn-ghost's --ink-2 label composites to 4.43:1 on a --bg-2 strip in light
   theme. --ink, as .ot-hero .btn-ghost already does; hover is untouched. */
html[data-theme="light"] .ul-community .btn-ghost:not(:hover) { color: var(--ink); }