/* Angel achievements (kw-*): the public catalogue and the signed-in "My awards" page. Builds on the Aurora tokens (--ka-*) and the shared kf-* cards.
   Mobile first, 44px touch targets, no horizontal scroll, reduced motion respected. */
.kw { --kw-bronze: #c98a5a; --kw-silver: #cfd6e4; --kw-gold: #d6ac4c; }
.kw-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.kw-chip { cursor: pointer; font: inherit; min-height: 44px; }
.kw-chip.is-active { background: var(--ka-crimson-600, #ad1a2d); color: var(--ka-ivory, #f4ebda); border-color: var(--ka-crimson-500, #d02a3a); }
.kw-chip:focus-visible { outline: 2px solid var(--ka-gold-300, #e8c872); outline-offset: 2px; }
.kw [hidden] { display: none !important; }

.kw-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kw-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: start; min-width: 0;
  padding: 0.9rem 1rem; border-radius: var(--ka-r-sm, 10px);
  border: 1px solid var(--ka-line, rgba(244, 235, 218, 0.12)); background: rgba(16, 13, 23, 0.55);
  border-left: 4px solid var(--kw-tier, var(--ka-line, #444));
}
.kw-tier--bronze { --kw-tier: var(--kw-bronze); }
.kw-tier--silver { --kw-tier: var(--kw-silver); }
.kw-tier--gold { --kw-tier: var(--kw-gold); }
.kw-card.is-earned { border-color: var(--kw-tier); background: rgba(42, 32, 54, 0.7); }
.kw-secret .kw-name { font-style: italic; }
.kw-glyph {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none;
  font-size: 1.4rem; color: var(--kw-tier, var(--ka-gold-300, #e8c872)); background: var(--ka-obsidian, #100d17);
  border: 1px solid var(--kw-tier, var(--ka-line, #444));
}
.kw-card:not(.is-earned) .kw-glyph { opacity: 0.6; }
.kw-body { display: grid; gap: 0.3rem; min-width: 0; }
.kw-name { margin: 0; font-size: 1.05rem; font-family: var(--ka-font-display, serif); color: var(--ka-ivory, #f4ebda); overflow-wrap: anywhere; }
.kw-desc { margin: 0; color: var(--ka-ivory-dim, #cfc4b4); font-size: 0.92rem; overflow-wrap: anywhere; }
.kw-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; color: var(--ka-ivory-mute, #b2a797); font-size: 0.85rem; }
.kw-tier { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.72rem; color: var(--kw-tier, var(--ka-gold-300, #e8c872)); }
.kw-rarity { margin: 0; color: var(--ka-gold-200, #f3dfa0); font-size: 0.85rem; }
.kw-hint { letter-spacing: 0.2em; }
.kw-new {
  display: inline-block; padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
  color: #1a1320; background: var(--ka-gold-300, #e8c872);
}
.kw-pick { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; color: var(--ka-ivory, #f4ebda); }
.kw-pick input { width: 1.3rem; height: 1.3rem; accent-color: var(--ka-crimson-500, #d02a3a); }
.kw-pick input:focus-visible { outline: 2px solid var(--ka-gold-300, #e8c872); outline-offset: 2px; }

.kw-count { font-size: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.kw-bar { height: 0.55rem; border-radius: 999px; overflow: hidden; background: var(--ka-obsidian, #100d17); border: 1px solid var(--ka-line, rgba(244, 235, 218, 0.12)); }
.kw-bar > span { display: block; height: 100%; width: calc(var(--kw-pct, 0) * 1%); background: linear-gradient(90deg, var(--ka-crimson-600, #ad1a2d), var(--ka-gold-400, #d6ac4c)); transition: width 0.4s ease; }
.kw-showcase-form { display: grid; gap: 1.25rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .kw-bar > span { transition: none; } }