/* Achievements (lib/AchievementView.php). Tier colours work on both themes. */
:root {
  --ach-bronze: #c27c3e;
  --ach-silver: #a8b2bd;
  --ach-gold: #e6b422;
}

.ach-badge {
  --ach-size: 56px;
  --ach-ring: var(--bs-border-color);
  width: var(--ach-size);
  height: var(--ach-size);
  flex: 0 0 var(--ach-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ach-size) * 0.5);
  border: calc(var(--ach-size) * 0.07) solid var(--ach-ring);
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  box-sizing: border-box;
}
.ach-badge.ach-tier-0 { border-style: dashed; opacity: 0.75; }
.ach-badge.ach-tier-1 { --ach-ring: var(--ach-bronze); color: var(--ach-bronze); background: color-mix(in srgb, var(--ach-bronze) 14%, var(--bs-body-bg)); }
.ach-badge.ach-tier-2 { --ach-ring: var(--ach-silver); color: var(--ach-silver); background: color-mix(in srgb, var(--ach-silver) 16%, var(--bs-body-bg)); }
.ach-badge.ach-tier-3 { --ach-ring: var(--ach-gold); color: var(--ach-gold); background: color-mix(in srgb, var(--ach-gold) 16%, var(--bs-body-bg)); box-shadow: 0 0 calc(var(--ach-size) * 0.18) color-mix(in srgb, var(--ach-gold) 45%, transparent); }
.ach-badge-link { text-decoration: none; display: inline-flex; }

.ach-pill { font-weight: 600; }
.ach-pill-0 { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.ach-pill-1 { background: var(--ach-bronze); color: #fff; }
.ach-pill-2 { background: var(--ach-silver); color: #1d2125; }
.ach-pill-3 { background: var(--ach-gold); color: #1d2125; }

.ach-progress .progress { height: 6px; }
.ach-progress-bar-1 { background: var(--ach-bronze); }
.ach-progress-bar-2 { background: var(--ach-silver); }
.ach-progress-bar-3 { background: var(--ach-gold); }

.ach-card { height: 100%; }
.ach-card .ach-name { font-weight: 600; }
.ach-card .ach-name a { text-decoration: none; color: inherit; }
.ach-card .ach-name a:hover { text-decoration: underline; }

.ach-tiers { list-style: none; padding: 0; margin: 0; }
.ach-tiers li { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.ach-tiers .ach-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex: 0 0 auto; }
.ach-dot-1 { background: var(--ach-bronze); }
.ach-dot-2 { background: var(--ach-silver); }
.ach-dot-3 { background: var(--ach-gold); }

.ach-score { font-size: 2rem; font-weight: 700; line-height: 1; }

.ach-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.ach-stat-label { font-size: 0.75rem; color: var(--bs-secondary-color); }
.ach-stat-value { font-weight: 600; font-size: 0.9rem; }