/* ============================================================
   Community Stats (/stats) — Shared CSS

   Loaded on every page via App.razor. Styles only apply when
   the .stats-* classes are present in the DOM.

   All values use canonical tokens from site.css. No hard-coded
   reusable colors, spacing, radii, or typography values.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   Chart series palette (24 distinct hues, shared with trends)
   ══════════════════════════════════════════════════════════ */
:root {
    --color-chart-series-1:  #E63946;
    --color-chart-series-2:  #F4A261;
    --color-chart-series-3:  #E9C46A;
    --color-chart-series-4:  #8AB17D;
    --color-chart-series-5:  #2A9D8F;
    --color-chart-series-6:  #457B9D;
    --color-chart-series-7:  #6A4C93;
    --color-chart-series-8:  #D62828;
    --color-chart-series-9:  #F77F00;
    --color-chart-series-10: #FCBF49;
    --color-chart-series-11: #588157;
    --color-chart-series-12: #003049;
    --color-chart-series-13: #9B2226;
    --color-chart-series-14: #BB4430;
    --color-chart-series-15: #7EBDC2;
    --color-chart-series-16: #B76D68;
    --color-chart-series-17: #5E548E;
    --color-chart-series-18: #8338EC;
    --color-chart-series-19: #FF006E;
    --color-chart-series-20: #06A77D;
    --color-chart-series-21: #D4A843;
    --color-chart-series-22: #A4161A;
    --color-chart-series-23: #0096C7;
    --color-chart-series-24: #264653;
}

/* ══════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════ */

.stats-hero {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 60%,
        var(--color-accent) 120%
    );
    color: var(--color-text-inverse);
    padding: var(--space-7) var(--space-5);
}

.stats-hero-inner {
    text-align: center;
}

.stats-hero-title {
    font-family: var(--font-family-heading);
    font-size: var(--text-page-title-size);
    font-weight: var(--text-page-title-weight);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-3);
    color: var(--color-text-inverse);
}

.stats-hero-sub {
    font-size: var(--text-body-size);
    max-width: 48ch;
    margin: 0 auto var(--space-5);
    opacity: 0.92;
}

.stats-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.stats-hero-cta-primary {
    display: inline-block;
    background: var(--color-highlight);
    color: var(--color-heading);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-button-size);
    font-weight: var(--text-button-weight);
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.stats-hero-cta-primary:hover {
    background: var(--color-highlight-dark);
    color: var(--color-heading);
    text-decoration: none;
}

.stats-hero-cta-primary:active {
    transform: translateY(1px);
}

.stats-hero-cta-secondary {
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    text-decoration: none;
    opacity: 0.85;
}

.stats-hero-cta-secondary:hover {
    color: var(--color-text-inverse);
    opacity: 1;
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   Shell (subnav + content)
   ══════════════════════════════════════════════════════════ */

.stats-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
    align-items: flex-start;
}

/* ── Left sub-nav ── */
.stats-subnav {
    position: sticky;
    top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.stats-subnav-header {
    padding: 0 var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--space-2);
}

.stats-subnav-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.stats-subnav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-base);
    transition: background 0.15s, color 0.15s;
}

.stats-subnav-link:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none;
}

.stats-subnav-link.active {
    background: var(--color-accent-tint);
    color: var(--color-accent);
}

.stats-subnav-icon {
    font-size: var(--font-size-md);
    line-height: 1;
}

.stats-subnav-divider {
    border-top: 1px solid var(--color-divider);
    margin: var(--space-3) 0;
}

.stats-subnav-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    padding: 0 var(--space-2) var(--space-2);
}

/* ── Time window pills in subnav ── */
.stats-window-pills {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0 var(--space-2);
}

.stats-window-pill {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    transition: background 0.15s, color 0.15s;
    text-align: left;
}

.stats-window-pill:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none;
}

.stats-window-pill-active {
    background: var(--color-accent-tint);
    color: var(--color-accent);
}

.stats-window-pill-active:hover {
    background: var(--color-accent-tint);
    color: var(--color-accent-hover);
}

