/* static/user.css
   Shared user-facing UI styles
   - Profile / account pages
   - User cards (author, hover cards)
   - Avatars, stats, badges
   Works across Account, Community, Devblog
*/

/* =========================
   Variables
   ========================= */

:root{
  --usr-bg: var(--bg, #0b0f14);
  --usr-elev: var(--bg-elevated, rgba(255,255,255,.04));
  --usr-elev-2: var(--bg-elevated-2, rgba(255,255,255,.07));
  --usr-border: var(--border, rgba(255,255,255,.12));
  --usr-text: var(--text, rgba(255,255,255,.92));
  --usr-muted: var(--muted, rgba(255,255,255,.66));
  --usr-accent: var(--accent, #67e8f9);

  --usr-radius: 16px;
  --usr-radius-sm: 12px;
  --usr-shadow: 0 14px 46px rgba(0,0,0,.55);
}

/* =========================
   Generic avatar
   ========================= */

.user-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--usr-border);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9rem;
  color: var(--usr-text);
  background: color-mix(in srgb, var(--usr-accent) 18%, transparent);
  user-select: none;
}

.user-avatar.small{
  width: 28px;
  height: 28px;
  font-size: .7rem;
}

.user-avatar.large{
  width: 72px;
  height: 72px;
  font-size: 1.2rem;
}

/* =========================
   User card (hover / inline)
   ========================= */

.user-card{
  border: 1px solid var(--usr-border);
  border-radius: var(--usr-radius);
  background: color-mix(in srgb, var(--usr-elev) 92%, transparent);
  box-shadow: var(--usr-shadow);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.user-card.compact{
  padding: 10px 12px;
}

.user-card .user-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name{
  font-weight: 800;
  font-size: 1rem;
  color: var(--usr-text);
}

.user-handle{
  font-size: .85rem;
  color: var(--usr-muted);
}

/* =========================
   Stats / pills
   ========================= */

.user-stats{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.user-pill{
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--usr-border);
  background: color-mix(in srgb, var(--usr-elev-2) 90%, transparent);
  font-size: .8rem;
  color: var(--usr-text);
  font-weight: 600;
}

.user-pill.accent{
  border-color: color-mix(in srgb, var(--usr-accent) 45%, var(--usr-border));
  background: color-mix(in srgb, var(--usr-accent) 16%, var(--usr-elev));
}

/* =========================
   Account / profile page
   ========================= */

.user-profile{
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 18px 40px;
}

.user-profile-header{
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.user-profile-details{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-profile-meta{
  font-size: .9rem;
  color: var(--usr-muted);
}

/* =========================
   Achievements grid
   ========================= */

.user-achievements{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.achievement-card{
  border: 1px solid var(--usr-border);
  border-radius: var(--usr-radius-sm);
  background: color-mix(in srgb, var(--usr-elev) 92%, transparent);
  padding: 12px;
  text-align: center;
}

.achievement-card .ach-icon{
  width: 48px;
  height: 48px;
  margin: 0 auto 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--usr-accent) 20%, transparent);
}

.achievement-card .ach-title{
  font-size: .9rem;
  font-weight: 700;
}

.achievement-card .ach-desc{
  font-size: .8rem;
  color: var(--usr-muted);
}

/* =========================
   User links / actions
   ========================= */

.user-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.user-actions a,
.user-actions button{
  border: 1px solid var(--usr-border);
  background: color-mix(in srgb, var(--usr-elev-2) 90%, transparent);
  color: var(--usr-text);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
}

.user-actions a:hover,
.user-actions button:hover{
  background: color-mix(in srgb, var(--usr-elev-2) 95%, transparent);
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 600px){
  .user-profile{
    padding: 20px 14px 32px;
  }

  .user-profile-header{
    align-items: flex-start;
  }
}