/* ==========================================================================
   Golgufus Harmonized — visual consistency layer
   --------------------------------------------------------------------------
   Implements the "Golgufus Harmonized" Claude Design comp as a thin, additive
   refinement over the existing surfaces. Loaded LAST in the cascade (after
   site.css) so equal-specificity rules win WITHOUT !important, and it never
   touches base rules or JS-queried class names.

   Reversible: delete this file + its <link> in _Layout.cshtml to fully revert.
   Colours flow through the harmonization tokens defined in theme.css
   (--card, --text, --muted, --brand1/2, --gold/silver/bronze, --pink, --grid,
   --accent-soft, --shadow, ...). Nothing here hard-codes a theme colour except
   the comp's fixed dark-on-gradient avatar ink (#0d1a2a), which is intentional.
   ========================================================================== */

/* --- Utilities ----------------------------------------------------------- */
.mono {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* --- Brand-gradient avatars (comp signature) -----------------------------
   The comp renders every avatar/initials chip as a teal->blue brand gradient
   with dark ink. Applied to the existing avatar surfaces; single-class
   selectors so cascade order alone wins. */
.online-user-avatar,
.profile-avatar-fallback,
.member-avatar,
.dash-pool-token,
.gh-avatar-brand {
    background: linear-gradient(150deg, var(--brand1), var(--brand2));
    color: #0d1a2a;
}

/* --- Gradient accent buttons (comp uses these for every primary CTA) ------
   Kept accent-hued so it reads as the same control, just harmonized. */
.btn-primary {
    background-image: linear-gradient(135deg, var(--accent), var(--accent2));
    background-color: var(--accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px var(--accent-soft);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
    background-image: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: transparent;
    color: #fff;
    filter: brightness(1.05);
}

.btn-primary:disabled,
.btn-primary.disabled {
    filter: none;
    opacity: 0.6;
}

/* ==========================================================================
   Leaderboard podium (net-new, presentation-only)
   Built from the top-3 rows the view already renders. Degrades: the view only
   emits it when there are 3+ entries.
   ========================================================================== */
.lb-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.lb-podium-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 18px 12px 20px;
    box-shadow: var(--shadow-sm);
}

/* First place is elevated + gold-tinted. */
.lb-podium-col.is-first {
    padding: 24px 12px 26px;
    border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, var(--card)), var(--card));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--gold) 22%, transparent);
}

.lb-podium-medal {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: #0d1a2a;
}

.lb-podium-col.is-first .lb-podium-medal {
    background: linear-gradient(150deg, var(--gold), #b8892f);
}

.lb-podium-col.is-second .lb-podium-medal {
    background: var(--silver);
}

.lb-podium-col.is-third .lb-podium-medal {
    background: var(--bronze);
}

.lb-podium-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    color: #0d1a2a;
    background: linear-gradient(150deg, var(--brand1), var(--brand2));
    margin: 10px 0 8px;
}

.lb-podium-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-podium-name a {
    color: inherit;
}

.lb-podium-score {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-top: 4px;
}

.lb-podium-col.is-first .lb-podium-score {
    color: var(--gold);
}

.lb-podium-place {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}

@media (max-width: 575.98px) {
    .lb-podium {
        gap: 8px;
    }
    .lb-podium-col {
        padding: 14px 8px 16px;
    }
    .lb-podium-col.is-first {
        padding: 18px 8px 20px;
    }
    .lb-podium-avatar {
        width: 44px;
        height: 44px;
        font-size: 13px;
    }
    .lb-podium-score {
        font-size: 17px;
    }
}