/* ==========================================================================
   xRank – "always all 16 columns, never a horizontal scrollbar"
   Sizing is fluid all the way down; a JS fit pass scales the table if the
   content still does not fit. Shared by xrank-fit.html and xrank-screen.html.
   ========================================================================== */

.xr-page {
    --xr-font: clamp(0.625rem, 0.3rem + 1.6vw, 0.8125rem);
    --xr-font-head: clamp(0.5rem, 0.3rem + 1vw, 0.6875rem);
    --xr-cell-x: clamp(0.125rem, -0.15rem + 0.85vw, 0.5rem);
    --xr-cell-y: clamp(0.25rem, 0.1rem + 0.7vw, 0.6rem);
    --xr-badge: clamp(1.05rem, 0.8rem + 1.2vw, 1.5rem);
    --xr-logo: clamp(1.15rem, 0.8rem + 1.6vw, 1.5rem);
    --xr-team-gap: clamp(0.25rem, 0.1rem + 0.6vw, 0.55rem);

    --xr-line: #e4e8ec;
    --xr-line-strong: #c9d2d8;
    --xr-text: #1f2a30;
    --xr-muted: #6b7a83;
    --xr-accent: #15607a;
    --xr-row: #ffffff;
    --xr-row-alt: #f7f9fa;
    --xr-row-hover: #e8f1f5;
    --xr-up: #157f45;
    --xr-down: #c62828;
    --xr-even: #5b6b75;

    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(0.5rem, 0.25rem + 1.2vw, 1.5rem);
    color: var(--xr-text);
}

.xr-page h1 {
    font-size: clamp(1.15rem, 0.9rem + 1.6vw, 1.75rem);
    text-align: center;
    margin-bottom: 0.4rem;
}

.xr-intro {
    text-align: center;
    color: var(--xr-muted);
    font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.95rem);
    line-height: 1.5;
    max-width: 46rem;
    margin: 0 auto 1rem;
}

.xr-hint {
    font-size: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
    color: var(--xr-muted);
    margin-bottom: 0.5rem;
    text-align: center;
}

/* --- shell ---------------------------------------------------------------
   On phones the card goes edge to edge: the 20px body margin is worth four
   extra pixels per column.
   ----------------------------------------------------------------------- */

.xr-card {
    background: #fff;
    border: 1px solid var(--xr-line);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(16, 32, 40, 0.08);
    overflow: hidden;
}

@media (max-width: 600px) {
    .xr-page { padding-left: 0; padding-right: 0; }

    .xr-page > :not(.xr-card) { padding-left: 0.5rem; padding-right: 0.5rem; }

    .xr-card {
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* The fit box never scrolls: whatever does not fit gets scaled down. */
.xr-fit {
    overflow: hidden;
}

.xr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--xr-font);
    font-variant-numeric: tabular-nums;
    transform-origin: top left;
}

/* --- header ------------------------------------------------------------- */

.xr-table th {
    background: #fff;
    font-weight: 600;
    color: var(--xr-muted);
    font-size: var(--xr-font-head);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: var(--xr-cell-y) var(--xr-cell-x);
    text-align: center;
    white-space: nowrap;
}

.xr-group th {
    padding-top: 0.5rem;
    padding-bottom: 0.2rem;
    color: var(--xr-accent);
    letter-spacing: 0.06em;
}

.xr-group .xr-group-expected { color: var(--xr-muted); }

.xr-cols th {
    border-bottom: 2px solid var(--xr-line-strong);
    padding-top: 0.2rem;
}

.xr-sort {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 0.2rem;
}

.xr-sort:hover { color: var(--xr-accent); }

.xr-sort:focus-visible {
    outline: 2px solid var(--xr-accent);
    outline-offset: 1px;
}

.xr-sort::after {
    content: "↕";
    font-size: 0.85em;
    opacity: 0.3;
}

th[aria-sort="ascending"] .xr-sort::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .xr-sort::after { content: "↓"; opacity: 1; }
th[aria-sort] .xr-sort { color: var(--xr-accent); }

