/* =========================================================================
   UARO WoE — Leaderboard page family (leaderboard, kills, records, session)
   ========================================================================= */

/* ---------- Hero "All-time records" CTA pill on leaderboard page ---------- */
.woe-hero__cta {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-accent);
    border: 1px solid color-mix(in srgb, var(--df-gold) 40%, var(--woe-border));
    background: color-mix(in srgb, var(--df-gold) 6%, transparent);
    padding: 7px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: color var(--woe-duration-fast) var(--woe-ease-out),
                border-color var(--woe-duration-fast) var(--woe-ease-out),
                background-color var(--woe-duration-fast) var(--woe-ease-out);
}

.woe-hero__cta:hover,
.woe-hero__cta:focus-visible {
    color: var(--df-bone);
    border-color: var(--df-gold);
    background: color-mix(in srgb, var(--df-gold) 14%, transparent);
}

[data-bs-theme="light"] .woe-hero__cta {
    /* Color flips via --woe-text-accent. Override frame to blood-deep tint. */
    border-color: color-mix(in srgb, var(--df-blood-deep) 40%, var(--woe-border));
    background: color-mix(in srgb, var(--df-blood-deep) 6%, transparent);
}

/* Light hover/focus: don't flip text to bone (1.13:1 invisible on cream). */
[data-bs-theme="light"] .woe-hero__cta:hover,
[data-bs-theme="light"] .woe-hero__cta:focus-visible {
    color: var(--df-blood);
    border-color: var(--df-blood-deep);
    background: color-mix(in srgb, var(--df-blood-deep) 12%, transparent);
}


/* ---------- Filter form — sticky band under navbar ---------- */
.woe-leaderboard-filters {
    position: sticky;
    top: var(--woe-sticky-top, 56px);
    z-index: 40;  /* below navbar (50) so dropdowns from navbar still cover */
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--df-gold) 5%, transparent) 0%, transparent 60%),
        var(--woe-surface);
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 18px -10px var(--df-shadow);
}

.woe-leaderboard-filters__group {
    /* legacy custom.css already lays this out — just ensure label color */
}

.woe-leaderboard-filters .woe-metric-label {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-eyebrow);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-accent);
    opacity: 0.9;
}

/* Metric label color flips automatically via --woe-text-accent. */


/* ---------- Segmented chips ---------- */
.woe-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--woe-surface-base);
    border: 1px solid var(--woe-border);
    border-radius: 4px;
}

.woe-segmented__btn {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-pill);
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 3px;
    color: var(--woe-text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color var(--woe-duration-fast) var(--woe-ease-out),
                background-color var(--woe-duration-fast) var(--woe-ease-out),
                border-color var(--woe-duration-fast) var(--woe-ease-out);
}

.woe-segmented__btn:hover,
.woe-segmented__btn:focus-visible {
    color: var(--woe-text-primary);
    background: var(--woe-row-hover);
}

.woe-segmented__btn.is-active {
    color: var(--woe-text-accent);
    background: color-mix(in srgb, var(--df-gold) 12%, var(--woe-surface));
    border-color: color-mix(in srgb, var(--df-gold) 38%, var(--woe-border));
    box-shadow: inset 0 -1px 0 var(--df-gold);
}

[data-bs-theme="light"] .woe-segmented__btn.is-active {
    /* Color flips via --woe-text-accent. Override the rest to blood-deep tint. */
    background: color-mix(in srgb, var(--df-blood-deep) 8%, var(--woe-surface));
    border-color: color-mix(in srgb, var(--df-blood-deep) 38%, var(--woe-border));
    box-shadow: inset 0 -1px 0 var(--df-blood-deep);
}


/* ---------- Session select ---------- */
.woe-session-select {
    background: var(--woe-surface-base);
    border: 1px solid var(--woe-border);
    color: var(--woe-text-primary);
    font-family: var(--woe-font-sans);
    border-radius: 4px;
}

.woe-session-select:focus {
    /* Focus tint flips to blood-deep in light mode via --woe-focus-tint. */
    border-color: color-mix(in srgb, var(--woe-focus-tint) 60%, var(--woe-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--woe-focus-tint) 35%, transparent);
}


