input[type='radio']{
    display: none;
}

/* Spans the dashboard so the percentage widths inside it resolve against the
   dashboard rather than against the table's own content width. */
.trackingTableFrame{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Below the button row now, so the gap goes above it rather than beneath. */
.weekTrackerSearchBar{
    align-items: center;
    display: flex;
    gap: 12px;
    margin: 10px 0 0;
    width: 100%;
}

.weekTrackerSearchBar .tableSearchInput{
    flex: 0 0 auto;
    min-width: 0;
}

.weekTrackerAvatarSizeRow{
    --avatar-off-glyph-scale: .75;
    --avatar-small-glyph-scale: .6;
    flex: 0 0 auto;
}

/* The glyph's own box sets the button's size, and that size is right, so the
   glyph is shrunk with a transform, which draws it smaller without taking any
   space back from the layout. Tune --avatar-off-glyph-scale above; 1 is the
   glyph at full size.

   Every glyph scales from the bottom edge of its box rather than its centre,
   so all three keep the same baseline whatever their scale; scaled from the
   centre, each smaller glyph would lift off the line by half of what it lost. */
.weekTrackerAvatarSizeRow .segment i{
    transform-origin: 50% 100%;
}

.weekTrackerAvatarSizeRow .segment[data-avatar-size="off"] i{
    transform: scale(var(--avatar-off-glyph-scale));
}

.weekTrackerAvatarSizeRow .segment[data-avatar-size="small"] i{
    transform: scale(var(--avatar-small-glyph-scale));
}

/* The three states. Large is the size the avatars have always been, so it sets
   nothing and lets main.css stand.

   Small is 1.25rem because that is the height of the entry name's own line box:
   anything at or below it leaves the row as short as the text alone makes it,
   which is the whole point of the setting, and this is the largest avatar that
   still reads as a deliberate step down from Large. Switched off, the avatar
   goes rather than shrinking further - by then the row is already as short as
   it goes, so what off buys is the width back. */
#weekTrackerPage[data-avatar-size="small"] #trackingTable .entryProfileLink{
    --size: 1.25rem;
}

#weekTrackerPage[data-avatar-size="off"] #trackingTable .entryProfileLink{
    display: none;
}

/* With the avatar gone the name carries its tooltip: site.js moves the one
   tooltip element into .entryProfileContent, which starts at the column's left
   edge as the avatar did, so the tooltip is shown and placed by the same rules
   as when the avatar is there - see the Board and Standings tooltip rules in
   main.css. */

/* Sits in the right-hand tool group, just before Clear highlights, so the group
   itself handles the right alignment — no auto margin needed. */
.weekTrackerDistributionButton{
    flex: 0 0 auto;
}

.weekTrackerDistributionButton:disabled{
    cursor: default;
}



.weekTrackerDistributionBackdrop{
    align-items: center;
    background: rgba(0, 0, 0, .32);
    box-sizing: border-box;
    display: none;
    inset: 0;
    justify-content: center;
    padding: 16px;
    position: fixed;
    z-index: 310;
}

#leagueBody .weekTrackerDistributionBackdrop{
    border-radius: 0;
    bottom: var(--db-edge-gap);
    left: var(--db-content-left);
    overflow: hidden;
    right: var(--db-overlay-right);
    top: var(--db-overlay-top);
}

.weekTrackerDistributionBackdrop.is-visible{
    display: flex;
}

/* Wide rather than tall on purpose. Every team playing in the week gets a line,
   which is up to thirty-two of them, and a single column of that many needs a
   scrollbar on any laptop. Laid out in columns the same list is eight rows deep
   and the whole week is readable at once, which is the point of the panel. */
.weekTrackerDistributionModal{
    background: var(--c-s1);
    border: 1px solid var(--c1);
    border-radius: var(--r3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
    box-sizing: border-box;
    color: #333;
    display: flex;
    flex-direction: column;
    max-height: min(680px, calc(100vh - 80px));
    max-width: 100%;
    min-height: 0;
    padding: 20px;
}

/* The shared modal header does not state a flex basis of its own, and inside
   this column it sits above a grid that is free to grow. Pinning it keeps the
   title at full height when the week is a long one. */
.weekTrackerDistributionModal .modalHeader{
    flex: 0 0 auto;
}

/* The league's entry count, under the title: the total every share in the
   grid is a share of. */
.weekTrackerDistributionEntries{
    color: var(--c-text-muted);
    flex: 0 0 auto;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    margin: -4px 0 10px;
    text-align: left;
}

/* The teams read down a column before moving across, the way a printed standings
   sheet does, so the grid is given its row count - written on the element as
   --dist-rows, since it depends on how many teams are playing - and fills by
   column. The scroll below is for the narrow fallback only; at the width the
   panel is built for the whole week is on screen at once. */
.weekTrackerDistributionGrid{
    align-content: start;
    box-sizing: border-box;
    display: grid;
    flex: 1 1 auto;
    gap: 0 48px;
    grid-auto-columns: min-content;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--dist-rows, 16), auto);
    min-height: 0;
    /* Not scrolled at this width - the whole week fits. The narrow fallback
       below turns the scroll on. */
    overflow: visible;
    
}

.weekTrackerDistributionCard{
    /* The row is only as tall as its contents and centred in the card's
       minimum height. Left to stretch, it fills the card, and the code, share,
       and count, which sit on a shared baseline rather than centred, ride at
       its top edge above the logo. */
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: grid;
    /* Logo, code, share, and the pick count after it. The code's column fits
       WSH, the widest code, with room to spare, and the count's column is fixed,
       so the shares line up down each column whatever the counts beside them. */
    grid-template-columns: 30px 42px 44px 36px;
    min-height: 32px;
    cursor: default !important;
}

/* The rule above walks the DOM, which knows nothing of where the grid broke the
   list into columns, so the card opening each column would carry a border along
   the top of that column. The class is written server-side in week-tracker.php,
   where the row count the grid fills to is already known - :nth-child cannot be
   used for it, because that row count moves with the number of teams playing.

   Only while the grid fills by column. Below the breakpoint it fills by row
   again, every card starts its own row, and the marked ones are nothing
   special - blanking their border there would cut holes in the list. */
@media (min-width: 701px){
    /* Both classes named so this matches the two-class selector above. On one
       class alone it is the weaker rule and the border stays put, whatever the
       source order. */
    .weekTrackerDistributionCard.weekTrackerDistributionCard--columnStart{
        border-top: 0;
    }
}

/* A team nobody took still belongs on the board - it is a real and useful zero -
   but it should not compete with the teams that were picked. The whole card
   fades together, the code's result pill included, so every part of it keeps
   the same strength. */
.weekTrackerDistributionCard--empty .weekTrackerDistributionLogo,
.weekTrackerDistributionCard--empty .weekTrackerDistributionTeam,
.weekTrackerDistributionCard--empty .weekTrackerDistributionPercent,
.weekTrackerDistributionCard--empty .weekTrackerDistributionCount{
    opacity: .45;
}

/* How the week turned out, once it has, carried by the team code as the board
   table shows a pick: the result's fill behind the code and its ink on it. Only
   a finished game colours its cards - a game still to come or one in progress
   leaves the class off in week-tracker.php, so the code stays plain rather than
   claiming a result the scoreboard has not given yet. A push colours both of
   its teams: neither beat the line and neither missed it. */
.weekTrackerDistributionCard--covered .weekTrackerDistributionTeam{
    background-color: var(--c-win);
    color: var(--c-win-text);
}

.weekTrackerDistributionCard--missed .weekTrackerDistributionTeam{
    background-color: var(--c-loss);
    color: var(--c-loss-text);
}

.weekTrackerDistributionCard--pushed .weekTrackerDistributionTeam{
    background-color: var(--c-push);
    color: var(--c-push-text);
}

/* A fixed box for art that is not uniformly shaped: the marks are wider than
   they are tall and vary between teams, so the box is sized to the widest and
   each logo is contained inside it. Without that the codes would step left and
   right down the column with every change of logo. */
.weekTrackerDistributionLogo{
    display: block;
    height: 20px;
    object-fit: contain;
    width: 26px;
}

.weekTrackerDistributionLogo--blank{
    visibility: hidden;
}

.weekTrackerDistributionTeam,
.weekTrackerDistributionPercent{
    font-family: var(--ff1);
    line-height: 1.2;
}

.weekTrackerDistributionTeam{
    /* A pill the width of its column, rounded as the board's picks are, so
       every code's result fill is the same size. */
    border-radius: var(--r2);
    box-sizing: border-box;
    color: var(--c1);
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
    letter-spacing: var(--ls1);
    min-width: 0;
    overflow: hidden;
    padding: 2px 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
}

