/* Stardust page (templates/stardust/index.html.twig). Mobile-first. */

.stardust-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stardust-hero {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--metric-stardust) 40%, var(--border));
    border-radius: var(--radius);
}

.stardust-hero__label {
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stardust-hero__value {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.stardust-hero__icon {
    flex: none;
}

.stardust-hero__change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text-muted);
}

.stardust-hero__meta {
    font-size: .8rem;
    color: var(--text-muted);
}

.stardust-hero__meta a {
    color: var(--brand);
    font-weight: 600;
}

.stardust-change {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: var(--surface-2);
    color: var(--text-muted);
}

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

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

.stardust-period {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.stardust-period__control .segmented__option {
    min-width: 2.75rem;
}

.stardust-period__range {
    font-size: .8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

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

.stardust-tile {
    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);
}

.stardust-tile--net {
    grid-column: 1 / -1;
}

.stardust-tile__label {
    font-size: .75rem;
    font-weight: 650;
    color: var(--text-muted);
}

.stardust-tile__value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

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

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

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

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

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

.stardust-recent__day {
    padding-top: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stardust-recent__list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.stardust-recent__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.75rem;
    border-top: 1px solid var(--border);
}

.stardust-recent__link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .4rem 0;
    color: var(--text);
}

.stardust-recent__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

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

.stardust-leaderboard-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}

.stardust-leaderboard-link__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
}

.stardust-leaderboard-link__copy {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .1rem;
    font-size: .85rem;
}

.stardust-leaderboard-link__copy strong {
    color: var(--text);
    font-size: .95rem;
}

@media (min-width: 701px) {
    .stardust-period {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .stardust-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stardust-tile--net {
        grid-column: auto;
    }
}