/* Tier-coloured APPVLR icon (Jon 2026-10-11). features/tier-icon.js sets html[data-tier].
   These are fixed brand colours, not theme tokens, so this sheet is outside the theme codemod.
   Free keeps the theme logo colour. Pro (also Lifetime and full-access accounts) is white on deep purple;
   a team member is white on yellow. The mark is the same mask the header logo uses. */
.tier-icon {
  position: relative;
  display: block;
  flex: none;
  width: var(--tier-icon-size, 3.5rem);
  height: var(--tier-icon-size, 3.5rem);
  border-radius: 22%;
  background: var(--logo-color, #2E7FF2);
}

.tier-icon::before {
  content: "";
  position: absolute;
  inset: 16%;
  background: var(--logo-ink, #fff);
  pointer-events: none;
  -webkit-mask: url("assets/brand/appvlr-mark-mask.png") center / contain no-repeat;
  mask: url("assets/brand/appvlr-mark-mask.png") center / contain no-repeat;
}

.tier-icon.t-pro,
html[data-tier="pro"] .brand-block .brand-logo {
  background:
    radial-gradient(circle at 50% 50%, rgba(176, 140, 255, 0.55) 0, rgba(176, 140, 255, 0) 52%),
    radial-gradient(circle at 50% 50%, #5B2BC4 0%, #2A0E6B 100%);
}

.tier-icon.t-team,
html[data-tier="team"] .brand-block .brand-logo {
  background: linear-gradient(135deg, #FFD21F 0%, #F0A800 100%);
}

.tier-icon.t-pro::before,
.tier-icon.t-team::before,
html[data-tier="pro"] .brand-block .brand-logo::before,
html[data-tier="team"] .brand-block .brand-logo::before {
  background: #fff;
}

.tier-icon {
  transition: background-color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .tier-icon {
    transition: none;
  }
}