.weekTrackerDistributionPercent{
    color: var(--c1);
    font-family: var(--ff2);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* The code, the share, and the count sit on one baseline; only the logo is
   centred. The three are set in different sizes, so centring them leaves each
   at its own height. */
.weekTrackerDistributionTeam,
.weekTrackerDistributionPercent,
.weekTrackerDistributionCount{
    align-self: baseline;
}

.weekTrackerDistributionCount{
    color: var(--c-text-muted);
    font-family: var(--ff2);
    font-size: var(--fs-small1);
    font-variant-numeric: tabular-nums;
    padding-left: 10px;
    text-align: left;
}

.weekTrackerDistributionEmpty{
    color: var(--c-text-muted);
    font-family: var(--ff1);
    font-size: var(--fs-body);
    padding: 24px 0;
    text-align: center;
}

/* Four columns stop being readable long before the panel reaches phone width,
   and the column fill has no way to reflow on its own - the row count is fixed.
   Below this the list goes back to filling by row, as many columns as fit. */
@media (max-width: 700px){
    .weekTrackerDistributionGrid{
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        grid-template-rows: none;
        /* Two columns of a full week genuinely will not fit here, so the panel
           scrolls. */
        overflow-y: auto;
    }
}

#trackingOptionsBar{
    width: 100%;
    margin: 0 auto;
}

.trackingOptionsToolRow{
    display: flex;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: var(--fw1);
}

/* The first row is the first thing on the page - the week row, or where a
   league has none, the row under it - and the space above it is the hero's gap
   alone (see .pageHero in dashboard.css). */
#trackingOptionsBar > .trackingOptionsToolRow:first-child{
    margin-top: 0;
}

/* Pick 5 sizes both control rows to the table below them. The table's width is
   a pixel total computed in week-tracker.php ($trackingPick5TableWidth), which
   that page publishes on #weekTrackerPage as --tracking-table-width, so the rows
   follow it automatically as the column counts change. */
.weekTrackerPage--pick5 .weekTrackerSearchBar,
.weekTrackerPage--pick5 .trackingOptionsToolRow{
    width: var(--tracking-table-width);
    margin-left: auto;
    margin-right: auto;
}

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

.trackingToolGroup--left{
    flex: 1;
    justify-content: flex-start;
}

.trackingToolGroup--center{
    flex: 0 0 auto;
}

.trackingToolGroup--right{
    flex: 1;
    justify-content: flex-end;
}

/* ---------- Week win odds ---------- */

/* Sits in the table's own header cell above the entry names, left of the Reset
   button and the game headers. Label stacked over the value, both centred in the
   cell; the cell is otherwise empty and spans both header rows. */
/* Fills the header cell so its two lines can be aligned independently: the
   label against the top left corner, the value centred on the cell beneath it.
   Stretching the children is what lets one go left and the other centre - with
   align-items:center both would shrink to their own text and centre together. */
/* Stretched over the header cell rather than sized by its own content, so the
   value can be centred against the cell itself. height:100% will not do it: a
   percentage height has nothing definite to resolve against inside a table
   cell. The label is taken out of flow below, which leaves the value as the
   only thing this centres. */
/* The label and the number side by side, the pair centred in the cell. */
.weekOddsTracker{
    align-items: center;
    column-gap: .6em;
    display: flex;
    flex-direction: row;
    font-family: var(--ff1);
    inset: 0;
    justify-content: center;
    line-height: 1.1;
    position: absolute;
    /* Laid over the whole cell, but only for placing its lines: the pointer
       goes through it, and only the number and its open breakdown answer (see
       below). Otherwise pointing anywhere in the cell opened the breakdown.
       :hover still reaches this element from the number inside it, so the
       rules that show the breakdown are unchanged. */
    pointer-events: none;
}

.weekOddsValue,
.weekOddsBreakdown{
    pointer-events: auto;
}

.weekOddsTracker[hidden]{
    display: none;
}

/* To the left of the number, wrapped: held to about half its one-line width,
   which with balanced wrapping sets it on two even lines, and narrower still -
   never below its longest word - if the cell needs the room. Its lines end
   against the number. */
.weekOddsLabel{
    flex: 0 1 auto;
    line-height: 1.2;
    max-width: 6.5em;
    min-width: min-content;
    text-align: right;
    text-wrap: balance;
    color: var(--c1-a4);
    font-size: var(--fs-small3);
    letter-spacing: var(--ls2);
    text-transform: uppercase;
}

/* The box that answers the pointer is the number itself and nothing more: no
   padding or margin around it, and text-box trims the line box from the font's
   full ascent and descent down to the digits, which run from the baseline to
   the cap height. Without the trim the box stood well above and below the
   figures, and hovering that empty band opened the breakdown. */
.weekOddsValue{
    flex: 0 0 auto;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--r2);
    color: var(--c1);
    cursor: default;
    font-family: var(--ff-scoreboard);
    font-size: 60px;
    font-weight: var(--fw3);
    line-height: 1;
    margin: 0;
    padding: 0;
    text-box: trim-both cap alphabetic;
}

.weekOddsValue:hover,
.weekOddsValue:focus-visible{
}

.weekOddsBreakdown{
    /* The week CSE tooltip's dark look - see .weekCseTooltip below - so the
       two pop-ups on this table read as one family. */
    background-color: var(--c1);
    border-radius: var(--r2);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
    box-sizing: border-box;
    color: var(--c-s1);
    font-family: var(--ff1);
    font-weight: var(--fw1);
    line-height: 1.3;
    min-width: 132px;
    padding: 7px 9px;
    text-align: left;
    /* Beside the number rather than under it, and pinned by its top left
       corner: the number is centred in the cell, and at its widest - "100%",
       about 146px of the scoreboard face at 82px - it ends 73px right of the
       centre, so the list starts just past that and never covers it. Its top sits under
       the label, level with the number's. A longer or wider list grows right
       and down from that corner and never moves the corner itself - anchored
       by its right edge and centred on the cell, as it was, it slid left as it
       widened and rose as it lengthened. */
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 100%;
    z-index: 60;
}

.weekOddsBreakdownHead{
    color: var(--c1-a4);
    font-size: var(--fs-small3);
    letter-spacing: var(--ls1);
    margin-bottom: 5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Shown while the number is hovered or focused, and not otherwise. No script,
   no timers: a tooltip appears when the pointer is on the thing it explains and
   goes when it leaves. Hover on an ancestor follows the DOM rather than the box,
   so pointing at the list itself keeps it up.

   .has-breakdown is added by site.js when the viewer has more than one entry. A
   single entry is its own breakdown, so there is nothing to explain. */
/* It fades in and out over 120ms. visibility goes with the opacity so that the
   list, while it cannot be seen, cannot be pointed at either - an invisible list
   that still answered the pointer would open itself whenever the pointer
   crossed the space it covers. Turned on at once when showing and only at the
   end of the fade when hiding, so neither fade is cut short. */
.weekOddsBreakdown{
    opacity: 0;
    transition: opacity 120ms linear, visibility 0s linear 120ms;
    visibility: hidden;
}

.weekOddsTracker.has-breakdown:hover .weekOddsBreakdown,
.weekOddsTracker.has-breakdown:focus-within .weekOddsBreakdown{
    opacity: 1;
    transition: opacity 120ms linear, visibility 0s linear 0s;
    visibility: visible;
}

.weekOddsBreakdownRow{
    display: flex;
    font-size: var(--fs-small3);
    gap: var(--g2);
    justify-content: space-between;
    padding: 1px 0;
    white-space: nowrap;
}

.weekOddsBreakdownName{
    color: var(--c-s1);
    overflow: hidden;
    text-overflow: ellipsis;
}

.weekOddsBreakdownOdds{
    color: var(--c-s1);
    font-weight: var(--fw2);
}

/* ---- Following a projected row through the re-sort ---------------------- */

/* The moment before the table reorders: the projected row is raised clear of
   its neighbours so the eye has something to hold on to before anything moves.
   Drawn on the cells rather than the row - a tr takes a shadow inconsistently
   across engines, and every cell together is the same band. */
#trackingTable .trackingTableRow.is-projectionLift > td{
    /* No transition: the lift is a beat of dwell before the table moves, not a
       fade. Easing it in would spend the beat arriving. */
    box-shadow: 0 3px 10px rgba(23, 33, 54, .30);
}

