/* =============================================================================
   missions.css - Missions addon styles

   Linked after theme.css. Lays out the mission list of the page and the
   card, the progress bars, the reward tag, the streak line and the tiles of
   a public profile. Built from the style.css and theme.css tokens, so it
   follows the theme and dark mode.
   ============================================================================= */

.missions-list {
    margin: 0 0 16px 0;
    padding-inline-start: 0;
    list-style: none;
}

.missions-item {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.missions-item:last-child {
    border-bottom: 0;
}

.missions-text {
    margin: 0 0 8px 0;
    font-weight: 600;
}

/* A completed mission keeps its sentence, struck through, and its line */
.missions-item-done .missions-text {
    text-decoration: line-through;
    color: var(--gray);
}

.missions-reward {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 0 8px;
    border-radius: var(--radius);
    background: rgba(var(--amber-rgb), .24);
    color: var(--black);
    font-size: .75rem;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
}

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

.missions-streak {
    margin: 0 0 8px 0;
    font-weight: 700;
}

.missions-progress {
    display: block;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: var(--radius);
    background: rgba(var(--black-rgb), .08);
    appearance: none;
}

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

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

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

/* A tiered mission's difficulty: three small dots, the first one to three
   filled */
.missions-tier {
    display: inline-flex;
    align-items: center;
    margin-inline-end: 8px;
    vertical-align: middle;
}

.missions-tier-dot {
    display: block;
    width: 6px;
    height: 6px;
    margin-inline-end: 4px;
    border: 1px solid var(--gray);
    border-radius: 50%;
}

.missions-tier-dot.missions-tier-on {
    border-color: var(--amber);
    background: var(--amber);
}

/* A public profile's Missions panel: three tiles side by side from 768px,
   stacked on a phone (row > custom-column > inner-column > tile) */
.missions-profile-tiles {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
    padding: 0;
    list-style: none;
}

.missions-profile-tiles .custom-column {
    display: flex;
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .missions-profile-tiles .custom-column {
        flex: 0 0 33.333%;
    }
}

.missions-profile-tiles .inner-column {
    display: flex;
    flex: 1 1 auto;
    padding: 8px;
}

.missions-profile-tile {
    flex: 1 1 auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--light);
}

.missions-profile-value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.missions-profile-label {
    margin: 4px 0 0 0;
    color: var(--gray);
    font-size: .85rem;
}