/* Badge shelf (/me/ and /passport/). Colours come from the site tokens only. */
.ach-sum { margin: 0 0 12px; font: 500 .95rem var(--f-mono); color: var(--ink-2); }
.ach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ach { display: flex; gap: 12px; align-items: flex-start; min-height: 64px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--room); min-width: 0; }
.ach-art { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rule-2); background: var(--panel); }
.ach-ico { display: block; width: 40px; height: 40px; }
.ach { --b1: var(--ink-2); --b2: var(--ink-3); }
.ach.t2 { --b1: var(--cyan); --b2: var(--ink-2); }
.ach.t3 { --b1: var(--gold); --b2: var(--red); }
.ach[data-era-of] { --b1: var(--c); --b2: var(--ink); }
.ach .px-a { fill: var(--b1); }
.ach .px-b { fill: var(--b2); }
.ach.is-locked .ach-ico { opacity: .28; filter: grayscale(1); }
.ach.is-locked { border-style: dashed; }
.ach.is-earned { border-color: var(--b1); }
.ach-body { display: grid; gap: 2px; min-width: 0; }
.ach-name { font: 700 1rem/1.2 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.ach.is-locked .ach-name { color: var(--ink-2); }
.ach-how { font-size: .9rem; color: var(--ink-2); }
.ach-state { font: 500 .75rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ach.is-earned .ach-state { color: var(--ink); }
.ach-note { margin: 12px 0 0; color: var(--ink-3); font-size: .9rem; max-width: 62ch; }