/* What is left once the motion is over, and what the reader looks for when they
   come back to the table. It stays until the projection changes or is cleared,
   rather than fading on a timer: the projection is a state the reader turned on,
   so its mark is too.

   The pick cells keep their own colours - the result is the thing being read -
   so only the cells around them carry the tint. */
#trackingTable .trackingTableRow.is-projected > td:not(.teamInTD){
    background-color: var(--c-projected-row);
}

#trackingTable .trackingTableRow.is-projected > td:first-child{
    box-shadow: inset 3px 0 0 var(--c2);
}

/* The viewer's own entries: a navy line down the row's left edge, as in the
   standings and the Splits tables. A strip laid over the first cell's 2px
   border rather than an inset shadow: a shadow draws inside the border, so two
   of the viewer's rows in a row would show a broken line. It reaches 1px past
   the border, to 3px. */
#trackingTable .trackingTableRow.user > td:first-child{
    position: relative;
}

#trackingTable .trackingTableRow.user > td:first-child::before{
    background: var(--c1);
    bottom: -2px;
    content: "";
    left: -2px;
    pointer-events: none;
    position: absolute;
    top: -2px;
    width: 3px;
}

/* Only the name is bold in the viewer's own rows. The row's .user class takes
   main.css's bold, which set every pick and number in the row in bold as well;
   the row goes back to the weight every other row has, and the name alone
   keeps the bold. */
#trackingTable .trackingTableRow.user{
    font-weight: inherit;
}

#trackingTable .trackingTableRow.user .trackingEntryName{
    font-weight: var(--fw3);
}

/* One of the viewer's rows that is also projected keeps both marks: the
   projection's blue, a pixel wider, so 3px of it shows beside the navy. */
#trackingTable .trackingTableRow.user.is-projected > td:first-child{
    box-shadow: inset 4px 0 0 var(--c2);
}

/* How far the row moved, beside the rank it moved to. It answers the question
   the animation was trying to answer, for anyone who looked away while it
   played - and it is removed on a timer, being about the change rather than the
   state. */
.trackingRankDelta{
    font-family: var(--ff1);
    font-size: var(--fs-small3);
    font-weight: var(--fw3);
    margin-left: 3px;
    vertical-align: middle;
}

.trackingRankDelta--up{
    color: var(--c-win, green);
}

.trackingRankDelta--down{
    color: var(--c-loss);
}

.separator{
    font-family: var(--ff1);
    font-size: 9pt;
    color: var(--c1);
    float: right;
    margin: 0 4px 0 4px;
}


#trackingTable{
    /*
    width: 1122px;
    --width-rank: var(--tracking-rank-fit-width, 20px);
    --width-name: 150px;    
    --width-check: 20px;
    --width-game: 48px;
    --width-stat: 41px;
    */
    
    /* week-tracker.php derives these percentages from the pixel weights that
       build the table's overall width, so together they always come to exactly
       100%. That matters under `table-layout: fixed`: a shortfall is leftover
       width the spec never assigns, and Chrome puts all of it in the first
       column while Safari spreads it over every column. The literals below are
       only a fallback for a page that does not publish the custom properties. */
    width: 100%;
    --width-rank: var(--tracking-rank-pct, 2%);
    --width-name: var(--tracking-name-pct, 18%);
    --width-check: var(--tracking-check-pct, 2%);
    --width-game: var(--tracking-game-pct, 4%);
    --width-stat: var(--tracking-stat-pct, 3.5%);
    
    --tracking-game-header-height: 69px;
    --tracking-game-header-midpoint: calc(var(--tracking-game-header-height) / 2);
    /* Single source for the entry name column: the column definition, the
       header cell and the body cell all read this. The percentage itself comes
       from week-tracker.php, which sizes it from $trackingNameColumnWidth — the
       same pixel weight it uses to build the table's overall width — so the
       columns and the width can no longer drift apart. */
    
    --tracking-row-highlight-bg: var(--c-league-theme, var(--c-compare));
    --tracking-row-highlight-text: var(--c-league-theme-text, var(--c1));
    border-collapse: separate;
    /* Zero on purpose. In the separated-borders model the gaps between cells are
       painted by the table, not by the row, so any space set here stays table
       coloured however a row is highlighted - which is what broke a hovered row
       into separate cells. The gap at rest is the 2px border on .teamInTD
       instead, which belongs to the cell and can therefore change with it. */
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    table-layout: fixed;
    font-family: var(--ff1);
    font-size: var(--fs-body);
}

/* 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: 1600px)  { #trackingTable, #trackingOptionsBar { width: 90%; } }
@container dashboard-main (min-width: 1800px) { #trackingTable, #trackingOptionsBar { width: 80%; } }
@container dashboard-main (min-width: 2000px) { #trackingTable, #trackingOptionsBar { width: 74%; } }
@container dashboard-main (min-width: 2200px) { #trackingTable, #trackingOptionsBar { width: 68%; } }
@container dashboard-main (min-width: 2400px) { #trackingTable, #trackingOptionsBar { width: 50%; } }

/* The pick5 table is the one tracker whose width is a pixel total rather than a
   share of the viewport - week-tracker.php sizes it, and the search bar and tool
   row above it, from $trackingPick5TableWidth. Its columns are therefore stated
   in the same pixels that make up that total, so nothing is left over for Chrome
   and Safari to place differently. Every width below comes from week-tracker.php
   rather than from a number kept here: the rank and pick/stat columns read the
   pixel weights it publishes, and the name column is `auto` so it collects the
   remainder, which is exactly $trackingPick5NameColumnWidth. Editing a width in
   this file instead of in the PHP is what pulls the columns out of step with the
   table, so change the PHP constants and let these follow. */
#trackingTable.pick5TrackingTable{
    --tracking-game-header-height: 56px;
    --width-rank: var(--tracking-rank-fit-width, 20px);
    --width-name: auto;
    --width-game: var(--tracking-fixed-col-width, 52px);
    --width-stat: var(--tracking-fixed-col-width, 52px);
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
}

.pick5TrackingTable th{
    border-bottom: 1px solid var(--c1);
    padding: 8px 6px;
    text-align: center;
    white-space: nowrap;
}

.pick5TrackingTable td{
    padding: 0;
}

.pick5RankHeader,
.pick5RankCell{
    text-align: center;
    width: var(--width-rank);
}

.pick5RankHeader,
.pick5EntryHeader,
.pick5PickHeader{
    vertical-align: middle;
}

.pick5TrackingTable .trackingHeaders{
    padding-bottom: 0;
}

.pick5EntryHeader,
.pick5EntryName{
    width: var(--width-name);
}

.pick5PickHeader{
    width: 300px;
}

.pick5PickCell{
    width:var(--width-game);
}

.trackingRankCol,
.pick5RankCol{
    width: var(--width-rank);
}

.trackingNameCol,
.pick5EntryCol{
    width: var(--width-name);
}

.trackingEntryCheckCol{
    width: var(--width-check);
}

.trackingGameCol,
.pick5PickCol{
    width:var(--width-game);
}

.trackingStatCol,
.pick5StatCol{
    width:var(--width-stat);
}

.trackingEntryName,
#trackingTeamHeader{
    position: relative;
    text-align: left;
    vertical-align: top;
    padding-left: 0;
}

#trackingTable .trackingEntryName{
    box-sizing: border-box;
    max-width: var(--width-name);
    overflow: visible;
    position: relative;
    text-overflow: ellipsis;
    width: var(--width-name);
    white-space: nowrap;
}

#trackingTable .trackingEntryName:has(.entryProfileLink:hover),
#trackingTable .trackingEntryName:has(.entryProfileName:hover),
#trackingTable .trackingEntryName:has(.entryProfileLink:focus-visible){
    z-index: 20;
}

#trackingTable .trackingEntryName .entryProfileContent{
    width: 100%;
}

#trackingTable .trackingRankHeader,
#trackingTable .trackingRankCell,
#trackingTable .pick5RankHeader,
#trackingTable .pick5RankCell{
    box-sizing: border-box;
    max-width: var(--width-rank);
    min-width: var(--width-rank);
    padding-right: 4px;
    text-align: right;
    width: var(--width-rank);
}

#trackingTable .trackingRankHeader,
#trackingTable .pick5RankHeader{
    padding-left: 0;
}

#trackingTable:not(.pick5TrackingTable) .trackingEntryName{
    width: var(--width-name);
}

.trackingEntryCheckHeader{
    box-sizing: border-box;
    overflow: visible;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    width: 32px;
}

.trackingEntryResetButton:hover,
.trackingEntryResetButton:focus-visible{
    color: var(--c2);
    outline: 0;
    text-decoration: underline;
}

