/**
 * assets/users.css
 * The members hub (includes/users_page.php), scoped to .hg-users.
 */

.hg-users { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink); text-align: left; }
.hg-users *, .hg-users *::before, .hg-users *::after { box-sizing: border-box; }
.hg-users :is(h1, h2) { width: auto; max-width: none; background: none; border: 0; padding: 0; margin: 0; color: var(--color-ink); font-family: var(--font-display); line-height: var(--leading-tight); text-align: left; }
.hg-users p { margin: 0; }
.hg-users a:link, .hg-users a:visited { font-size: inherit; color: var(--color-brand); text-decoration: none; }
.hg-users a:hover { color: var(--color-brand-dark); text-decoration: underline; }

/* Banner. */
.hg-users .us-hero { padding: var(--space-6); margin: 0 0 var(--space-8); border-radius: 16px; color: #fff;
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0) 45%), linear-gradient(130deg, #0B2E55 0%, var(--color-brand-darker) 45%, var(--color-brand) 100%);
    box-shadow: 0 10px 28px rgba(15, 77, 140, 0.25); }
.hg-users .us-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); }
.hg-users h1.us-title { margin: var(--space-1) 0 var(--space-3); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.hg-users .us-intro { max-width: 600px; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.88); }

/* Sections. */
.hg-users .us-section { margin: 0 0 var(--space-8); }
.hg-users .us-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); }
.hg-users .us-section-head h2 { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.hg-users .us-welcome, .hg-users .us-note { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }

/* Avatars: a picture or the first letter, in a circle. */
.hg-users .us-ava { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--color-brand-tint); color: var(--color-brand-darker); font-weight: 800; font-size: var(--text-sm); }

/* Newest members. */
.hg-users .us-newest { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hg-users .us-newest a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; font-weight: 600; transition: border-color 0.15s, box-shadow 0.15s; }
.hg-users .us-newest a:link, .hg-users .us-newest a:visited { color: var(--color-ink); }
.hg-users .us-newest a:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); color: var(--color-brand); text-decoration: none; }

/* Leaderboards. */
.hg-users .us-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: #fff; border: 1px solid var(--color-border-strong); }
.hg-users .us-seg a { padding: 4px 12px; border-radius: 6px; font-size: var(--text-sm); font-weight: 700; }
.hg-users .us-seg a:link, .hg-users .us-seg a:visited { color: var(--color-ink-muted); }
.hg-users .us-seg a:hover { color: var(--color-ink); text-decoration: none; }
.hg-users .us-seg a.is-on { background: var(--color-brand); color: #fff; }
.hg-users .us-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.hg-users .us-board { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 14px; background: #fff; }
.hg-users .us-board .us-section-head { margin-bottom: var(--space-2); }
.hg-users .us-rows { list-style: none; margin: 0; padding: 0; }
.hg-users .us-row { display: flex; align-items: center; gap: var(--space-3); padding: 5px 6px; border-radius: 8px; }
.hg-users .us-row:nth-child(even) { background: var(--color-bg-subtle); }
.hg-users .us-rank { flex-shrink: 0; width: 1.75rem; text-align: right; font-weight: 800; color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
.hg-users .us-row.is-top1 .us-rank { color: #D4A017; }
.hg-users .us-row.is-top2 .us-rank { color: #9AA3AD; }
.hg-users .us-row.is-top3 .us-rank { color: #B87333; }
.hg-users .us-row.is-top { background: linear-gradient(90deg, var(--color-brand-tint) 0%, #fff 90%); }
.hg-users .us-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.hg-users .us-who .us-ava { width: 28px; height: 28px; font-size: var(--text-xs); }
.hg-users a.us-who:link, .hg-users a.us-who:visited { color: var(--color-ink); font-weight: 600; }
.hg-users a.us-who:hover { color: var(--color-brand); text-decoration: none; }
.hg-users .us-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-users .us-total { flex-shrink: 0; font-variant-numeric: tabular-nums; text-align: right; }
.hg-users .us-total b { font-weight: 800; color: var(--color-brand-darker); }
.hg-users .us-total small { font-size: var(--text-xs); color: var(--color-ink-muted); }
.hg-users .us-empty { padding: var(--space-6) var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: 12px; text-align: center; color: var(--color-ink-muted); }

/* Reader tools. */
.hg-users .us-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.hg-users .us-tool { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border: 1px solid var(--color-border); border-top: 4px solid var(--color-brand); border-radius: 12px; background: linear-gradient(160deg, var(--color-brand-tint) 0%, #fff 55%); transition: transform 0.12s, box-shadow 0.15s; }
.hg-users a.us-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.hg-users .us-tool-title { font-weight: 800; color: var(--color-ink); }
.hg-users a.us-tool:hover .us-tool-title { color: var(--color-brand); }
.hg-users .us-tool-text { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-ink-muted); }

.hg-users .us-foot { text-align: center; font-size: var(--text-sm); color: var(--color-ink-muted); }

@media (max-width: 760px) {
    .hg-users .us-boards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hg-users .us-hero { padding: var(--space-4); }
    .hg-users h1.us-title { font-size: var(--text-3xl); }
    .hg-users .us-board { padding: var(--space-3); }
}