/* ==========================================================================
   Rewardify (com_rewardify) · extension bridge · Studio community kit
   --------------------------------------------------------------------------
   Sections 1-5 are kit-owned and byte-identical in Vesper, Quorum and Mimeo.
   Edit them in template-studio/kit/community/tpl/media/css/ext/rewardify.css and
   run sync-kit.mjs for all three templates. Section 6 belongs to the template.

   Loaded by PageContext::useExtension('rewardify') on pages that mount the
   member app (option com_rewardify, or the com_rewardify.site asset) and by the
   chromes around mod_rewardify_leaderboard. Bootstrap stays ON: the app's CSS is
   hand-written and fully scoped (.rw-*, .rewardify-app).

   App root: #rewardify-site.rewardify-app[data-theme][data-color-scheme]
   (the app writes data-color-scheme itself from <html>; its dark themes are
   companions of the light ones: paper -> carbon, plum -> midnight ...).

   Role notes (read from the built CSS, not the names):
   --rw-accent     outlines, borders, progress fills, links     -> --ts-link
   --rw-accent-bg  tinted fills (points pill, "me" row)         -> --ts-tint
   --rw-accent-fg  text ON --rw-accent-bg                       -> --ts-on-tint
   --rw-bg         the ground AND text on ink fills (brand mark,
                   active navigation, primary button), so it
                   must stay opaque                              -> --ec-bg
   --rw-line-2     button and field borders (UI boundary 3:1)   -> --ts-control
   ========================================================================== */

/* 1. Variable map ----------------------------------------------------------- */

/* 1,2,0 beats :root (paper) and .rewardify-app[data-theme=...] (0,2,0). */
#rewardify-site.rewardify-app[data-color-scheme] {
    --rw-display: var(--ec-font-display);
    --rw-sans: var(--ec-font-body);
    --rw-mono: var(--ts-font-mono);
    --rw-bg: var(--ec-bg);
    --rw-bg-2: var(--ec-surface-2);
    --rw-bg-card: var(--ec-surface);
    --rw-fg: var(--ec-fg);
    --rw-fg-1: var(--ec-fg-2);
    --rw-fg-2: var(--ec-fg-2);
    --rw-fg-3: var(--ec-fg-2);
    --rw-line: var(--ec-border);
    --rw-line-2: var(--ts-control);
    --rw-accent: var(--ts-link);
    --rw-accent-bg: var(--ts-tint);
    --rw-accent-fg: var(--ts-on-tint);
    --rw-accent-2: var(--ts-info);
    --rw-pos: var(--ts-success);
    --rw-neg: var(--ts-danger);
    --rw-warn: var(--ts-warning);
    --rw-shadow: var(--ec-shadow);
    --rw-backdrop: var(--ts-scrim);
    --rw-rad: var(--ec-radius);
    --rw-rad-sm: var(--ec-btn-radius);
}

/* 2. Containment ------------------------------------------------------------ */

/* Bootstrap Reboot underlines every <a>; the app's tab and button links are
   styled as controls (padding, hover fill, an active bar) and never reset the
   decoration. Classless links in running text keep their underline. */
:where(#rewardify-site) a:where([class]) {
    text-decoration: none;
}

/* Reboot also sets line-height 1.2 on every heading, line-height: inherit on
   controls and vertical-align: middle on img/svg; the app is drawn on the
   browser defaults (0,0,1, loaded after Reboot). */
:where(#rewardify-site) :is(h1, h2, h3, h4, h5, h6) {
    line-height: inherit;
}

:where(#rewardify-site) :is(button, input, select, textarea) {
    line-height: normal;
}

:where(#rewardify-site) :is(img, svg) {
    vertical-align: baseline;
}

/* 3. Leak neutralisers ------------------------------------------------------ */

/* None. The app's CSS declares variables on :root (the --rw-* names, harmless)
   and scopes every rule to .rw-* / .rewardify-app. */

/* 4. Default module markup -------------------------------------------------- */

/* mod_rewardify_leaderboard: its css/default.css is never loaded (the module
   has no asset call), so the whole .rw-lb markup is skinned here. Avatars are
   Gravatar URLs; the tinted disc shows while they load or when the request is
   blocked (alt="" renders no broken-image glyph). */
.rw-lb {
    margin: 0;
    font-size: 1rem;
}