.trackingEntryResetButton:disabled{
    color: var(--c-text-muted);
    cursor: default;
    opacity: 0.45;
    text-decoration: none;
}

.trackingEntryCheckCell{
    box-sizing: border-box;
    font-size: var(--fs-small1);
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.trackingPPButton{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--r2);   
    color: var(--c1-a4);
    height: 100%;
    width: 100%;
    transform: translateY(1.5px);
    transition: all 60ms linear;
}

/* Hidden rather than removed: the Results toggle turns it back on without a
   reload. visibility keeps the cell's width, so the column does not collapse and
   the row does not reflow as the button comes and goes. */
.trackingPPButton--hidden{
    visibility: hidden;
    pointer-events: none;
}

.trackingPPButton:hover{
    color: var(--c1) !important;
    cursor: pointer;
    transform: translateY(1.5px) scale(1.2);
}

.atsHeader{
    text-align: center;
    align-content: center;
    margin: 0 auto;
    position: relative;
    
    width:var(--width-game);  
    height: var(--tracking-game-header-height);
    box-sizing: border-box;
    cursor: default;
    padding: 0;
    vertical-align: top;
}

.trackingHeaderGroupAlt{
    background-color: var(--c-s3);
}

.trackingHeaderGroupDefault:hover,
.trackingHeaderGroupAlt:hover{
    /*background-color: var(--c-s4);*/
}

/* Three rows: the top team's code, the spread, and the bottom team's code.
   Each code's score is drawn beside it rather than in a row of its own - see
   "Scores beside the team codes" near the end of this file. Positioned, so
   those scores can be placed against the whole matchup. */
.atsHeaderContainer{
    display: grid;
    grid-template-rows: 25px 19px 25px;
    width: 100%;
    height: 69px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Straight-up leagues print no spread, so its 19px row is dropped and the stack
   closes up rather than holding an empty band in the middle of the matchup.

   The element is hidden rather than omitted from the markup: the container's
   children are addressed by :nth-child elsewhere in this file, and removing one
   would renumber the rest. display:none keeps it out of the grid's flow while
   leaving those indices alone.

   --tracking-game-header-height moves with it. The Week/Season group header and
   the Wins/CSE detail header split that value between them, so leaving it at
   69px would leave those two rows 19px taller than the game columns they sit
   beside, and the two halves of the header would stop lining up. */
#trackingTable.trackingTable--noSpreads {
    --tracking-game-header-height: 50px;
}

.trackingTable--noSpreads .atsHeaderContainer {
    grid-template-rows: 25px 25px;
    height: 50px;
}

.trackingTable--noSpreads .spreadInATSheader {
    display: none;
}

.atsHeaderContainer--penultimateGame > :nth-child(2),
.atsHeaderContainer--penultimateGame > :nth-child(3),
.atsHeaderContainer--penultimateGame > :nth-child(4){
/*    position: relative;*/
/*    top: 7px;*/
}

.trackingHeaders{
    text-align: center;
    vertical-align: bottom;
    padding-bottom: 25px; /* centers vertically */
}

.trackingTableGroupHeader{
    position: relative;
    text-align: center;
    vertical-align: bottom;
    height: var(--tracking-game-header-midpoint);
    padding: 0;
}

.trackingTableGroupHeader::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: black;
    z-index: 1;
}

.trackingTableGroupRow .trackingTableGroupHeader:nth-last-child(2)::after{
    left: 5%;
    right: 0;
}

.trackingTableGroupRow .trackingTableGroupHeader:last-child::after{
    left: 0;
    right: 5%;
}

#trackingTable:not(.pick5TrackingTable) .trackingTableGroupHeader{
    border-bottom: 0;
    padding: 0 6px;
}

/* Week and Season ride 6px above where the cell would put them, so the space
   between the label and the rule under it matches the space between that rule
   and the Wins/CSE labels below: 11px of clear pixels either side, measured off
   the ink rather than off the boxes, because a descender below and a cap height
   above do not sit the same distance inside their line boxes.

   A relative shift rather than padding on the cell. The two header rows split
   --tracking-game-header-height between them, and the game columns beside them
   are one cell of exactly that height, so anything that changes this cell's box
   stretches the header and leaves the game columns 6px short of its baseline.
   Shifting the label paints it elsewhere without resizing anything. */
#trackingTable:not(.pick5TrackingTable) .trackingTableGroupHeader .trackingTableHeaderLabel{
    position: relative;
    top: -6px;
}

/* The Wins and CSE cells would hold their labels on a line as tall as the
   table's body text, which with their padding came to 38px - more than half
   the header, so the row grew and took the header past its height. A line of
   their own labels' height leaves them under half. */
#trackingTable:not(.pick5TrackingTable) .trackingTableDetailHeader{
    line-height: 1;
}

/* Wins and CSE ride 1.5px above where their cell puts them, so they sit as far
   under the Week/Season rule as Week and Season sit over it - 10px of clear
   pixels either side, measured off the ink. That centres the whole block on the
   header, whose middle the rule already marks. A relative shift, for the same
   reason as the one above: the cell's box has to stay the size it is. */
#trackingTable:not(.pick5TrackingTable) .trackingTableDetailHeader .trackingTableHeaderLabel{
    position: relative;
    top: -1.5px;
}

#trackingTable.pick5TrackingTable .trackingTableGroupHeader{
    border-bottom: 0;
    padding: 8px 6px;
    vertical-align: bottom;
}

#trackingTable:not(.pick5TrackingTable) .trackingTableDetailHeader{
    padding: 8px 6px;
}

#trackingTable.pick5TrackingTable .trackingTableDetailHeader{
    padding: 8px 6px;
}

#trackingTable.pick5TrackingTable .trackingTableDetailHeader.tb2{
    border-right: 0;
}

.trackingTableGroupHeader:last-child{
    border-right: 0;
    border-bottom: 0;
}

.trackingTableDetailHeader{
    text-align: center;
    vertical-align: top;
    height: var(--tracking-game-header-midpoint);
    padding: 0;
}

.trackingTableHeaderLabel{
    display: inline-block;
    line-height: 1;
}

#trackingTeamHeader{
    width: 13%;
    box-sizing: border-box;
}

.trackingOptionsLeft{
    width: 100px;
    padding: 2px;
    background-color: red;
    display: inline-block;
    margin: 0 10px 0 10px;
    text-align: center;
	font-family: var(--ff1); 
    font-stretch: extra-expanded;
    border-radius: 10px;
    
    cursor: pointer;
}

.trackingOptionsRight{
    display: none;
}

/* The 4px gap around the team code is a margin, not a border.

   It used to be a border painted the colour of whatever sat behind it - the page
   for a default group, --c-s3 for an alternate one, --c-s4 while the group was
   hovered - which took two more rules to keep in step and still left the border
   box, the thing border-radius rounds, outside the fill. The rounding therefore
   landed on an edge nobody could see, and the fill kept the padding box's corner
   radius: the outer radius less the 4px border, which at --r1 is nothing at all.

   As a margin the gap is the container showing through, so it follows the group
   colour on its own, and the element's border box is the fill itself - which is
   what the radius below now rounds. The grid stretches the item into the space
   the margin leaves, so the fill keeps exactly the size the border gave it and
   width: 100% has to go: with a margin it would measure the full column and push
   the item 8px wider than its row. */
.teamInATSheader{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 0;
    box-sizing: border-box;
    margin: 4px;
    padding: 0 1px;
    line-height: 1;
    /* Default until the header is actually good for something. Only a locked
       game with no result yet can be projected, so only that one offers a
       pointer - see .tbd below, and .tbdHover for the same games with results
       switched off. A finished game and a game that has not locked both answer
       nothing, and neither should invite the click. */
    cursor: default;
    border-radius: var(--r1);
}

.spreadInATSheader{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    line-height: 1;
}

/* Locked, undecided, results showing: the one state a click can do something
   with while the table is reporting results. */
.teamInATSheader.tbd{
    cursor: pointer;
}

.tbd:hover{
    background: repeating-linear-gradient(
        45deg,
        var(--c-win),
        var(--c-win) 5px,
        white 5px,
        white 6px
    );
    color: var(--c-win-text);
}

/* Results-hidden mode puts .tbdHover on every header code alike - see
   site.js - so the unlocked ones are excluded here rather than there. A game
   that has not locked cannot be projected, and a stripe that says "click me to
   pick this side" over a game the click handler ignores is a promise the table
   does not keep. */
