/* theme-agnostic flair chips, tinted by each badge's --bc */
.badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:5px; font-size:14px; line-height:1; border:1px solid var(--bc, rgba(127,127,127,.4)); background:color-mix(in srgb, var(--bc, #888) 18%, transparent); }
.badge img { width:18px; height:18px; object-fit:contain; display:block; }
.badges-admin .badge { font-size:18px; min-width:30px; height:30px; }
.badge-row td { vertical-align:middle; }

/* ---- text flairs (styled labels: Programmer, Site Founder, …) ---- */
.flairs { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0 3px; }
.flair {
  display:inline-block; font-size:11px; font-weight:bold; line-height:1.4;
  letter-spacing:.2px; padding:2px 9px; white-space:nowrap; color:var(--ft,#fff);
}
/* old-HTML-button look: beveled outset border + highlight/shadow */
.flair-button {
  background: var(--fb,#b3413a);
  border: 2px outset color-mix(in srgb, var(--fb,#b3413a) 70%, #ffffff 30%);
  border-radius: 3px;
  padding: 2px 10px;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.18);
}
.flair-button:active { border-style: inset; box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.flair-pill { background: var(--fb,#888); border:1px solid color-mix(in srgb, var(--fb,#888) 55%, #000 12%); border-radius:11px; }
.flair-flat { background: var(--fb,#888); border-radius:3px; }
.flair-outline { background:transparent; color:var(--fb,#888); border:1px solid var(--fb,#888); border-radius:3px; }

/* ---- post-profile layout — applies on every theme ----
   Scoped under .post-profile so these win the cascade over each theme's own .pp-*
   rules without !important, and use translucent colors so they read on light + dark.
   Layout lives here (one source); the per-theme files still own the actual colors. */
/* --pp-w drives both the avatar and the flair width so they always line up */
.post-profile { text-align: center; --pp-w: 120px; }
.post-profile .pp-rank { margin: 1px 0 3px; }

/* post-count rank ladder: name + gold stars (--rc overrides the colour) */
.post-profile .pp-rankladder { margin: 0 0 6px; line-height: 1.2; }
.post-profile .pp-rankname { font-size: 12px; font-weight: 600; color: var(--rc, inherit); }
.post-profile .pp-stars { display: block; font-size: 12px; letter-spacing: 2px; color: var(--rc, #f5c518); text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.post-profile .pp-stars-img { line-height: 0; letter-spacing: 0; }
.pp-star { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin: 0 1px; }
.badges-admin .pp-star { width: 16px; height: 16px; }

/* centered avatar (+ overlaid hat); transparent background so transparent PNGs show through */
.post-profile .pp-avwrap { position: relative; display: inline-block; margin: 6px auto 2px; line-height: 0; }
.post-profile .pp-avatar {
  width: var(--pp-w); height: var(--pp-w); max-width: 100%;
  display: block; object-fit: cover; background: transparent;
  border: 1px solid rgba(127,127,127,.28); border-radius: 4px;
}
/* the author's equipped chat hat, scaled up to sit on top of the avatar */
.post-profile .pp-hat {
  position: absolute; left: 28%; top: -17%; transform: translateX(-50%);
  width: 61%; height: auto; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}

/* text flairs: equal-width stacked bars, matched to the avatar width */
.post-profile .flairs { flex-direction: column; align-items: stretch; gap: 5px; width: var(--pp-w); max-width: 100%; margin: 7px auto 2px; }
.post-profile .flair { display: block; width: 100%; box-sizing: border-box; text-align: center; }

/* Posts/Likes pulled tight together, separated from the avatar block by a faint rule */
.post-profile .pp-stats {
  gap: 0; margin-top: 9px; padding-top: 9px; align-items: center;
  border-top: 1px solid rgba(127,127,127,.16);
}
.post-profile .pp-stat { line-height: 1.3; }

/* online/offline: drop the themed dot, italic text, green only when online */
.post-profile .pp-status { margin-top: 5px; }
.post-profile .pp-status::before { content: none; }
.post-profile .pp-status.on { color: #4cc96e; }
.post-profile .pp-status.off { color: rgba(127,127,127,.85); }

/* badges get their own roomier, separated row */
.post-profile .badges {
  justify-content: center; gap: 7px; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid rgba(127,127,127,.16);
}

/* ---- rich profile page (core profile.ejs; theme-neutral rgba so it works on all themes) ---- */
.profile-page { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.profile-card { flex: 0 0 220px; max-width: 100%; border: 1px solid rgba(127,127,127,.25); border-radius: 6px; padding: 14px; text-align: center; }
.profile-main { flex: 1; min-width: 280px; }
.profile-avwrap { position: relative; display: inline-block; line-height: 0; }
.profile-avatar { width: 150px; height: 150px; max-width: 100%; object-fit: cover; background: transparent; border: 1px solid rgba(127,127,127,.3); border-radius: 6px; }
.profile-hat { position: absolute; left: 28%; top: -17%; transform: translateX(-50%); width: 61%; height: auto; pointer-events: none; z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.profile-name { font-size: 20px; line-height: 1.2; margin: 10px 0 6px; }
.profile-kv { width: 100%; text-align: left; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.profile-kv th { text-align: left; opacity: .6; font-weight: normal; padding: 3px 8px 3px 0; white-space: nowrap; vertical-align: top; }
.profile-kv td { padding: 3px 0; }
.profile-online { color: #4cc96e; font-weight: 600; }
.profile-flag { margin: 6px 0; }
.profile-posts { list-style: none; margin: 0; padding: 0; }
.profile-posts li { padding: 7px 0; border-bottom: 1px solid rgba(127,127,127,.14); }
.profile-posts li:last-child { border-bottom: none; }
.profile-post-date { font-size: 11px; margin-left: 6px; }
.profile-h { margin: 14px 0 6px; }
/* rank ladder rendered in the profile sidebar (the post-profile rules are scoped to .post-profile) */
.profile-card .pp-rankladder { margin: 4px 0 8px; line-height: 1.3; }
.profile-card .pp-rankname { font-weight: 600; color: var(--rc, inherit); }
.profile-card .pp-stars { display: block; color: var(--rc, #f5c518); letter-spacing: 2px; font-size: 13px; }
.profile-card .flairs { justify-content: center; }

/* ACP previews + editor */
.badges-admin .flair { font-size:12px; }
.badges-admin .badge-edit { margin-top:6px; padding:8px 10px; background:rgba(127,127,127,.07); border:1px solid rgba(127,127,127,.18); border-radius:5px; }
.badges-admin .badge-edit label { display:inline-block; margin:3px 10px 3px 0; font-size:12px; }
.badges-admin .badge-edit input[type=color] { vertical-align:middle; height:24px; width:34px; padding:0; border:1px solid rgba(127,127,127,.4); }
.badges-admin .kind-fields { margin:6px 0; padding:8px 10px; border-left:3px solid rgba(127,127,127,.3); }
.badges-admin .badge-file { font-size:11px; }
.badges-admin .flair-preview { margin:6px 0; }