/*
 * Ranking pages (users, companies, countries): shared phone and tablet rules
 * (docs/MOBILE.md, WP-LISTS). Loaded by the three views after their own page
 * CSS, so equal-specificity rules here win. Nothing here applies at 1200px
 * and up with a mouse, except the empty-state span (it replaces an inline
 * style) and the mobile-only labels, which stay hidden there.
 */
:is(.ranking-users, .ranking-companies, .ranking-countries) .rk-empty { grid-column: 1 / -1; }
:is(.ranking-users, .ranking-companies, .ranking-countries) .rk-m-label,
:is(.ranking-users, .ranking-companies, .ranking-countries) .rk-m-icon { display: none; }

/* Hit areas: toolbar buttons, date stepper, pager, filter selects. */
@media (max-width: 1199.98px), (any-pointer: coarse) {
    :is(.ranking-users, .ranking-companies, .ranking-countries) :is(.rk-filters-btn, .rk-findme, .rk-pill) { height: 40px; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-date button { height: 40px; min-width: 40px; justify-content: center; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-date .dropdown-menu a { padding: 10px 12px; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-pager .pages { min-width: 40px; height: 40px; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-select { min-height: 40px; }
}

@media (max-width: 1199.98px) {
    /* 11px floor for text; the ordinal stays a superscript of an 11px base. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) :is(.rk-tile .rk-rank, .rk-tile .rk-jobs, .rk-tile .rk-members, .rk-head, .rk-row .rk-rank, .rk-filter-row label, .rk-filters-btn .rk-filters-note, .rk-pager .pages, .rk-filters-btn, .rk-findme, .rk-pill) {
        font-size: max(var(--vt-fs-floor), 0.72rem);
    }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-rank sup { font-size: 0.7em; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-filters-menu.dropdown-menu { min-width: min(320px, calc(100vw - 2.5rem)); }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile { min-width: 0; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) :is(.rk-tile, .rk-row) .badge { font-size: var(--vt-fs-floor); }
    /* Long names end in an ellipsis instead of being cut at the tile edge. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile .rk-name { width: 100%; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile :is(.username-span, .vtcname-span) {
        display: inline-block; max-width: 100%; vertical-align: middle;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* List rows up to 991px (the user column is too narrow for badges there too):
   no level badges or premium icons, small avatars, names end in an ellipsis. */
@media (max-width: 991.98px) {
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row :is(.badge, .username-image) { display: none; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row :is(.rk-cell-user, .rk-cell-vtc) > :first-child:not(:last-child) { zoom: 0.64; }
    .ranking-users .rk-row .rk-cell-vtc > :first-child:not(:last-child) { display: none; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row :is(.rk-cell-user, .rk-cell-vtc) > span:last-child { flex: 1 1 auto; min-width: 0; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row :is(.username-span, .vtcname-span) {
        display: inline-block; max-width: 100%; vertical-align: middle;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .vh-wrap:is(.ranking-users, .ranking-companies, .ranking-countries) { padding: 0.75rem; gap: 0.75rem; }

    /* The foot pager is enough on a phone. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-toolbar:not(.is-foot) .rk-pager { display: none; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-toolbar .sep { display: none; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-toolbar { padding: 0.5rem; gap: 0.45rem; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-toolbar.is-foot { justify-content: center; }
    /* The range menu opens leftwards from the chevron so it stays on screen. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-date .dropdown-menu { left: auto; right: 0; }

    /* List rows: smaller avatars, no level badges, names keep their room. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-list { padding: 0.25rem; gap: 0.25rem; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        padding: 0.5rem 0.6rem;
        column-gap: 0.5rem;
        font-size: 0.82rem;
    }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row .rk-cell-vtc { font-size: 0.78rem; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row :is(.rk-jobs-cell, .rk-members-cell) { font-size: 0.75rem; white-space: nowrap; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row .rk-amount-cell { white-space: nowrap; }

    /* Mobile-only labels for the bare numbers. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row .rk-m-label { display: inline; color: var(--ink-faint); }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-row .rk-m-icon { display: inline-block; color: var(--ink-faint); margin-right: 0.3rem; font-size: 0.72rem; }
}

@media (max-width: 575.98px) {
    /* Two tiles per row down to 360px, compact. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.4rem; gap: 0.4rem; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile { padding: 1.9rem 0.6rem 0.6rem; gap: 0.3rem; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile .rk-rank { top: 6px; left: 6px; }
    :is(.ranking-users, .ranking-companies) .rk-tile .rk-avatar > * { zoom: 0.5834; }
    .ranking-countries .rk-tile .rk-flag { width: 48px; }
    .ranking-countries .rk-tile .rk-flag-fallback { width: 48px; height: 32px; font-size: 1rem; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile .rk-name { font-size: 0.8rem; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile :is(.badge, .username-image) { display: none; }
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-tile .rk-amount { font-size: 0.88rem; white-space: nowrap; }

    /* Filters menu: label above its select. */
    :is(.ranking-users, .ranking-companies, .ranking-countries) .rk-filter-row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}