/* ==========================================================================
   xRank screen mode – the whole table on one screen: all 16 columns and all
   rows, no scrolling in either direction. Loaded on top of xrank-fit.css.
   ========================================================================== */

body.xr-screen-body {
    margin: 0;
    overflow-x: hidden;
    background: #f8f9fa;
}

/* One viewport exactly: the site header sits above it and scrolls away, after
   which the table has the whole screen. A gentle snap lands the reader on
   either the top of the page or the top of the table. */
html:has(.xr-screen-body) {
    scroll-snap-type: y proximity;
}

.xr-screen-body > site-header,
.xr-screen {
    scroll-snap-align: start;
}

.xr-screen {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: clamp(0.4rem, 0.2rem + 0.8vw, 1rem);
    gap: clamp(0.35rem, 0.2rem + 0.6vw, 0.75rem);
}

/* On a tall screen the rows are stretched anyway, so the crests and rank
   badges can go a size up for free. On a short one every pixel of row height
   costs text size, so they stay small. */
@media (min-height: 820px) {
    .xr-screen {
        --xr-logo: clamp(1.25rem, 0.9rem + 1.7vw, 1.75rem);
        --xr-badge: clamp(1.15rem, 0.85rem + 1.4vw, 1.65rem);
    }
}

/* --- title bar ----------------------------------------------------------- */

/* Title, legend, controls and links share one wrapping row, so the bar
   costs a single line of height on a wide screen. */
.xr-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1.25rem;
    flex: none;
}

.xr-bar .xr-bar-links { margin-left: auto; }

.xr-bar h1 {
    font-size: clamp(0.95rem, 0.75rem + 1vw, 1.4rem);
    margin: 0;
    text-align: left;
    color: var(--xr-text, #1f2a30);
}

.xr-bar-links {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: clamp(0.65rem, 0.6rem + 0.3vw, 0.8rem);
}

.xr-bar-links a {
    color: #15607a;
    text-decoration: none;
}

.xr-bar-links a:hover { text-decoration: underline; }

.xr-bar-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.xr-bar-controls select {
    padding: 0.3rem 0.5rem;
    font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.9rem);
    border: 1px solid #c9d2d8;
    border-radius: 0.35rem;
    background: #fff;
    color: inherit;
}

.xr-screen .xr-legend {
    margin: 0;
    justify-content: flex-start;
    gap: 0.35rem 0.9rem;
    flex: 0 1 auto;
}

.xr-screen .xr-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* This page has no body margin to pull the card out of. */
    margin-left: 0;
    margin-right: 0;
}

/* The fit box gets whatever height is left; the table is scaled onto it. */
.xr-screen .xr-fit {
    flex: 1;
    min-height: 0;
}

.xr-screen .xr-status { flex: none; }

/* The rows are stretched to fill whatever height is available, so their
   natural height can be tight: every pixel of padding or badge here is a
   pixel the fit pass would otherwise have to scale away when the site header
   leaves little room (a 22-team Eerste Divisie table on an 800px laptop). */
.xr-screen {
    --xr-badge: clamp(1rem, 0.8rem + 0.9vw, 1.3rem);
    --xr-logo: clamp(1.05rem, 0.8rem + 1.1vw, 1.35rem);
}

.xr-screen .xr-table td,
.xr-screen .xr-table tbody th {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.xr-screen .xr-group th { padding-top: 0.35rem; padding-bottom: 0.15rem; }
.xr-screen .xr-cols th { padding-top: 0.15rem; padding-bottom: 0.3rem; }