/* Достижения читателя (dashboard/achievements) и витрина в профиле (components/reader-achievements-strip).
   Основа — library.css; цвета — токены variables.css, тёмная тема через них же. */

.ach { --ach-gold: #f59e0b; }

.ach-new {
    padding: 14px 18px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ach-gold) 50%, var(--color-border));
    background: color-mix(in srgb, var(--ach-gold) 12%, var(--color-surface));
    color: var(--color-text);
}

/* Ранг */
.ach-rank {
    display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px;
    border: 1px solid var(--color-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--ach-gold) 12%, var(--color-surface)), var(--color-surface));
}
.ach-rank__badge {
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; background: var(--color-secondary, #64748b); box-shadow: var(--shadow-md);
}
.ach-rank__badge svg { width: 32px; height: 32px; }
.ach-rank__badge--bookworm { background: #10b981; }
.ach-rank__badge--chronicler { background: #3b82f6; }
.ach-rank__badge--keeper { background: #8b5cf6; }
.ach-rank__badge--archivist { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ach-rank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ach-rank__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.ach-rank__title { font-size: 1.375rem; font-weight: 800; color: var(--color-text); }
.ach-rank__count { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (max-width: 600px) {
    .ach-rank { flex-wrap: wrap; }
    .ach-rank__count { flex-direction: row; gap: 6px; align-items: baseline; }
}

/* Карточки значков */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ach-card {
    display: flex; gap: 14px; padding: 14px; border-radius: 14px;
    border: 1px solid var(--color-border); background: var(--color-surface);
}
.ach-card:not(.is-earned) { background: var(--color-bg-secondary); }
.ach-card.is-new { border-color: var(--ach-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ach-gold) 25%, transparent); }
.ach-card__icon {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-tertiary, var(--color-border)); color: var(--color-text-muted);
}
.ach-card__icon svg { width: 24px; height: 24px; }
.ach-card.is-earned .ach-card__icon { color: #fff; background: var(--ach-icon, var(--color-primary)); }
.ach-card__icon--volume { --ach-icon: #3b82f6; }
.ach-card__icon--breadth { --ach-icon: #10b981; }
.ach-card__icon--early { --ach-icon: #f59e0b; }
.ach-card__icon--habit { --ach-icon: #f97316; }
.ach-card__icon--social { --ach-icon: #ec4899; }
.ach-card__icon--secret { --ach-icon: #6366f1; }
.ach-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ach-card__title { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--color-text); }
.ach-card:not(.is-earned) .ach-card__title { color: var(--color-text-secondary, var(--color-text-muted)); }
.ach-card__text { margin: 0; font-size: .8125rem; color: var(--color-text-muted); }
.ach-card__meta { font-size: .75rem; color: var(--color-text-muted); }
.ach-card.is-earned .ach-card__meta { color: var(--color-success, #10b981); font-weight: 600; }

/* Лестница рангов */
.ach-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ach-ladder__step {
    display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px;
    color: var(--color-text-muted); font-size: .875rem;
}
.ach-ladder__step.is-reached { color: var(--color-text); }
.ach-ladder__step.is-current { background: color-mix(in srgb, var(--ach-gold) 14%, transparent); font-weight: 700; }

/* Витрина в публичном профиле */
.reader-ach-strip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 16px 0; padding: 12px 16px;
    border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface);
}
.reader-ach-strip__rank { display: flex; flex-direction: column; min-width: 120px; }
.reader-ach-strip__rank-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.reader-ach-strip__rank-title { font-weight: 800; color: var(--color-text); }
.reader-ach-strip__badges { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.reader-ach-strip__badge {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, #f59e0b 18%, var(--color-surface)); color: #b45309;
}
.reader-ach-strip__badge svg { width: 20px; height: 20px; }
.reader-ach-strip__count { font-size: .8125rem; color: var(--color-text-muted); white-space: nowrap; }
.reader-ach-strip__count a { color: var(--color-primary); }
.reader-ach-strip .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Карточка «Достижения» в боковой колонке Читальни */
.lib-ach__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lib-ach__rank { font-weight: 800; color: var(--color-text); }
.lib-ach__badges { display: flex; gap: 6px; flex-wrap: wrap; }