/* ══════════════════════════════════════════════════════════
   Content sections (generic)
   ══════════════════════════════════════════════════════════ */

.stats-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.stats-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
}

.stats-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.stats-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    color: var(--color-heading);
    margin: 0 0 var(--space-5);
    line-height: var(--line-height-tight);
}

.stats-section-header .stats-section-title {
    margin-bottom: 0;
}

.stats-section-link {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.stats-section-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.stats-loading {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════
   Activity Pulse (4-up)
   ══════════════════════════════════════════════════════════ */

.stats-pulse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}

.stats-pulse-tile {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
}

.stats-pulse-icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stats-pulse-value {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
}

.stats-pulse-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* ══════════════════════════════════════════════════════════
   Leaderboard teasers (Overview page)
   ══════════════════════════════════════════════════════════ */

.stats-teaser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.stats-teaser-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.stats-teaser-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
}

.stats-teaser-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.stats-teaser-title {
    font-size: var(--text-card-title-size);
    font-weight: var(--text-card-title-weight);
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    flex: 1;
}

.stats-teaser-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stats-teaser-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.stats-teaser-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
    padding: var(--space-3) 0;
}

/* ══════════════════════════════════════════════════════════
   Leaderboard row
   ══════════════════════════════════════════════════════════ */

.stats-entry {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--space-3);
}

.stats-entry-rank {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-subtle);
    text-align: center;
    line-height: 1;
}

.stats-entry-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.stats-entry-link:hover {
    text-decoration: none;
}

.stats-entry-link:hover .stats-entry-name {
    color: var(--color-link);
}

.stats-entry-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg);
    flex-shrink: 0;
}

.stats-entry-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-tint);
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.stats-entry-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.stats-entry-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}

.stats-entry-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

.stats-entry-value {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   Coming-soon placeholders
   ══════════════════════════════════════════════════════════ */

.stats-coming-soon {
    text-align: center;
    padding: var(--space-7) var(--space-5);
}

.stats-coming-soon-icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-3);
    line-height: 1;
}

.stats-coming-soon-title {
    font-family: var(--font-family-heading);
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}

.stats-coming-soon-desc {
    font-size: var(--text-body-size);
    color: var(--color-text-muted);
    max-width: 44ch;
    margin: 0 auto var(--space-5);
    line-height: var(--line-height-normal);
}

.stats-coming-soon-back {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.stats-coming-soon-back:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .stats-shell {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .stats-subnav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .stats-subnav-header,
    .stats-subnav-divider,
    .stats-subnav-label {
        width: 100%;
    }

    .stats-subnav-header {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .stats-subnav-link {
        flex: 1 1 auto;
    }

    .stats-window-pills {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .stats-window-pill {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .stats-hero {
        padding: var(--space-5) var(--space-4);
    }

    .stats-section {
        padding: var(--space-4);
    }
}
/* ── Leaderboards page grid (wider cards for top-10 lists) ── */
.stats-leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .stats-leaderboard-grid {
        grid-template-columns: 1fr;
    }
}
/* ══════════════════════════════════════════════════════════
   Trend chart (/stats/trends)
   ══════════════════════════════════════════════════════════ */

.stats-trend-chart-wrap {
    width: 100%;
    margin: var(--space-4) 0 var(--space-5);
}

.stats-trend-chart {
    width: 100%;
    height: auto;
    display: block;
    font-family: var(--font-family-base);
}

.stats-trend-grid {
    stroke: var(--color-divider);
    stroke-width: 1;
}

.stats-trend-axis-label {
    fill: var(--color-text-muted);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
}

.stats-trend-y-label {
    font-size: 10px;
}

.stats-trend-x-label {
    font-size: 10px;
}

.stats-trend-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.stats-trend-point {
    stroke: var(--color-surface);
    stroke-width: 1;
}

.stats-trend-empty-msg {
    fill: var(--color-text-subtle);
    font-size: 13px;
    font-style: italic;
}

/* ── Toolbar ── */
.stats-trend-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--space-3);
}

.stats-trend-toolbar-count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-right: auto;
}

