/* A player's badges (/players/{steamid}/badges): every badge with its tiers and progress, and the titles they unlock.
   Each group carries its colour in --tone (the same colour the title has in game chat). Earned badges light up in it;
   badges not started stay dim. Built on the site tokens (site.css) and the profile panels (players.css). */
.pro-tabs { display: flex; min-width: 0; }

.bdg-flash { margin: 0; padding: 12px 16px; color: var(--ink); background: var(--blight-soft); border: 1px solid var(--blight); border-radius: 6px; }
.bdg-flash--bad { background: oklch(0.68 0.19 28 / .12); border-color: var(--danger); }

/* The total: tiers earned, set big, and the title worn. */
.bdg-total {
    display: grid; gap: 18px 32px; align-items: end; padding: clamp(18px, 3vw, 28px);
    background: radial-gradient(90% 140% at 0% 100%, oklch(0.87 0.2 128 / .12), transparent 60%), linear-gradient(170deg, var(--panel-2), var(--bg-deep));
    border: 1px solid var(--line); border-radius: 6px;
}
.bdg-total__main { display: grid; gap: 10px; min-width: 0; }
.bdg-total__title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-weight: 400; }
.bdg-total__title b { color: var(--blight); font: 400 clamp(4rem, 16vw, 7rem)/.82 var(--font-display); font-variant-numeric: tabular-nums; }
.bdg-total__title span { color: var(--ink-3); font: 400 clamp(1.8rem, 6vw, 2.8rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bdg-total__line { margin: 0; color: var(--ink-2); }
.bdg-total__wear { display: grid; gap: 8px; justify-items: start; padding: 16px; background: oklch(0 0 0 / .25); border: 1px solid var(--line-soft); border-radius: 4px; min-width: 0; }
.bdg-total__wear small { color: var(--ink-3); }
.bdg-none { color: var(--ink-3); font: 400 1.8rem/1 var(--font-display); text-transform: uppercase; }

.bdg-bar { height: 8px; overflow: hidden; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line-soft); border-radius: 99px; }
.bdg-bar i { display: block; height: 100%; background: linear-gradient(90deg, oklch(0.7 0.16 128), var(--blight)); border-radius: 99px; }
.bdg-bar--thin { height: 6px; flex: 1; min-width: 0; }
.bdg-bar--thin i { background: var(--tone, var(--blight)); }

/* A title as a chip, in its group's colour. */
.bdg-chip {
    display: inline-block; padding: 5px 12px; color: var(--tone); border: 1px solid currentColor; border-radius: 99px;
    background: color-mix(in oklch, var(--tone) 12%, transparent);
    font: 700 1rem/1.1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere;
}
.bdg-link, .bdg-wear {
    min-height: 34px; padding: 0 14px; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer;
    font: 700 .8rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
}
.bdg-link:hover, .bdg-wear:hover { color: var(--bg-deep); background: var(--blight); border-color: var(--blight); }
.bdg-link:focus-visible, .bdg-wear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The player's own titles: wear one, see which are still locked. */
.bdg-titles { display: grid; gap: 4px; min-width: 0; }
.bdg-titles__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bdg-title {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chip action" "from action"; align-items: center; gap: 6px 12px;
    padding: 12px 14px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; min-width: 0;
}
.bdg-title .bdg-chip { grid-area: chip; justify-self: start; }
.bdg-title small { grid-area: from; color: var(--ink-3); }
.bdg-title form, .bdg-title__state { grid-area: action; }
.bdg-title__state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font: 700 .78rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.bdg-title.is-wearing { border-color: var(--tone); }
.bdg-title.is-wearing .bdg-title__state { color: var(--tone); }
.bdg-title.is-locked .bdg-chip { color: var(--ink-3); background: none; border-style: dashed; }

/* A group of badges, headed in its colour. */
.bdg-group { display: grid; gap: 4px; min-width: 0; }
.bdg-group__title { color: var(--tone); }
.bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }

/* One badge: its mark, name and current tier, what it counts, the tier pips and the way to the next one. */
.bdg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px; background: var(--panel); border: 1px dashed var(--line-soft); border-radius: 6px; min-width: 0; }
.bdg__icon {
    display: grid; place-items: center; width: 52px; height: 52px; color: var(--ink-3); background: var(--bg-deep);
    border: 1px solid var(--line-soft); border-radius: 50%;
}
.bdg__icon .icon { width: 24px; height: 24px; }
.bdg__main { display: grid; gap: 8px; min-width: 0; }
.bdg__name { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--ink-2); font: 400 1.5rem/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.bdg__name span { color: var(--tone); font: 700 1rem/1 var(--font-label); letter-spacing: .1em; }
.bdg__line { margin: -2px 0 0; color: var(--ink-3); font-size: .92rem; }
/* Every tier on one row: up to 60px each, shrinking together on a narrow card (never a lone tier on a second line). */
.bdg__tiers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 60px); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bdg__tiers li {
    display: grid; gap: 2px; justify-items: center; min-width: 0; padding: 5px 3px; color: var(--ink-3); background: var(--bg-deep);
    border: 1px solid var(--line-soft); border-radius: 4px; font-variant-numeric: tabular-nums;
}
.bdg__tiers span { font: 700 .8rem/1 var(--font-label); letter-spacing: .1em; }
.bdg__tiers small { font-size: .72rem; }
.bdg__tiers li.is-earned { color: var(--bg-deep); background: var(--tone); border-color: var(--tone); }
.bdg__progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bdg__progress span { flex: none; color: var(--ink-3); font: 600 .85rem/1 var(--font-label); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.bdg.is-earned { border-style: solid; border-color: color-mix(in oklch, var(--tone) 55%, var(--line-soft)); }
.bdg.is-earned .bdg__icon { color: var(--tone); border-color: var(--tone); background: radial-gradient(circle, color-mix(in oklch, var(--tone) 28%, transparent), var(--bg-deep) 70%); }
.bdg.is-earned .bdg__name { color: var(--ink); }
.bdg.is-done { box-shadow: 0 0 0 1px color-mix(in oklch, var(--tone) 40%, transparent), 0 16px 36px -22px var(--tone); }

@media (min-width: 760px) {
    .bdg-total { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 380px) {
    .bdg { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
    .bdg-wear, .bdg-link { transition: background .15s var(--ease-out), color .15s var(--ease-out); }
}

/* Titles still locked fold away under one toggle, so the ones to wear lead. */
.bdg-titles__none { margin: 0; color: var(--ink-3); }
.bdg-locked { min-width: 0; margin-top: 6px; }
.bdg-locked > summary {
    display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; color: var(--ink-2); list-style: none; cursor: pointer;
    border: 1px solid var(--line-soft); border-radius: 4px; font: 700 .8rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
}
.bdg-locked > summary::-webkit-details-marker { display: none; }
.bdg-locked > summary::after { content: "+"; color: var(--ink-3); font-size: 1rem; }
.bdg-locked[open] > summary::after { content: "\2212"; }
.bdg-locked > summary span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bdg-locked > summary:hover { color: var(--ink); border-color: var(--line-strong); }
.bdg-locked > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bdg-locked[open] > summary { margin-bottom: 10px; color: var(--ink); }