/* ---------- Search input ---------- */
.woe-table-search__field {
    position: relative;
}

.woe-table-search__input {
    background: var(--woe-surface-base);
    border: 1px solid var(--woe-border);
    color: var(--woe-text-primary);
    border-radius: 4px;
    padding-left: 2rem;
    font-family: var(--woe-font-sans);
}

.woe-table-search__input:focus {
    /* Focus tint flips to blood-deep in light mode via --woe-focus-tint. */
    border-color: color-mix(in srgb, var(--woe-focus-tint) 60%, var(--woe-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--woe-focus-tint) 35%, transparent);
}

.woe-table-search__icon {
    color: var(--woe-text-accent);
    opacity: 0.75;
}

.woe-table-search__clear {
    color: var(--woe-text-secondary);
    text-decoration: none;
}
.woe-table-search__clear:hover {
    color: var(--df-blood);
}


/* ---------- Podium — top 3 medal stand ----------
   DOM order (from PHP): rank 2 (left), rank 1 (center, elevated), rank 3 (right). */
.woe-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 1rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    align-items: end;
}

@media (max-width: 599px) {
    .woe-podium {
        grid-template-columns: 1fr;
    }
}

.woe-podium__slot {
    display: block;
}

.woe-podium__card {
    position: relative;
    display: grid;
    gap: 0.4rem;
    padding: 1.4rem 1rem 1.2rem;
    text-decoration: none;
    color: var(--woe-text-primary);
    background:
        radial-gradient(ellipse at 50% -30%, color-mix(in srgb, var(--df-gold) 14%, transparent) 0%, transparent 60%),
        var(--woe-surface);
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    text-align: center;
    transition: transform var(--woe-duration-fast) var(--woe-ease-out),
                box-shadow var(--woe-duration-fast) var(--woe-ease-out),
                border-color var(--woe-duration-fast) var(--woe-ease-out);
}

.woe-podium__card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--df-gold) 55%, var(--woe-border));
    box-shadow: 0 18px 36px -16px var(--df-shadow);
}

/* Rank-1 slot: gold trim, gold corner brackets, taller padding */
.woe-podium__slot--1 .woe-podium__card {
    padding-top: 2rem;
    padding-bottom: 1.6rem;
    border-color: color-mix(in srgb, var(--df-gold) 55%, var(--woe-border));
    background:
        radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--df-gold) 22%, transparent) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--df-blood-deep) 14%, transparent) 0%, transparent 60%),
        var(--woe-surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-gold) 25%, transparent),
                0 18px 48px -18px color-mix(in srgb, var(--df-gold) 50%, transparent);
}

/* Crown sigil only on rank 1 */
.woe-podium__crown {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--woe-surface);
    border: 1px solid color-mix(in srgb, var(--df-gold) 55%, var(--woe-border));
    border-radius: 50%;
    color: var(--woe-text-accent);
    font-size: 0.92rem;
    box-shadow: 0 0 16px color-mix(in srgb, var(--df-gold) 50%, transparent);
}

.woe-podium__rank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-eyebrow);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-secondary);
}

.woe-podium__medal {
    font-size: 1.3rem;
}

.woe-podium__name {
    font-family: var(--woe-font-display);
    font-weight: 700;
    font-size: var(--woe-text-display-sm);
    letter-spacing: var(--woe-track-display);
    text-transform: uppercase;
    color: var(--woe-text-primary);
    line-height: var(--woe-leading-display);
}

.woe-podium__slot--1 .woe-podium__name {
    color: var(--woe-text-accent);
    font-size: var(--woe-text-display);
    text-shadow: 0 0 18px color-mix(in srgb, var(--df-gold) 30%, transparent);
}

[data-bs-theme="light"] .woe-podium__slot--1 .woe-podium__name {
    /* Color flips via --woe-text-accent. Override only the gold-glow shadow. */
    text-shadow: none;
}

.woe-podium__primary {
    font-family: var(--woe-font-mono);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: var(--woe-track-numeral);
    color: var(--woe-text-accent);
    line-height: 1;
}

