/* ══════════════════════════════════════════════════════════════════════
   ACHIEVEMENTS

   A study record, not a trophy cabinet. Cards are quiet by default and earn
   their colour: a locked card is legible and honest about what it wants,
   an earned one is warm without being loud, and tiers differ by depth of
   the same violet rather than by new hues. No gold, no glow, no confetti.
   ══════════════════════════════════════════════════════════════════════ */
.ach2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px;
}

.ach2 {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
    background: var(--card-bg, #fff);
    border: 1.5px solid rgba(91, 80, 232, .12);
    border-radius: var(--r, 16px);
    font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
}

.ach2-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(91, 80, 232, .08);
    color: var(--violet, #5b50e8);
}
/* The blurb takes the slack, so progress and the unlock date sit on the
   same line across a row however the descriptions happen to wrap. */
.ach2-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.ach2 .ach2-cat {
    margin: 0 0 2px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted, #6b6890);
}
.ach2-name {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    font-size: .92rem;
    font-weight: 800;
    color: var(--text-primary, #111827);
}
.ach2 .ach2-blurb {
    flex: 1 1 auto;
    margin: 0 0 9px;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--text-muted, #6b6890);
}

/* The tier mark carries the progression, so the card keeps one identity
   instead of the catalogue splitting into three near-identical badges. */
.ach2-tier {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(91, 80, 232, .12);
    color: var(--violet, #5b50e8);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.ach2-bar {
    height: 5px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: rgba(91, 80, 232, .1);
    overflow: hidden;
}
.ach2-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--violet, #5b50e8);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.ach2 .ach2-meta { margin: 0; font-size: .7rem; color: var(--text-muted, #6b6890); }
.ach2 .ach2-earned {
    margin: -2px 0 7px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--violet, #5b50e8);
}

/* Locked: readable, never greyed into illegibility — a student should be able
   to see what it takes without earning it first. */
.ach2.is-locked { border-style: dashed; }
.ach2.is-locked .ach2-icon { background: rgba(17, 24, 39, .05); color: var(--text-muted, #6b6890); }

/* Earned: one step warmer per tier, same hue throughout. */
.ach2.is-earned { border-color: rgba(91, 80, 232, .3); }
.ach2.is-earned .ach2-icon { background: rgba(91, 80, 232, .13); }
.ach2.tier-2 { border-color: rgba(91, 80, 232, .45); }
.ach2.tier-2 .ach2-icon { background: rgba(91, 80, 232, .2); }
.ach2.tier-3 { border-color: var(--violet, #5b50e8); }
.ach2.tier-3 .ach2-icon { background: var(--violet, #5b50e8); color: #fff; }
.ach2.tier-3 .ach2-tier { background: var(--violet, #5b50e8); color: #fff; }

.ach2-toast-icon { display: inline-flex; vertical-align: -3px; margin-right: 6px; }

/* The contextual line. One sentence in the study flow beats a page the
   student has to remember to visit. */
.ach-next {
    margin: 10px 0 0;
    text-align: start;
    font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
    font-size: .76rem;
    font-weight: 700;
    color: var(--violet, #5b50e8);
}

[data-dark] .ach2 { border-color: rgba(157, 148, 255, .16); }
[data-dark] .ach2-icon { background: rgba(157, 148, 255, .12); color: #b5adff; }
[data-dark] .ach2-tier { background: rgba(157, 148, 255, .18); color: #b5adff; }
[data-dark] .ach2-bar { background: rgba(157, 148, 255, .14); }
[data-dark] .ach2-bar span { background: #b6a6ff; }
[data-dark] .ach2-earned, [data-dark] .ach-next { color: #b5adff; }
[data-dark] .ach2.is-locked .ach2-icon { background: rgba(255, 255, 255, .06); }
[data-dark] .ach2.is-earned { border-color: rgba(157, 148, 255, .32); }
[data-dark] .ach2.tier-2 { border-color: rgba(157, 148, 255, .5); }
[data-dark] .ach2.tier-3 { border-color: #b6a6ff; }
[data-dark] .ach2.tier-3 .ach2-icon,
[data-dark] .ach2.tier-3 .ach2-tier { background: #6f63e8; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .ach2-bar span { transition: none; }
}

@media (max-width: 600px) {
    .ach2-grid { grid-template-columns: 1fr; gap: 10px; }
    .ach2 { padding: 12px; }
}