/* /ranking (app/Providers/Interface/Ranking.php). One "Leaderboards" window: the categories in a side
   list (a sideways strip below 992 px), the chosen board on the right. Rows reuse the roster look
   (Interface/roster.css: faction crest with the rank plate, class emblem, shield level); this file adds
   the side list, the board title, the filters, the ranked value, the search result card and the phone
   layout. Colours are helios tokens only. */

.rk-shell { --rk-gold: var(--hx-gold); --rk-silver: color-mix(in srgb, var(--hx-text) 70%, var(--hx-teal)); --rk-bronze: color-mix(in srgb, var(--hx-amber) 70%, var(--hx-boss)); }

.rk-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 22px; align-items: start; }

/* ---- the category list: grouped, an icon well per category, the chosen one lit in gold */
.rk-cats {
    position: sticky;
    top: 86px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 10px;
    background: var(--hx-inset);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
}
.rk-cats__group { display: flex; flex-direction: column; gap: 2px; }
.rk-cats__label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hx-text-faint);
}
.rk-cats__label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hx-edge-soft), transparent); }
.rk-cat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 5px 8px;
    color: var(--hx-text-dim);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    clip-path: var(--hx-shape-sm);
    transition: color .2s, background .2s;
}
.rk-cat:hover { color: var(--hx-ice); background: var(--hx-card-hover); }
.rk-cat__icon {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    height: 28px;
    font-size: .8rem;
    color: var(--hx-text-faint);
    background: var(--hx-card);
    box-shadow: inset 0 0 0 1px var(--hx-edge-faint);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: color .2s, background .2s;
}
.rk-cat:hover .rk-cat__icon { color: var(--hx-accent); }
.rk-cat__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-cat.is-active {
    color: var(--hx-ice);
    background: linear-gradient(90deg, color-mix(in srgb, var(--hx-gold) 22%, transparent), transparent 85%);
    box-shadow: inset 3px 0 0 var(--hx-gold);
}
.rk-cat.is-active .rk-cat__icon {
    color: var(--hx-void);
    background: linear-gradient(180deg, var(--hx-gold), var(--hx-gold-deep));
    box-shadow: 0 0 10px color-mix(in srgb, var(--hx-gold) 50%, transparent);
}

/* ---- the board title: what is ranked and how */
.rk-title { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hx-line); }
.rk-title__icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    height: 52px;
    font-size: 1.25rem;
    color: var(--hx-gold);
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--hx-gold) 22%, var(--hx-inset)), var(--hx-inset));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hx-gold) 55%, transparent);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.rk-title__text { min-width: 0; }
.rk-title h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 3px; font-family: var(--hx-font-display); font-size: 1.35rem; letter-spacing: .03em; color: var(--hx-ice); }
.rk-title p { margin: 0; color: var(--hx-text-dim); font-size: .84rem; line-height: 1.5; }

/* ---- toolbar: the two filter groups, the search on the right */
.rk-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.rk-filters { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rk-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rk-seg__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 74px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hx-text-faint);
}
.rk-seg__label i { color: var(--hx-accent); }
.rk-seg .filter-pill { min-height: 32px; padding: 4px 12px 4px 10px; font-size: .78rem; text-decoration: none; }
.rk-seg .filter-pill[data-type="faction"].is-athens { --pill: var(--hx-mp); }
.rk-clear { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: .78rem; font-weight: 700; color: var(--hx-accent); text-decoration: none; }
.rk-clear:hover { color: var(--hx-ice); }
.rk-search { display: flex; gap: 8px; align-items: stretch; flex: 0 1 320px; min-width: 240px; }
.rk-search .hx-field { margin: 0; flex: 1 1 auto; min-width: 0; }
.rk-search .hx-field__wrap { height: 100%; }
.rk-search input { height: 42px; min-height: 42px; }
.rk-search .hx-btn { flex-shrink: 0; min-height: 42px; height: 42px; padding: 0 18px; }

/* ---- the table: fixed side columns, the name takes the rest; headers line up with their cells */
.rk-table .rk-c-rank { width: 76px; }
.rk-table .rk-c-class { width: 150px; }
.rk-table .rk-c-level { width: 86px; }
.rk-table .rk-c-extra { width: 190px; }
.rk-table .rk-c-value { width: 210px; }
.rk-table.table > thead th.rk-num { text-align: right; }
.rk-table.table > tbody > tr > td.rk-c-value { padding-right: 16px; }

