/* =============================================================================
   achievements.css - Achievements addon styles

   Linked after theme.css, whose .card-grid and card surface the achievement
   cards use. Adds the section headings, the Stats tiles, the icon, the
   dimmed look of an achievement still to earn, its progress bar, the card's
   small lines and the compact grid. Built from
   the style.css and theme.css tokens, so it follows the theme and dark mode.
   ============================================================================= */

.achievements-grid {
    margin-bottom: 24px;
}

/* Section headings (Earned, Still to earn, Stats): a caption under the
   page title, never larger than it (style.css sets h2 at 2.25rem) */
.achievements-heading {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 1.125rem;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .achievements-heading {
        font-size: 1.25rem;
    }
}

/* Stats: label and value tiles, two per row on a phone, three from
   768px, four from 1024px */
.achievements-stats {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px 24px -8px;
    padding: 0;
    list-style: none;
}

.achievements-stats .custom-column {
    display: flex;
    flex: 0 0 50%;
    min-width: 0;
}

.achievements-stats .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

@media (min-width: 768px) {
    .achievements-stats .custom-column {
        flex-basis: 33.333%;
    }
}

@media (min-width: 1024px) {
    .achievements-stats .custom-column {
        flex-basis: 25%;
    }
}

.achievements-stat-box {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.achievements-stat-value {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.achievements-stat-label {
    margin: 4px 0 0 0;
    color: var(--gray);
    font-size: .875rem;
    line-height: 1.25;
}

.achievements-card h2 {
    margin-top: 0;
    font-size: 1.125rem;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .achievements-card h2 {
        font-size: 1.25rem;
    }
}

/* The icon: a round plate holding an emoji or a short symbol */
.achievements-icon {
    width: 48px;
    height: 48px;
    margin: 0 0 12px 0;
    border-radius: 24px;
    background: rgba(var(--brand-rgb), .08);
    font-size: 1.5rem;
    line-height: 48px;
    text-align: center;
}

/* An achievement still to earn keeps its text legible but loses its colour */
.achievements-card-locked .achievements-icon {
    filter: grayscale(1);
    opacity: .6;
}

.achievements-meta {
    margin: 4px 0;
    color: var(--gray);
    font-size: .875rem;
}

/* Progress toward the counter's threshold: a native bar in the brand colour */
.achievements-progress {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 8px;
    border: 0;
    border-radius: var(--radius);
    background: rgba(var(--black-rgb), .08);
    appearance: none;
}

.achievements-progress::-webkit-progress-bar {
    background: rgba(var(--black-rgb), .08);
    border-radius: var(--radius);
}

.achievements-progress::-webkit-progress-value {
    background: var(--brand);
    border-radius: var(--radius);
}

.achievements-progress::-moz-progress-bar {
    background: var(--brand);
    border-radius: var(--radius);
}

/* The compact grid (getAchievementsCompactHTML()): small tiles in a row >
   custom-column > inner-column > tile grid with an 8px gutter, one column
   on a phone, two from 768px, three from 1024px; an achievement still to
   earn is greyed out, its title and hint still legible */
.achievements-compact {
    display: flex;
    flex-wrap: wrap;
    margin: -4px;
    padding: 0;
    list-style: none;
}

.achievements-compact .custom-column {
    display: flex;
    flex: 0 0 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .achievements-compact .custom-column {
        flex-basis: 50%;
    }
}

@media (min-width: 1024px) {
    .achievements-compact .custom-column {
        flex-basis: 33.333%;
    }
}

.achievements-compact .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px;
}

.achievements-compact-item {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.achievements-compact-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-inline-end: 12px;
    border-radius: 16px;
    background: rgba(var(--brand-rgb), .08);
    font-size: 1rem;
    line-height: 32px;
    text-align: center;
}

.achievements-compact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.achievements-compact-title {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.achievements-compact-hint {
    margin-top: 4px;
    color: var(--gray);
    font-size: .8125rem;
    line-height: 1.3;
}

/* Earned: the brand colour on the edge, the wash and the icon */
.achievements-compact-item:not(.achievements-compact-locked) {
    border-color: rgba(var(--brand-rgb), .45);
    background: rgba(var(--brand-rgb), .08);
}

.achievements-compact-item:not(.achievements-compact-locked) .achievements-compact-icon {
    background: rgba(var(--brand-rgb), .2);
    color: var(--brand);
}

.achievements-compact-locked {
    background: transparent;
    border-style: dashed;
    opacity: .75;
}

.achievements-compact-locked .achievements-compact-icon {
    filter: grayscale(1);
    opacity: .5;
}

.achievements-compact-locked .achievements-compact-title {
    color: var(--gray);
    font-weight: 500;
}

/* The state in words, for screen readers only */
.achievements-compact-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}