/* Candy pages (templates/candy/). Mobile-first. */

.candy-dot {
    display: inline-block;
    flex: none;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--candy-family-colour, var(--metric-candy));
    box-shadow: 0 0 0 1px var(--border);
}

.candy-change {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.candy-change--up {
    color: color-mix(in srgb, var(--green) 75%, var(--text));
}

.candy-change--down {
    color: color-mix(in srgb, var(--red) 75%, var(--text));
}

.candy-family-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text);
    font-weight: 600;
}

.candy-family-link:hover,
.candy-family-link:focus-visible {
    color: var(--brand);
}

/* Overview */

.candy-toolbar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.candy-toolbar__search {
    width: 100%;
}

.candy-family-search__option {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.candy-toolbar__sort {
    align-items: center;
    gap: .4rem;
}

.candy-toolbar__sort-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.candy-toolbar__sort .metric-filter-btn {
    min-height: 2.25rem;
}

/* The whole header label is the tap target for sorting. */
.candy-table__sort-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.candy-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.candy-table th,
.candy-table td {
    padding: .55rem .75rem;
    border-top: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.candy-table thead th {
    border-top: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.candy-table tbody th {
    font-weight: 600;
}

.candy-table__family {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.25rem;
    color: var(--text);
}

.candy-table .candy-table__number {
    text-align: right;
    white-space: nowrap;
}

.candy-table__value {
    font-weight: 700;
    color: var(--text);
}

.candy-table__chevron {
    display: inline-flex;
    color: var(--text-muted);
}

/* Pokédex number and last update: only where the table has room, from 701px. */
.candy-table .candy-table__dex,
.candy-table .candy-table__updated {
    display: none;
    color: var(--text-muted);
    white-space: nowrap;
}

.candy-table .candy-table__updated {
    text-align: right;
}

/* Family page */

.candy-family {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.candy-balances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.candy-balance {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.candy-balance__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 650;
    color: var(--text-muted);
}

.candy-balance__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.candy-balance__meta {
    font-size: .75rem;
    color: var(--text-muted);
}

.candy-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    list-style: none;
    font-size: .75rem;
    color: var(--text-muted);
}

.candy-legend__item {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.candy-legend__item::before {
    content: '';
    width: .75rem;
    height: .2rem;
    border-radius: 2px;
    background: var(--metric-candy);
}

.candy-legend__item--xl::before {
    background: var(--metric-candy-xl);
}

.candy-history {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.candy-history__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.candy-history__list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.candy-history__item {
    border-top: 1px solid var(--border);
}

.candy-history__link {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 2.75rem;
    padding: .5rem 0;
    color: var(--text);
}

.candy-history__date {
    font-size: .75rem;
    color: var(--text-muted);
}

.candy-history__values {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 601px) {
    .candy-toolbar__search {
        max-width: 22rem;
    }

    .candy-history__link {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 701px) {
    .candy-table .candy-table__dex,
    .candy-table .candy-table__updated {
        display: table-cell;
    }

    /* Every order has its own header now. */
    .candy-toolbar__sort {
        display: none;
    }
}