.woe-podium__slot--1 .woe-podium__primary {
    font-size: 1.85rem;
    color: var(--woe-text-accent);
    text-shadow: 0 0 16px color-mix(in srgb, var(--df-gold) 35%, transparent);
}

[data-bs-theme="light"] .woe-podium__primary,
[data-bs-theme="light"] .woe-podium__slot--1 .woe-podium__primary {
    /* Color flips via --woe-text-accent. Override only the gold-glow shadow. */
    text-shadow: none;
}

.woe-podium__primary-label {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-eyebrow);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-secondary);
}

.woe-podium__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-meta);
    color: var(--woe-text-secondary);
    margin-top: 0.2rem;
}


/* ---------- Leaderboard table — page-specific exceptions only ----------
   Shared .woe-table chrome lives in base.css. The third-column gold
   treatment is leaderboard-only (highlights the active sort metric). */
.woe-table tbody td:nth-child(3) {
    font-family: var(--woe-font-mono);
    color: var(--woe-text-accent);
}

/* Third-column metric color flips automatically via --woe-text-accent. */


/* ---------- Kill log — minimal scoped overrides ----------
   Body chrome (padding, header type, row hover, gold left-border) comes
   from base.css's .woe-table block so kill log matches the leaderboard
   look. Only structural quirks of this table need scoped rules. */

/* Arrow column is a separator, not data: collapse it to its glyph width
   and reset the leaderboard's column-3-gold metric treatment so the `›`
   stays subtle. */
.woe-kill-table .woe-kill-table__arrow,
.woe-kill-table tbody td:nth-child(3) {
    width: 2.4rem;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    vertical-align: middle;
    color: var(--woe-text-muted);
    font-family: var(--woe-font-mono);
}

.woe-kill-table__arrow-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    line-height: 1;
    /* Skull-then-arrow reads left-to-right; the arrow is dimmer so the
       skull carries the visual weight. */
}

.woe-kill-table__arrow-glyph {
    color: color-mix(in srgb, var(--df-gold) 70%, var(--woe-text-muted));
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-1px);
}

[data-bs-theme="light"] .woe-kill-table__arrow-glyph {
    color: color-mix(in srgb, var(--df-blood-deep) 60%, var(--woe-text-muted));
}

/* Don't let date strings wrap in the time cell. */
.woe-kill-table .woe-kill-table__time {
    white-space: nowrap;
}

/* Emblem-link wrapper — keeps the click affordance to the guild profile
   without leaning on player_link's [GuildName] text fallback. */
.woe-row-emblem-link {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    border-radius: 3px;
    transition: filter var(--woe-duration-fast) var(--woe-ease-out),
                transform var(--woe-duration-fast) var(--woe-ease-out);
}

.woe-row-emblem-link:hover {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--df-gold) 60%, transparent));
    transform: translateY(-1px);
}


/* ---------- Search results panel ---------- */
.woe-search-results {
    border: 1px solid color-mix(in srgb, var(--df-gold) 30%, var(--woe-border));
    border-radius: 4px;
    padding: 1rem;
    background:
        radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--df-gold) 8%, transparent) 0%, transparent 60%),
        var(--woe-surface);
}

.woe-search-results__query {
    font-family: var(--woe-font-display);
    color: var(--woe-text-accent);
    font-style: italic;
}

/* Search results query color flips automatically via --woe-text-accent. */

.woe-search-results__empty {
    font-family: var(--woe-font-body);
    font-style: italic;
    color: var(--woe-text-secondary);
    padding: 1rem 0;
}


/* Pagination chrome lives in base.css — woe_pagination() output and
   .woe-pagination__link both inherit from there. */


/* ---------- Records page hero ----------
   records.php uses the same .woe-page-head + h3 page-title pattern,
   so .woe-page-head--hero from page-overview.css would work — but
   page-overview.css isn't loaded on records.php. Re-apply the hero
   shell here under a records-specific hook so the all-time hero band
   matches. Achieved by adding the same modifier in records.php in
   step 8; this rule provides the styling. */