/* OCD leaderboard: bigger centred title, the call to action underneath, and
   the Rangliste tab back in the chat bubble.

   Override layer for the leaderboard. The base styles stay in
   engagement/ocd-leaderboard.css and engagement/ocd-chat-bundle.css, which the
   plugin enqueues from the ig_engage_css_leaderboard_table and
   ig_engage_css_chat_widget options. Everything here ships through
   ig-includes/ig-engage-leaderboard-cta.php, which stamps the URL with the file
   mtime.

   Since 02.09 the two base files are stamped the same way, by
   ig-includes/ig-engage-leaderboard-assets.php - so an edit to them reaches a
   returning browser again and this file is a genuine override layer rather
   than a workaround for a dead cache buster.

   Selectors are one level deeper than the base rules on purpose, so they win
   no matter which stylesheet loads first.

   The widget sits on a dark card, so the accent is the same gold it already
   uses for the title and the point totals. */

/* --- Title: bigger, centred --- */
.ocd-leaderboard .ocd-lb-title {
    justify-content: center;
    margin-bottom: 14px;
    font-size: 21px;
    line-height: 1.25;
    text-align: center;
    letter-spacing: -0.01em;
}

/* --- The table itself, centred in the card ------------------------------
   The rows are flex rows with the points pushed to the far right by
   margin-left:auto, so on a wide card the names ended up hard against the left
   edge and the totals against the right one. Capping the row width and
   centring it keeps rank, name and points in tidy columns while the block sits
   in the middle. The cap simply stops binding on narrow screens. */
.ocd-leaderboard .ocd-lb-row,
.ocd-leaderboard .ocd-lb-you {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* The standing line is a full sentence now ("Du bist auf Platz 1 mit 755 Pkt")
   rather than the old "... Du: Platz 1" note, so it gets a little more
   presence. */
.ocd-leaderboard .ocd-lb-you {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #dfe4ec;
}

/* --- Call to action --- */
.ocd-leaderboard .ocd-lb-cta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(253, 183, 36, 0.22);
    text-align: center;
}

.ocd-leaderboard .ocd-lb-cta-text {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #dfe4ec;
}

/* A member sees where they stand, a visitor sees the invitation - never both.
   .ocd-lb-logged-in is set on the wrapper by engagement/ocd-leaderboard.js
   once the payload says who is signed in; the button stays either way. */
.ocd-leaderboard.ocd-lb-logged-in .ocd-lb-cta-text {
    display: none;
}

.ocd-leaderboard .ocd-lb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 11px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fdb724 0%, #fdb724 55%, #e0a01a 100%);
    color: #1b2340;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(253, 183, 36, 0.22);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ocd-leaderboard .ocd-lb-cta-btn:hover,
.ocd-leaderboard .ocd-lb-cta-btn:focus {
    color: #1b2340;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(253, 183, 36, 0.3);
}

.ocd-leaderboard .ocd-lb-cta-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ocd-leaderboard .ocd-lb-cta-arrow {
    font-size: 15px;
    line-height: 1;
}

/* --- Rangliste tab in the chat bubble -------------------------------------
   The tab is injected by ocd-leaderboard-cta.js, because the button is missing
   from the stored chat markup (option ig_engage_template_chat_widget) and that
   option has no writer.

   ocd-chat-bundle.css used to hide the tab with a rule marked TEMP
   (2026-07-07). That rule is gone from the file now, but this one stays as a
   safety net in case an older copy of the bundle stylesheet is ever restored:
   it is deliberately prefixed with html body, so it outranks the old rule on
   specificity instead of relying on which stylesheet happens to load last -
   the bundle CSS is in fact enqueued AFTER this file, so an equally specific
   rule would lose.

   inline-block matches what the other tabs compute to: they set no display of
   their own, and .eng-chat-tabs is a flex row, which blockifies its children
   either way. */
html body .eng-chat-tabs .eng-chat-tab[data-tab="rangliste"] {
    display: inline-block !important;
}

/* Five tabs instead of four have to fit a 360px window, so trim the type a
   little once the Rangliste tab is in place. */
.eng-chat-tabs.ocd-has-rangliste .eng-chat-tab {
    font-size: 12px;
    padding-left: 1px;
    padding-right: 1px;
    letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .ocd-leaderboard .ocd-lb-cta-btn {
        transition: none;
    }
    .ocd-leaderboard .ocd-lb-cta-btn:hover,
    .ocd-leaderboard .ocd-lb-cta-btn:focus {
        transform: none;
    }
}

@media (max-width: 480px) {
    .ocd-leaderboard .ocd-lb-title {
        font-size: 19px;
    }
    .ocd-leaderboard .ocd-lb-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 14px;
        font-size: 13px;
    }
    .eng-chat-tabs.ocd-has-rangliste .eng-chat-tab {
        font-size: 11px;
    }
}