.xr-table abbr {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* Sort arrows cost ~10px per column; below 700px that budget goes to the
   numbers instead and only the active column keeps its arrow. */
@media (max-width: 699.98px) {
    .xr-sort::after { display: none; }

    /* Dotted underlines turn to noise at this density. */
    .xr-table abbr { border-bottom: none; }

    th[aria-sort="ascending"] .xr-sort::after,
    th[aria-sort="descending"] .xr-sort::after { display: inline; }
}

.xr-label-short { display: none; }

/* --- body --------------------------------------------------------------- */

.xr-table td,
.xr-table tbody th {
    padding: var(--xr-cell-y) var(--xr-cell-x);
    text-align: center;
    border-bottom: 1px solid var(--xr-line);
    background: var(--xr-row);
    white-space: nowrap;
}

.xr-table tbody th {
    color: var(--xr-text);
    font-size: var(--xr-font);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.xr-table tbody tr:nth-child(even) > * { background: var(--xr-row-alt); }
.xr-table tbody tr:hover > * { background: var(--xr-row-hover); }
.xr-table tbody tr:last-child > * { border-bottom: none; }
.xr-table tbody tr { cursor: pointer; }
.xr-table tbody tr.xr-row--static { cursor: default; }

.xr-c-rank,
.xr-c-team { width: 1%; }

.xr-table .xr-c-team { text-align: left; }

.xr-c-stat { width: 1%; }

.xr-k-xgf { border-left: 2px solid var(--xr-line-strong); }

.xr-team-link {
    display: flex;
    align-items: center;
    gap: var(--xr-team-gap);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    min-width: 0;
}

.xr-team-link:focus-visible {
    outline: 2px solid var(--xr-accent);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

.xr-logo {
    width: var(--xr-logo);
    height: var(--xr-logo);
    object-fit: contain;
    flex: none;
}

/* Stand-in when a club has no logo file, so the column is never empty. */
.xr-monogram {
    width: var(--xr-logo);
    height: var(--xr-logo);
    border-radius: 50%;
    background: var(--xr-accent);
    color: #fff;
    font-size: 0.6em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* --- rank badges, deltas ------------------------------------------------- */

.xr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--xr-badge);
    height: var(--xr-badge);
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.8em;
}

.xr-badge--up { background: var(--xr-up); }
.xr-badge--down { background: var(--xr-down); }
.xr-badge--even { background: var(--xr-even); }

.xr-delta { font-weight: 600; }
.xr-delta--up { color: var(--xr-up); }
.xr-delta--down { color: var(--xr-down); }
.xr-delta--even { color: var(--xr-muted); }

.xr-expected { color: #3c4a52; }
.xr-strong { font-weight: 700; }
.xr-pos { color: var(--xr-up); }
.xr-neg { color: var(--xr-down); }

/* --- narrow screens: the crest is the team name -------------------------- */

@media (max-width: 559.98px) {
    /* Kept in the accessibility tree, just not painted. */
    .xr-team-name,
    .xr-label-hide {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .xr-label-full { display: none; }
    .xr-label-short { display: inline; }
}

/* --- states -------------------------------------------------------------- */

.xr-status {
    padding: 1.25rem;
    text-align: center;
    color: var(--xr-muted);
    font-size: 0.85rem;
}

.xr-status--error { color: var(--xr-down); }

.xr-skeleton td span {
    display: block;
    height: 0.7rem;
    border-radius: 0.35rem;
    background: linear-gradient(90deg, #eef1f3 25%, #e2e7ea 37%, #eef1f3 63%);
    background-size: 400% 100%;
    animation: xr-shimmer 1.2s ease-in-out infinite;
}

@keyframes xr-shimmer {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .xr-skeleton td span { animation: none; }
}

.xr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    justify-content: center;
    margin: 0.85rem 0 1.25rem;
    font-size: clamp(0.65rem, 0.6rem + 0.25vw, 0.78rem);
    color: var(--xr-muted);
}

.xr-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.xr-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex: none;
}

.xr-dot--up { background: var(--xr-up); }
.xr-dot--down { background: var(--xr-down); }
.xr-dot--even { background: var(--xr-even); }

.xr-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.xr-cta a {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: var(--xr-accent);
    color: #fff;
    border-radius: 0.4rem;
    text-decoration: none;
    font-size: 0.9rem;
}

.xr-cta a:hover { background: #0f4559; }

.xr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}