/* MCP Achievements UI — PR C
 *
 * All selectors prefixed `.mcp-achievement-*` so they don't collide with
 * the rest of MCP's CSS. Tier colors driven by CSS variables on :root —
 * tweak in one place if the design system ever consolidates them.
 *
 * Sizes: xs (32px) for the header rail, sm (48px) for listing details,
 *        md (72px) for catalog grids, lg (96px) for hero/celebration.
 */

:root {
    /* Tier palette — gradients (not flat colors) so each tier visibly
       escalates in prestige from Bronze → Diamond. Each tier has three
       stops: a bright top-left (light source), a mid value, and a
       deeper bottom-right (depth). Paired glows are tinted to the tier
       so earned badges feel "lit from within." */
    --mcp-tier-bronze-bg: linear-gradient(135deg, #cd7f32 0%, #a0522d 50%, #8b4513 100%);
    --mcp-tier-bronze-glow: 0 0 12px rgba(205, 127, 50, 0.4);
    --mcp-tier-bronze-ring: #b8722c;

    --mcp-tier-silver-bg: linear-gradient(135deg, #e8e8e8 0%, #b8b8b8 50%, #909090 100%);
    --mcp-tier-silver-glow: 0 0 12px rgba(192, 192, 192, 0.4);
    --mcp-tier-silver-ring: #a8a8a8;

    --mcp-tier-gold-bg: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #daa520 100%);
    --mcp-tier-gold-glow: 0 0 14px rgba(255, 215, 0, 0.5);
    --mcp-tier-gold-ring: #daa520;

    --mcp-tier-platinum-bg: linear-gradient(135deg, #b8c6db 0%, #8b9fbf 50%, #6b7fa0 100%);
    --mcp-tier-platinum-glow: 0 0 16px rgba(139, 159, 191, 0.5);
    --mcp-tier-platinum-ring: #8b9fbf;

    /* Diamond gets a 5-stop gradient so the diagonal sweep has a
       brighter band through the middle, plus a double-glow (close +
       far) for the prismatic feel. Combined with the shimmer
       animation below, this is the visual reward for the rarest tier. */
    --mcp-tier-diamond-bg: linear-gradient(135deg, #e0f7ff 0%, #b0e0ff 30%, #80d0ff 60%, #b0e0ff 90%, #e0f7ff 100%);
    --mcp-tier-diamond-glow: 0 0 20px rgba(176, 224, 255, 0.7), 0 0 40px rgba(135, 206, 250, 0.3);
    --mcp-tier-diamond-ring: #87ceeb;

    /* Mythic — PR-C addition. One step above diamond, reserved for the
       very top of any ladder (Hall of Fame, Has The Grail). Iridescent
       5-stop gradient sweeping through gold → coral → teal → mint →
       gold for a "rainbow shimmer" feel. Double-glow with two tinted
       layers so the badge reads as lit from within from any angle. */
    --mcp-tier-mythic-bg: linear-gradient(135deg, #FFD700 0%, #FF6B6B 25%, #4ECDC4 50%, #95E1D3 75%, #FFD700 100%);
    --mcp-tier-mythic-glow: 0 0 24px rgba(255, 215, 0, 0.6), 0 0 48px rgba(78, 205, 196, 0.4);
    --mcp-tier-mythic-ring: #FFD700;

    /* Standard depth shadow shared by all earned badges so they sit
       above the page consistently. Tier glows compose ON TOP of this. */
    --mcp-badge-depth-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Single-badge frame ---------------------------------------------------- */
.mcp-achievement-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    color: #212529;
    text-decoration: none;
    user-select: none;
}

.mcp-achievement-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid #b2b2b2;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #f0f0f0 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: filter 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.mcp-achievement-badge-icon i {
    line-height: 1;
}

.mcp-achievement-badge-label {
    margin-top: 6px;
    font-weight: 600;
    color: #212529;
    word-break: break-word;
}

/* Sizes ---------------------------------------------------------------- */
.mcp-achievement-badge-xs .mcp-achievement-badge-icon { width: 32px; height: 32px; border-width: 2px; }
.mcp-achievement-badge-xs .mcp-achievement-badge-icon i { font-size: 16px; }
.mcp-achievement-badge-xs .mcp-achievement-badge-label { font-size: 11px; }

.mcp-achievement-badge-sm .mcp-achievement-badge-icon { width: 48px; height: 48px; border-width: 2px; }
.mcp-achievement-badge-sm .mcp-achievement-badge-icon i { font-size: 24px; }
.mcp-achievement-badge-sm .mcp-achievement-badge-label { font-size: 12px; }

.mcp-achievement-badge-md .mcp-achievement-badge-icon { width: 72px; height: 72px; }
.mcp-achievement-badge-md .mcp-achievement-badge-icon i { font-size: 36px; }
.mcp-achievement-badge-md .mcp-achievement-badge-label { font-size: 13px; }

.mcp-achievement-badge-lg .mcp-achievement-badge-icon { width: 96px; height: 96px; }
.mcp-achievement-badge-lg .mcp-achievement-badge-icon i { font-size: 48px; }
.mcp-achievement-badge-lg .mcp-achievement-badge-label { font-size: 14px; }

/* Tiered badges -------------------------------------------------------- */
/* Earned tiered badges get the rich gradient + tier-tinted glow + the
   shared depth shadow. The :before pseudo-element layered inside each
   icon adds a subtle inner highlight (lighter at top) that simulates a
   light source — combined with the 135° gradient direction, this gives
   the badges a metallic feel rather than reading as a flat fill. */
.mcp-achievement-badge[data-tier="bronze"] .mcp-achievement-badge-icon {
    border-color: var(--mcp-tier-bronze-ring);
    background: var(--mcp-tier-bronze-bg);
}
.mcp-achievement-badge[data-tier="silver"] .mcp-achievement-badge-icon {
    border-color: var(--mcp-tier-silver-ring);
    background: var(--mcp-tier-silver-bg);
}
.mcp-achievement-badge[data-tier="gold"] .mcp-achievement-badge-icon {
    border-color: var(--mcp-tier-gold-ring);
    background: var(--mcp-tier-gold-bg);
}
.mcp-achievement-badge[data-tier="platinum"] .mcp-achievement-badge-icon {
    border-color: var(--mcp-tier-platinum-ring);
    background: var(--mcp-tier-platinum-bg);
}
.mcp-achievement-badge[data-tier="diamond"] .mcp-achievement-badge-icon {
    border-color: var(--mcp-tier-diamond-ring);
    background: var(--mcp-tier-diamond-bg);
}
.mcp-achievement-badge[data-tier="mythic"] .mcp-achievement-badge-icon {
    border-color: var(--mcp-tier-mythic-ring);
    background: var(--mcp-tier-mythic-bg);
}

/* Inner highlight — light glaze across the top half. Position is
   relative so the pseudo-element can absolutely-position inside;
   `overflow: hidden` keeps it inside the circle border. */
.mcp-achievement-badge[data-tier] .mcp-achievement-badge-icon {
    position: relative;
    overflow: hidden;
}
.mcp-achievement-badge[data-tier] .mcp-achievement-badge-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
/* Keep the icon glyph above the highlight overlay. */
.mcp-achievement-badge[data-tier] .mcp-achievement-badge-icon i {
    position: relative;
    z-index: 1;
    color: #2a2a2a;
}

/* Earned-state glow + depth — tier glow composes with the shared depth
   shadow so the badge appears lit AND elevated. Locked-state strips
   the glow but keeps the gradient fill (faintly, via opacity) so the
   user can still see "this is a Diamond they haven't earned." */
.mcp-achievement-badge-earned[data-tier="bronze"]   .mcp-achievement-badge-icon { box-shadow: var(--mcp-tier-bronze-glow),   var(--mcp-badge-depth-shadow); }
.mcp-achievement-badge-earned[data-tier="silver"]   .mcp-achievement-badge-icon { box-shadow: var(--mcp-tier-silver-glow),   var(--mcp-badge-depth-shadow); }
.mcp-achievement-badge-earned[data-tier="gold"]     .mcp-achievement-badge-icon { box-shadow: var(--mcp-tier-gold-glow),     var(--mcp-badge-depth-shadow); }
.mcp-achievement-badge-earned[data-tier="platinum"] .mcp-achievement-badge-icon { box-shadow: var(--mcp-tier-platinum-glow), var(--mcp-badge-depth-shadow); }

/* Diamond tier — pulsing shimmer animation on EARNED state only.
   3-second cycle, tight delta on the glow radius/intensity. Subtle on
   purpose: distracting animation cheapens prestige. */
@keyframes mcp-diamond-shimmer {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(176, 224, 255, 0.7),
            0 0 40px rgba(135, 206, 250, 0.3),
            var(--mcp-badge-depth-shadow);
    }
    50% {
        box-shadow:
            0 0 25px rgba(176, 224, 255, 0.9),
            0 0 50px rgba(135, 206, 250, 0.5),
            var(--mcp-badge-depth-shadow);
    }
}
.mcp-achievement-badge-earned[data-tier="diamond"] .mcp-achievement-badge-icon {
    box-shadow: var(--mcp-tier-diamond-glow), var(--mcp-badge-depth-shadow);
    animation: mcp-diamond-shimmer 3s ease-in-out infinite;
}

/* Mythic tier — slower 4s shimmer than diamond (3s). The slower cadence
   reads as more deliberate / "rare event," matching the position above
   diamond in the prestige ladder. Glow pulses are tighter in delta but
   the dual-layer composition gives the badge more visual depth than
   diamond's single-tinted glow. */
@keyframes mcp-mythic-shimmer {
    0%, 100% {
        box-shadow:
            0 0 24px rgba(255, 215, 0, 0.6),
            0 0 48px rgba(78, 205, 196, 0.4),
            var(--mcp-badge-depth-shadow);
    }
    50% {
        box-shadow:
            0 0 28px rgba(255, 215, 0, 0.8),
            0 0 56px rgba(78, 205, 196, 0.55),
            var(--mcp-badge-depth-shadow);
    }
}
.mcp-achievement-badge-earned[data-tier="mythic"] .mcp-achievement-badge-icon {
    box-shadow: var(--mcp-tier-mythic-glow), var(--mcp-badge-depth-shadow);
    animation: mcp-mythic-shimmer 4s ease-in-out infinite;
}

/* Category-tinted gradients for non-tiered accent badges -------------- */
/* PR #41 expansion: bring the accent-color (activation/special/
   subscription/community/auctions-first-tier) badges into the same
   gradient + glow + ring system as the prestige tiers. Pattern matches
   the tier rules above: gradient applies unconditionally so locked
   badges still hint at their colour through the wrapper-level fade;
   glow is earned-state-only so it composes with the depth shadow.
   `border-color` uses !important to override the inline accent_color
   that the Blade component still emits. */

/* ACTIVATION (7 badges, all in this category, all non-tiered)
   First Listing / Sale / Purchase / Offer Sent/Received / PC Card /
   Profile Complete. Vibrant green for completed onboarding. */
.mcp-achievement-badge[data-category="activation"]:not([data-tier]) .mcp-achievement-badge-icon {
    background: linear-gradient(135deg, #6BCF7F 0%, #4CAF50 50%, #2E7D32 100%);
    border-color: #388E3C !important;
    position: relative;
    overflow: hidden;
}
.mcp-achievement-badge[data-category="activation"]:not([data-tier]) .mcp-achievement-badge-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
.mcp-achievement-badge[data-category="activation"]:not([data-tier]) .mcp-achievement-badge-icon i {
    position: relative;
    z-index: 1;
}
.mcp-achievement-badge-earned[data-category="activation"]:not([data-tier]) .mcp-achievement-badge-icon {
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.45), var(--mcp-badge-depth-shadow);
}

/* SPECIAL (1 badge: early_adopter). Vibrant orange-red. */
.mcp-achievement-badge[data-category="special"]:not([data-tier]) .mcp-achievement-badge-icon {
    background: linear-gradient(135deg, #FF8A65 0%, #FF5722 50%, #BF360C 100%);
    border-color: #D84315 !important;
    position: relative;
    overflow: hidden;
}
.mcp-achievement-badge[data-category="special"]:not([data-tier]) .mcp-achievement-badge-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
.mcp-achievement-badge[data-category="special"]:not([data-tier]) .mcp-achievement-badge-icon i {
    position: relative;
    z-index: 1;
}
.mcp-achievement-badge-earned[data-category="special"]:not([data-tier]) .mcp-achievement-badge-icon {
    box-shadow: 0 0 14px rgba(255, 87, 34, 0.5), var(--mcp-badge-depth-shadow);
}

/* SUBSCRIPTION default (paid_member, pro_member, all_star_member). Blue.
   Anniversary badges (one_year_member, two_year_member) override below
   with purple — they share the same category but have a distinct accent
   in the catalog and read as a different "thing." */
.mcp-achievement-badge[data-category="subscription"]:not([data-tier]) .mcp-achievement-badge-icon {
    background: linear-gradient(135deg, #5B8DEF 0%, #2962FF 50%, #1A237E 100%);
    border-color: #1565C0 !important;
    position: relative;
    overflow: hidden;
}
.mcp-achievement-badge[data-category="subscription"]:not([data-tier]) .mcp-achievement-badge-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
.mcp-achievement-badge[data-category="subscription"]:not([data-tier]) .mcp-achievement-badge-icon i {
    position: relative;
    z-index: 1;
    color: #fff;
}
.mcp-achievement-badge-earned[data-category="subscription"]:not([data-tier]) .mcp-achievement-badge-icon {
    box-shadow: 0 0 14px rgba(41, 98, 255, 0.45), var(--mcp-badge-depth-shadow);
}

/* SUBSCRIPTION anniversary override — purple. Targets by code so we
   don't need to add a third data attribute or sub-categorisation. */
.mcp-achievement-badge[data-achievement-code="one_year_member"] .mcp-achievement-badge-icon,
.mcp-achievement-badge[data-achievement-code="two_year_member"] .mcp-achievement-badge-icon {
    background: linear-gradient(135deg, #BA68C8 0%, #9C27B0 50%, #6A1B9A 100%);
    border-color: #7B1FA2 !important;
}
.mcp-achievement-badge-earned[data-achievement-code="one_year_member"] .mcp-achievement-badge-icon,
.mcp-achievement-badge-earned[data-achievement-code="two_year_member"] .mcp-achievement-badge-icon {
    box-shadow: 0 0 14px rgba(156, 39, 176, 0.45), var(--mcp-badge-depth-shadow);
}

/* COMMUNITY non-tiered overrides — only first_follower (green) and
   verified_seller (blue). The 10/50/100-follower badges are tiered and
   already handled by the prestige rules above. */
.mcp-achievement-badge[data-achievement-code="first_follower"] .mcp-achievement-badge-icon {
    background: linear-gradient(135deg, #6BCF7F 0%, #4CAF50 50%, #2E7D32 100%);
    border-color: #388E3C !important;
    position: relative;
    overflow: hidden;
}
.mcp-achievement-badge[data-achievement-code="first_follower"] .mcp-achievement-badge-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
.mcp-achievement-badge[data-achievement-code="first_follower"] .mcp-achievement-badge-icon i {
    position: relative;
    z-index: 1;
}
.mcp-achievement-badge-earned[data-achievement-code="first_follower"] .mcp-achievement-badge-icon {
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.45), var(--mcp-badge-depth-shadow);
}

.mcp-achievement-badge[data-achievement-code="verified_seller"] .mcp-achievement-badge-icon {
    background: linear-gradient(135deg, #5B8DEF 0%, #2962FF 50%, #1A237E 100%);
    border-color: #1565C0 !important;
    position: relative;
    overflow: hidden;
}
.mcp-achievement-badge[data-achievement-code="verified_seller"] .mcp-achievement-badge-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
.mcp-achievement-badge[data-achievement-code="verified_seller"] .mcp-achievement-badge-icon i {
    position: relative;
    z-index: 1;
    color: #fff;
}
.mcp-achievement-badge-earned[data-achievement-code="verified_seller"] .mcp-achievement-badge-icon {
    box-shadow: 0 0 14px rgba(41, 98, 255, 0.45), var(--mcp-badge-depth-shadow);
}

/* AUCTIONS first-tier (first_crown_bid → "Going Once"). Orange.
   The other two auction badges are tiered (Going Twice = bronze,
   Gavel Master = silver) and use the prestige rules. */
.mcp-achievement-badge[data-achievement-code="first_crown_bid"] .mcp-achievement-badge-icon {
    background: linear-gradient(135deg, #FFB74D 0%, #FF9800 50%, #E65100 100%);
    border-color: #F57C00 !important;
    position: relative;
    overflow: hidden;
}
.mcp-achievement-badge[data-achievement-code="first_crown_bid"] .mcp-achievement-badge-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
.mcp-achievement-badge[data-achievement-code="first_crown_bid"] .mcp-achievement-badge-icon i {
    position: relative;
    z-index: 1;
}
.mcp-achievement-badge-earned[data-achievement-code="first_crown_bid"] .mcp-achievement-badge-icon {
    box-shadow: 0 0 12px rgba(255, 152, 0, 0.4), var(--mcp-badge-depth-shadow);
}

/* Earned fallback for any non-tiered badge that no category/code rule
   matched — keeps the depth shadow so any orphan still has elevation. */
.mcp-achievement-badge-earned:not([data-tier]):not([data-category="activation"]):not([data-category="special"]):not([data-category="subscription"]):not([data-achievement-code="first_follower"]):not([data-achievement-code="verified_seller"]):not([data-achievement-code="first_crown_bid"]) .mcp-achievement-badge-icon {
    box-shadow: var(--mcp-badge-depth-shadow);
}

/* Earned hover — gentle lift + intensified glow. Transition is on the
   icon's existing rule (line ~44) so it composes smoothly. */
.mcp-achievement-badge-earned:hover .mcp-achievement-badge-icon {
    transform: scale(1.05);
}

/* Locked state --------------------------------------------------------- */
/* Apply opacity / scale / partial grayscale to the WHOLE badge wrapper
   so the label fades together with the icon and the slight scale-down
   feels coherent. Grayscale is partial (0.6) not full so tier color
   bleeds through faintly — that's the "this is a tier you're working
   toward" aspirational signal. */
.mcp-achievement-badge-locked {
    opacity: 0.35;
    transform: scale(0.92);
    filter: grayscale(0.6);
    transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease;
}
.mcp-achievement-badge-locked:hover {
    opacity: 0.55;
    transform: scale(0.94);
}
/* Inherit-from-wrapper means the icon's own opacity/transform/filter
   from the prior stylesheet need to be cleared — otherwise the icon
   re-fades on top of the wrapper fade. */
.mcp-achievement-badge-locked .mcp-achievement-badge-icon {
    filter: none;
    opacity: 1;
}
.mcp-achievement-badge-locked .mcp-achievement-badge-label {
    opacity: 1;
}
/* Suppress the diamond/mythic shimmer for locked badges — animating a
   half-faded badge looks broken. */
.mcp-achievement-badge-locked[data-tier="diamond"] .mcp-achievement-badge-icon,
.mcp-achievement-badge-locked[data-tier="mythic"] .mcp-achievement-badge-icon {
    animation: none;
}

/* Profile rail (top of seller-store) ----------------------------------- */
.mcp-achievements-profile-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}
.mcp-achievements-more {
    font-size: 13px;
    font-weight: 600;
    color: #1e88e5;
    text-decoration: none;
    margin-left: 4px;
}
.mcp-achievements-more:hover { text-decoration: underline; }

/* Listing detail rail -------------------------------------------------- */
.mcp-achievements-listing-rail {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Catalog grid (Achievements tab + /achievements public page) ----------
   Spacing tightened in PR #41 so the grid reads as a cohesive cluster
   instead of scattered points across a 1200px container.

   - max-width: 840px on the grid keeps the 6-column row tight enough
     that adjacent badges feel grouped (~118px per cell at gap 18px).
     Partial rows (e.g. Buyer Milestones with 3 badges, Special with 1)
     left-align inside the same 840px so the empty space on the right
     reads as "we ran out of badges in this category" rather than
     "these badges are floating alone in a wide container."

   - Section vertical margins reduced from 24px/18px to 18px/10px so the
     header → first-row gap is ~24-28px rather than the prior ~42px.
     The category header keeps its underline + uppercase styling. */
/* Horizontal padding gives the achievements section breathing room
   from the page edge on /mark and the public catalog page. The
   left-aligned grid (PR #43) sat flush against the page-content edge
   without it. Mobile drops to 16px in the media query below. */
.mcp-achievements-tab-content {
    padding: 8px 32px 24px;
}
.mcp-achievements-tab-header {
    margin-bottom: 10px;
}
.mcp-achievements-tab-header h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}
.mcp-achievements-category {
    margin-top: 18px;
}
.mcp-achievements-category-heading {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e2e2;
    max-width: 840px;
}
/* Fixed-width cells (auto-fill) so badge-to-badge spacing stays identical
   regardless of how many badges a category has. The previous
   `repeat(6, minmax(0, 1fr))` stretched cells to fill 1/6 of the
   container, which made partial rows (3-, 4-, 5-badge categories) look
   spaced apart from the 6-badge ones. With auto-fill, partial rows just
   end early; gaps stay constant. 6 × 120px + 5 × 24px = 840px so a full
   row still fits the existing max-width exactly. Left-aligned (no auto
   margins) so the grid lines up flush with the headline + section
   headers — centring read as disconnected with 33 of an eventual 85+
   badges in the catalog. Once catalog expansion fills more rows the
   grid will naturally extend further down rather than re-centering. */
.mcp-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    column-gap: 24px;
    row-gap: 24px;
    max-width: 840px;
}
/* Per-category column overrides for sections that don't fit cleanly in
   the default 6-col grid. Each override widens max-width to accommodate
   N cells + (N-1) gaps, so the grid lays out as a single row instead of
   wrapping a small orphan to row 2.
   Desktop-only — the mobile media query below collapses every category
   to 4 columns, and we don't want the higher-specificity
   `[data-category]` selector to leak past that override and force a
   wide grid on a 375px viewport.
   Counts after PR-C catalog expansion:
     activation    = 8 (was 7 in PR #43; +first_review)
     sales         = 7 (was 5; +two_thousand_sales, +five_thousand_sales)
     subscription  = 8 (was 5; +three_year_member, +five_year_member, +lifetime_subscriber)
     community     = 8 (was 5; +five_hundred_followers, +thousand_followers, +helpful_reviewer)
   Other categories (purchases 5, pc 6, auctions 5, crown_auctions 5,
   trades_offers 5, hobby_heat 1, special 2) all fit within the default
   6-col grid. */
@media (min-width: 769px) {
    .mcp-achievements-grid[data-category="activation"] {
        grid-template-columns: repeat(8, 120px);
        max-width: calc(8 * 120px + 7 * 24px);  /* = 1128px */
    }
    .mcp-achievements-grid[data-category="sales"] {
        grid-template-columns: repeat(7, 120px);
        max-width: calc(7 * 120px + 6 * 24px);  /* = 984px */
    }
    .mcp-achievements-grid[data-category="subscription"] {
        grid-template-columns: repeat(8, 120px);
        max-width: calc(8 * 120px + 7 * 24px);  /* = 1128px */
    }
    .mcp-achievements-grid[data-category="community"] {
        grid-template-columns: repeat(8, 120px);
        max-width: calc(8 * 120px + 7 * 24px);  /* = 1128px */
    }
}
/* Force every grid item to fill its cell so the icon position is
   identical across rows. Without this, the wrapper (inline-block) and
   badge (inline-flex) both collapse to content width, so a badge with
   a longer label renders wider than one with a short label, shifting
   the icon's centre within the 120px cell. PR #43 fixed the cell width
   but not the wrapper width — visible icon-to-icon spacing was still
   uneven row-by-row. width: 100% on both wrapper and badge means the
   icon (centred via align-items on the badge) always lands in the
   middle of the cell regardless of label length. Mobile cells are 1fr
   instead of 120px, so width: 100% adapts naturally. */
.mcp-achievements-grid > .mcp-achievement-badge-wrapper {
    display: block;
    width: 100%;
}
.mcp-achievements-grid > .mcp-achievement-badge-wrapper > .mcp-achievement-badge {
    display: flex;
    width: 100%;
}

/* Reserve 2 lines of label space in the grid so a longer label (e.g.
   "First Offer Received") doesn't push its badge baseline below
   single-line neighbours in the same row. 3+ line labels truncate with
   ellipsis (defensive — no current name needs this).

   Selector note: PR #43's version used `.mcp-achievements-grid >
   .mcp-achievement-badge` but the DOM is grid → wrapper → badge, so
   `>` matched nothing and the rule never applied. Descendant selector
   here matches all labels in the grid, which is fine because the grid
   only contains badges. */
.mcp-achievements-grid .mcp-achievement-badge-label {
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Public catalog page hero --------------------------------------------- */
.mcp-achievements-public-hero {
    text-align: center;
    margin: 24px 0 32px;
}
.mcp-achievements-public-hero h1 {
    font-size: 32px;
    font-weight: 800;
}
.mcp-achievements-public-hero p {
    color: #555;
    font-size: 15px;
    max-width: 640px;
    margin: 8px auto 0;
}
.mcp-achievements-public-progress {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 16px;
    background: #fff7d6;
    border: 1px solid #ffd900;
    border-radius: 999px;
    font-weight: 600;
    color: #212529;
}

/* Tab pill matching existing seller-store tab style ------------------- */
.mcp-achievements-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #ffd900;
    color: #212529;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Header bell entry (dormant until PR B writes the rows) -------------- */
.notif-achievement {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
}
.notif-achievement .notif-icon {
    color: #ffd700;
    font-size: 22px;
    flex-shrink: 0;
}
.notif-achievement .notif-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.notif-achievement .notif-title {
    font-weight: 700;
    font-size: 13px;
}
.notif-achievement .notif-text {
    font-size: 12px;
    color: #555;
}
.notif-achievement .notif-link {
    font-size: 12px;
    font-weight: 600;
    color: #1e88e5;
    align-self: flex-start;
    margin-top: 4px;
    text-decoration: none;
}

/* Admin tables --------------------------------------------------------- */
.mcp-admin-achievements-table th,
.mcp-admin-achievements-table td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    font-size: 13px;
}
.mcp-admin-achievements-table th { background: #f1f1f1; font-weight: 700; }
.mcp-admin-achievements-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 24px;
}
.mcp-admin-achievements-stat {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 14px;
}
.mcp-admin-achievements-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}
.mcp-admin-achievements-stat-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
}

/* Styled tooltip (PR D — replaces native title attribute when the badge
   component is given a `progress` prop). Hover-driven on desktop;
   tap-to-show on touch via `.tooltip-active` class added by
   public/frontend/js/achievement-tooltip.js. ----------------------- */
.mcp-achievement-badge-wrapper {
    position: relative;
    display: inline-block;
}
.mcp-achievement-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 200px;
    max-width: 280px;
    padding: 12px 14px;
    background: #1a1a1a;
    color: #ffffff;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.mcp-achievement-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1a1a1a transparent transparent transparent;
}
.mcp-achievement-badge-wrapper:hover .mcp-achievement-tooltip,
.mcp-achievement-badge-wrapper.tooltip-active .mcp-achievement-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}
.mcp-achievement-tooltip-name {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
}
.mcp-achievement-tooltip-description {
    margin: 0 0 8px 0;
    color: #cccccc;
}
.mcp-achievement-tooltip-earned {
    margin: 0;
    color: #4caf50;
    font-weight: 500;
    font-size: 12px;
}
.mcp-achievement-tooltip-progress {
    margin: 8px 0 4px 0;
}
.mcp-achievement-tooltip-progress-text {
    font-size: 12px;
    color: #ffd700;
    margin: 0 0 4px 0;
    font-weight: 500;
}
.mcp-achievement-tooltip-progress-bar {
    width: 100%;
    height: 4px;
    background: #333333;
    border-radius: 2px;
    overflow: hidden;
}
.mcp-achievement-tooltip-progress-bar-fill {
    height: 100%;
    background: #ffd700;
    border-radius: 2px;
    transition: width 300ms ease;
}
.mcp-achievement-tooltip-howto {
    margin: 8px 0 0 0;
    color: #aaaaaa;
    font-size: 12px;
    font-style: italic;
}
/* Edge case: tooltip near the right edge of the viewport. JS in
   achievement-tooltip.js sets data-position="right" when the default
   center-anchored placement would clip outside the viewport. */
.mcp-achievement-tooltip[data-position="right"] {
    left: auto;
    right: 0;
    transform: translateY(-8px);
}
.mcp-achievement-tooltip[data-position="right"]::after {
    left: auto;
    right: 12px;
    transform: none;
}
.mcp-achievement-badge-wrapper:hover .mcp-achievement-tooltip[data-position="right"],
.mcp-achievement-badge-wrapper.tooltip-active .mcp-achievement-tooltip[data-position="right"] {
    transform: translateY(-12px);
}
.mcp-achievement-tooltip[data-position="left"] {
    left: 0;
    right: auto;
    transform: translateY(-8px);
}
.mcp-achievement-tooltip[data-position="left"]::after {
    left: 12px;
    right: auto;
    transform: none;
}
.mcp-achievement-badge-wrapper:hover .mcp-achievement-tooltip[data-position="left"],
.mcp-achievement-badge-wrapper.tooltip-active .mcp-achievement-tooltip[data-position="left"] {
    transform: translateY(-12px);
}

/* Mobile breakpoint matches recent leaderboard work ------------------- */
@media (max-width: 768px) {
    /* Badge sizes — shrink ~25% to fit a denser mobile layout. */
    .mcp-achievement-badge-xs .mcp-achievement-badge-icon { width: 24px; height: 24px; }
    .mcp-achievement-badge-xs .mcp-achievement-badge-icon i { font-size: 12px; }
    .mcp-achievement-badge-sm .mcp-achievement-badge-icon { width: 36px; height: 36px; }
    .mcp-achievement-badge-sm .mcp-achievement-badge-icon i { font-size: 18px; }
    .mcp-achievement-badge-md .mcp-achievement-badge-icon { width: 56px; height: 56px; }
    .mcp-achievement-badge-md .mcp-achievement-badge-icon i { font-size: 28px; }
    .mcp-achievement-badge-lg .mcp-achievement-badge-icon { width: 72px; height: 72px; }
    .mcp-achievement-badge-lg .mcp-achievement-badge-icon i { font-size: 36px; }

    /* Issue 1 — keep the seller-store tab bar on a single line on mobile.
       Without this, the 5th Achievements tab pushes the row to wrap below
       Shop / Reviews / Feed Posts. Now the bar scrolls horizontally
       instead. Hidden scrollbar matches mobile-native chip-row idiom. */
    .store-tab-section .store-tabs-flex {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .store-tab-section .store-tabs-flex::-webkit-scrollbar {
        display: none;
    }
    .store-tab-section .store-tabs-flex > .store-tabs {
        flex-shrink: 0;
    }

    /* Tighter section padding on mobile so the 4-col grid has more room
       per cell and badges aren't cramped against the viewport edge. */
    .mcp-achievements-tab-content {
        padding: 8px 16px 24px;
    }

    /* Uniform 4-column grid. Wrapper/badge fill rules from the desktop
       block above (`.mcp-achievements-grid > .mcp-achievement-badge-
       wrapper { width: 100%; }`) carry through and adapt automatically
       to the 1fr cells. */
    .mcp-achievements-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        justify-items: stretch;
    }

    /* Uniform label rendering on mobile. Min-height 30px (≈ 2 lines at
       the smaller mobile font) overrides the 2.4em desktop value because
       em on mobile renders ~26px which is too tight for 2 lines plus
       padding. Hyphens-auto lets long words like "Subscription" break
       cleanly when the cell is narrow. */
    .mcp-achievements-grid .mcp-achievement-badge-label {
        width: 100%;
        max-width: 100%;
        min-height: 30px;
        line-height: 1.2;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .mcp-admin-achievements-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Tooltip — slimmer on phones so it doesn't dominate the screen. */
    .mcp-achievement-tooltip {
        min-width: 180px;
        max-width: 240px;
        font-size: 12px;
        padding: 10px 12px;
    }
}