/* ---- the ranked value */
.rk-val { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.rk-val b { color: var(--hx-gold); font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.rk-val small { color: var(--hx-text-dim); font-size: .74rem; white-space: nowrap; }
.rk-val.is-silver b { color: var(--hx-silver); }
.rk-val.is-teal b { color: var(--hx-accent); }
.rk-val.is-elite b { color: var(--hx-elite-text); }
.rk-num { text-align: right; }
.rk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: .74rem; font-weight: 700; color: var(--hx-text); background: var(--hx-chip); box-shadow: inset 0 0 0 1px var(--hx-edge-faint); clip-path: var(--hx-shape-sm); white-space: nowrap; }
.rk-chip i { color: var(--hx-accent); font-size: .7rem; }
.rk-pet { display: block; color: var(--hx-ice); font-weight: 700; overflow-wrap: anywhere; }
.rk-owner { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--hx-text-dim); margin-top: 2px; }

/* a searched character's row stands out */
.hr-roster.table > tbody > tr.rk-me { background: linear-gradient(90deg, rgba(var(--hx-teal-rgb), .22), transparent 60%), var(--hx-card-hover); }
.hr-roster.table > tbody > tr.rk-me > td:first-child { box-shadow: inset 3px 0 0 var(--hx-teal) !important; }

/* ---- search result card */
.rk-found { margin-bottom: 16px; }
.rk-found__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.rk-found__name { font-family: var(--hx-font-display); font-size: 1.25rem; color: var(--hx-ice); font-weight: 700; }
.rk-found__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.rk-pos { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--hx-card); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); text-decoration: none; color: inherit; transition: border-color .2s, background .2s; }
.rk-pos:hover { border-color: var(--hx-edge); background: var(--hx-card-hover); color: inherit; }
.rk-pos small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hx-text-dim); }
.rk-pos b { font-size: 1.15rem; color: var(--hx-ice); font-variant-numeric: tabular-nums; }
.rk-pos b.is-top { color: var(--hx-gold); }
.rk-pos span { font-size: .78rem; color: var(--hx-text-faint); font-variant-numeric: tabular-nums; }
.rk-matches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.rk-empty { padding: 28px 12px; text-align: center; color: var(--hx-text-dim); }
.rk-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hx-line); color: var(--hx-text-faint); font-size: .8rem; }
.rk-foot i { color: var(--hx-accent); margin-right: 6px; width: 14px; text-align: center; }

/* ---- tablets: the side list becomes a strip that scrolls sideways */
@media (max-width: 991.98px) {
    .rk-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .rk-cats {
        position: static;
        flex-direction: row;
        gap: 4px;
        padding: 6px;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .rk-cats__group { flex-direction: row; gap: 4px; }
    .rk-cats__group + .rk-cats__group { padding-left: 4px; border-left: 1px solid var(--hx-line); }
    .rk-cats__label { display: none; }
    .rk-cat { flex-shrink: 0; min-height: 38px; padding: 4px 12px 4px 6px; }
    .rk-cat.is-active { background: color-mix(in srgb, var(--hx-gold) 16%, transparent); box-shadow: inset 0 -2px 0 var(--hx-gold); }
    .rk-cat__name { overflow: visible; }
    .rk-search { flex: 1 1 100%; }
    .rk-table .rk-c-class { width: 130px; }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .rk-table .rk-c-extra { width: 150px; }
    .rk-table .rk-c-extra .rk-chip { margin: 2px 0; }
}

/* ---- phones: one card per row (roster.css folds the table; these name the areas for this page) */
@media (max-width: 767.98px) {
    .rk-title__icon { flex-basis: 44px; height: 44px; font-size: 1.05rem; }
    .rk-title h3 { font-size: 1.15rem; }
    .rk-seg__label { width: 100%; }
    /* name and level shield on top, the ranked value on its own line under the name */
    .rk-table tbody tr {
        grid-template-columns: 50px minmax(0, 1fr) auto;
        grid-template-areas: "crest name level" "crest value value";
    }
    .rk-table--nolevel tbody tr,
    .rk-table--pets tbody tr { grid-template-areas: "crest name name" "crest value value"; }
    .rk-table .rk-c-value { grid-area: value; justify-self: start; text-align: left !important; width: auto; padding-right: 0 !important; }
    .rk-table .hr-c-level { grid-area: level; }
    .rk-table .rk-c-extra { display: none !important; }
    .rk-table--pets .hr-c-level { display: none !important; }
    .rk-val { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
    .rk-val b { font-size: .98rem; }
    .rk-val small { white-space: normal; }
    /* the card carries the medal stripe; roster.css would draw a second one beside the crest */
    .rk-table.hr-roster.is-ranked.table > tbody > tr:is(.is-top1, .is-top2, .is-top3, .rk-me) > td:first-child { box-shadow: none !important; }
}