/* cubing-stats.css — styles for the cubing module's Stats.razor component used on
   /achievements (per doc 24) and /profile/{username} (per doc 25). The component renders
   one MudCard per cubing event the participant has resolved a match on; each card carries
   a horizontal row of stat tiles (Best AoN / Matches / W/L / PB single / Current mark)
   instead of the browser-default vertical <dl> stack.

   Mobile reshape: at ≤600px the stats row collapses to a 2-column grid; with five tiles
   that lays out as 2 + 2 + 1 (centered last). Pure stack would also be acceptable per the
   operator's "I supposed we can just let the stats stack" note, but 2-up keeps the card
   compact and matches the doc-08 restrained-information-density intent on small screens. */

.cubing-stats-empty {
    color: var(--mud-palette-text-secondary);
    text-align: center;
    padding: 1rem 0;
    margin: 0;
}

.cubing-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cubing-stats-event {
    /* Per-event block matches the site-wide card chrome from App.razor (1px white-opacity
       border + soft drop shadow) so adjacent events read as distinct sub-cards inside the
       parent discipline section. Padding keeps content off the border.

       Background set to --hax-surface-page (the darker page tone) so the sub-card reads as
       inset against the lighter --mud-palette-surface discipline panel above it — same lift
       mechanic the achievement cards use against the Achievements wrapper. Operator decision
       2026-05-11 from CoWorker's surface-hierarchy polish handoff. */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--hax-surface-page);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.cubing-stats-event-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.cubing-stats-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    align-items: start;
}

.cubing-stats-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
}

.cubing-stats-stats dt {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.cubing-stats-stats dd {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .cubing-stats-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .cubing-stats-stats dd {
        font-size: 1.25rem;
    }
}