#splitsPage {
    width: 100%;
    margin: 0 auto;
    --splits-rank-col-width: 30px;
    /* The 150px the names had, plus the avatar in front of them and the gap
       after it - see .splitsName .entryProfileLink below - so the names keep
       the room they had before the avatars came in. */
    --splits-name-col-width: calc(150px + 1.55rem + 10px);
    --splits-stat-col-width: 90px;
    --splits-teams-scroll-end-space: 48px;
}

/* By the page's column, not the window (see #leagueDashboardMain): each is
   what the old window width left beside the sidebar. */
@container dashboard-main (min-width: 1500px)  { #splitsPage { width: 94%; } }
@container dashboard-main (min-width: 1700px) { #splitsPage { width: 88%; } }
@container dashboard-main (min-width: 1900px) { #splitsPage { width: 82%; } }
@container dashboard-main (min-width: 2100px) { #splitsPage { width: 76%; } }

.splitsControls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 5%;
    font-weight: var(--fw1);
}

.splitsTabBar {
    display: flex;
    gap: var(--g1);
}

/* Spreads, with the menu of bucket counts it opens: six ranges or four, the
   one in use ticked. The menu hangs under the button's left edge. */
.splitsSpreadMenuWrap {
    position: relative;
}

.splitsSpreadButton {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.splitsSpreadCaret {
    font-size: 0.85em;
    transition: transform 160ms ease;
}

.splitsSpreadButton[aria-expanded="true"] .splitsSpreadCaret {
    transform: rotate(180deg);
}

.splitsSpreadMenu {
    background: var(--c-s1);
    display: flex;
    flex-direction: column;
    
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1200;

    min-width: 100%;
    max-width: min(22rem, 80vw);
    max-height: 15.5em;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    list-style: none;
    background: var(--c-s1);
    border: 1px solid var(--c1-a3);
    border-radius: var(--r2);
    box-shadow: 0 10px 30px -12px rgba(23, 33, 54, 0.45), 0 2px 6px -2px rgba(23, 33, 54, 0.18);

    font-family: var(--ff1);
    font-size: var(--fs-small1);
    color: var(--c1);
    text-align: center;

    /* Scrollbar is hidden; scrollable edges are shown via fade overlays that
       sit inside the border (see ::before / ::after), so the border, shadow
       and rounded corners always stay fully visible. */
    --selectMenuFade: 28px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.splitsSpreadMenu[hidden] {
    display: none;
}

.splitsSpreadOption {
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--c1);
    cursor: pointer;
    display: flex;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    gap: 16px;
    justify-content: space-between;
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    overflow: clip;
}

.splitsSpreadOption:hover,
.splitsSpreadOption:focus-visible {
    background: var(--c1-a1);
    outline: none;
}

.splitsSpreadOptionCheck {
    color: var(--c2);
    visibility: hidden;
}

.splitsSpreadOption[aria-checked="true"] {
    font-weight: var(--fw2);
    background: var(--c1-a2);
}

.splitsSpreadOption[aria-checked="true"] .splitsSpreadOptionCheck {
    visibility: visible;
}

.displayOptionsGroup {
    display: flex;
    align-items: center;
    gap: var(--g1);
    flex-wrap: wrap;
}

.displayOptionsGroup label {
    margin-right: 0;
}

/* --- Filters -------------------------------------------------------------
   One labelled menu per dimension, under the tabs and in line with them. Each
   narrows which picks every table counts - see "Splits" in
   splits_helpers.php. */
.splitsFilterBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 14px;
    padding: 0 5%;
}

.splitsFilterBar[hidden],
.splitsFilterSummary[hidden],
.splitsPivot[hidden],
.splitsPivotEmpty[hidden] {
    display: none;
}

.splitsFilter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The small spaced capitals the table headers use. */
.splitsFilterLabel {
    color: #79849a;
    font-family: var(--ff1);
    font-size: var(--fs-small2);
    font-weight: 600;
    letter-spacing: var(--ls3);
    text-transform: uppercase;
}

.splitsFilter .selectMenuField {
    min-width: 7.5rem;
}

/* What is filtered, in words, between the menus and the numbers they change. */
.splitsFilterSummary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 14px;
    padding: 0 5%;
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
}

.splitsFilterSummaryLabel {
    font-weight: var(--fw2);
}

/* The pick count Percentages puts after each figure, so a .750 on four
   picks reads differently from a .750 on forty. */
.splitsStatCount {
    color: #79849a;
    font-size: 0.78em;
    margin-left: 3px;
}

/* An entry's name opens its grid. A bare button, so the name looks as it did
   and still ends in an ellipsis when it is long. */
.splitsEntryButton {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
}

.splitsEntryButton:hover .entryProfileName,
.splitsEntryButton:focus-visible .entryProfileName {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- One entry's grid -------------------------------------------------------
   A dimension down the side, another across the top, totals on the right and
   along the bottom. Sized to its content and centred, as wide as the columns
   it has rather than the page. */
.splitsPivot {
    margin-bottom: 24px;
}

.splitsPivotHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 14px;
    padding: 0 5%;
}

.splitsPivotBack {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.splitsPivotTitle {
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-body);
    font-weight: var(--fw3);
}

.splitsPivotAxes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.splitsPivotAxes .selectMenuField {
    min-width: 8rem;
}

.splitsTable.splitsPivotTable {
    margin: 0 auto;
    min-width: 0;
    table-layout: auto;
    width: auto;
}

.splitsPivotTable .splitsPivotCorner,
.splitsPivotTable .splitsPivotRowHead {
    padding: 4px 18px 4px 4px;
    text-align: left;
    white-space: nowrap;
}

.splitsPivotTable tbody .splitsPivotRowHead {
    box-shadow: none;
    color: var(--splits-ink-1);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* The totals: a rule before the right-hand column and above the bottom row. */
.splitsPivotTable thead th.splitsPivotTotal,
.splitsPivotTable tbody td.splitsPivotTotal {
    box-shadow: inset 1px 0 0 rgba(23, 33, 54, .22);
    font-weight: var(--fw2);
}

.splitsPivotTable thead th.splitsPivotTotal {
    box-shadow: inset 1px 0 0 rgba(23, 33, 54, .22), inset 0 -1px 0 rgba(23, 33, 54, .22);
}

/* Along the bottom row only the last cell - the grand total - keeps the
   right-hand column's rule. */
.splitsPivotTable tbody tr.splitsPivotTotal > td.splitsPivotTotal:not(:last-child) {
    box-shadow: none;
}

.splitsPivotTable tbody tr.splitsPivotTotal > * {
    border-top: 1px solid rgba(23, 33, 54, .22);
    font-weight: var(--fw2);
}

.splitsPivotEmpty {
    color: #79849a;
    font-family: var(--ff1);
    text-align: center;
}

.splitsTableWrap {
    text-align: center;
}

.splitsTableWrap--hidden {
    display: none;
}

.splitsScrollOuter {
    width: 90%;
    margin: 0 auto;
}

.splitsTableScrollOuter {
    position: relative;
}

.splitsScrollInner {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.splitsScrollInner::-webkit-scrollbar {
    display: none;
}

.splitsTable {
    width: 100%;
    min-width: var(--splits-table-min-width, 100%);
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--ff1);
    font-size: var(--fs-body);
}

.splitsTable thead tr {
    border-bottom: 0;
}

.splitsTable th {
    border-bottom: 0;
    /* The rule under the header, drawn as a shadow rather than a border so it
       stays with the frozen header cells as the table scrolls sideways; the
       standings' light rule rather than the near-black one it was. */
    box-shadow: inset 0 -1px 0 rgba(23, 33, 54, .22);
    text-align: center;
    font-size: var(--fs-body);
}

.splitsTable td {
    padding: 4px;
}

/* The second row and every other one after: the empty row that used to sit
   under the header is gone, as it went from the standings, so the stripe is
   counted from the first real row. */
.splitsTable tbody tr:nth-child(even) {
    background-color: var(--c-s3, #f5f7fa);
}

.splitsTable tbody tr:hover {
    background-color: var(--c-s4);
}

.splitsRankCol {
    width: var(--splits-rank-col-width);
    min-width: var(--splits-rank-col-width);
    max-width: var(--splits-rank-col-width);
    box-sizing: border-box;
}

.splitsNameCol {
    width: var(--splits-name-col-width);
    min-width: var(--splits-name-col-width);
    max-width: var(--splits-name-col-width);
    box-sizing: border-box;
    text-align: left !important;
}

.splitsStatCol {
    width: var(--splits-stat-col-width);
    min-width: var(--splits-stat-col-width);
    max-width: var(--splits-stat-col-width);
    box-sizing: border-box;
    text-align: center;
}

.splitsStatCol--division {
    font-size: var(--fs-body);
}

.splitsRank {
    width: var(--splits-rank-col-width);
    min-width: var(--splits-rank-col-width);
    max-width: var(--splits-rank-col-width);
    box-sizing: border-box;
    text-align: center;
}

.splitsName {
    width: var(--splits-name-col-width);
    min-width: var(--splits-name-col-width);
    max-width: var(--splits-name-col-width);
    box-sizing: border-box;
    text-align: left;
    /* Visible, so the username tooltip over the avatar is not cut off by the
       cell. A long name still ends in an ellipsis: .entryProfileName clips
       itself, and .entryProfileContent holds it to the cell's width. */
    overflow: visible;
    white-space: nowrap;
}

/* The avatar before each name, as the standings table draws it: the same size
   and the same gap on either side of it. */
.splitsName .entryProfileLink {
    --size: 1.55rem;
}

.splitsName .entryProfileContent {
    gap: 10px;
}

/* The hovered name rises over the frozen columns and the frozen header, so the
   tooltip above its avatar is not drawn underneath them. */
.splitsDataTable tbody .splitsName:has(.entryProfileLink:hover),
.splitsDataTable tbody .splitsName:has(.entryProfileLink:focus-visible) {
    z-index: 4;
}

.splitsStat {
    width: var(--splits-stat-col-width);
    min-width: var(--splits-stat-col-width);
    max-width: var(--splits-stat-col-width);
    box-sizing: border-box;
    text-align: center;
    font-size: var(--fs-body);
    white-space: nowrap;
}

/* --- The standings table's conventions -------------------------------------
   These tables read the way the standings table does (see the typography
   section of standings.css), so the site's tables look like one family:

     ink-1  entry names and the records - every column here is one to compare
     ink-3  everything else - the rank, the headers, and a record with no games

   Headers in small letter-spaced capitals over a light rule, a lighter rule
   closing the table, records right-aligned in tabular figures with their
   headers following them, and the viewer's own rows marked with the navy line
   (below) and the name a step heavier. */
.splitsDataTable {
    --splits-ink-1: #172136;
    --splits-ink-3: #79849a;
    font-variant-numeric: tabular-nums;
}

.splitsDataTable thead th {
    color: var(--splits-ink-3);
    font-size: var(--fs-small2);
    font-weight: 600;
    letter-spacing: var(--ls3);    padding-bottom: 4px;
    padding-top: 4px;
    text-transform: uppercase;
}

.splitsDataTable thead th.splitsStatCol {
    padding-right: 10px;
    text-align: right;
}

.splitsDataTable tbody td {
    color: var(--splits-ink-3);
    font-weight: 400;
}

.splitsDataTable tbody td.splitsName {
    color: var(--splits-ink-1);
    font-weight: 500;
}

/* Ranks end at a common edge, as the standings' do, 4px short of the name
   column. */
.splitsDataTable thead th.splitsRankCol,
.splitsDataTable tbody td.splitsRank {
    padding-right: 4px;
    text-align: right;
}

.splitsDataTable tbody td.splitsStat {
    color: var(--splits-ink-1);
    padding-right: 10px;
    text-align: right;
}

/* A record with no games behind it prints as a dash - the absence of a
   result, not a result - so it takes the quieter ink. The total is written on
   the cell, so this holds whichever display mode is showing. */
.splitsDataTable tbody td.splitsStat[data-splits-total="0"] {
    color: var(--splits-ink-3);
}

/* A vertical rule before the first column of a new group - on the Side type
   table, between the four single splits and the four side-and-line pairs. Drawn
   as an inset shadow, as the rule under the header is, so it moves with the
   cell; the header cell keeps that rule alongside it. */
.splitsDataTable thead th.splitsStatCol--groupStart {
    box-shadow: inset 1px 0 0 rgba(23, 33, 54, .22), inset 0 -1px 0 rgba(23, 33, 54, .22);
}

.splitsDataTable tbody td.splitsStat--groupStart {
    box-shadow: inset 1px 0 0 rgba(23, 33, 54, .22);
}

.splitsDataTable tbody tr:last-child > td {
    border-bottom: 1px solid rgba(23, 33, 54, .12);
}

/* Only the name is heavier in the viewer's own rows, and by the standings'
   step; the rank and the figures keep the weight every other row has. */
.splitsDataTable tbody tr.splitsEntry--owned > td.splitsName {
    font-weight: 600;
}

/* A navy line down the left edge of each of the viewer's own rows, as in the
   standings and on the Board. The rank cell is sticky, which already makes it
   the strip's containing block, so the line stays put with the frozen columns
   as the table scrolls sideways. */
.splitsDataTable tbody tr.splitsEntry--owned > td:first-child::before {
    background: var(--c1);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 3px;
}

.splitsFillerCol,
.splitsFiller {
    width: auto;
    min-width: 0;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

.splitsStatCol--team {
    width: var(--splits-stat-col-width);
    min-width: var(--splits-stat-col-width);
    max-width: var(--splits-stat-col-width);
}

.splitsStat--team {
    width: var(--splits-stat-col-width);
    min-width: var(--splits-stat-col-width);
    max-width: var(--splits-stat-col-width);
}

.splitsTable--teams {
    min-width: calc(var(--splits-table-min-width, 100%) + var(--splits-teams-scroll-end-space));
}

.splitsTable--teams .splitsFillerCol,
.splitsTable--teams .splitsFiller {
    width: var(--splits-teams-scroll-end-space);
    min-width: var(--splits-teams-scroll-end-space);
    max-width: var(--splits-teams-scroll-end-space);
}

.splitsDataTable .splitsRankCol,
.splitsDataTable .splitsRank,
.splitsDataTable .splitsNameCol,
.splitsDataTable .splitsName,
.splitsCol--sticky {
    position: sticky;
    z-index: 2;
}

.splitsDataTable .splitsRankCol,
.splitsDataTable .splitsRank,
.splitsCol--rank {
    left: 0;
}

.splitsDataTable .splitsNameCol,
.splitsDataTable .splitsName,
.splitsCol--name {
    left: var(--splits-rank-col-width);
}

.splitsDataTable thead .splitsRankCol,
.splitsDataTable thead .splitsNameCol {
    background: var(--c-page-background, #fff);
    z-index: 3;
}

.splitsDataTable tbody .splitsRank,
.splitsDataTable tbody .splitsName {
    background: var(--c-page-background, #fff);
}

.splitsDataTable tbody tr:nth-child(even) .splitsRank,
.splitsDataTable tbody tr:nth-child(even) .splitsName {
    background-color: var(--c-s3, #f5f7fa);
}

.splitsDataTable tbody tr:hover .splitsRank,
.splitsDataTable tbody tr:hover .splitsName {
    background-color: var(--c-s4);
}

.splitsTableArrows {
    display: none;
    position: absolute;
    top: 3px;
    right: 0;
    z-index: 4;
    padding-left: 8px;
    background: var(--c-page-background, #fff);
    white-space: nowrap;
}

.splitsScrollOuter--can-scroll .splitsTableArrows {
    display: block;
}

.splitsScrollArrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid var(--c-border-dark, #999);
    background: var(--c-s1);
    cursor: pointer;
    font-size: var(--fs-small1);
    color: #333;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.splitsScrollArrow--left {
    border-right: none;
    border-radius: 3px 0 0 3px;
}

.splitsScrollArrow--right {
    border-radius: 0 3px 3px 0;
}

.splitsScrollArrow:hover {
    background: var(--c-s3);
}

/* The rankings graph's scroll buttons, and the Teams table's, which is the same
   control in both places: filled rather than outlined, so it reads against the
   busiest things on the page - a graph drawn over gridlines, and a table wide
   enough to need scrolling in the first place.

   The hover is a lift within the same colour rather than the light --c-s3 the
   outlined buttons use, which on a filled button would invert it. */
.splitsGraphArrows .splitsScrollArrow,
.splitsTableArrows--filled .splitsScrollArrow {
    background: var(--c1);
    border-color: var(--c1);
    color: var(--c-s1);
}

.splitsGraphArrows .splitsScrollArrow:hover,
.splitsTableArrows--filled .splitsScrollArrow:hover {
    background: var(--c1-a6);
    border-color: var(--c1-a6);
}

/* Rankings graph */
.splitsGraphOuter {
    display: flex;
    padding: 0 5%;
}

#splitsSpacerRow{
    height: 12px;   
}

/* The week numbers across the top of the rankings graph. These were presentation
   attributes on the <text> element in splits.php - font-size="10",
   font-family="var(--ff1)" and fill="#666" - which rendered correctly, custom
   property and all, since a presentation attribute is parsed as a CSS value.
   They are here for the ordinary reason: the graph's type and colour are worth
   finding in the stylesheet with everything else that styles this page, and a
   presentation attribute loses to any rule, so it was also the one piece of the
   page no stylesheet could reach without being written to override it.

   Geometry stays in the markup, where it is computed: x is worked out per column
   in PHP, and y and text-anchor place the label against it. */
.splitsGraphSvg text{
    fill: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-body);
}

/* Sized to the longest entry name in the league rather than to the longest one
   the site allows. It used to be a flat 150px written inline in splits.php,
   which is about what twenty-four characters need - so a league of short names
   carried a stretch of empty column and pushed the graph over for no reason.

   max-content measures the widest label; the cap is there for the rare name that
   runs the full twenty-four characters, and the labels keep their ellipsis for
   that case. */
.splitsGraphNames {
    flex-shrink: 0;
    max-width: 220px;
    overflow: hidden;
    width: max-content;
}

.splitsGraphNamesHeader {
    box-sizing: border-box;
}

.splitsGraphNameLabel {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    text-align: right;
    padding-right: 10px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.splitsGraphNameLabel.splitsEntry--owned {
    font-weight: var(--fw3);
}

.splitsGraphNameLabel:hover {
    text-decoration: underline;
}

.splitsGraphScrollOuter {
    flex: 1;
    min-width: 0;
    position: relative;
    margin: 0;
    width: auto;
}

.splitsGraphScrollInner {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.splitsGraphScrollInner::-webkit-scrollbar {
    display: none;
}

.splitsGraphSvg {
    display: block;
}

/* Same offset as .splitsTableArrows above, so the buttons sit at one height
   whichever panel a reader is on - they are the same control now, and a pixel of
   drift between two tabs is visible when switching between them. */
.splitsGraphArrows {
    position: absolute;
    top: 3px;
    right: 0;
    z-index: 2;
}