.tbdHover:hover:not(.notLocked){
    background: repeating-linear-gradient(
        45deg,
        var(--c-win),
        var(--c-win) 5px,
        white 5px,
        white 6px
    );
    color: var(--c-win-text);
    cursor: pointer;
}

.home{
    /*text-shadow: 0px 0px 10px black;*/
}

/* Away codes read lowercase against the home codes' uppercase - the convention
   the tracker has always used, and the thing the "Uppercase away teams"
   preference exists to switch off.

   It has to be settled here rather than in PHP: the code is already uppercase in
   the markup, so this rule was overriding the preference no matter what the
   server sent. week-tracker.php puts the modifier on #weekTrackerPage. */
.away{
    text-transform: lowercase;
}

.weekTrackerPage--uppercaseAway .away{
    text-transform: uppercase;
}

.pick5PickCell.away,
.pick5PickCell.home{
    text-transform: uppercase;
}

.trackingTableNumberHeaders{
    text-align: center;
    width:var(--width-game);
    font-size: var(--fs-body);
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    
    /*border-left-style: double;
    border-left-color: black;
    border-left-width: 5px;*/
}

.pick5TrackingTable .trackingTableNumberHeaders,
.pick5TrackingTable .trackingTableNumbers{
    width:var(--width-game);
}

#trackingTable.pick5TrackingTable #pick5HeaderSpacerRow th{
    border: 0;
}

.trackingTableNumberHeaders.noSort{
    cursor: default;   
}

.trackingTableNumbers{
    text-align: center;
    border: transparent;
    width:var(--width-game);
    /*border-left-style: double;
    border-left-color: black;
    border-left-width: 5px;*/
}

.covered{
    background-color: var(--c-win);
    color: var(--c-win-text);
    /*color: var(--c1);*/
}

/* Both codes carry .xpush when a game pushes or ties - week-tracker.php sets it
   for either result, the same way both scores turn .tie - so the pair colours
   together and neither reads as having beaten the other. */
.xpush{
    background-color: var(--c-push);
    color: var(--c-push-text);
}

.simCovered{
    background: repeating-linear-gradient(
        45deg,
        var(--c-win),
        var(--c-win) 5px,
        white 5px,
        white 6px
    );
    color: var(--c-win-text);
}

.test{
    width: 100px;
    text-align: center;
    align-content: center;
    background-color: blue;
}

.pushHeader{
}

/* The cell is the row: its background and its 2px border are what a hovered row
   paints to become one unbroken bar, so it is square and stays square.

   The result colour lives on .teamInTDFill inside it, which is what carries the
   rounding. That separation is the only way to have both at once - a single
   element cannot be square for the bar and rounded for the result. */
.teamInTD{
    text-align: center;
    border: 2px solid var(--c-page-background);
    margin: 4px, 4px, 4px, 4px;
    color: var(--c1);
    width:var(--width-game);
    padding: 0;
}

.teamInTDFill{
    display: block;
    border-radius: var(--r2);
    /* Fills the cell so the pill is the size of the cell it sits in. The padding
       the cell used to carry moves here, so the text sits where it always did -
       carried as a transparent border rather than as padding, so a highlighted
       row has a rounded edge to paint without any cell changing size. */
    border: 2px solid transparent;
    /* The 2px border is there for the highlight to colour, and the rest of the
       time it has to read as empty space. A background paints out under the
       border by default, which is invisible for the solid result colours but
       not for the striped projection fills: their pattern is positioned against
       the padding box, so the ring beyond it got the gradient's extended edge
       colour - a solid band that looked like a border the cell should not have.
       Clipping the background to the padding box leaves the border genuinely
       empty, so only a rule that sets border-color draws anything there. */
    background-clip: padding-box;
}

.correct > .teamInTDFill{
    background-color: var(--c-win);
    color: var(--c-win-text);
}

/* background-image, not the background shorthand: the shorthand resets
   background-clip back to border-box, which puts the stripes under the pill's
   transparent border again and draws the band .teamInTDFill exists to avoid. */
.simCorrect > .teamInTDFill{
    background-image: repeating-linear-gradient(
        45deg,
        var(--c-win),
        var(--c-win) 5px,
        white 5px,
        white 6px
    );
    color: var(--c-win-text);
}

.incorrect > .teamInTDFill{
    background-color: var(--c-loss);
    color: var(--c-loss-text);
}

.simIncorrect > .teamInTDFill{
    background-image: repeating-linear-gradient(
        45deg,
        var(--c-loss),
        var(--c-loss) 5px,
        white 5px,
        white 6px
    );
    color: var(--c-loss-text);
}

.push > .teamInTDFill{
    background-color: var(--c-push);
    color: var(--c-push-text);
}

/* Anything not yet a win, a loss, or a push - a game still to finish, a pick
   still hidden or missing, and every pick while results are switched off - on
   the pale ink. A projected result keeps its stripes, and a highlighted row
   its highlight (see .compared below), so neither is excluded by name here
   but by the row and the classes that mark them. */
.trackingTableRow:not(.compared) .teamInTD:not(.correct, .incorrect, .push, .simCorrect, .simIncorrect) > .teamInTDFill{
    background-color: var(--c1-a2);
    color: var(--c1-a5);
}

.outline{
    border: 1px solid var(--c-push);
}

.pushTD{
    background-color: var(--c-push);
    color: var(--c-push-text);
}

.trackingTooltip{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    z-index: 9999;
    
    font-family: var(--ff1);
    font-size: var(--fs-small3);
    text-align: center;
    padding: 2px;
    white-space: nowrap;
    
    background-color: var(--c1);
    color: var(--c-s1);
    border-radius: var(--r2);
}

.atsHeader:hover .trackingTooltip{
    /*visibility: visible;*/
}

.trackingTableRow{
    border: 2px solid var(--c-page-background);
}

.trackingTableRow > td:not(.teamInTD):not(.tb){
    border: 2px solid transparent;
    box-sizing: border-box;
}



.trackingTableRow:hover .tb{
    background-color: var(--c-s4);
    border-color: var(--c-s4);
    
    cursor: default;
}

.trackingTableRow:hover .trackingPPButton{
    /*color: var(--c1-a4);*/
}

.uncompared.trackingTableRow:hover .tb{
    background-color: var(--c-s4);
    border-color: var(--c-s4);
    
    cursor: default;
}

#weekWinOddsLabelWrap{
    font-size: 10px;
    width: 70px;
    float: left;
    font-family: var(--ff1);
    position: absolute;
    bottom: 0;
}

#weekWinOddsLabel{
    display: table-cell;
    vertical-align: bottom;
    height: 52px;
    width: 70px;
}

.una{
    display: table-cell;
    vertical-align: bottom;
    height: 63px;
    width: 70px;
    padding-top: 0px;
}

#unaa{
    text-align: center;
}

.big{
    display: table-cell;
    vertical-align: bottom;
    position: absolute;
    cursor: default;
}

#weekWinOddsValueDisplay{
    font-size: 48px;
    bottom: -10px;
    left: 71px;
	font-family: var(--ff1);
}

/*@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(1, 1);}
    50% {-webkit-transform: scale(.85, .85);}
    100% {-webkit-transform: scale(1, 1);}
    }*/

#big2{
    font-size: 8pt;
    font-family: var(--ff1);
    top: 20px;
    left: 80px;
    background: var(--c-s1);
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--c1);
    cursor: default;
    /*-webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;*/
}

.trackingTableSeparator{
    /*border-left: 3px double black;*/
}

.trackingTableRow:hover{
    background-color: var(--c-s4);
    cursor: default;
    color: var(--c1);
}

.trackingTableRow:hover > td:not(.teamInTD):not(.tb){
    background-color: var(--c-s4);
    border-color: var(--c-s4);
    
    cursor: default;
    color: var(--c1);
}

.trackingTableRow:hover .teamInTD{
    cursor: default;
    border-color: var(--c-s4);
    
    color: var(--c1);
}

.trackingTableRow:hover .teamInTD.correct{
    cursor: default;
    border-color: var(--c-s4);
    
    color: var(--c1);
}

.trackingTableRow:hover .teamInTD.incorrect{
    cursor: default;
    border-color: var(--c-s4);
    
    color: var(--c1);
}

.trackingTableRow:hover .teamInTD.push{
    cursor: default;
    border-color: var(--c-s4);
    
    color: var(--c1);
}

.trackingTableRow:hover .teamInTD.simCorrect{
    cursor: default;
    border-color: var(--c-s4);
    
    color: var(--c1);
}

.trackingTableRow:hover .teamInTD.simIncorrect{
    cursor: default;
    border-color: var(--c-s4);
    
    color: var(--c1);
}

