/* Explore overview: game picker cards, the game head, landmarks, largest types and status chips. */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0 var(--s-1);
    font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
    white-space: nowrap;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
}

/* A glyph as well as colour, so status never relies on colour alone. */
.chip--ok {
    color: var(--ok);
    border-color: var(--ok);
}

.chip--ok::before {
    content: "✓";
}

.chip--caution {
    color: var(--caution);
    border-color: var(--caution);
}

.chip--caution::before {
    content: "△";
}

.chip--fault {
    color: var(--fault);
    border-color: var(--fault);
}

.chip--fault::before {
    content: "✕";
}

.skeleton {
    display: block;
    height: var(--s-4);
    background-color: var(--ink-3);
    border-radius: var(--r-1);
}

.skeleton--title {
    width: 40%;
    height: var(--s-6);
}

.picker {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.picker__lede {
    color: var(--paper-lo);
}

.picker__list,
.landmarks,
.landmark__symbols,
.largest,
.suggestions {
    display: grid;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    height: 100%;
    padding: var(--s-4);
    background-color: var(--ink-1);
    border: 1px solid var(--rule);
    border-left: var(--bar) solid var(--accent);
    border-radius: var(--r-2);
}

.game-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.game-card__name {
    font: 700 var(--t-lg) / var(--lh-lg) var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.game-card__name a {
    color: var(--paper-hi);
    text-decoration: none;
}

.game-card__name a:hover {
    color: var(--accent-ink);
}

.game-card__meta,
.game-card__counts {
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.game-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.game-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin-top: auto;
}

.game-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    /* Same column and gutter as .thread__col, so the head lines up with the overview below it. */
    box-sizing: border-box;
    width: 100%;
    max-width: var(--col-max);
    min-width: 0;
    margin: 0 auto;
    padding: var(--s-5) var(--s-5) 0;
}

.game-head__title {
    overflow-wrap: anywhere;
}

.game-head__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
}

.game-head__version {
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.game-head__bar .goto {
    flex: 1 1 16rem;
    max-width: 28rem;
}

@media (max-width: 599.98px) {
    .game-head__bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .game-head__bar .goto {
        align-self: stretch;
        flex: none;
        max-width: none;
    }
}

.overview {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

.overview__section {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.overview__section > h2 {
    font: 600 var(--t-xs) / var(--lh-xs) var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-lo);
}

.overview__banner,
.overview__note {
    padding: var(--s-2) var(--s-3);
    color: var(--paper);
    background-color: var(--ink-1);
    border-left: var(--bar) solid var(--caution);
    border-radius: var(--r-1);
}

.overview__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.landmark {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
    padding: var(--s-3) 0;
    border-top: 1px solid var(--rule);
}

.landmark__label {
    font: 600 var(--t-md) / var(--lh-md) var(--font-ui);
}

.landmark__symbols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
}

.landmark__symbols > li {
    min-width: 0;
    max-width: 100%;
}

.sym {
    display: block;
    max-width: 100%;
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    color: var(--accent-ink);
    overflow-wrap: anywhere;
}

.sym--muted {
    color: var(--paper-lo);
}

.largest__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-1) 0;
    border-bottom: 1px solid var(--rule);
}

.largest__name {
    min-width: 0;
    overflow: hidden;
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.largest__lines {
    flex: none;
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.suggestion {
    display: block;
    padding: var(--s-2) var(--s-3);
    color: var(--paper);
    text-decoration: none;
    background-color: var(--ink-1);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
}

.suggestion:hover {
    color: var(--paper-hi);
    background-color: var(--ink-3);
}

@media (min-width: 600px) {
    .picker__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .game-card__foot .game-card__counts {
        width: 100%;
    }
}