.rw-lb-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw-lb-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 3.25rem;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--ec-border);
}

.rw-lb-row:last-child {
    border-block-end: 0;
}

.rw-lb-pos {
    flex: 0 0 1.75rem;
    color: var(--ec-fg-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.rw-lb-rank-1 .rw-lb-pos,
.rw-lb-rank-2 .rw-lb-pos,
.rw-lb-rank-3 .rw-lb-pos {
    color: var(--ts-link);
}

.rw-lb-avatar {
    display: inline-grid;
    flex: 0 0 2.25rem;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    overflow: clip;
    border-radius: 50%;
    background: var(--ec-surface-2);
}

.rw-lb-avatar img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.rw-lb-initial {
    color: var(--ec-fg);
    font-weight: 700;
    line-height: 1;
}

.rw-lb-id {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-inline-size: 0;
    line-height: 1.3;
}

.rw-lb-name {
    overflow: hidden;
    color: var(--ec-fg);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rw-lb-handle {
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rw-lb-points {
    flex: 0 0 auto;
    padding: 0.125rem 0.625rem;
    border-radius: var(--ec-btn-radius);
    background: var(--ts-tint);
    color: var(--ts-on-tint);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rw-lb-empty {
    padding-block: 0.5rem;
    color: var(--ec-fg-2);
}

/* 5. Page frame ------------------------------------------------------------- */

/* The app's top bar is sticky at top:0 with the app ground as its fill; in app
   mode the site header is static, so it pins to the viewport edge. Offset it by
   the template's sticky offset (0 in app mode) for pages that keep a sticky
   header. */
#rewardify-site .rw-topbar {
    top: var(--ts-sticky-offset, 0px);
}

/* The member shell has no narrow layout of its own: its eight tabs and the
   two-column wallet run past the right edge of a phone (html{overflow-x:clip}
   then hides them). Below 48rem the tab strip scrolls sideways (active bar
   moved inside the strip) and the wallet cards stack. */
@media (max-width: 47.9999rem) {
    #rewardify-site .rw-topbar {
        gap: 0.75rem;
    }

    #rewardify-site .rw-topbar > :first-child {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    #rewardify-site .rw-user-tabs {
        flex: 1 1 auto;
        align-self: stretch;
        min-inline-size: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    #rewardify-site .rw-user-tab {
        flex: none;
        white-space: nowrap;
    }

    #rewardify-site .rw-user-tab.on::after {
        bottom: 0;
    }

    #rewardify-site .rw-wallet--inline {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    }

    #rewardify-site .rw-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.5rem 1.25rem;
    }

    /* .rw-hero-r carries an inline min-width: 380px */
    #rewardify-site .rw-hero > * {
        min-inline-size: 0 !important;
    }

    #rewardify-site .rw-hero-meta {
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
    }
}

/* Phones: the "R" mark stays, its word gives the tab strip the room. */
@media (max-width: 29.9999rem) {
    #rewardify-site .rw-brand-name {
        display: none;
    }
}

/* @ts-kit section-6 begin: 6. Design skin (template-owned; sync-kit.mjs keeps everything between these two markers) */
/* Forme: Mona Sans display type at 125% for the board's headings and numerals. */
#rewardify-site.rewardify-app {
    font-stretch: var(--fm-disp-stretch);
}

#rewardify-site.rewardify-app :is(h1, h2) {
    letter-spacing: -0.01em;
}

/* One account control per screen (the Forme header's): the app bar's avatar disc (guests: a
   second "Log in") stands down and its tabs take the room; on phones the scrolling tab strip
   fades at the edge that still has tabs to show. */
#rewardify-site .rw-topbar-r {
    display: none;
}

@property --fm-tabs-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 2.5rem;
}

@keyframes fm-tabs-edge {
    0%,
    90% { --fm-tabs-fade: 2.5rem; }
    100% { --fm-tabs-fade: 0rem; }
}

@media (max-width: 47.9999rem) {
    #rewardify-site .rw-user-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fm-tabs-fade)), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - var(--fm-tabs-fade)), transparent);
    }

    @supports (animation-timeline: scroll()) {
        #rewardify-site .rw-user-tabs {
            animation: fm-tabs-edge linear both;
            animation-timeline: scroll(self inline);
        }
    }
}
/* @ts-kit section-6 end */