.trackingTableRow:hover .teamInTD.teamInTD2{
    cursor: default;
    border-color: var(--c-s4);
    
    color: var(--c1);
}

/* A highlighted row that is also hovered keeps the hover bar: its cell borders
   stay the colour of the bar, and the black highlight edge stays on the pills
   inside, where .compared .teamInTDFill puts it. */
.compared.trackingTableRow:hover .teamInTD{
    cursor: default;
    color: var(--tracking-row-highlight-text);
}

.compared.trackingTableRow:hover .teamInTD.teamInTD2{
    cursor: default;
    color: var(--tracking-row-highlight-text);
}

.compared.trackingTableRow:hover .teamInTD.correct,
.compared.trackingTableRow:hover .teamInTD.incorrect,
.compared.trackingTableRow:hover .teamInTD.push,
.compared.trackingTableRow:hover .teamInTD.simCorrect,
.compared.trackingTableRow:hover .teamInTD.simIncorrect{
    color: var(--c1);
}

/* With results switched off, a hovered simulated cell is outlined so the
   hypothetical stands out from the blank cells around it. The outline goes on
   the pill, like every other edge in the table - on the cell it would draw a
   full-height rectangle around a pill that does not fill the cell. The cell
   border itself stays the colour of the hover bar, set above. */
.trackingTableRow:hover .teamInTD2.simCorrect > .teamInTDFill,
.trackingTableRow:hover .teamInTD2.simIncorrect > .teamInTDFill{
    border-color: var(--c1);
}

/* A hovered row is one solid bar, so the cells that make up its background lose
   the rounding that separates them at rest - otherwise the page shows through at
   every corner and the bar looks scalloped.

   A cell holding a result keeps its rounding. Its colour is the result, not the
   highlight, so it stays a pill sitting in the bar rather than dissolving into
   it. The five classes are the whole set: correct, incorrect and push come from
   the server, simCorrect and simIncorrect are added by the simulator. */
#trackingTable .trackingTableRow:hover > td:not(.correct):not(.incorrect):not(.push):not(.simCorrect):not(.simIncorrect){
    border-radius: 0;
}

#trackingTable:has(.trackingTableRow.compared) .trackingTableRow:not(.compared):hover > td,
.uncompared.trackingTableRow:hover > td{
    --tracking-hover-cell-edge: var(--c-s4);
    background-color: var(--tracking-hover-cell-edge) !important;
    /* The border is the gutter. Painting it the same colour as the fill closes
       the gap to the next cell, so the row reads as one block rather than a
       line of separated tiles. */
    border-color: var(--tracking-hover-cell-edge) !important;
    color: var(--c1) !important;
}

#trackingTable:has(.trackingTableRow.compared) .trackingTableRow:not(.compared):hover > td.correct,
.uncompared.trackingTableRow:hover > td.correct{
    --tracking-hover-cell-edge: var(--c-win);
}

#trackingTable:has(.trackingTableRow.compared) .trackingTableRow:not(.compared):hover > td.incorrect,
.uncompared.trackingTableRow:hover > td.incorrect{
    --tracking-hover-cell-edge: var(--c-loss);
    color: var(--c-loss-text);
}

#trackingTable:has(.trackingTableRow.compared) .trackingTableRow:not(.compared):hover > td.push,
.uncompared.trackingTableRow:hover > td.push{
    --tracking-hover-cell-edge: var(--c-push);
    color: var(--c-push-text);
}

#trackingTable:has(.trackingTableRow.compared) .trackingTableRow:not(.compared):hover > td.simCorrect,
.uncompared.trackingTableRow:hover > td.simCorrect{
    --tracking-hover-cell-edge: var(--c-win);
    color: var(--c-win-text);
}

#trackingTable:has(.trackingTableRow.compared) .trackingTableRow:not(.compared):hover > td.simIncorrect,
.uncompared.trackingTableRow:hover > td.simIncorrect{
    --tracking-hover-cell-edge: var(--c-loss);
    color: var(--c-loss-text);
}

.tb{
    border: 2px solid transparent;
    box-sizing: border-box;
}

/* --- The rule before the Season columns -------------------------------------
   The Season columns are set off from the Week columns by one vertical rule down
   their left edge, from the top of the header to the last entry, in the colour
   of the rules between the games. Each cell on that edge draws its own piece:
   the Season label, the Wins label under it, and the first season cell of every
   body row (.tb straight after a cell that is not one). Each piece reaches over
   the cell's border to the column's outer edge and across the top and bottom
   borders to meet the next, so the pieces join into one line. Drawn by a
   pseudo-element, so no cell's width or content moves, and it stays over the
   fill a hovered or highlighted row paints. */
#trackingTable .trackingTableGroupRow > .trackingTableGroupHeader:last-child,
#trackingTable .trackingTableDetailRow > .tb2.trackingTableSeparator,
#trackingTable tr > td:not(.tb) + td.tb{
    position: relative;
}

#trackingTable .trackingTableGroupRow > .trackingTableGroupHeader:last-child::before,
#trackingTable .trackingTableDetailRow > .tb2.trackingTableSeparator::before,
#trackingTable tr > td:not(.tb) + td.tb::before{
    background: var(--tracking-rule-label);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 1;
}

/* A body cell's 2px border sits inside the column, and the pick-5 header cells
   close with a 1px border along the bottom. */
#trackingTable tr > td:not(.tb) + td.tb::before{
    bottom: -2px;
    left: -2px;
    top: -2px;
}

#trackingTable.pick5TrackingTable .trackingTableGroupRow > .trackingTableGroupHeader:last-child::before,
#trackingTable.pick5TrackingTable .trackingTableDetailRow > .tb2.trackingTableSeparator::before{
    bottom: -1px;
}

/* ── Hide / Show Results ─────────────────────────────────────────────────
   One duration and one curve for the whole gesture, so the cell colours travel
   together. They used to disagree: the colours were animated by jQuery UI's
   switchClass on its own schedule, and some cells swapped instantly.
   site.js now only toggles classes and arms .is-resultsFading for the length
   of the fade — the class keeps the transition off the rest of the time so
   row hover stays immediate. Change the timing here and the script follows;
   it reads --tracking-results-fade to know how long to keep the class on. */
#trackingTable{
    --tracking-results-fade: 400ms;
    --tracking-results-ease: ease;
}

/* A pick cell's result colour is painted by the .teamInTDFill pill inside it,
   not by the cell, so the pill has to fade too or the body snaps while the
   headers fade. */
#trackingTable.is-resultsFading .teamInTD,
#trackingTable.is-resultsFading .teamInTDFill,
#trackingTable.is-resultsFading .teamInATSheader{
    transition:
        background-color var(--tracking-results-fade) var(--tracking-results-ease),
        border-color var(--tracking-results-fade) var(--tracking-results-ease),
        color var(--tracking-results-fade) var(--tracking-results-ease);
}

.comparisonSubCount{
    color: grey;
    margin-left: 5px;
}
.uncompared{
    opacity: 1;
}

.uncompared > td:not(.tb){
    opacity: var(--tracking-dim-opacity, .4);
}

/* The edge that marks a highlighted row is drawn on the rounded pill inside
   each cell, not on the square cell around it, so the highlight follows the
   shape the reader already sees rather than boxing it in. */
.compared .teamInTDFill{
    border-color: black;
}

/* The result classes are on the cell, not on the pill inside it - the pill
   carries no classes at all - so the exclusion has to be tested against the
   cell, or it matches every pill and fills the results too.

   This is the only place the highlight colour is applied, with results showing
   or not. Switching results off adds .teamInTD2 to every pick cell, and that
   class used to carry the highlight itself; because it sat on the cell it
   painted the full cell height, which shows above and below a pill that is
   shorter than the row. */
.compared .teamInTD:not(.correct, .incorrect, .push, .simCorrect, .simIncorrect) > .teamInTDFill{
    background: var(--tracking-row-highlight-bg, var(--c2));
}


.compared .correct{
    opacity: 1;
}

.compared .incorrect{
    opacity: 1;
}

.compared .push{
    opacity: 1;
}

.compared .simCorrect{
    opacity: 1;
}

.compared .teamInTD:not(.correct, .incorrect, .push, .simCorrect, .simIncorrect){
    color: var(--tracking-row-highlight-text);
}

.compared .simIncorrect{
    opacity: 1;
}

#weekLabel{
    font-family: var(--ff1);
    color: var(--c1);
    font-size: 9pt;
}


.disabled{
    opacity: .4;
}

.disabled:hover{
    background-color: none;
}