.stats-trend-toolbar-btn {
    background: none;
    border: none;
    color: var(--color-link);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    padding: 0;
}

    .stats-trend-toolbar-btn:hover {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

/* ── Chips ── */
.stats-trend-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.stats-trend-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

    .stats-trend-chip:hover {
        background: var(--color-surface-alt);
        color: var(--color-text);
        border-color: var(--color-border-strong);
    }

.stats-trend-chip-active {
    background: var(--chip-color, var(--color-accent));
    border-color: var(--chip-color, var(--color-accent));
    color: var(--color-text-inverse);
}

    .stats-trend-chip-active:hover {
        background: var(--chip-color, var(--color-accent));
        opacity: 0.88;
        color: var(--color-text-inverse);
    }

.stats-trend-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color, var(--color-accent));
    flex-shrink: 0;
}

.stats-trend-chip-active .stats-trend-chip-dot {
    background: var(--color-text-inverse);
}

.stats-trend-chip-name {
    white-space: nowrap;
}

.stats-trend-chip-meta {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    padding-left: var(--space-1);
}

/* ── Read-only legend (anon view) ── */
.stats-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-divider);
}

.stats-trend-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

@media (max-width: 600px) {
    .stats-trend-toolbar {
        gap: var(--space-2);
    }

    .stats-trend-toolbar-count {
        width: 100%;
        margin-right: 0;
    }
}
/* ══════════════════════════════════════════════════════════
   Trend chart hover
   ══════════════════════════════════════════════════════════ */

.stats-trend-chart-wrap {
    position: relative; /* anchor for absolute tooltip */
}

.stats-trend-hover-capture {
    cursor: crosshair;
}

.stats-trend-line {
    transition: stroke-width 0.15s, opacity 0.15s;
    cursor: pointer;
}

.stats-trend-line-hovered {
    stroke-width: 3;
}

.stats-trend-line-dimmed {
    opacity: 0.25;
}

.stats-trend-point-hover {
    stroke: var(--color-surface);
    stroke-width: 2;
    pointer-events: none;
}

.stats-trend-tooltip {
    position: absolute;
    transform: translate(12px, -100%); /* offset right + above cursor point */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 10;
    min-width: 160px;
    line-height: var(--line-height-tight);
}

.stats-trend-tooltip-left {
    transform: translate(calc(-100% - 12px), -100%);
}

.stats-trend-tooltip-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.stats-trend-tooltip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-color);
    flex-shrink: 0;
}

.stats-trend-tooltip-name {
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

.stats-trend-tooltip-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.stats-trend-tooltip-rate {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

.stats-trend-tooltip-meta {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════
   Partner Compatibility — /stats/partners
   ═══════════════════════════════════════════════════════════ */

.stats-partner-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
}

.stats-partner-toolbar-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.stats-partner-toolbar-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.stats-partner-pill {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-divider);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.stats-partner-pill:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.stats-partner-pill-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-button-primary-text);
}

.stats-partner-pill-active:hover {
    color: var(--color-button-primary-text);
}

.stats-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.stats-partner-card {
    padding: var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stats-partner-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.stats-partner-card-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-partner-card-name:hover {
    color: var(--color-link);
}

.stats-partner-card-record {
    display: inline-flex;
    gap: var(--space-2);
    align-items: baseline;
    flex-shrink: 0;
}

.stats-partner-card-wl {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

.stats-partner-card-pct {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.stats-partner-card-bar-track {
    width: 100%;
    height: 8px;
    background: var(--color-surface-alt);
    border-radius: 4px;
    overflow: hidden;
}

.stats-partner-card-bar-fill {
    height: 100%;
    background: var(--color-success);
    transition: width 0.3s ease;
}

.stats-partner-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.stats-partner-card-formats {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-divider);
}

.stats-partner-card-format {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--space-3);
    align-items: baseline;
    font-size: var(--font-size-xs);
}

.stats-partner-card-format-label {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stats-partner-card-format-record {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.stats-partner-card-format-pct {
    color: var(--color-text-muted);
    text-align: right;
}