#comparisonSummaryRow{
    color: var(--c-text-muted);
    font-size: var(--fs-small3);
}

/* The pick rate choice sits at the right of the name column, beside the arrow
   that points on to the percentages. The row is inline-flex, so the cell's
   text-align places it. */
#comparisonSummaryRow .comparisonSummaryControlCell{
    text-align: right;
    padding-right: 6px;
}

/* The row spans the name column, with every option given the same share of
   it: a grid of equal columns rather than the segmented row's own inline-flex,
   which sizes each option by its word. The segments keep the -1px margin that
   overlaps their borders. */
#comparisonViewRow{
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    width: 100%;
}

#comparisonViewRow > .segment{
    justify-content: center;
    min-width: 0;
}

/* The site's segmented row in small: the same .btn-sm segments, set a step
   down in type, which their em-based height and padding follow. */
.comparisonViewRow .segment{
    font-size: var(--fs-small3);
    height: 2em;
    padding: 0 0.6em;
}

/* You, when it is also the menu of the viewer's entries: the segment is the
   span around the select, and the menu's own button fills it without a box of
   its own, so it takes the segment's fill and colour, chosen or not. */
.comparisonViewRow .comparisonViewEntryMenu{
    box-sizing: border-box;
    display: inline-flex;
    padding: 0;
}

.comparisonViewEntryMenu .selectMenuField{
    height: 100%;
    width: 100%;
}

.comparisonViewEntryMenu .selectMenuButton{
    background: transparent;
    border: 0;
    border-radius: inherit;
    color: inherit;
    font-size: inherit;
    gap: 0.35em;
    height: 100%;
    justify-content: center;
    /* The menu's own 1.2 makes a line box shorter than the text, and the text
       then sits about .7px above the plain buttons' labels beside it. normal
       is what those buttons use, so the labels line up. */
    line-height: normal;
    padding: 0 0.6em;
    width: 100%;
}

.comparisonViewEntryMenu .selectMenuButton:hover:not(:disabled){
    background: transparent;
}

.comparisonViewEntryMenu .selectMenuChevron,
.comparisonViewEntryMenu .selectMenuField.is-open .selectMenuChevron{
    color: inherit;
}

/* The list is as wide as the entry names in it, not the small segment. */
.comparisonViewEntryMenu .selectMenuList{
    min-width: max-content;
}

/* The arrow in the check column of the summary row, tying the pick rate label
   on its left to the percentages on its right. It sits in the muted colour of
   the label it belongs to rather than the darker colour of the buttons below
   it, so it reads as part of that line and not as a control. */
.comparisonSummaryArrow{
    color: var(--c-text-muted);
    font-size: var(--fs-small3);
}

#weekWinOddsValue{
    font-size: 8pt;
    font-family: var(--ff1);
    cursor: pointer;
}

#comparisonSummaryRow{
    font-size: var(--fs-small3);
}

/* ---------------------------------------------------------------------------
   Week CSE tally

   CSE is the sum of how far each wrong pick missed its line, so the column on
   its own is a number without a reason. Hovering a cell shows the misses that
   built it, one per line.
   ------------------------------------------------------------------------ */

/* Positioned in viewport coordinates by dashboard.js and attached to <body>,
   so no ancestor's overflow can clip it and the live CSE recompute - which
   rewrites this cell's contents - cannot destroy it. */
.weekCseTooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;

    min-width: 132px;
    padding: 7px 9px;
    box-sizing: border-box;

    background-color: var(--c1);
    color: var(--c-s1);
    border-radius: var(--r2);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);

    font-family: var(--ff1);
    font-size: var(--fs-small3);
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
    pointer-events: none;

    /* Measured before it is placed, so it starts transparent rather than
       display:none - a hidden element has no dimensions to position from. */
    opacity: 0;
    transition: opacity 120ms linear;
}

.weekCseTooltip.is-visible {
    opacity: 1;
}

.weekCseTooltipHead {
    color: var(--c1-a4);
    font-size: var(--fs-small3);
    letter-spacing: var(--ls1);
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* One grid for the whole tally rather than one per row: grid tracks are only
   shared between rows of the same container, so a grid per row would size each
   row's columns to its own contents and the four columns would start at a
   different x on every line. */
.weekCseTally {
    align-items: baseline;
    column-gap: 8px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    row-gap: 2px;
}

/* The row is a grouping in the markup only; its four spans are the real grid
   items, so every column lines up down the whole tally. */
.weekCseTallyRow {
    display: contents;
}

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

.weekCseTallyVs {
    color: var(--c1-a4);
}

.weekCseTallyOpponent {
    text-align: left;
}

/* The total row has nothing to put in the "vs" or winning-team tracks, so its
   caption runs across both. */
.weekCseTallySpan {
    color: var(--c1-a4);
    grid-column: 2 / 4;
}

.weekCseTallyHit {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* No rule above the total: the spacing separates it from the misses on its own,
   and the line was the only horizontal stroke left in the tooltip. */
.weekCseTallyRow--total > span {
    margin-top: 3px;
    padding-top: 4px;
}

/* ---------------------------------------------------------------------------
   Game details

   A click on a shown pick opens its game's spread and score - see the script
   at the end of week-tracker.php. Drawn as the CSE tally above is: white type
   on the site's ink, attached to <body> and placed in viewport coordinates.
   ------------------------------------------------------------------------ */

#trackingTable td.teamInTD[data-game] {
    cursor: pointer;
}

.weekTrackerGameInfo {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;

    min-width: 180px;
    padding: 7px 9px;
    box-sizing: border-box;

    background-color: var(--c1);
    color: var(--c-s1);
    border-radius: var(--r2);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);

    font-family: var(--ff1);
    font-size: var(--fs-small3);
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
}

.weekTrackerGameInfo[hidden] {
    display: none;
}

.weekTrackerGameInfoList {
    display: grid;
    gap: 4px;
    margin: 0;
}

.weekTrackerGameInfoList > div {
    column-gap: 10px;
    display: grid;
    grid-template-columns: 48px 1fr;
}

.weekTrackerGameInfoList dt {
    color: var(--c1-a4);
    letter-spacing: var(--ls1);
    text-transform: uppercase;
}

.weekTrackerGameInfoList dd {
    font-weight: var(--fw2);
    margin: 0;
}

/* Final or In progress, under the score it qualifies. */
.weekTrackerGameInfoStatus {
    color: var(--c1-a4);
    display: block;
    font-weight: var(--fw1);
}

.weekTrackerGameInfoStatus:empty {
    display: none;
}

/* ==========================================================================
   Header labels and number columns, set as the standings table sets them
   (see the .standingsType rules in standings.css): the labels - Selections,
   Week and Season, and Wins and CSE - and the game data over the game columns.
   The odds tracker keeps its own type.
   ========================================================================== */
#trackingTable {
    --tracking-ink-1: #172136;
    --tracking-ink-3: #79849a;
}

#trackingTable .trackingTableHeaderLabel,
#trackingTable .pick5PickHeader,
#trackingTable .atsHeaderSideLabel {
    color: var(--tracking-ink-3);
    font-size: var(--fs-small2);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls1);
}

/* The group labels sit a tier above the column labels: the same capitals at a
   lighter weight, as over the standings' two sections. */
#trackingTable .trackingTableGroupHeader .trackingTableHeaderLabel,
#trackingTable .pick5PickHeader {
    font-weight: 500;
}

/* The game data over each game column - the scores, the team codes, and the
   spread - takes the same type as the labels: size, weight,
   colour, spacing, family, and tabular figures, so the spreads and scores
   stack like the columns below them. Two things are held back. Case is left
   alone, because away codes read lowercase unless the "Uppercase away teams"
   preference says otherwise. And a covered or pushed code sits on its result
   fill in that result's ink: --c-win-text on the covered green,
   --c-push-text on the push fill. */
#trackingTable .atsHeaderContainer .teamInATSheader,
#trackingTable .atsHeaderContainer .spreadInATSheader {
    color: var(--tracking-ink-3);
    font-family: var(--ff1);
    font-size: var(--fs-small2);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: var(--ls1);
}

#trackingTable .atsHeaderContainer .teamInATSheader.covered {
    color: var(--c-win-text);
}

#trackingTable .atsHeaderContainer .teamInATSheader.xpush {
    color: var(--c-push-text);
}

/* --- Numbers on the decimal point -----------------------------------------
   Tabular figures so every digit takes the same width, right-aligned so the
   digits stack. site.js marks a figure with no tenth, and it is given a ".0"
   that is not seen but keeps its width, so 14 ends where the 5 of 13.5 ends.
   The right padding sets the edge the figures end on so that a figure of the
   usual size, two digits and a tenth, sits in the middle of the cell under
   its centred label. The padding is measured off the column's width, not
   written as 50%: a cell's percentage padding is taken from the table's width,
   and --width-stat is already stated in those terms here. */
#trackingTable .trackingRankCell,
#trackingTable .pick5RankCell,
#trackingTable td.trackingTableNumbers {
    font-variant-numeric: tabular-nums;
}

#trackingTable td.trackingTableNumbers {
    box-sizing: border-box;
    padding-right: calc(var(--width-stat) / 2 - 1.65ch);
    text-align: right;
    white-space: nowrap;
}

#trackingTable td.trackingNumberWhole::after {
    content: ".0";
    visibility: hidden;
}

/* --- The header's rules, in the standings' colours --------------------------
   The standings header has two: the faint rule under each group label (its
   text grey at .45) and the rule that closes the header (the dark ink at .22).
   The Board's rules take whichever of the two does the same job. The line
   under the pick-5 header and the one over the pick-all table's entries (see
   below) close the header; the rule under Week and Season, and the rules
   between the games, sit inside it. */
#trackingTable {
    --tracking-rule-label: rgba(121, 132, 154, .45);
    --tracking-rule-header: rgba(23, 33, 54, .22);
}

#trackingTable.pick5TrackingTable th {
    border-bottom-color: var(--tracking-rule-header);
}

/* The pick-all table has no rule over it; its header is closed by one line
   directly over the entries - under the row of pick rates when that row is
   showing, and along the bottom of the header when it is not (before a game
   has locked).

   One element spanning the row, laid on its bottom edge. It was a shadow on
   each cell, which put it 1px inside each cell's border - and the Season
   cells used to carry a 2px bottom border in their own grey, so under them the
   line sat 2px higher and the rule broke into steps. Out of flow, so neither
   row grows by the line's height. */
#trackingTable:not(.pick5TrackingTable) #comparisonSummaryRow,
#trackingTable:not(.pick5TrackingTable):has(#comparisonSummaryRow[hidden]) thead {
    position: relative;
}

#trackingTable:not(.pick5TrackingTable) #comparisonSummaryRow::after,
#trackingTable:not(.pick5TrackingTable):has(#comparisonSummaryRow[hidden]) thead::after {
    background: var(--tracking-rule-header);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 2;
}

#trackingTable:not(.pick5TrackingTable) #comparisonSummaryRow > td{
    padding: 12px 0 6px;   
}

#trackingTable .trackingTableGroupHeader::after {
    background: var(--tracking-rule-label);
}

/* A vertical rule on the left edge of every game, the first included, in the
   colour of the rules inside the header (the one under Week and Season). Full
   height, drawn by a pseudo-element, so no
   cell's width or content moves. */
#trackingTable .atsHeader::before {
    background: var(--tracking-rule-label);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 1;
}

/* --- Home and Away, beside the first game ---------------------------------
   Which of the two team codes in each matchup is the home side, said once, to
   the left of the first game and level with its codes. The order is the first
   game's own: the league's layout can put either side on top. Out of flow, so
   the table measures exactly as it did without them, and the header cell
   beside them is left to paint underneath. The same type as the header's
   labels.

   Each label is centred on its code's row of .atsHeaderContainer: the codes sit
   in the first and third rows (25px 19px 25px), or the first and second when
   there is no spread row between them. */
.atsHeaderSideLabels {
    bottom: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 0;
}

/* Its type is the Wins and CSE labels', from the rule they share with it (see
   #trackingTable .trackingTableHeaderLabel); only its placing is here. */
.atsHeaderSideLabel {
    line-height: 25px;
    padding-right: 6px;
    position: absolute;
    right: 0;
    white-space: nowrap;
}

.atsHeaderSideLabel--top {
    top: 0;
}

.atsHeaderSideLabel--bottom {
    top: 44px;
}

.trackingTable--noSpreads .atsHeaderSideLabel--bottom {
    top: 25px;
}

/* --- The CSE columns --------------------------------------------------------
   Set as the standings set their CSE: the grey the standings give every figure
   but the few they want compared, at regular weight in your own rows too. The
   week cell is .currentWeekCse; the season one is the .tb cell that is not the
   season wins. A column with nothing in it yet keeps the transparent ink
   .emptyColumnCell gives it in main.css. The season wins take the same grey
   but keep their own weight. */
#trackingTable td.currentWeekCse:not(.emptyColumnCell),
#trackingTable td.trackingTableNumbers.tb:not(.seasonWinCount):not(.emptyColumnCell) {
    color: var(--tracking-ink-3);
    font-weight: 400;
}

#trackingTable td.seasonWinCount:not(.emptyColumnCell) {
    color: var(--tracking-ink-3);
}

/* --- What highlighted rows share --------------------------------------------
   site.js marks a cell whose value is the same in every highlighted row, once
   two or more are highlighted, and it fades to the same strength as a cell in
   a row that is not highlighted - the one opacity is kept in
   --tracking-dim-opacity for both. The season cells (.tb) are left out here as
   they are there. */
#trackingTable {
    --tracking-dim-opacity: .4;
}

#trackingTable .trackingTableRow.compared > td.trackingMatchDimmed:not(.tb) {
    opacity: var(--tracking-dim-opacity);
}

/* --- Scores beside the team codes ---------------------------------------------
   A game with a result shows each team's score to the right of its code,
   quieter than the code. week-tracker.php puts the score in data-score and
   .showScore on both codes; site.js takes .showScore off while results are
   hidden and puts it back. A code without it - a game with no result yet, or
   any game while results are hidden - fills its column with the code centred,
   and shows no score.

   The score is drawn from data-score by a pseudo-element rather than written
   into the code's element: site.js reads these elements' text to match picks,
   and a pseudo-element is not part of it.

   With a score, the code's box - which carries the covered and push fills and
   the projection stripes - shrinks to the code and sits at the left of the
   column, so a fill covers the code and nothing else. The score is
   right-aligned 7px in from the column's right edge: the code box's 4px margin
   and 3px padding. It is placed against the whole matchup (.atsHeaderContainer
   is positioned) and given no top or bottom, which leaves it at its static
   position - centred on its code by the box's align-items. */
#trackingTable .atsHeaderContainer .teamInATSheader.showScore {
    justify-self: start;
    padding: 0 3px;
}

#trackingTable .atsHeaderContainer .teamInATSheader.showScore::after {
    color: var(--tracking-ink-3);
    content: attr(data-score);
    position: absolute;
    right: 7px;
    white-space: nowrap;
    font-size: var(--fs-small3);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    letter-spacing: 0;
    opacity: .8;
}

/* A covered code and its score are one unit: the code's box spans the column,
   so the --c-win fill runs from the code to the score, and the score joins the
   box's flow at its right end - which is where the other scores sit, 7px in
   from the column's edge. Both are set in --c-win-text, at full strength. */
#trackingTable .atsHeaderContainer .teamInATSheader.showScore.covered {
    background-color: var(--c-win);
    color: var(--c-win-text);
    justify-content: space-between;
    justify-self: stretch;
}

#trackingTable .atsHeaderContainer .teamInATSheader.showScore.covered::after {
    color: var(--c-win-text);
    opacity: 1;
    position: static;
}

/* --- The favourite's mark beside each spread -------------------------------
   A play triangle, which points right, turned counterclockwise: 90 degrees for
   an away favourite, so it points up, and 270 for a home favourite, so it
   points down - towards the favourite while the away team sits on top, as it
   does on the Board.

   It is Font Awesome's fa-play drawn as an SVG with its corners made sharp: the
   glyph's three straight edges, in its own 384 x 512 grid, run on to where
   they meet instead of turning in rounded corners - so the points reach a
   little past the glyph's rounded tips, and every edge is where it was. The
   box is the glyph's: .75em by 1em, plus the .24px the spread's letter spacing
   put after the glyph, which is part of the box the turn is centred on. The
   points overflow the box, so it does not clip them. */
.spreadFavoriteMark{
    box-sizing: content-box;
    display: block;
    font-size: 6px;
    height: 1em;
    margin-right: 4px;
    overflow: visible;
    padding-right: .24px;
    width: .75em;
}

/* Each is nudged 2px the way it points - up for an away favourite, down for a
   home one - a relative shift, so the number beside it does not move. */
.spreadFavoriteMark--away {
    position: relative;
    top: -2px;
    transform: rotate(-90deg);
}

.spreadFavoriteMark--home {
    position: relative;
    top: 2px;
    transform: rotate(-270deg);
}