#picksBody{
    --my-picks-list-info-panel-width: 340px;
    --my-picks-list-column-gap: var(--g2);
    --my-picks-side-switch-duration: 280ms;
    --entry-select-offset: -22px;
    /* The multi-entry offset above is measured against the left caret, since
       that is the leftmost thing in the nav and so the piece that lines up
       with the table of games. With a single entry the carets are gone and
       the entry name itself is leftmost, so it needs an offset of its own -
       the caret's offset would drag the name out past the table's edge. */
    --entry-select-offset-single: 0px;
    --pick-width: 48px;
    --spread-size: var(--fs-small3);    
    --date-size: var(--fs-small4);
    --row-gap: 6px;
    /* A spread box in the vertical layout: the longest city it names ("San
       Francisco", 6.74em of its --fs-small1), the spread's 2.7em of --fs-big2,
       and the 6px gap, 12px of padding, and 2px border around them. The lock's
       offset reads it too. */
    --pick-vertical-spread-box-width: calc(6.9 * var(--fs-small1) + 2.7 * var(--fs-big2) + 20px);
    /* Room for the game info panel's shadow - 28px of blur either side of it -
       at the edges of the boxes below that clip sideways. Each one is padded out
       by this much and pulled back by the same in negative margin, so nothing
       inside moves and the box takes up the room it did, but the edge its clip
       cuts at is this far out. The clip itself stays: it is what hides the
       panel while it slides from one side of the games to the other. */
    --pick-shadow-room: 32px;

    box-sizing: border-box;
    margin-left: calc(-1 * var(--pick-shadow-room));
    margin-right: calc(-1 * var(--pick-shadow-room));
    padding-left: var(--pick-shadow-room);
    padding-right: var(--pick-shadow-room);
    width: calc(100% + 2 * var(--pick-shadow-room));
    overflow-x: clip;
    text-align: left;
    
}

/* By the page's column, not the window - see #leagueDashboardMain. 1500px of
   column is what a 1600px window used to leave beside the sidebar. */
@container dashboard-main (min-width: 1500px) {#picksBody{--pick-width: 60px; --spread-size: var(--fs-small1); --date-size: var(--fs-small3);}}

#pickSheet,
#pickSheetInner{
    width: 100%;
}

.dashboardPanel.dashboardPanel--mypicks{
    width: 100%;
    box-sizing: border-box;
    margin: inherit inherit 100px;
}

.myPicksLayout{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    justify-items: center;
    width: 100%;
}

/* The entry rail is a column of the page, not of the picks: it sits left of
   everything else - toolbar, picks and info panel alike - in a track of its own,
   so nothing it does can change the height or placement of anything beside it. */
/* Both tracks sized to their contents rather than the right one taking whatever
   is left, so the pair comes to the width of the rail plus the gap plus the games
   - and justify-content then centres that whole unit on the dashboard. With a 1fr
   content track the grid always filled the width, which pinned the rail to the
   left edge however much room the games actually needed. */
/* One row: the rail starts at the top of the left column, level with the top of
   the games. The actions that used to sit above it are now above the games. */
.myPicksLayout:has(> .pickEntryRailColumn){
    column-gap: var(--pick-rail-gap);
    /* The rail's track takes the width its names ask for, floored by the minimum
       above; the names' own max-width is what caps it. */
    grid-template-columns: minmax(var(--pick-rail-width-min), max-content) minmax(0, max-content);
    grid-template-rows: auto;
    justify-content: center;
    justify-items: start;
}

.myPicksLayout > .pickEntryRailColumn{
    grid-column: 1;
    grid-row: 1;
}

.myPicksLayout:has(> .pickEntryRailColumn) > *:not(.pickEntryRailColumn){
    grid-column: 2;
    grid-row: 1;
    /* Sized to the games rather than stretched to the track: a child at width:100%
       makes the track as wide as the space available, and centring the grid then
       centres that empty width instead of the thing a reader sees. */
    justify-self: start;
    width: auto;
}

.myPicksOptionsColumn,
.myPicksEntriesColumn{
    min-width: 0;
}

.myPicksEntriesColumn{
    grid-column: 1;
    box-sizing: border-box;
    /* Padded out and pulled back for the panel's shadow - see
       --pick-shadow-room on #picksBody. */
    margin-left: calc(-1 * var(--pick-shadow-room));
    margin-right: calc(-1 * var(--pick-shadow-room));
    overflow-x: clip;
    padding-bottom: 20px;
    padding-left: var(--pick-shadow-room);
    padding-right: var(--pick-shadow-room);
    width: calc(100% + 2 * var(--pick-shadow-room));
}

.myPicksOptionsColumn{
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    width: 100%;
}

@supports not (overflow: clip){
    #picksBody,
    .myPicksEntriesColumn{
        overflow-x: hidden;
    }
}

#entrySelector,
.pickToolbarControl{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    gap: 4px;
    white-space: nowrap;
    margin-right: 20px;
    position: relative;
}

.pickToolbarControlLabel{
    text-transform: uppercase;
    display: block;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    color: var(--c1);
}

.pickToolbarControl:has(.pickToolbarSelect:disabled){
    cursor: default;
}

.entrySelectorLabelRow{
    color: var(--c1);
    cursor: pointer;
    display: block;
    position: relative;
    text-align: center;
    transition: color 60ms linear, opacity 60ms linear;
    width: 100%;
}

.editEntryButtonIcon{
    font-size: 6pt;
    position: absolute;
    right: 32px;
    top: -2px;
}

.entrySelectorLabelRow:focus{
    outline: none;
}

.entrySelectorLabelRow:focus-visible{
    box-shadow: 0 0 0 2px rgba(15, 72, 128, .2);
}

.entrySelectorLabelRow.is-disabled{
    cursor: default;
    opacity: .35;
}

#entrySelectorDropdown,
.pickToolbarSelect{
/*    padding: 6px 12px;*/
/*    border-radius: 5px;*/
/*    background: var(--c-s1);*/
    font-family: var(--ff1);
    font-size: inherit;
    color: var(--c1);
    
    border: none;
    background: transparent;
    
    cursor: pointer;
    text-align: center;
    text-align-last: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

#entrySelectorDropdown::-ms-expand,
.pickToolbarSelect::-ms-expand{
    display: none;
}

#entrySelectorDropdown:disabled,
.pickToolbarSelect:disabled{
    cursor: default;
    opacity: .55;
}

.pickToolbarSelectShell{
    align-items: center;
    display: inline-flex;
    gap: 0;
    justify-content: flex-end;
    position: relative;
}

.pickToolbarControl .pickToolbarSelect{
    height: 100%;
    inset: 0;
    max-width: none;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 100% !important;
    z-index: 2;
}

.pickToolbarSelectDisplay{
    color: var(--c1);
    display: inline-block;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.3;
    max-width: 140px;
    overflow: hidden;
    pointer-events: none;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pickToolbarSelectShell .fa-caret-down{
    flex: 0 0 auto;
    height: auto;
    margin-left: 4px;
    pointer-events: none;
    width: auto;
    position: relative;
    top: 1px;
    font-size: 9pt;
}

.pickToolbarCustomDropdown{
    background: var(--c-s1);
    border: 1px solid rgba(23, 33, 54, .22);
    border-radius: var(--r2);
    box-shadow: 0 8px 22px rgba(23, 33, 54, .16);
    box-sizing: border-box;
    display: none;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    overflow: hidden;
    padding: 3px;
    position: fixed;
    z-index: 500;
}

.pickToolbarCustomDropdown.is-open{
    display: block;
}

.pickToolbarCustomOption{
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--r2);
    box-sizing: border-box;
    color: var(--c1);
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 7px 8px;
    text-align: center;
    width: 100%;
}

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

.pickToolbarCustomOption:focus{
    outline: none;
}

.pickToolbarSelect:disabled + .pickToolbarSelectCaret{
    opacity: .55;
}

.entryEditModalBackdrop{
    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: 300;
}

#leagueBody .entryEditModalBackdrop{
    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);
}

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

.entryEditModal{
    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;
    padding: 20px;
    width: min(360px, 100%);
}

.entryEditModalForm{
    display: grid;
    gap: 14px;
}

.entryEditModalTitle{
    color: var(--c1);
    font-family: var(--ff2);
    font-size: 15pt;
    line-height: 1.2;
    text-align: right;
}

.entryEditModalError{
    background: #fef2f2;
    border: 1px solid #e0a0a0;
    border-radius: 6px;
    color: #991b1b;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.35;
    padding: 10px 12px;
    text-align: right;
}

.entryEditModalField{
    display: grid;
    gap: var(--g1);
}

.entryEditModalLabel{
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    font-weight: var(--fw1);
    text-align: left;
    text-transform: uppercase;
}

.entryEditModalInput{
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    color: #333;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    padding: 10px 12px;
    width: 100%;
}

.entryEditModalActions{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.entryEditModalButton{
    appearance: none;
    -webkit-appearance: none;
    background: var(--c1);
    border: 0;
    border-radius: 6px;
    color: var(--c-s1);
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    min-width: 82px;
    padding: 10px 14px;
    text-transform: uppercase;
}

.entryEditModalButton--secondary{
    background: var(--c-s1);
    border: 1px solid var(--c1);
    color: var(--c1);
}

/* Entry Settings: a column, so the entry list below the blurb can scroll inside
   the modal's height while the title and the actions hold still. */
.pickEntrySettingsModal{
    display: flex;
    flex-direction: column;
    max-height: min(680px, calc(100vh - 80px));
    max-width: calc(100vw - 32px);
    min-height: 0;
    min-width: 220px;
    width: fit-content;
}

/* The modal takes focus itself as it opens, so that focus must not draw a ring
   the way a control's would. See focusFirstModalControl() in my-picks.php. */
.pickEntrySettingsModal:focus,
.pickEntrySettingsModal:focus-visible{
    outline: none;
}

/* Each option as wide as its own words. Every entry's row offers the same
   options, so the rows still line up above and below one another. */
#pickDefaultAllModalList .pickDefaultAllModalSegmentButton{
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
}

@media (max-width: 560px){
    .pickEntrySettingsModal{
        width: 100%;
    }
}

.pickDefaultAllModalStatus{
    display: none;
    flex: 0 0 auto;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.35;
    margin-bottom: 12px;
}

.pickDefaultAllModalStatus.is-visible{
    display: block;
}

.pickDefaultAllModalStatus.is-error{
    background: #fef2f2;
    border: 1px solid #e0a0a0;
    border-radius: var(--r2);
    color: #991b1b;
    padding: 9px 11px;
}

.pickDefaultAllModalList{
    box-sizing: border-box;
    /* One grid for every entry: the names in the first column, as wide as the
       longest name, and the pick options in the second. Each row lays its two
       parts straight into these columns (see .pickDefaultAllModalRow), so every
       name shows in full - the modal takes the grid's width - and every row's
       options start and end in the same place. Separate grids per row could not
       promise either: each sized itself, and the longest name's row overran.
       Only where the window leaves the modal too little room for that does the
       name column give way, ending names in an ellipsis rather than pushing
       the options out of sight. */
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    align-items: center;
    align-content: start;
    row-gap: 12px;
    padding-bottom: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* The list clips sideways because it scrolls, and its right edge sat exactly
       on the right border of the segmented rows. When that edge fell partway
       through a pixel the border was cut. The padding moves the clip edge just
       past it. On the left, the hover background around each name reaches 6px
       past the name, so the clip edge moves out that far too, and the matching
       negative margin keeps the list itself where it was. */
    margin-left: -6px;
    padding-left: 6px;
    padding-right: 2px;
    width: max-content;
    /* The 6px it is pulled left by is 6px the modal does not count when it
       sizes itself to the list, so the list may run that far past the modal's
       content box rather than be squeezed by it. */
    max-width: calc(100% + 6px);

    /* The scrollbar is replaced by the fades below, which say the same thing
       without spending a column of the modal's width or changing that width as
       a list grows past the fold. Both spellings are needed: the standard
       property for Firefox, the pseudo-element for WebKit and Blink. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* The fade is a mask on the scroller itself rather than a gradient laid over it.
   An overlay has to be positioned against the list's edges, and the only box
   available to hang one on was the whole modal body - blurb and all - so it
   painted over the blurb instead of over the top of the list. A mask is
   applied to the element's own box, does not scroll with the content inside it,
   and needs no extra element.

   Masking fades to transparent, which is the modal's white showing through, so
   the content dissolves into the panel rather than under a grey or black wash.

   Which ends are faded follows the scroll position - the classes are set on the
   list by syncSettingsScrollFades() in my-picks.php - so a list that fits is not
   masked at all, and neither end is softened when there is nothing past it to
   suggest. */
.pickDefaultAllModalList{
    --pick-settings-fade: 28px;
}

.pickDefaultAllModalList.is-scrollable-up{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pick-settings-fade));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pick-settings-fade));
}

.pickDefaultAllModalList.is-scrollable-down{
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 var(--pick-settings-fade));
    mask-image: linear-gradient(to top, transparent 0, #000 var(--pick-settings-fade));
}

/* Both ends at once needs the one gradient that fades at both, since a second
   mask-image would replace the first rather than combine with it. */
.pickDefaultAllModalList.is-scrollable-up.is-scrollable-down{
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--pick-settings-fade),
        #000 calc(100% - var(--pick-settings-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--pick-settings-fade),
        #000 calc(100% - var(--pick-settings-fade)),
        transparent 100%
    );
}

.pickDefaultAllModalRow{
    /* No box of its own: its name and its options go straight into the list's
       two columns. The row element stays for the page script, which finds an
       entry's controls through it. */
    display: contents;
}

.pickDefaultAllModalRow:last-child{
    border-bottom: 0;
}

.pickDefaultAllModalEntryNameWrap{
    align-items: stretch;
    align-self: stretch;
    display: flex;
    gap: var(--g1);
    justify-content: flex-start;
    margin-right: 12px;   /* the gap between the name's row and the pick buttons */
    min-width: 0;
    text-align: left;
}

/* The pen and, where it can be renamed, the name after it: one control, so one
   hover background and one click area take in both. It fills the row from the
   left up to the gap before the pick buttons, and the row's full height, so a
   click anywhere along it renames. The padding gives the hover background room
   around the pen, and the matching negative margin on the left keeps the pen
   where it would sit without it, flush with the blurb above. Only on the left:
   a negative right margin hid 6px of the name from the width its column is
   sized to, so the row with the longest name overran the modal. */
.pickDefaultAllModalEntryNameWrap .modalLabel{
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 7px;
    margin: 0 0 0 -6px;
    min-width: 0;
    padding: 3px 6px;
    white-space: nowrap;
}

/* The name on a single line, cut short only if the window is too narrow for
   it. */
.pickDefaultAllModalEntryNameText{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .modalLabel sets display:block, which overrides the [hidden] attribute, so
   the entry name needs this to actually hide while its input is being edited. */
.pickDefaultAllModalEntryNameWrap .modalLabel[hidden]{
    display: none;
}

.pickDefaultAllModalEntryName{
    color: #222;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.25;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*width: 180px;*/
}

.pickDefaultAllModalEntryNameInput{
    /* Takes the row the name did, so nothing beside it shifts entering edit mode. */
    align-self: center;
    border: 1px solid rgba(23, 33, 54, .22);
    border-radius: var(--r2);
    box-sizing: border-box;
    color: #222;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.2;
}

/* The name and its pen are the rename control, so it has to read as something
   you can click. A league that locks entry names renders the
   name without the role, and it keeps the plain text look. */
.pickDefaultAllModalEntryNameWrap .modalLabel[role="button"]{
    border-radius: var(--r2);
    cursor: pointer;
}

/* The pen before a name that can be renamed, to say so. */
.pickDefaultAllModalEntryNamePen{
    color: var(--c-text-muted);
    flex: 0 0 auto;
    font-size: 0.8em;
}

.pickDefaultAllModalEntryNameWrap .modalLabel[role="button"]:hover{
    background: rgba(23, 33, 54, .07);
}

.pickDefaultAllModalEntryNameWrap .modalLabel[role="button"]:focus-visible{
    outline: 2px solid var(--c2-a2);
    outline-offset: 2px;
}

.pickDefaultAllModalEntryNameWrap .modalLabel[aria-disabled="true"]{
    cursor: default;
    opacity: .45;
}

.pickDefaultAllModalSegmentedRow{
    justify-self: end;
}

.pickDefaultAllModalNativeSelect{
    display: none;
}

.pickDefaultAllModalSelect{
    appearance: auto;
    -webkit-appearance: menulist;
    background: var(--c-s1);
    border: 1px solid rgba(23, 33, 54, .18);
    border-radius: var(--r2);
    color: var(--c1);
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    justify-self: end;
    min-height: 34px;
    min-width: 118px;
    padding: 0 8px;
}

@media (max-width: 560px){
    .pickDefaultAllModalList{
        width: 100%;
    }

    .pickDefaultAllModalRow{
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
    }

    .pickDefaultAllModalSegmentedRow{
        justify-self: start;
    }
}

.ring{
    z-index: 10000;
    width: 10px;
    height: 10px;
    margin: 20px 30px 20px 30px;
    display: inline-block;
    position: fixed;
    border: 3px solid blue;
    -webkit-border-radius: var(--r-round);
    
}

.pick{
    border: calc(var(--pick-width)/24) solid;
    border-radius: var(--r2);
    width: var(--pick-width);
    height: fit-content;
    line-height: 1;
    
	opacity: .33;
    filter: saturate(.1);
    margin: 0;
    
    text-align: center; /*centers text horizontally*/
    display: inline-block;  /*sets circles to appear on same line, then form block when out of room*/
    
    font-family: var(--ff1);
    font-size: var(--fs-body);
    font-weight: var(--fw2);
    
    cursor: pointer;
    position: relative;
    transform-origin: center center;
    box-sizing: border-box;
}

.pick:active{
    transform: scale(.97);
}

#makePicks input[type=radio]:not(:checked) + .pickOptionWrap:has(.pick:hover) .pick{    
/*    transform: scale(1.05);*/
    opacity: .6;
    transition: opacity 60ms linear;
    z-index: 5;
}

.pick--logos{
    display: inline-block;
    height: auto;
    line-height: 0;
    padding: 0;
}

.pick--teamlogos{
    border: none;
    background: none !important;
    width: 58px;
}

/* Combo: the team code across the top of a Squares tile, on a see-through band
   so the art shows behind it. The band follows the tile's top corners, which
   are square when a spread box sits above the tile. */
.pickComboCode{
    background: color-mix(in srgb, var(--c1) 45%, transparent);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--c-s1);
    font-family: var(--ff1);
    font-size: var(--fs-small3);
    font-weight: var(--fw2);
    left: 0;
    line-height: 1;
    padding: 2px 0;
    position: absolute;
    right: 0;
    top: 0;
}

/* The logo takes the tile's rounding itself instead of the tile clipping it with
   overflow: hidden. Safari on macOS 27 stops drawing the border of a tile that
   clips its content and also carries a filter, which is every unselected tile. */
.pickTeamLogo{
    border-radius: inherit;
    display: block;
    height: auto;
    width: 100%;
}

.pick:not(.pick--logos){
    padding-block: 18px;   
}

/* A block of its own, so the two teams stack. They used to be inline-blocks kept
   on separate lines only by the vs/@ row between them; with that row gone they
   sat side by side. fit-content and auto margins keep the wrap the tile's size
   and centred, which the lock glyph relies on - it centres on the wrap's
   width. */
.pickOptionWrap{
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    transition: transform 120ms ease;
    width: fit-content;
}

/* The kickoff time now sits under the games, so the top row starts at the top
   of the card and this holds only the gap to the row below it. */
.pickOptionWrap--top{
    margin-bottom: var(--row-gap);
}

.pickOptionWrap--bottom{
}

/*.pickHomeDot,
.pickAwayDot{
    color: var(--c-s1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    width: 13px;
    height: 13px;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 1 !important;
    z-index: 2;
    isolation: isolate;
}

.pickHomeDot::after,
.pickAwayDot::after{
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: black;
    clip-path: circle(100% at 100% 0);
    opacity: 1 !important;
    z-index: -1;
}

.pickAwayDot{
    color: var(--c1);
}

.pickAwayDot::after{
    background: var(--c-s1);
}*/

.test{
    padding: 50px;
    top: -25px;
    left: -25px;
}

/*.pick:after{
    content:"";
    padding: 50px;  
    position: absolute;
    left: -25px;
    top: -25px;
}*/

/*
.pick:active{
    -webkit-transform: scale(.95);
    transform: scale(.95);
}
*/

.pick:visited{
    opacity:1;
}

/* Each team's spread, from that team's side, in a box joined to its tile. The
   Spreads setting puts it above or below the tile (.pickSpreadBox--above or
   --below). The tile gives up its rounded corners on the joined edge and the box
   takes them on the outer edge, so the pair reads as one piece. The box holds its
   full strength throughout: the tile dims and drains its colour on a team that is
   not the pick, but a spread is a number to be read, and reads the same either
   way. Every box is the same, whichever team it belongs to: a --c-s1 fill with
   --c1 type and a --c1 border. */
.pickSpreadBox{
    background: var(--c-s1);
    box-sizing: border-box;
    color: var(--c1);
    display: block;
    font-family: var(--ff1);
    font-size: var(--spread-size);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw2);
    line-height: 1;
    margin: 0 auto;
    /* The same two values .pick carries, so a box is as faint as the tile it is
       joined to and comes up with it - see the rules below, which raise the pair
       together. */
    filter: saturate(.1);
    opacity: .33;
    padding: 2px 0;
    text-align: center;
    /* The tile's rendered width: .pick is content-box, so its border sits
       outside --pick-width on both sides. */
    width: var(--pick-width);
    border: 2px solid var(--c1);
}

/* A box above its tile comes just before the tile's radio, or before the tile
   itself on a locked card's bottom row, which has no field of its own. A box
   below its tile comes just after the tile. The values are .pick's own. A
   locked game's tiles are disabled radios in markup (role="radio"), so the pick
   there is the tile marked aria-checked, lit exactly as a checked one is. */
.pickSpreadBox--above:has(+ input[type=radio]:checked),
#makePicks input[type=radio]:checked + .pickOptionWrap + .pickSpreadBox--below,
.pickSpreadBox--above:has(+ input + .pickOptionWrap .pick[aria-checked="true"]),
.pickSpreadBox--above:has(+ .pickOptionWrap .pick[aria-checked="true"]),
.pickOptionWrap:has(.pick[aria-checked="true"]) + .pickSpreadBox--below{
    filter: saturate(1);
    opacity: 1;
}

.pickSpreadBox--above{
    border-radius: var(--r2) var(--r2) 0 0;
}

/* The team's name, which only the vertical layout shows - see
   .pickEntrySections--vertical .pickSpreadBoxName. */
.pickSpreadBoxName{
    display: none;
}

.pickEntrySections--vertical .pickSpreadBox{
    background: var(--c1-a2);
}

.pickSpreadBox--below{
    border-radius: 0 0 var(--r2) var(--r2);
}

/* The Squares tiles take --c1 for their border rather than each team's border
   colour from team-colors.css, so a tile and the spread box joined to it are
   edged alike. Three classes, to outrank .pick.teamColorPick there whichever
   stylesheet loads last. */
.pick.pick--logos.teamColorPick{
    border-color: var(--c1);
}

/* No border along the straight edge, the one joined to the tile: the tile's own
   border draws that line. Doubled up with the class so it outranks the border
   shorthand in .pickSpreadBox. */
.pickSpreadBox.pickSpreadBox--above{
    border-bottom-width: 0;
}

.pickSpreadBox.pickSpreadBox--below{
    border-top-width: 0;
}


/* Below its tile, the top row's box is the last thing in that row, so it holds
   the gap to the bottom row that the tile holds otherwise. */
.pickSpreadBox--top.pickSpreadBox--below{
    margin-bottom: var(--row-gap);
}

/* The entry rail, one column down the left of the picks, the rail's fixed
   width: its toolbar, then the tabs. The toolbar is as tall as the one over the
   games and the gap under it is the same, so the tabs start level with the
   games. The column is what sticks as the page scrolls, so the tabs stay in
   reach of the games they switch. */
.pickEntryRailColumn{
    align-self: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--pick-rail-gap);
    max-width: var(--pick-rail-width-max);
    min-width: var(--pick-rail-width-min);
    position: sticky;
    top: 12px;
    width: 100%;
}

/* The toolbar over the games: Layout, the one view setting left, at its left
   end, and the save status with, where the league has one, the pick count at
   its right. It spans the games' column only; the rail has a toolbar of its own
   beside it (.pickEntryRailHeader), the same height and tray, with the columns'
   gap between the two. */
/* Two columns: Layout at the left, and the right end - Take bye week, where the
   league has a bye - at the right. */
.pickGridToolbar{
    align-items: center;
    background: var(--c-s2);
    border-radius: var(--r2);
    box-sizing: border-box;
    display: grid;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    gap: 4px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    line-height: 1.3;
    margin-bottom: var(--pick-rail-gap);
    min-height: var(--pick-top-band-height);
    padding: 0 16px;
    width: 100%;
}

/* Vertical puts the game info panel beside the games, in the same column, and
   the toolbar runs across both, ending at the panel's right edge.

   contain: inline-size keeps the toolbar's own contents out of the column's
   width, so the column is exactly as wide as the games and the panel and the
   toolbar can never be wider than that. Without it a long save status widened
   the column. */
.myPicksLayout--vertical .pickGridToolbar{
    contain: inline-size;
    width: 100%;
}

/* Built to match the save status beside it: the same family, size, line height,
   and 32px slot, and the same two voices - quiet and muted once every required
   pick is in, red and .pickSaveStatus's weight while the entry is short. */
.pickEntryInfoBarCount{
    align-items: center;
    color: var(--c-red);
    display: flex;
    flex: 0 0 auto;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw2);
    line-height: 1.3;
    min-height: 32px;
    white-space: nowrap;
}

/* Every required pick is in: nothing to do, so it reads as quietly as "All
   picks saved" does. */
.pickEntryInfoBarCount--complete{
    color: var(--c-text-muted);
    font-weight: var(--fw1);
}

.pickGameCard--spreadBoxes .pickOptionWrap--top{
    margin-top: 0;
}

/* Inside and Bottom put the top tile first in the card, with no box above it to
   hold the gap to the row below. */
.pickGameCard--spreads-inside .pickOptionWrap--top,
.pickGameCard--spreads-bottom .pickOptionWrap--top{
    margin-bottom: 0;
}

/* The tile's joined edge loses its rounding: the top of a tile with its box
   above, the bottom of a tile with its box below. */
.pickGameCard--spreads-outside .pickOptionWrap--top .pick,
.pickGameCard--spreads-top .pickOptionWrap--top .pick,
.pickGameCard--spreads-inside .pickOptionWrap--bottom .pick,
.pickGameCard--spreads-top .pickOptionWrap--bottom .pick{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.pickGameCard--spreads-inside .pickOptionWrap--top .pick,
.pickGameCard--spreads-bottom .pickOptionWrap--top .pick,
.pickGameCard--spreads-outside .pickOptionWrap--bottom .pick,
.pickGameCard--spreads-bottom .pickOptionWrap--bottom .pick{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* The full-colour logos have no border and a fixed width of their own. */
.pickGameCard--spreadBoxes:has(.pick--teamlogos) .pickSpreadBox{
    width: 58px;
}

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

/* The pick, at full strength and colour - on a locked game too, where the tile
   is a disabled radio marked aria-checked rather than a checked input. The side
   not taken keeps .pick's own faded look either way. */
#makePicks input[type=radio]:checked + .pickOptionWrap .pick,
#makePicks .pick[aria-checked="true"]{
    opacity: 1;
    filter: saturate(1);
}

/* A locked game's tiles cannot be changed, so they neither invite a press nor
   answer one. */
.pick[aria-disabled="true"]{
    cursor: default;
}

.pick[aria-disabled="true"]:active{
    transform: scale(1);
}

/* ── A team and its spread box as one control ─────────────────────────────────
   Pointing at either piece lights up the tile, and pressing either shrinks both.
   A spread box on a game that can still be picked is a label for the team's
   radio, so it picks the team too. Only the tile answers a hover now: the box is
   at full strength whatever the state, so it has nothing to lift to. */
#makePicks label.pickSpreadBox{
    cursor: pointer;
    transition: opacity 60ms linear;
}

/* The spread box, when the pointer is on it or on its tile: the same .5 the
   tile lifts to, so the two stay level. */
#makePicks label.pickSpreadBox--above:hover:has(+ input[type=radio]:not(:checked)),
#makePicks .pickSpreadBox--above:has(+ input[type=radio]:not(:checked) + .pickOptionWrap .pick:hover),
#makePicks input[type=radio]:not(:checked) + .pickOptionWrap + label.pickSpreadBox--below:hover,
#makePicks input[type=radio]:not(:checked) + .pickOptionWrap:has(.pick:hover) + .pickSpreadBox--below{
    opacity: .6;
    transition: opacity 60ms;
}

/* The tile, when the pointer is on its spread box. */
#makePicks .pickSpreadBox--above:hover + input[type=radio]:not(:checked) + .pickOptionWrap .pick,
#makePicks input[type=radio]:not(:checked) + .pickOptionWrap:has(+ .pickSpreadBox--below:hover) .pick{
    opacity: .5;
    transition: opacity 100ms;
    z-index: 5;
}

/* Pressing the spread box shrinks the tile, and pressing the tile shrinks the
   box. */
#makePicks .pickSpreadBox--above:active + input[type=radio] + .pickOptionWrap .pick,
#makePicks input[type=radio] + .pickOptionWrap:has(+ .pickSpreadBox--below:active) .pick,
#makePicks label.pickSpreadBox:active,
#makePicks .pickSpreadBox--above:has(+ input[type=radio] + .pickOptionWrap label.pick:active),
#makePicks input[type=radio] + .pickOptionWrap:has(label.pick:active) + .pickSpreadBox--below{
    transform: scale(.97);
}

/* Each piece shrinks toward the edge the two share, so that edge stays where it
   is and no gap opens between them. */
.pickGameCard--spreadBoxes .pickSpreadBox--above{
    transform-origin: center bottom;
}

.pickGameCard--spreadBoxes .pickSpreadBox--below{
    transform-origin: center top;
}

.pickGameCard--spreads-outside .pickOptionWrap--top .pick,
.pickGameCard--spreads-top .pickOptionWrap--top .pick,
.pickGameCard--spreads-inside .pickOptionWrap--bottom .pick,
.pickGameCard--spreads-top .pickOptionWrap--bottom .pick{
    transform-origin: center top;
}

.pickGameCard--spreads-inside .pickOptionWrap--top .pick,
.pickGameCard--spreads-bottom .pickOptionWrap--top .pick,
.pickGameCard--spreads-outside .pickOptionWrap--bottom .pick,
.pickGameCard--spreads-bottom .pickOptionWrap--bottom .pick{
    transform-origin: center bottom;
}

.pickSaveActions{
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--g1);
    margin-left: auto;
}

.pickSaveActions #savePicksButton{
    margin-left: 0;
    white-space: nowrap;
}

/* Cancel Changes is a plain outlined button, so .btn-action and .btn-ghost in
   main.css carry the whole appearance including the muted disabled state. It
   sits before Update in the markup, which puts it to the left in both the
   inline-flex row of the single-entry view and the grid row of the tabbed view,
   so nothing here has to reorder it. The page script enables it only while picks
   are dirty - see cancelPickChangesButton in my-picks.php. */
.pickCancelChangesButton{
    white-space: nowrap;
}



.pickToolbarActionButton{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: var(--r3);
    color: var(--c-s1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    text-transform: uppercase;
    background-color: var(--c1);
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 60ms ease, border-color 60ms ease, color 60ms ease, transform 60ms ease, opacity 60ms ease;
}

.pickToolbarActionButton:active:not(:disabled){
    transform: scale(.98);
}

.pickToolbarActionButton:disabled{
    opacity: .5;
    cursor: default;
}

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

.chosen{
    font-family: var(--ff1);
    font-weight: bolder;
}

.spread{
    float: right;
    margin-left: 0px;
    text-align: center;
    font-family: var(--ff1);
}

.pickGameCard{
    /* The blank line between the kickoff time and the top team, and the one
       under the site indicator on a locked card, were both empty <br> lines:
       one line of the card's own text. 1lh is that same height asked for
       directly, so the spacing survives at any pixel ratio. Change it here and
       both gaps move together. */
    --pick-card-row-gap: 1lh;
    
    /* How far the kickoff hairline reaches past its own label to meet the next
       one - see .pickDateLabel below. It is the card's padding on whichever axis
       the games run along: the sides here, the top and bottom in the vertical
       layout, and 3px in both. */
    --pick-card-hairline-reach: 3px;

    display: inline-block;
    font-size: var(--fs-body);
    text-align: center;
    padding: 0 var(--pick-card-hairline-reach);
    cursor: default;
    position: relative;
    vertical-align: top;
    line-height: 0;
}

.pickGameCard:not(.pickGameCard ~ .pickGameCard){
    padding-left: 0;
}

/* Away and Home, once for the whole board, hung off the first game's two tiles
   so they follow the tiles wherever they sit. They are row headers, not content,
   so they take the rail header's quiet voice and stay below the spreads in
   weight. They sit in the tile's wrap rather than in the tile or its spread box,
   because both of those fade on the side that is not the pick.

   Each is centred on its team as a whole - the tile and its spread box together
   - rather than on the tile alone. The wrap is the tile, so the label starts at
   the tile's centre and moves half a box's length toward the box.

   Horizontal: in a gutter left of the first column, right-aligned 8px from it.
   The box is above the top tile and below the bottom one; it is its spread's
   one line, 2px of padding above and below, and one 2px border. */
.pickEntryCards:has(.pickSideLabel){
    padding-left: 44px;
}

.pickSideLabel{
    --pick-side-label-shift: calc((var(--spread-size) + 6px) / 2);
    color: var(--c-text-muted);
    font-family: var(--ff1);
    font-size: var(--fs-small3);
    font-weight: var(--fw2);
    letter-spacing: var(--ls1);
    line-height: 1.2;
    pointer-events: none;
    position: absolute;
    right: calc(100% + 8px);
    text-transform: uppercase;
    top: calc(50% - var(--pick-side-label-shift));
    transform: translateY(-50%);
    white-space: nowrap;
}

.pickSideLabel--bottom{
    top: calc(50% + var(--pick-side-label-shift));
}

/* Vertical: above the two columns, each centred over its team - the box left of
   the away tile, and right of the home one, a box's width across. */
.pickEntrySections--vertical .pickEntryCards:has(.pickSideLabel){
    padding-left: 0;
    padding-top: calc(1.2 * var(--fs-small3) + 6px);
}

.pickEntrySections--vertical .pickSideLabel{
    --pick-side-label-shift: calc(var(--pick-vertical-spread-box-width) / 2);
    bottom: calc(100% + 6px);
    left: calc(50% - var(--pick-side-label-shift));
    right: auto;
    top: auto;
    transform: translateX(-50%);
}

.pickEntrySections--vertical .pickSideLabel--bottom{
    left: calc(50% + var(--pick-side-label-shift));
}

/* The first game of each kickoff window after the first stands 6px apart from
   the game before it: across the page here, down it in the vertical layout. See
   $windowStartTimestamps in my-picks.php for what a window is. */
.pickGameCard--windowStart{
    margin-left: 12px;
}

.pickEntrySections--vertical .pickGameCard--windowStart{
    margin-left: 0;
    margin-top: 6px;
}

/* Marks the game the info panel is showing: a dot centred over its column, clear
   of the card's top edge, where the rule drawn under the card used to be. It
   hangs outside the card because the card keeps no padding of its own to sit in
   - the two ancestors above it clip horizontally only, so it is not cut off. */
.pickGameCardMarker{
    display: none;
    bottom: calc(100% + 6px);
    /* With the matchup badges, above everything else among the games - see
       .matchupBadge. */
    z-index: 10;
    color: var(--c1);
    font-size: 8px;
    left: 50%;
    line-height: 1;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%);
}

.pickGameCard:nth-child(even){
    /*background: black;
    /*border: 1px solid var(--c1);*/
    border-radius: 0;
}

.pickGameCard:hover{
    border-radius: var(--r3);
}

/* Shown for the game under the pointer, and for the game the info panel is
   showing - which is the one it stays on once the pointer has left. See
   syncPickInfoActiveCard() in site.js. */
.pickGameCard:hover .pickGameCardMarker,
.pickGameCard--infoActive .pickGameCardMarker{
    opacity: 1;
}

.editListEntryName{
    font-size: 8pt;
    color: var(--c1-a4);
    transform: translateX(-3px);
}

.editListEntryName:hover{
    color: var(--c1);
}

#jack{
    display: table;
    width: 100%;
    border: 1px solid red;
    text-align: center;
    padding-top: 10px;
}

/*div that holds picks before they're made*/
#pickSheet{
    width: auto;
    text-align: center;
    position: relative;
    border-radius: var(--r3);
/*    background: linear-gradient(180deg, rgba(15, 72, 128, 1) 0%, rgba(188, 198, 204, .5) 50%);*/
    /*background: linear-gradient(360deg, rgba(4, 74, 84, 0.5), rgba(255, 255, 255, 0.5));*/
    
    
    /*background: rgba(0,0,0,0.1);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 10%, transparent 50%);
    -webkit-background-size: 6px 6px;*/
    
    /*background: url(https://upload.wikimedia.org/wikipedia/en/thumb/7/7f/Philadelphia_Eagles_primary_logo.svg/640px-Philadelphia_Eagles_primary_logo.svg.png) no-repeat, linear-gradient(141deg, white 0%, #044A54 50%, #044A54 100%);
    /*background: url(https://upload.wikimedia.org/wikipedia/en/thumb/7/7f/Philadelphia_Eagles_primary_logo.svg/640px-Philadelphia_Eagles_primary_logo.svg.png) no-repeat, linear-gradient(141deg, white 0%, #044A54 50%, white 100%);*/
    

/*    border-top: 5px double black;*/
    


/*
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom: 4px solid white;
    border-right: 4px solid white;
*/
    /*border-left: 4px solid #133663;
    border-top: 4px solid #133663;
    /*border-radius: 100%;*/
    
/*    padding: 60px 0 50px;*/
}

#makePicks{
    font-size: 0;
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
}

.pickEntrySections{
    display: block;
}

.pickEntryTabLayout{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.pickEntryTabLayout--tabs{
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    justify-items: stretch;
    width: fit-content;
}

.pickEntryTabContent{
    min-width: 0;
    /*
    border-top-left-radius: var(--r3);
    border-bottom-left-radius: var(--r3);
    */
    
}

.pickEntryTabLayout--tabs .pickEntryTabContent{
    display: grid;
    justify-items: center;
    width: 100%;
}

.pickTabbedEntryToolbar{
    align-items: center;
    box-sizing: border-box;
    display: grid;
    gap: var(--g2);
    justify-content: center;
    justify-items: center;
    width: fit-content;
    margin: 0 auto;
    padding: 20px;
    padding-right: 30px;
    font-size: var(--fs-body);
    background: var(--c1-a2);
    /*border: 1px solid var(--c1);*/
    border-radius: var(--r2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.pickTabbedEntryTitle{
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    font-weight: var(--fw3);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.pickTabbedEntryControlsRow{
    align-items: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
}

.pickTabbedEntryField{
    align-items: center;
    display: grid;
    gap: 4px;
    justify-items: center;
    min-width: 0;
}

/* Each field sizes to its own contents and is never shrunk by the row. The
   entry select is content-sized, so a shrunken field would not shrink with it:
   the nav is a centered grid item, so it keeps its max-content width and spills
   out of the narrowed field, and the Default Picks control — placed against the
   field's shrunken edge — then paints on top of it. If the row runs out of room
   the fields wrap onto a second line instead of colliding. */
/* No offset needed here: the eyebrow is out of flow, so the name field is the
   entry select alone and the row centres the two selects against each other on
   its own. */

.pickTabbedEntryControlsRow > .pickTabbedEntryField{
    flex-shrink: 0;
}

.pickTabbedEntryField--default .pickToolbarInlineLabel{
    box-sizing: border-box;
    padding-left: 24px;
    text-align: center;
    width: 100%;
}

.pickTabbedEntryNav{
    align-items: center;
    display: flex;
    /* No gap: the carets are nudged over the select with a transform instead,
       which keeps the 8px overlap without widening the nav. */
    gap: 0;
    justify-content: flex-start;
    min-width: 0;
    margin-left: var(--entry-select-offset);
}

/* Single entry: the name is what has to align with the table, so it takes the
   single-entry offset instead. The eyebrow above it is not affected - with
   one entry its position is measured off the rendered name by
   centreTabbedEntryEyebrow() in my-picks.php, so it follows the name here. */
.pickTabbedEntryNav--single{
    margin-left: var(--entry-select-offset-single);
}

/* The name field is the positioning context for the dots beneath it. */
.pickTabbedEntryField--name{
    position: relative;
}

/* The entry's place in the member's own list, above the entry select. It stands
   where the position dots used to, and says the same thing in words - so unlike
   the dots it stays readable at a glance however many entries there are.

   Out of flow, exactly as those dots were. In flow it was a real grid row of
   .pickTabbedEntryField, so it added its own height plus the field's gap to the
   left half of the toolbar - and since that half is centred against the right
   half, the two stopped lining up. A label about the select should not change
   the height of the bar the select sits in. */
.pickTabbedEntryEyebrow{
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(calc(-50% + var(--entry-select-offset)/2));
    color: var(--c-s4);
    font-family: var(--ff1);
    font-size: var(--fs-small3);
    font-weight: var(--fw2);
    letter-spacing: var(--ls1);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* With a single entry the gear rides in the nav, so centring the eyebrow in its
   field would centre it over the name and the button together. It is centred on
   the name itself instead.

   The left offset is written by centreTabbedEntryEyebrow() in my-picks.php
   rather than being a number here: the name sits inside the custom select's
   shell, which is wider than the text and varies with the entry, so there is no
   fixed correction this file could state. The class is set server-side by the
   same condition that decides where the gear goes. */
.pickTabbedEntryEyebrow--withGear{
    text-align: center;
}

.pickToolbarInlineLabel{
    font-family: var(--ff1);
    color: var(--c1);
    font-size: var(--fs-small1);
    font-weight: var(--fw3);
    
    /*width: 200px;*/
    flex: 0 0 auto;
    line-height: 1;
    white-space: nowrap;
}

#pickTabbedEntrySelect{
    /*width: 500px;*/
    transform: translateY(-1px);
    cursor: pointer;
}

#pickTabbedEntrySelect:hover{
}

#entryDefaultPick{
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

/* Keep the intended width once the native select is replaced by the
   custom .selectMenu button. */
.selectMenuField:has(#pickTabbedEntrySelect){
    width: 220px;
}

.selectMenuField:has(#entryDefaultPick){
    width: 120px;
}

.pickTabbedEntrySelectControl,
.pickTabbedDefaultControl,
.pickEntryListDefaultControl{
    align-items: center;
    flex-direction: row;
    gap: 0;
    margin-right: 0;
    min-width: 0;
}

.pickDefaultSelectGroup{
    align-items: center;
    display: inline-flex;
    gap: 0;
    min-width: 0;
}

.pickDefaultSelectGroup--tabbed{
    margin-left: auto;
}

.pickTabbedEntryControlsRow .pickDefaultSelectGroup--tabbed{
    margin-left: 0;
}

.pickDefaultSelectGroup--entryList{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-left: auto;
}

.pickDefaultInfoButton{
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--r2);
    color: var(--c1);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 22px;
    font-size: var(--fs-small1);
    height: 22px;
    width: 22px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 60ms linear;
}

/* In the Single Entry view the info button sits to the right of the select, so
   its spacing goes on the other side. */
.pickDefaultSelectGroup--tabbed .pickDefaultInfoButton{
    margin-left: 4px;
    margin-right: 0;
}

/* The settings gear follows the info circle in this view. It keeps the button
   styling it had in the actions bar and takes only the spacing that separates it
   from the glyph before it. */

.pickDefaultInfoButton:hover,
.pickDefaultInfoButton:focus-visible,
.pickDefaultInfoButton[aria-expanded="true"]{
    background: var(--c1-a2);
    outline: none;
}

.pickDefaultViewAllButton{
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: var(--c1);
    border: 0;
    border-radius: var(--r2);
    box-sizing: border-box;
    color: var(--c-s1);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    height: 31px;
    justify-content: center;
    line-height: 1;
    padding: 0 11px;
    white-space: nowrap;
}

.pickDefaultViewAllButton:hover,
.pickDefaultViewAllButton:focus-visible,
.pickDefaultViewAllButton[aria-expanded="true"]{
    background: #244761;
    outline: none;
}

.pickDefaultInfoTooltip{
    background: var(--c-s1);
    border: 1px solid rgba(23, 33, 54, .18);
    border-radius: var(--r3);
    box-shadow: 0 14px 32px rgba(23, 33, 54, .18);
    box-sizing: border-box;
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.35;
    max-width: 300px;
    padding: 10px 12px;
    position: fixed;
    text-align: left;
    opacity: 0;
    transform: translateX(-14px);
    will-change: transform, opacity;
    width: max-content;
    z-index: 600;
}

.pickDefaultInfoTooltip[hidden]{
    display: none;
}

.pickDefaultInfoTooltip.is-visible{
    opacity: 1;
    transform: translateX(0);
}

.pickDefaultInfoTooltip.is-opening{
    animation:
        pickDefaultInfoTooltipOpenTransform 190ms cubic-bezier(.2, .8, .2, 1) both,
        pickDefaultInfoTooltipOpenOpacity 190ms cubic-bezier(.2, .8, .2, 1) both;
}

.pickDefaultInfoTooltip.is-closing{
    pointer-events: none;
    animation:
        pickDefaultInfoTooltipCloseTransform 135ms cubic-bezier(.4, 0, .2, 1) both,
        pickDefaultInfoTooltipCloseOpacity 135ms cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes pickDefaultInfoTooltipOpenTransform {
    0% {
        transform: translateX(-14px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes pickDefaultInfoTooltipOpenOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pickDefaultInfoTooltipCloseTransform {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-14px);
    }
}

@keyframes pickDefaultInfoTooltipCloseOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pickDefaultInfoTooltip.is-opening,
    .pickDefaultInfoTooltip.is-closing{
        animation-duration: 1ms;
    }
}

.pickTabbedEntryToolbar .pickToolbarSelectShell,
.pickEntrySectionHeader .pickEntryListDefaultSelectShell{
    background: var(--c-s1);
    border: 1px solid rgba(23, 33, 54, .18);
    border-radius: var(--r2);
    box-sizing: border-box;
    cursor: pointer;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
}

.pickTabbedEntrySelectShell{
    display: inline-grid;
    grid-template-columns: max-content auto;
    width: auto;
}

.pickTabbedEntrySelectSizer{
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    grid-column: 1;
    grid-row: 1;
    line-height: 1.3;
    pointer-events: none;
    visibility: hidden;
    white-space: nowrap;
}

.pickTabbedDefaultSelectShell,
.pickEntryListDefaultSelectShell{
    min-width: 108px;
}

.pickTabbedEntryToolbar .pickToolbarSelectDisplay,
.pickEntrySectionHeader .pickToolbarSelectDisplay{
    max-width: none;
    min-width: 0;
    width: 100%;
}

.pickTabbedEntrySelectControl .pickToolbarSelectDisplay{
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    width: 100%;
}

.pickTabbedEntrySelectShell .fa-caret-down{
    grid-column: 2;
    grid-row: 1;
}

.pickTabbedDefaultControl .pickToolbarSelectDisplay,
.pickEntryListDefaultControl .pickToolbarSelectDisplay{
    text-align: center;
}

.pickTabbedEntryStep{
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--c1-a4);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: var(--r2);
    font-size: 10px;
    justify-content: center;
    line-height: 1;
    overflow: visible;
    margin: 0 12px;
    position: relative;
    transition: all 60ms linear;
}

.pickTabbedEntryStep::before{
    background: transparent;
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: auto;
    position: absolute;
    z-index: 0;
}

.pickTabbedEntryStep--previous::before{
    left: auto;
    right: 0;
    width: 18px;
    height: 32px;
    transform: translateX(-9px);
}

.pickTabbedEntryStep--next::before{
    left: 0;
    right: auto;
    width: 18px;
    height: 32px;
    transform: translateX(9px);
}

.pickTabbedEntryStep > i{
    position: relative;
    z-index: 1;
}

/* The carets overlap the select by 8px on each side. This is done with a
   transform rather than a negative margin: a negative margin makes the nav's
   box narrower than the children it contains, which relies on the margins and
   the gap cancelling out exactly. They do in Chrome; in other engines the
   caret escapes the nav, and the Default Picks control — laid out against the
   nav's under-sized box — lands on top of the entry select. A transform is
   purely visual, so the nav always measures its full contents. */
/* With a single entry in the league there is nothing to step between, so the
   carets are dropped from the layout entirely rather than shown disabled.
   The modifier is set server-side on the same count the entry dots use. */
.pickTabbedEntryNav--single .pickTabbedEntryStep--previous,
.pickTabbedEntryNav--single .pickTabbedEntryStep--next{
    display: none;
}

.pickTabbedEntryNav .pickTabbedEntryStep--previous{
    transform: translateX(8px);
}

.pickTabbedEntryNav .pickTabbedEntryStep--next{
    transform: translateX(-8px);
}

.pickTabbedEntryStep:hover:not(:disabled),
.pickTabbedEntryStep:focus-visible{
    background: var(--c1-a2);
}

/* Hover keeps the offset; a bare scale() would drop it and make the caret jump. */
.pickTabbedEntryNav .pickTabbedEntryStep--previous:hover:not(:disabled),
.pickTabbedEntryNav .pickTabbedEntryStep--previous:focus-visible{
    transform: translateX(8px);
}

.pickTabbedEntryNav .pickTabbedEntryStep--next:hover:not(:disabled),
.pickTabbedEntryNav .pickTabbedEntryStep--next:focus-visible{
    transform: translateX(-8px);
}

.pickTabbedEntryStep:disabled{
    cursor: default;
    opacity: .35;
}

@media (max-width: 720px){
    .pickTabbedEntryToolbar{
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .pickTabbedDefaultControl{
        align-self: flex-end;
    }

    .pickDefaultSelectGroup--tabbed{
        align-self: flex-end;
    }

    .pickTabbedEntryControlsRow .pickTabbedDefaultControl,
    .pickTabbedEntryControlsRow .pickDefaultSelectGroup--tabbed{
        align-self: center;
    }

    .pickTabbedEntrySelectShell{
        max-width: calc(100vw - 120px);
    }
}

.pickEntryTabsRow{
    display: flex;
    align-items: flex-end;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 1px solid rgba(15, 72, 128, .25);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1;
    border-right: 8px solid var(--c1);
    position: relative;
    min-height: 230px;
}

.pickEntryTabsRow::before,
.pickEntryTabsRow::after{
    background: var(--c1);
    border-radius: 50%;
    content: "";
    height: 8px;
    position: absolute;
    right: -8px;
    width: 8px;
}

.pickEntryTabsRow::before{
    top: -4px;
}

.pickEntryTabsRow::after{
    bottom: -4px;
}

.pickEntryTabs{
    display: flex;
    align-items: flex-end;
    gap: var(--g2);
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: 10px; /* accounts for top margin on game box */
    padding-bottom: 10px; /* matches top margin for border */
}

.pickEntryTabLayout--tabs .pickEntryTabsRow{
    align-items: stretch;
    border-bottom: 0;
    flex-direction: column;
    margin: 0;
    padding: 0 12px 0 0;
}

.pickEntryTabLayout--tabs .pickEntryTabs{
    align-items: stretch;
    column-gap: 0;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(112px, max-content) minmax(160px, 300px);
    row-gap: var(--g2);
}

.pickEntryTabsToolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px 4px;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    color: var(--c1);
}

.entryDefaultDisplay{
    display: inline-flex;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    white-space: nowrap;   
}

.entryDefaultCycleButton{
    background: var(--c1);
    color: var(--c-s1);
    border: none;
    border-radius: var(--r2);
    padding: 10px;
    
    cursor: pointer;
    font: inherit;
}

.pickEntrySection--all .entryDefaultCycleButton{
    background: transparent;
    border: 1px solid var(--c1);
    border-radius: var(--r3);
    color: var(--c1);
    padding: 9px 12px;
}

.pickEntrySection--all .entryDefaultCycleButton:hover:not(:disabled){
    background: var(--c1-a2);
}

.entryDefaultCycleButton:focus{
    outline: none;
}

.entryDefaultCycleButton:focus-visible{
    box-shadow: 0 0 0 2px rgba(15, 72, 128, .18);
}

.entryDefaultDisplayLabel{
    text-transform: uppercase;
    display: block;
    line-height: 1;
    margin-right: 4px;
}

.pickEntryDefaultPickDisplay,
.entryDefaultDisplaySelection{
    display: block;
    line-height: 1;
    text-align: center;
}

.entryDefaultDisplaySeparator{
    display: block;
    margin: 0 10px 0 10px;
}

.pickEntryInlineSelect{
    text-align: left;
    text-align-last: left;
}

.pickEntryTabItem{
    position: relative;
    align-items: stretch;
    display: grid;
    gap: var(--g2);
    grid-template-columns: minmax(86px, max-content) minmax(160px, max-content);
}

.pickEntryTabLayout--tabs .pickEntryTabItem{
    display: contents;
    width: 100%;
}

.pickEntryTabLayout--tabs .pickEntryTabItem:not(:has(.pickEntryTabDefaultButton)) .pickEntryTab{
    grid-column: 1 / -1;
}

.pickEntryTabDefaultButton.entryDefaultDisplay{
    box-sizing: border-box;
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
    justify-self: stretch;
    min-height: 40px;
    padding: 0 12px;
    width: 100%;
}

.pickEntryTabDefaultButton{
    background: transparent;
    border: 1px solid rgba(23, 33, 54, .42);
    border-right: 0;
    border-radius: var(--r3) 0 0 var(--r3);
    box-shadow: none;
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1;
    transition: background-color 60 linear, border-color 60 linear, box-shadow 60 linear, color 60 linear, opacity 60 linear, transform 60 linear;
}

.pickEntryTabDefaultButton.is-active{
    background: transparent;
    border-color: var(--c1);
    color: var(--c1);
    cursor: pointer;
}

.pickEntryTabDefaultButton:hover:not(:disabled){
    background: rgba(23, 33, 54, .08);
}

.pickEntryTabDefaultButton:disabled{
    background: transparent;
    border-color: rgba(23, 33, 54, .24);
    box-shadow: none;
    color: rgba(23, 33, 54, .42);
    cursor: default;
    opacity: 1;
}

.pickEntryTabDefaultButton:active:not(:disabled){
    transform: none;
}

.pickEntryTabLayout--tabs .pickEntryTab{
    box-sizing: border-box;
    grid-column: 2;
    box-shadow: none;
    height: 40px;
    margin: 0;
    max-width: 300px;
    min-width: 0;
    padding: 0 12px;
    width: 100%;
}

.pickEntryTabDefaultButton + .pickEntryTab{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

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

.pickEntryTab:focus{
    outline: none;
}

.pickEntryTab:focus-visible{
    box-shadow: 0 0 0 2px rgba(15, 72, 128, .18);
}

.pickEntryTab.is-active{
    background: var(--c1);
    border-color: var(--c1);
    border-radius: 0 !important;
    box-shadow: none;
    color: var(--c-s1);
    gap: var(--g2);
    margin: 0;
}

.pickEntryTabLayout--tabs .pickEntryTab.is-active{
    margin: 0;
}

.pickEntryTabLayout--tabs .pickEntryTab.is-active::before{
    --entry-tab-connector-width: 16px;
    background: var(--c1);
    box-sizing: border-box;
    content: "";
    display: block;
    height: 105%;
    left: 100%;
    pointer-events: none;
    position: absolute;
    top: -1px;
    width: var(--entry-tab-connector-width);
    z-index: 1;
}

.pickEntryTabLabel{
    display: block;
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pickEntryTabLayout--tabs .pickEntryTabLabel{
    max-width: none;
}

.editEntryTab{
    background: transparent;
    color: var(--c1);
    border: none;
    
    cursor: pointer;
    flex: 0 0 auto;
    
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1;
}

.pickEntryTabEditButton{
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--r2);
    color: inherit;
    display: none;
    flex: 0 0 22px;
    height: 22px;
    justify-content: center;
    margin-left: 0;
    margin-right: auto;
    order: -1;
    padding: 0;
    width: 22px;
}

.pickEntryTab.is-active .pickEntryTabEditButton{
    display: inline-flex;
}

.pickEntryTabEditButton:hover:not(:disabled){
    background: rgba(255, 255, 255, .24);
}

.editEntryTab.is-disabled{
    cursor: default;
    opacity: .35;
}

.editEntryList.is-disabled{
    cursor: default;
    opacity: .35;
    pointer-events: none;
}

.editEntryTab:focus{
    outline: none;
}

.editEntryTab:focus-visible{
    box-shadow: 0 0 0 2px rgba(15, 72, 128, .18);
}

.pickEntrySections--tabs{
    display: grid;
    grid-template-columns: var(--my-picks-list-info-panel-width) max-content;
    grid-template-rows: auto auto auto;
    column-gap: var(--my-picks-list-column-gap);
    align-items: start;
    justify-content: center;
    justify-items: start;
    max-width: 100%;
    width: auto;
}

.pickEntrySections--tabs.pickEntrySections--infoRight{
    grid-template-columns: max-content var(--my-picks-list-info-panel-width);
}

.pickEntrySections--tabs > .myPicksTableActions{
    grid-column: 2;
    grid-row: 1;
    width: 100%;
}

.pickEntrySections--infoRight > .myPicksTableActions{
    grid-column: 1;
}

.pickEntryTabsControlsRow{
    box-sizing: border-box;
    display: grid;
    grid-column: 2;
    grid-row: 2;
    justify-items: stretch;
    max-width: 100%;
    width: 100%;
    margin-bottom: 42px;
}

.pickEntrySections--infoRight .pickEntryTabsControlsRow{
    grid-column: 1;
}

.pickEntrySections--tabs .pickEntryCards{
    /*margin-bottom: 180px;*/
    max-width: 100%;
    position: relative;
    width: max-content;
}

.pickEntrySections--all{
    display: grid;
    grid-template-columns: var(--my-picks-list-info-panel-width) max-content;
    column-gap: var(--my-picks-list-column-gap);
    padding-bottom: 132px;
    justify-content: center;
    justify-items: start;
    align-items: start;
}

.pickEntrySections--all.pickEntrySections--infoRight{
    grid-template-columns: max-content var(--my-picks-list-info-panel-width);
}

/* Entry List shares the Single Entry controls bar, minus the Entry and Default
   Picks selects. It sits on the first row above the games and pushes the info
   panel and the games down to the second.

   It takes the games column rather than spanning both, so the buttons stay
   anchored to the table they act on: the bar changes columns along with the
   games when the info panel switches sides, which is also what lets the side
   switch animate it - getListPickInfoSideSwitchMovers() in site.js already
   collects this row, but a bar spanning 1 / -1 has the same rect in both
   layouts, so the FLIP pass measured no movement and the buttons jumped while
   the table slid. */
.pickEntrySections--all > .pickEntryTabsControlsRow{
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    /* Without this the bar's pale bottom border lands directly on the entry
       card's own darker top border and reads as if the bar had none. Single
       Entry needs no such gap: its entry sections draw no card edge. */
    margin-bottom: 12px;
}

/* Follows the games into column 1. Needed as its own rule because the base rule
   above comes later in the file than .pickEntrySections--infoRight
   .pickEntryTabsControlsRow and carries the same specificity, so it would
   otherwise win in both layouts. */
.pickEntrySections--all.pickEntrySections--infoRight > .pickEntryTabsControlsRow{
    grid-column: 1;
}

.pickEntrySections--all .pickEntryListInfoColumn,
.pickEntrySections--all .pickEntryListEntriesColumn{
    grid-row: 2;
}

/* ── Entry tabs ──────────────────────────────────────────────────────────
   One per entry, replacing the select that used to name a single entry and keep
   the rest behind a menu. The select is still in the form as the thing the page
   holds the choice in - see .pickTabbedEntryField--hidden below - so these
   buttons only have to look like the choice and hand it on.

   Sized to the longest entry name rather than to a fixed width, so a league of
   short names does not carry a stretch of empty column; the cap is about what
   the site's 24-character entry-name limit needs. Sticky, so the tabs stay in
   reach beside a long card of games. */
/* One width for the rail and the key to its symbols beneath it, so the left
   column reads as a single edge. Change it here and both follow. */
.myPicksLayout{
    /* The rail is sized to the longest entry name rather than set outright: it
       never draws narrower than this, never wider than the cap below, and takes
       whatever the names need in between, so a league of short names carries no
       empty column and a league of long ones is not cut short. The floor leaves
       room in each row for a name beside the save status and the pick count. */
    --pick-rail-width-min: 280px;
    /* 300px wherever there is room for it, which is most screens, and a share of
       a narrow window rather than a third of it. */
    --pick-rail-width-max: min(300px, 30vw);
    /* The set distance between the rail's column and the game box. */
    --pick-rail-gap: 12px;
    /* The height of the two toolbars across the top, the rail's and the games'.
       One value, so they stay level, and so do the tabs and the games below. */
    --pick-top-band-height: 44px;
}

/* The right end: Take bye week, where the league has one, after the hidden
   Default Pick control, so it holds the corner whether or not that control is
   ever shown again. The save status and the count are in the rail's rows. */
.pickGridToolbarEnd{
    grid-column: 2;
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    min-width: 0;
}

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

/* The label and the buttons together at the left of the toolbar. */
.pickEntryViewField{
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.pickEntryViewLabel{
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.3;
}

/* The select the buttons stand in for: posted with the form and read by the
   page script, never shown. */
.pickGridToolbarLayout .pickSettingsNativeSelect{
    display: none;
}

/* The Default Pick control that travels with the actions. It is hidden for now -
   see $showDefaultPickToolbarControl in my-picks.php - but still rendered, because
   the select is the field the save posts and the page script reads. */
.pickTableDefaultPick--hidden{
    display: none;
}

/* The save status takes the row, and the gear keeps the width its glyph needs at
   the end. Picks save as they are made, so this is the page's only word on
   whether they have - and it is written for the failure, not the success:

     saved       quiet and low-contrast, the state almost all of the time
     saving      the same quiet treatment; nothing moves
     just-saved  the green check, once, with the only motion here, for a moment
                 after a save lands
     error       loud in the same slot, and it stays until the pick saves

   The words do not change between saved and just-saved, so the slot changes
   colour without saying anything twice. */
.pickSaveStatus{
    align-items: center;
    color: var(--c-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    gap: 0 6px;
    line-height: 1;
    min-height: 32px;
    min-width: 0;
    transition: color 200ms linear;
}

.pickSaveStatusIcon{
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 1.1em;
}

.pickSaveStatusText{
    flex: 1 1 0;
    min-width: 0;
}

/* The moment a save lands. */
.pickSaveStatus[data-state="just-saved"]{
    color: var(--c-green);
}

.pickSaveStatus[data-state="just-saved"] .pickSaveStatusIcon{
    animation: pickSaveCheckIn 260ms ease-out;
}

@keyframes pickSaveCheckIn{
    from{
        opacity: 0;
        transform: scale(.6);
    }

    to{
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce){
    .pickSaveStatus[data-state="just-saved"] .pickSaveStatusIcon{
        animation: none;
    }
}

/* A pick that has not saved is the one thing here worth interrupting for. */
.pickSaveStatus[data-state="error"]{
    background: rgba(191, 0, 6, .08);
    border: 1px solid rgba(191, 0, 6, .38);
    border-radius: var(--r2);
    color: var(--c-red);
    font-weight: var(--fw2);
    padding: 6px 10px;
}

.pickSaveStatusRetry{
    appearance: none;
    -webkit-appearance: none;
    background: var(--c-s1);
    border: 1px solid var(--c-red);
    border-radius: var(--r2);
    color: var(--c-red);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--fw2);
    line-height: 1;
    padding: 5px 10px;
    transition: background-color 120ms linear, color 120ms linear;
}

.pickSaveStatusRetry:hover{
    background: var(--c-red);
    color: var(--c-s1);
}

.pickSaveStatusRetry[hidden]{
    display: none;
}

.pickSaveStatusRetry:focus-visible{
    outline: 2px solid var(--c-red);
    outline-offset: 2px;
}

/* A game whose pick has not saved - the request failed and is being retried -
   is outlined in red until it saves, so the member can see which one. */
.pickGameCard--notSaved{
    border-radius: var(--r2);
    box-shadow: 0 0 0 2px var(--c-red);
}

/* A game the server refused as past its deadline while this page was open. Its
   radios are disabled by the page script; this makes it look unavailable too. */
.pickGameCard--lockedByServer{
    opacity: .55;
}

.pickGameCard--lockedByServer label{
    cursor: not-allowed;
}

.pickGameCard--locked{
    /*filter: grayscale(1);*/
}

.pickSaveNotice{
    max-width: 480px;
    width: 480px;
}

.pickSaveNoticeMessages{
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.45;
    margin: 0 0 20px;
    padding-left: 18px;
}

/* The sentence the leave dialog exists to say. The modal sizes itself to its
   contents, so the measure is held here rather than letting one long sentence
   stretch the box across the page. */
.pickLeaveNoticeText{
    line-height: 1.45;
    margin: 0;
    max-width: 46ch;
}

/* The tabs and the header that labels them, one group, so the column's 12px gap
   falls above the header and the header sits against the tabs. */
/* The rail's toolbar. Reads "Entries · 1 of 10": what the rail below it holds,
   how many of them there are, and the most one member may hold in this league,
   with the gear at its right end. The games' toolbar's tray and height, as a
   box of its own. */
.pickEntryRailHeader{
    align-items: center;
    background: var(--c-s2);
    border-radius: var(--r2);
    box-sizing: border-box;
    color: var(--c-text-muted);
    display: flex;
    font-family: var(--ff1);
    font-size: var(--fs-small2);
    gap: 6px;
    letter-spacing: var(--ls1);
    line-height: 1.2;
    min-height: var(--pick-top-band-height);
    padding: 0 16px;
    text-transform: uppercase;
}

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

/* The gear that opens Entry Settings, at the right end of the header as the
   bare glyph: none of .btn-ghost's box, fill, or padding, so it takes no more
   height than the header's own line. It darkens on hover in place of the fill. */
.pickEntryRailHeader #pickToolbarSettingsButton,
.pickEntryRailHeader #pickToolbarSettingsButton:hover{
    align-self: center;
    background: none;
    border: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-small1);
    height: auto;
    line-height: 1;
    margin-left: auto;
    padding: 0;
}

.pickEntryRailHeader #pickToolbarSettingsButton:hover{
    color: var(--c1);
}

.pickEntryTabsColumn{
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    overflow: hidden;
}

/* One entry's row: the tab across the whole of it, and in the active row the
   save status laid over the tab. Three columns - the name, the save status, and
   the count or triangle at the right end - which the tab shares as a subgrid, so
   the name gives way to the status rather than running under it. The status is
   not inside the tab because a tab is a button and the status's Retry is one. */
.pickEntryTabRow{
    align-items: center;
    column-gap: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin: 0 0 1px;
    width: 100%;
}

.pickEntryTab{
    appearance: none;
    -webkit-appearance: none;
    /* Stated rather than left to inherit: a button in this part of the page picks
       up display:flex with justify-content:flex-end from the save-bar rules, which
       pushed every tab's name to its right edge. */
    align-items: center;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: subgrid;
    justify-content: stretch;
    border: 1px solid transparent;
    border-radius: var(--r2);
    box-sizing: border-box;
    color: var(--c1);
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
    max-width: 100%;
    min-width: 0;
    padding: 8px 14px;
    text-align: left;
    width: 100%;
    
    background: var(--c1-a1);
    box-shadow: 0 1px 0 rgba(23, 33, 54, .08);
    line-height: 1.1;
    position: relative;
    margin: 0;
    height: 42px;
    transition: background-color 60 linear, border-color 60 linear, box-shadow 60 linear, color 60 linear, transform 60 linear;
}

.pickEntryTabName{
    display: block;
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The right end of the tab: the pick count, or the yellow exclamation in a
   triangle when every pick still matches the entry's default picks. The two never
   show together - the count is for leagues with no default picks. The page script
   sets the triangle, and its meaning goes in a tooltip on hover. */
.pickEntryTabEnd{
    align-items: center;
    display: flex;
    grid-column: 3;
    justify-content: flex-end;
}

.pickEntryTabStatus{
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 10px;
}

.pickEntryTabStatus[hidden]{
    display: none;
}

.pickEntryTabStatus--default{
    color: var(--c-yellow);
    position: relative;
}

/* The exclamation is a cutout that shows the row behind it, so a shape laid under
   the glyph fills it with --c-s1 on any row, selected or not. The triangle
   narrows to a point, where a disc would show, so the fill is a rounded bar just
   covering the exclamation, sized against the glyph at 200px and set a little
   above centre, where the mark sits in the triangle. */
.pickEntryTabStatus--default::before{
    background: var(--c-s1);
    border-radius: .1em;
    content: "";
    height: .62em;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -42%);
    width: .2em;
}

.pickEntryTabStatus--default i{
    position: relative;
}

/* The save status in the active row, over the tab's middle column. The tab is
   filled dark there, so the quiet voices are light, and a failure is a white
   pill that reads on the dark fill. */
.pickEntryTabRow .pickSaveStatus{
    color: color-mix(in srgb, var(--c-s1) 72%, transparent);
    flex-wrap: nowrap;
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    z-index: 1;
}

.pickEntryTabRow .pickSaveStatus[data-state="just-saved"]{
    color: color-mix(in srgb, var(--c-green), var(--c-s1) 55%);
}

.pickEntryTabRow .pickSaveStatus[data-state="error"]{
    background: var(--c-s1);
    color: var(--c-red);
    min-height: 0;
    padding: 4px 4px 4px 8px;
}

.pickEntryTabRow .pickSaveStatusRetry{
    padding: 3px 8px;
}

/* In the rail the count drops the 32px slot it kept in the old toolbar. The tab's
   content box is only 24px tall, so the slot made the tab's row taller than the
   tab, and the name and count centred in it sat a few pixels low. */
.pickEntryTab .pickEntryInfoBarCount{
    min-height: 0;
}

/* The count on the dark active row: light when every pick is in, and a light red
   while the entry is short, since the page's red does not read on the fill. */
.pickEntryTab--active .pickEntryInfoBarCount{
    color: color-mix(in srgb, var(--c-red), var(--c-s1) 55%);
}

.pickEntryTab--active .pickEntryInfoBarCount--complete{
    color: color-mix(in srgb, var(--c-s1) 72%, transparent);
}

.pickEntryTabStatusTooltip{
    background: var(--c1);
    border-radius: var(--r2);
    box-shadow: 0 8px 18px rgba(17, 31, 51, .18);
    box-sizing: border-box;
    color: var(--c-s1);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    line-height: 1.25;
    max-width: 180px;
    padding: 6px 9px;
    pointer-events: none;
    position: fixed;
    transform: translateY(-50%);
    width: max-content;
    z-index: 2000;
}

.pickEntryTabStatusTooltip[hidden]{
    display: none;
}

.pickEntryTab:hover{
    background: var(--c1-a2);
}

/* The active tab is the one whose picks are on screen, so it reads as attached to
   them: filled, and darker than the hover, so hovering another tab never looks
   like it has taken over. */
.pickEntryTab--active,
.pickEntryTab--active:hover{
    background: var(--c1);
    border-color: var(--c1);
    color: var(--c-s1);
}

/* The select the tabs drive. Kept in the form rather than deleted: the switching,
   renaming and default-pick code all read and write its options, and a submitted
   form carries the chosen entry in it. */
.pickTabbedEntryField--hidden{
    display: none;
}

.pickEntryListInfoColumn{
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: var(--my-picks-list-info-panel-width);
}

.pickEntrySections--infoRight .pickEntryListInfoColumn{
    grid-column: 2;
}

.pickEntrySections--tabs .pickEntryListInfoColumn{
    grid-row: 2;
}

.pickEntryListEntriesColumn{
    position: relative;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    gap: 26px;
    justify-items: center;
    z-index: 2;
}

.pickEntrySections--tabs .pickEntryListEntriesColumn{
    gap: 0;
    grid-row: 3;
}

.pickEntrySections--infoRight .pickEntryListEntriesColumn{
    grid-column: 1;
}

.pickEntrySections--all .pickEntryCards{
    font-size: 0;
}

.pickEntrySection{
    display: block;
}

.pickEntrySection--tabbed{
    display: none;
}

.pickEntrySection--tabbed.is-active{
    display: block;
    max-width: 100%;
    width: fit-content;
}

.pickEntrySection--all{
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: 16px 18px 18px;
    font-size: var(--fs-body);
    border-radius: var(--r3);
    background: transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    transition: filter 200ms ease;
    width: fit-content;
    background: var(--c-s1);
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: var(--r3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    /*border: 2px solid var(--c1);*/
}

.pickEntryListInfoColumn > .pickGameInfo--listDock{
    display: block;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    visibility: visible;
    width: var(--my-picks-list-info-panel-width);
    max-width: var(--my-picks-list-info-panel-width);
    z-index: 20;
    pointer-events: auto;
}

.pickEntryListEntriesColumn.pickEntryListEntriesColumn--sideAnimating,
.pickEntrySideSwitchMover--sideAnimating{
    transition: transform var(--my-picks-side-switch-duration) ease;
    will-change: transform;
}

.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--sideAnimating{
    animation: myPicksListInfoPanelSideSwitch var(--my-picks-side-switch-duration) ease both;
    transition: none;
    will-change: transform;
    z-index: 200;
}

@keyframes myPicksListInfoPanelSideSwitch{
    0%{
        transform: var(--my-picks-info-panel-start-transform, translateX(0));
        animation-timing-function: ease-in;
    }

    40%{
        transform: var(--my-picks-info-panel-exit-transform, translateX(0));
        animation-timing-function: steps(1, end);
    }

    41%{
        transform: var(--my-picks-info-panel-entry-transform, translateX(0));
        animation-timing-function: ease-out;
    }

    100%{
        transform: translateX(0);
    }
}

.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--behindEntries{
    z-index: 1;
    pointer-events: none;
}

.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--sideAnimating.pickGameInfo--behindEntries{
    z-index: 200;
}

.pickGameInfoSideToggle{
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    padding: 0;
    cursor: pointer;
    /*font-size: var(--fs-body);*/
    font-size: 8pt;
    line-height: 1;
    border-radius: 50%;
    transition: all 120ms linear;
    z-index: 6000;
}

.pickGameInfoSideToggle:active{
    transform: scale(.95);
}

.pickGameInfoSideToggle:hover{
    transform: scale(1.1);
}


.pickEntryListInfoColumn > .pickGameInfo--listDock.is-fixed{
    position: fixed;
    top: var(--my-picks-list-info-panel-fixed-top);
    left: var(--my-picks-list-info-panel-fixed-left);
}

.pickEntryListInfoColumn > .pickGameInfo--listDock .pickGameInfoSections{
    grid-template-columns: minmax(0, 1fr);
}

.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--blankValues .pickGameInfoValue{
    visibility: hidden;
}

/* Before any game has been hovered, the panel stands as a frame of labels with
   nothing in it, which is what keeps its size steady for the first game that
   fills it. The prompt takes the middle of that frame and the labels give way -
   hidden rather than removed, so the panel keeps the height they give it and
   nothing shifts when a game arrives. */
.pickGameInfoEmptyPrompt{
    display: none;
}

.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--blankValues .pickGameInfoSections{
    visibility: hidden;
}

/* The compact panel's size follows the game it shows, so there is no one size
   for the empty panel to hold. It waits at one of its own - the column's width,
   and a modest height - with the prompt in the middle, and takes each game's
   size when a game arrives. */
.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--blankValues:has(> .pickGameInfoStrip){
    min-height: 180px;
    width: var(--my-picks-list-info-panel-width);
}

.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--blankValues .pickGameInfoStrip{
    display: none;
}

/* The docked panel is the score strip's hover panel, unchanged (game-info-panel.css):
   as wide as its cards, one row of them under the games in Horizontal. Where the
   column beside the games in Vertical is narrower than that row, the cards wrap
   inside it, as they do in the strip's panel in a narrow window. */
.pickEntryListInfoColumn:has(> .pickGameInfo--listDock > .pickGameInfoStrip){
    width: auto;
}

.pickEntryListInfoColumn > .pickGameInfo--listDock:has(> .pickGameInfoStrip){
    max-width: 100%;
    width: max-content;
}
.pickEntryListInfoColumn > .pickGameInfo--listDock.pickGameInfo--blankValues .pickGameInfoEmptyPrompt{
    align-items: center;
    color: var(--c-text-muted);
    display: flex;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    inset: 12px;
    justify-content: center;
    line-height: 1.4;
    margin: 0;
    padding: 0 24px;
    position: absolute;
    text-align: center;
}

/* ── Entry List on a monitor narrower than 1700px ────────────────────────
   There is no room for a column of info beside the games, so site.js adds
   this class and the panel becomes an overlay that only appears while a game
   is hovered. The info column keeps its place in the grid but stops taking
   width, letting the games sit where they would with no panel at all. */
.pickEntrySections--all.pickEntrySections--infoHover,
.pickEntrySections--all.pickEntrySections--infoHover.pickEntrySections--infoRight{
    grid-template-columns: max-content;
}

.pickEntrySections--infoHover .pickEntryListInfoColumn,
.pickEntrySections--infoHover .pickEntryListEntriesColumn{
    grid-column: 1;
    grid-row: 2;
}

.pickEntrySections--infoHover .pickEntryListInfoColumn{
    width: 0;
}

/* Floats above the games rather than beside them. Its coordinates are set
   inline on each hover, next to the game being pointed at. Ignoring the
   pointer matters: the panel covers neighbouring games, and without this the
   cards underneath could not be hovered through it. */
.pickEntrySections--infoHover .pickEntryListInfoColumn > .pickGameInfo--listDock{
    /* Hidden until a hover shows it, so a panel built before any hover — on page
       load, or when the game context refresh arrives — never flashes on screen at
       the placeholder coordinates below. */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: var(--my-picks-list-info-panel-width);
    max-width: calc(100vw - 24px);
    pointer-events: none;
    z-index: 40;
}

/* No side to switch to once the panel follows the hovered game. */
.pickEntrySections--infoHover .pickGameInfoSideToggle{
    display: none;
}

/* ── Single Entry (tabs) view layout ─────────────────────────────────────
   Default Picks stacked under Entry, games below that controls box, and the
   game-info panel centered underneath the games as a 2×2 grid (boxes keep
   their original size), with no left/right move option. The settings buttons
   keep their original position. The Entry List (--all) view is intentionally
   unchanged. */
.pickEntrySections--tabs{
    /* 2 × the original ~316px box (2×316 + 10px gap + 24px panel padding) so
       the info boxes keep their original size in the 2×2 arrangement. */
    --my-picks-list-info-panel-width: 666px;
}

/* Everything runs in a single horizontal row: the Entry nav and the Default
   Picks select at the left end, then the gear and the Update All Entries button
   at the right end. */
/* The bar spans the full grid column, so it matches the width of the games
   container below it. The panel chrome lives here rather than on the inner
   toolbar so the whole row sits inside one box. */
.pickEntrySections--tabs .pickEntryTabsControlsRow,
.pickEntrySections--all .pickEntryTabsControlsRow{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--g2);
    font-size: var(--fs-body);
    justify-content: flex-start;
    background: transparent;
    /*border-radius: var(--r2);*/
    /*box-shadow: 0 8px 24px rgba(0, 0, 0, .18);*/
    /* The z-index lifts the whole bar above the games, which set z-index 2 on
       .pickEntryListEntriesColumn. Without it the Default Picks dropdown opens
       behind them. */
    position: relative;
    z-index: 3;
}

/* The Entry and Default Picks controls sit together at the left end of the bar,
   in normal flow, so the row grows rightwards from the bar's left padding. */
.pickEntrySections--tabs .pickTabbedEntryControlsRow{
    align-items: center;
    justify-content: flex-start;
}

/* Sits a fixed distance to the right of the Entry control, tracking it as the
   entry name changes the select's width. */
/* With one entry the carets are hidden, so the entry control's right edge sits
   flush against the select. This restores separation in that case only. */
.pickEntrySections--tabs .pickTabbedEntryControlsRow:has(.pickTabbedEntryNav--single) .pickTabbedEntryField--default{
    margin-left: 180px;
}

.pickEntrySections--tabs .pickTabbedEntryField--default{
    /* The row shrink-fits its contents, so the field needs its own intrinsic
       width rather than a share of a stretched row. */
    width: max-content;
    margin-left: -10px;
}

.pickEntrySections--tabs .pickEntryTabsToolbar{
    margin: 0;
}

.pickEntrySections--tabs .pickTabbedEntryControlsRow{
    flex-direction: row;
}

/* Single column: controls box on top, games below, info panel centered under
   the games. Pinned so the hidden left/right preference class cannot rearrange
   anything. */
.pickEntrySections--tabs,
.pickEntrySections--tabs.pickEntrySections--infoRight{
    grid-template-columns: minmax(0, 1fr);
}

/* In the tabbed view this row holds nothing that shows: its toolbar is now Entry
   List's alone, and what is left inside it - the entry select the tabs drive, and
   the per-entry default-pick inputs - is hidden. It still occupied a grid row and
   carried the gap and margin of a visible bar, which is what was holding the games
   down. Sized to its contents, which is nothing, so the games start at the top. */
.pickEntrySections--tabs .pickEntryTabsControlsRow,
.pickEntrySections--tabs.pickEntrySections--infoRight .pickEntryTabsControlsRow{
    grid-column: 1 / -1;
    grid-row: 1;
    gap: 0;
    margin-bottom: 0;
    min-height: 0;
    padding: 0;
}

.pickEntrySections--tabs .pickEntryListInfoColumn,
.pickEntrySections--tabs.pickEntrySections--infoRight .pickEntryListInfoColumn{
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    max-width: 100%;
    margin-top: 18px;
}

.pickEntrySections--tabs .pickEntryListEntriesColumn,
.pickEntrySections--tabs.pickEntrySections--infoRight .pickEntryListEntriesColumn{
    grid-column: 1 / -1;
    grid-row: 2;
}

/* The inner toolbar is just a track inside that bar: it stretches to the bar's
   right edge and lays everything out in one row. The DOM order is the Entry and
   Default selects, then the gear with Save/Cancel, so each group is placed into
   its column explicitly rather than flowing in source order. Reading left to
   right the row is: Entry select, Default Picks, free space, gear, Update. The
   gear rides inside the actions group so it stays beside the Update button
   however wide the free space in the middle gets. */
.pickEntrySections--tabs .pickTabbedEntryToolbar,
.pickEntrySections--all .pickTabbedEntryToolbar{
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr) max-content;
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.pickEntrySections--tabs .pickTabbedEntryToolbar > .pickTabbedEntryControlsRow{
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.pickEntrySections--tabs .pickTabbedEntryToolbar > .myPicksTableActions,
.pickEntrySections--all .pickTabbedEntryToolbar > .myPicksTableActions{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* Bare glyph: no button background, border or padding. Sized to match the
   small-button text it replaced. */
.pickTabbedEntrySettingsButton{
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: var(--c1);
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    line-height: 1;
    transition: transform 120ms linear;
}

.pickTabbedEntrySettingsButton:focus-visible{
    outline: 2px solid var(--c1);
    outline-offset: 2px;
}

.pickTabbedEntryToolbar .myPicksTableActions{
    align-items: center;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: var(--g1);
    width: auto;
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

/* Let the Save/Cancel pair participate directly as cells in that row. */
.pickTabbedEntryToolbar .myPicksTableActions .pickSaveActions{
    display: contents;
}

/* Keep the panel in the normal flow (not sticky) so it never floats on top
   of the games. */
.pickEntrySections--tabs .pickEntryListInfoColumn > .pickGameInfo--listDock.is-fixed{
    position: relative;
    top: auto;
    left: auto;
}

/* Game info as a 2×2 grid of sections instead of a single 1×4 column. */
.pickEntrySections--tabs .pickEntryListInfoColumn > .pickGameInfo--listDock .pickGameInfoSections{
    grid-template-columns: 1fr 1fr;
}

/* No left/right move option in the Single Entry view. */
.pickEntrySections--tabs .pickGameInfoSideToggle{
    display: none;
}

/* ── Vertical view ───────────────────────────────────────────────────────────
   The Horizontal view turned on its side. Each game is a row instead of a
   column, so the top and bottom teams become a left and a right column, and the
   game info panel sits to the right of the games with its sections stacked.
   Every gap keeps its Horizontal length on the other axis: a margin that was
   above a box is now to its left, one that was below is now to its right. */
/* The panel's column carries the 18px Horizontal leaves above the panel, as
   padding on its left. A column gap would do the same, but the page's outer
   grid sizes this one without its gaps and cut the panel off by that much. */
/* The panel's width is fixed rather than fitted to each week, so the layout
   never shifts from one week to the next. 260px is the widest panel any game
   this season needs (215px, a long name in an injury report) with room to
   spare. */
.pickEntrySections--tabs.pickEntrySections--vertical{
    --my-picks-list-info-panel-width: 260px;
    column-gap: 0;
    grid-template-columns: max-content calc(var(--my-picks-list-info-panel-width) + 18px);
}

.pickEntrySections--vertical .pickEntryListEntriesColumn{
    grid-column: 1;
    grid-row: 2;
}

/* Sticky like the entry rail, so the panel stays beside whichever game the
   member has scrolled to: it scrolls up with the page until it is 12px from the
   top of the view, then holds. The page script lowers that 12px only for a
   panel too tall to fit under it (--pick-vertical-info-sticky-top). */
.pickEntrySections--vertical .pickEntryListInfoColumn{
    align-self: start;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 0;
    padding-left: 18px;
    position: sticky;
    top: var(--pick-vertical-info-sticky-top, 12px);
}

.pickEntrySections--vertical .pickEntryListInfoColumn > .pickGameInfo--listDock .pickGameInfoSections,
.pickEntrySections--vertical .pickEntryListInfoColumn > .pickGameInfo--listDock .pickGameInfoInjuryTeams{
    grid-template-columns: minmax(0, 1fr);
}

/* The column is the fixed --my-picks-list-info-panel-width, and the panel
   fills it, stacking its cards one above another, so every game's panel is
   the same width however much it holds. */
.pickEntrySections--vertical .pickEntryListInfoColumn:has(> .pickGameInfo--listDock > .pickGameInfoStrip){
    width: var(--my-picks-list-info-panel-width);
}

.pickEntrySections--vertical .pickEntryListInfoColumn > .pickGameInfo--listDock:has(> .pickGameInfoStrip){
    width: 100%;
}

.pickEntrySections--vertical .pickEntryListInfoColumn > .pickGameInfo--listDock .pickGameInfoStrip{
    flex-direction: column;
}

/* Games run down the page, one row each. */
.pickEntrySections--vertical .pickEntryCards{
    align-items: stretch;
    display: flex;
    flex-direction: column;
    width: max-content;
}

/* A game is a row here: its two teams side by side rather than stacked. */
.pickEntrySections--vertical .pickGameCard{
    align-items: stretch;
    display: flex;
    flex-direction: row;
    padding: var(--pick-card-hairline-reach) 12px;
}

.pickEntrySections--vertical .pickGameCard:not(.pickGameCard ~ .pickGameCard){
    padding-left: 12px;
    padding-top: 0;
}

/* The kickoff time sits to the left of the teams. It is a fixed width, as it
   was a fixed height, so every row's teams start at the same point. The gap
   after it is the Horizontal gap below it: the date's 12px and the spread box's
   own gap collapsed into the larger of the two, which a row cannot do, so the
   larger length is given directly. */
.pickEntrySections--vertical .pickDateLabel,
.pickEntrySections--vertical .pickDateLabelPlaceholder{
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    margin: 0 max(12px, var(--spread-size)) 0 0;
    /* Last in the card, so that the horizontal layout can print it under the
       games, but first in this one, where it reads beside its row. */
    order: -1;
    width: 4.2em;
}

.pickEntrySections--vertical .pickGameCard--spreadBoxes .pickSpreadBox--top.pickSpreadBox--above,
.pickEntrySections--vertical .pickGameCard--spreads-inside .pickOptionWrap--top,
.pickEntrySections--vertical .pickGameCard--spreads-bottom .pickOptionWrap--top{
    margin-top: 0;
}

.pickEntrySections--vertical .pickOptionWrap{
    display: flex;
    margin-left: 0;
    margin-right: 0;
}

/* The row gap between the two teams, now a column gap. */
.pickEntrySections--vertical .pickOptionWrap--top,
.pickEntrySections--vertical .pickGameCard .pickSpreadBox--top.pickSpreadBox--below{
    margin-bottom: 0;
    margin-right: var(--row-gap);
}

.pickEntrySections--vertical .pickGameCard--spreads-inside .pickOptionWrap--top,
.pickEntrySections--vertical .pickGameCard--spreads-bottom .pickOptionWrap--top{
    margin-right: 0;
}

/* A spread box beside its tile rather than over it: as tall as the tile, and a
   fixed width wide enough for any team's name and spread, so the columns line up
   down the page. Its 4px of padding moves from its top and bottom to its sides. */
.pickEntrySections--vertical .pickSpreadBox,
.pickEntrySections--vertical .pickGameCard--spreadBoxes:has(.pick--teamlogos) .pickSpreadBox{
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    width: var(--pick-vertical-spread-box-width);
}

/* The team's full name beside its spread: the city on one line, larger, over the
   nickname. The block takes whatever the spread leaves, so every row's names
   start at the same edge. */
.pickEntrySections--vertical .pickSpreadBoxName{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.pickEntrySections--vertical .pickSpreadBoxCity,
.pickEntrySections--vertical .pickSpreadBoxNickname{
    display: block;
    white-space: nowrap;
}

.pickEntrySections--vertical .pickSpreadBoxCity{
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
}

.pickEntrySections--vertical .pickSpreadBoxNickname{
    font-size: var(--fs-small3);
    font-weight: var(--fw1);
    margin-top: 2px;
}

/* Beside the names rather than under them, the spread has the box's full height
   to itself and so can be the largest thing in it. It holds one width, wide
   enough for "+13.5", so the names beside it line up down the page. */
.pickEntrySections--vertical .pickSpreadBoxValue{
    flex: 0 0 auto;
    font-size: var(--fs-big2);
    text-align: center;
    width: 2.7em;
}

/* The spread keeps to the side of the box away from its tile. A box before its
   tile (left of it) puts the spread first, so Start has every spread to the
   left of its names and End every spread to the right; Outside puts both at the
   ends of the row and Inside both in the middle. The names then read out from
   the spread, flush against it. */
.pickEntrySections--vertical .pickSpreadBox--above .pickSpreadBoxValue{
    order: -1;
}

.pickEntrySections--vertical .pickSpreadBox--below .pickSpreadBoxName{
    text-align: right;
}

.pickEntrySections--vertical .pickSpreadBox--above{
    border-radius: var(--r2) 0 0 var(--r2);
}

.pickEntrySections--vertical .pickSpreadBox--below{
    border-radius: 0 var(--r2) var(--r2) 0;
}

/* The straight edge is a side here, so the borderless edge moves with it. */
.pickEntrySections--vertical .pickSpreadBox.pickSpreadBox--above{
    border-bottom-width: 2px;
    border-right-width: 0;
}

.pickEntrySections--vertical .pickSpreadBox.pickSpreadBox--below{
    border-left-width: 0;
    border-top-width: 2px;
}

/* The tile's joined edge is now its left side when its box comes before it and
   its right side when the box comes after. */
.pickEntrySections--vertical .pickGameCard--spreadBoxes .pickOptionWrap .pick{
    border-radius: var(--r2);
}

.pickEntrySections--vertical .pickGameCard--spreads-outside .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-top .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-inside .pickOptionWrap--bottom .pick,
.pickEntrySections--vertical .pickGameCard--spreads-top .pickOptionWrap--bottom .pick{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.pickEntrySections--vertical .pickGameCard--spreads-inside .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-bottom .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-outside .pickOptionWrap--bottom .pick,
.pickEntrySections--vertical .pickGameCard--spreads-bottom .pickOptionWrap--bottom .pick{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/* The shared edge between a tile and its spread box is now a side, so each
   piece shrinks toward that side instead. */
.pickEntrySections--vertical .pickGameCard--spreadBoxes .pickSpreadBox--above{
    transform-origin: right center;
}

.pickEntrySections--vertical .pickGameCard--spreadBoxes .pickSpreadBox--below{
    transform-origin: left center;
}

.pickEntrySections--vertical .pickGameCard--spreads-outside .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-top .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-inside .pickOptionWrap--bottom .pick,
.pickEntrySections--vertical .pickGameCard--spreads-top .pickOptionWrap--bottom .pick{
    transform-origin: left center;
}

.pickEntrySections--vertical .pickGameCard--spreads-inside .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-bottom .pickOptionWrap--top .pick,
.pickEntrySections--vertical .pickGameCard--spreads-outside .pickOptionWrap--bottom .pick,
.pickEntrySections--vertical .pickGameCard--spreads-bottom .pickOptionWrap--bottom .pick{
    transform-origin: right center;
}

/* Games are rows here, so the mark keeps to the end of the row, in the padding
   past the teams, level with its middle. */
.pickEntrySections--vertical .pickGameCardMarker{
    bottom: auto;
    left: auto;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

/* Games are rows here, so the run reads down the page and its line stands
   between the kickoff and the teams rather than under the kickoff. It bridges
   the 12px each card pads top and bottom, and draws in at the ends of the run
   exactly as the horizontal one does. */
.pickEntrySections--vertical :is(.pickDateLabel, .pickDateLabelPlaceholder)::after{
    /* Standing in the middle of the gap the label leaves before the teams. */
    --pick-kickoff-line-offset: calc(-0.5 * max(12px, var(--spread-size)));

    /* The run reads down the page here, so the painted edge is the left one and
       the box keeps no width of its own. */
    border-bottom: 0;
    border-left: 1px solid var(--c-s4);
    bottom: calc(-1 * var(--pick-card-hairline-reach));
    height: auto;
    left: auto;
    right: var(--pick-kickoff-line-offset);
    top: calc(-1 * var(--pick-card-hairline-reach));
    width: 0;
}

.pickEntrySections--vertical .pickGameCard--timeRunStart :is(.pickDateLabel, .pickDateLabelPlaceholder)::after{
    left: auto;
    top: 0;
}

.pickEntrySections--vertical .pickGameCard--timeRunEnd :is(.pickDateLabel, .pickDateLabelPlaceholder)::after{
    bottom: 0;
    right: var(--pick-kickoff-line-offset);
}

.pickEntrySections--all:has(.pickEntrySection--all:hover) .pickEntrySection--all:not(:hover)::before{
    /*
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);  50% black 
    pointer-events: none;
    */
}

.pickEntrySectionHeader{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0 0 14px;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
}

.pickEntrySectionTitle{
    color: var(--c1);
    font-size: 17pt;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    line-height: 1.1;
    position: relative;
    text-align: center;
}

.pickEntrySectionTitleRow{
    align-items: center;
    display: inline-flex;
    gap: var(--g1);
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.editEntryList{
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--c1);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 9pt;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    transform: translateY(-.45em);
}

.editEntryList:focus{
    outline: none;
}

.editEntryList:focus-visible{
    box-shadow: 0 0 0 2px rgba(15, 72, 128, .18);
}

.pickEntrySectionRenameIcon{
    font-size: var(--fs-small1);
}

.pickEntryDefaultPickControl{
    display: block;
    align-self: start;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    white-space: nowrap;
}

.pickEntryDefaultPickControl .pickToolbarControlLabel{
    margin: 0 0 4px;
    text-align: center;
}

#pickSheetToolbar{
    --my-picks-toolbar-height: 44px;
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto 18px;
    min-width: max-content;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
}

.myPicksOptionsColumn #pickSheetToolbar{
    margin-left: auto;
    margin-right: auto;
}

.myPicksTableFrame{
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 100%;
    width: fit-content;
}

.myPicksTableActions{
    align-items: center;
    box-sizing: border-box;
    display: flex;
    gap: var(--g1);
    justify-content: space-between;
    margin-bottom: 12px;
    max-width: 100%;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c1-a1);
}

.pickEntrySections--tabs > .myPicksTableActions{
    width: 100%;
}

#makePicks[data-all-entries-mode="1"] .myPicksTableActions{
    margin-left: calc(var(--my-picks-list-info-panel-width) + var(--my-picks-list-column-gap));
    width: calc(100% - var(--my-picks-list-info-panel-width) - var(--my-picks-list-column-gap));
}

/* That indent clears the info panel for a bar of its own above the games. The
   save/settings group inside the shared controls bar is placed by the toolbar
   grid instead, so it takes neither the indent nor the stretched width. */
#makePicks[data-all-entries-mode="1"] .pickTabbedEntryToolbar > .myPicksTableActions{
    margin-left: 0;
    width: auto;
}

#makePicks[data-all-entries-mode="1"] .myPicksTableFrame:has(.pickEntrySections--infoRight) .myPicksTableActions{
    margin-left: 0;
}

.myPicksTableActions #pickDefaultViewAllButton{
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.myPicksTableActions [data-pick-settings-trigger][data-pick-settings-tab="entry"]{
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.myPicksTableActions .pickSaveActions{
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: 0;
}

.pickToolbarControls{
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
    color: var(--c1);
}

.myPicksOptionsColumn .pickToolbarControls{
    align-items: center;
    flex-direction: row;
    gap: 10px;
}

.pickToolbarControlsBox{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
/*    border: 1px solid var(--c1);*/
    border-radius: var(--r3);
    padding: 13px 20px 10px 20px;
    
}

.myPicksOptionsColumn .pickToolbarControlsBox{
    align-items: center;
    flex-direction: row;
    width: auto;
    box-sizing: border-box;
}

.pickToolbarControlsHeading{
    color: var(--c1);
    font-family: var(--ff1);
    font-size: 9pt;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.myPicksOptionsColumn .pickToolbarControl{
    align-items: center;
    flex-direction: row;
    gap: var(--g1);
    justify-content: space-between;
    margin-right: 0;
    width: auto;
}

.myPicksOptionsColumn .pickToolbarControlLabel{
    flex: 0 0 auto;
    font-size: 8pt;
    line-height: 1;
    text-align: left;
}

.myPicksOptionsColumn .pickToolbarSelectShell{
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    width: 100%;
}

.myPicksOptionsColumn .pickToolbarSelectDisplay{
    display: block;
    max-width: 120px;
    text-align: right;
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings{
    border: 1px solid rgba(23, 33, 54, .14);
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 10px;
    height: var(--my-picks-toolbar-height);
    min-height: 0;
    order: 0;
    padding: 5px 8px 5px 12px;
    white-space: nowrap;
}

.myPicksOptionsColumn .pickToolbarControlsBox--settingsTrigger{
    box-sizing: border-box;
    flex: 0 0 auto;
    height: var(--my-picks-toolbar-height);
    min-height: 0;
    padding: 5px 8px;
    white-space: nowrap;
}

.myPicksOptionsColumn .pickToolbarControlsBox:not(.pickToolbarControlsBox--globalSettings){
    order: 1;
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings .pickToolbarControl{
    cursor: default;
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings .pickToolbarControlLabel{
    font-size: 9pt;
    text-transform: none;
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings .pickToolbarSelectShell{
    background: var(--c-s1);
    border: 1px solid rgba(23, 33, 54, .18);
    border-radius: var(--r2);
    box-sizing: border-box;
    cursor: pointer;
    flex: 0 0 var(--pick-toolbar-select-width, 112px);
    margin-left: auto;
    min-height: 31px;
    max-width: none;
    padding: 0 8px;
    width: var(--pick-toolbar-select-width, 112px);
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings .pickToolbarSelectShell--entryView{
    --pick-toolbar-select-width: 68px;
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings .pickToolbarSelectShell--teamStyle{
    --pick-toolbar-select-width: 92px;
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings .pickToolbarSelectShell--bottomRow{
    --pick-toolbar-select-width: 124px;
}

.myPicksOptionsColumn .pickToolbarControlsBox--globalSettings .pickToolbarSelectDisplay{
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    text-align: center;
}

.myPicksOptionsColumn .pickSaveActions{
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-left: 0;
    width: auto;
}

.pickSheetFooter{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

@container dashboard-main (max-width: 880px){
    .dashboardPanel.dashboardPanel--mypicks{
        width: 100%;
    }

    .myPicksLayout{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .myPicksOptionsColumn,
    .myPicksEntriesColumn{
        grid-column: 1;
        grid-row: auto;
    }

    #pickSheetToolbar{
        flex-wrap: wrap;
    }

    .myPicksOptionsColumn #pickSheetToolbar{
        flex-wrap: nowrap;
    }
}

#pickBoxNotes{
    font-family: var(--ff1);
    font-size: var(--fs-small1);
}

/* The day and time are set as the standings' column headers are: the same
   size, weight, grey, spacing, and capitals, with tabular figures (see
   #leagueStandingsTable.standingsType thead th in standings.css), and aligned
   left. The placeholder takes the same type as the label it stands in for, so
   a row with one is exactly as tall as a row with the other. */
.pickDateLabel,
.pickDateLabelPlaceholder{
    --picks-ink-3: #79849a;
    color: var(--picks-ink-3);
    font-family: var(--ff1);
    font-size: var(--fs-small2);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: var(--ls3);
    line-height: normal;
    margin-top: 12px;
    text-align: left;
    text-transform: uppercase;
}

.pickDateLabelPlaceholder{
    visibility: hidden;
}

/* Which games share a kickoff, drawn as a hairline instead of a shaded band:
   it sits under the day and time that name them and runs to the last game
   kicking off at that time. A line rather than a fill because the page is
   already dense and the times are context here, not the reason anyone came -
   this way the grid reads as one field of teams again, with the schedule stated
   quietly beneath the labels.

   A card pads to each side, so within a run the line reaches past its own label
   to meet the next one and the run comes out continuous. At the two ends of the
   run it pulls back to the label's edge, which is the only gap between one run
   and the next. */
.pickDateLabel,
.pickDateLabelPlaceholder{
    position: relative;
}

.pickDateLabel::after,
.pickDateLabelPlaceholder::after{
    /* Only the bottom edge paints along a run. The box stands --r1 above it so
       the two ends have that much to turn up into - see the run rules below,
       where a side border and a matching corner radius make the turn all
       curve. */
    border-bottom: 2px solid var(--c-s3);
    bottom: calc(100% + 4px);
    content: "";
    height: var(--r2);
    left: calc(-1 * var(--pick-card-hairline-reach));
    position: absolute;
    right: calc(-1 * var(--pick-card-hairline-reach));
    /* The placeholder hides its stand-in text, and a pseudo-element of a hidden
       box is hidden with it, so the line has to opt back in. */
    visibility: visible;
}

/* Scoped away from the vertical layout, which insets the other two edges: left
   and right are where its line lives, not where its run ends, and equal
   specificity would otherwise let these two reach across layouts. */
.pickEntrySections:not(.pickEntrySections--vertical) .pickGameCard--timeRunStart :is(.pickDateLabel, .pickDateLabelPlaceholder)::after{
    border-bottom-left-radius: var(--r3);
    border-left: 1px solid var(--c-s4);
    left: 0;
}

.pickEntrySections:not(.pickEntrySections--vertical) .pickGameCard--timeRunEnd :is(.pickDateLabel, .pickDateLabelPlaceholder)::after{
    border-bottom-right-radius: var(--r3);
    border-right: 1px solid var(--c-s4);
    right: 0;
}

/* The day and the kickoff time are two lines of their own rather than one line
   split by a <br>. */
.pickDateLabelDay,
.pickDateLabelTime{
    display: block;
}

.newDate{
    border-left: 0;
}

.rowTitles{
    font-family: var(--ff1);
    font-size: 100pt;
    color: rgba(255,255,255,.6);
    font-weight: bolder;
    position: absolute;
    z-index: -1;
}

#pickSheetInner{
    position: relative;
}

#favoritePicksTitle{
    top: -35px;
    left: 200px;
    letter-spacing: normal;
    font-weight: normal;
}

#underdogPicksTitle{
    bottom: 128px;
    right: 200px;
    letter-spacing: normal;
    font-weight: normal;
}

/* The entry select in Single Entry view. It is a native select rather than the
   scripted .selectMenu widget, and a native select draws its own indicator - on
   macOS a stacked up/down caret pair sitting right beside the entry name.
   appearance:none drops that indicator and the space reserved for it; the
   select still opens its menu and still steps with the carets either side. */
.selectMenu2{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    text-decoration: none;
    font-size: var(--fs-big3);
    font-weight: 700;
    /* The box is as wide as the longest entry name in the league, so a shorter
       name would otherwise sit against the left edge with the leftover width
       trailing off toward the next caret. text-align-last is what centers the
       closed control's own text in Firefox. */
    text-align: center;
    text-align-last: center;
    padding: 0;
}

/* Locked games overlay.

   A lock on each team of a locked game, and nothing else. There used to be a
   dark pane over the whole locked run as well - one sheet from the first locked
   card's left edge to the last one's right edge, positioned by script because
   the cards are content-width inline-blocks with nothing fixed to key off in
   CSS. The per-team locks say the same thing without dimming the matchup, the
   spread and the kickoff time underneath, so the pane and the script that
   measured it are gone. */
.pickEntryCards{
    /* Still the positioning context the cards sit in. */
    position: relative;
}

/* The matchup badge: one per game that has something to say about the
   matchup - a lock once it has locked, otherwise a balance for a neutral field
   or its first weather alert - its glyph in --c1 on a white disc,
   dead centre between the two teams: each team is its tile together with its
   spread box, and the badge sits in the middle of the row gap that parts them. The two teams are the same size,
   so that is also the middle of the whole matchup.

   It sits in the bottom tile's .pickOptionWrap, a sibling of the tile rather
   than a child. The reason is opacity: the unpicked side of a locked matchup is
   faded, opacity applies to a whole subtree, and a child could therefore never
   be more solid than the tile it marks. From there it reaches back past
   anything of the bottom team's that comes before its tile - its spread box,
   when the Spread Orientation setting puts that box first - and then half the
   row gap. --lock-reach below is that distance.

   Centred by transform rather than by flex: the tile holds a team code, a
   colour square or a logo, and none of them should be moved to make room for a
   mark that sits over them. */
.matchupBadge{
    /* A spread box is one line of --spread-size at line-height 1, plus 2px of
       padding top and bottom and a 2px border on its rounded edge only - see
       .pickSpreadBox. */
    --lock-spread-box: calc(var(--spread-size) + 6px);
    --lock-reach: calc(var(--row-gap) / 2);

    position: absolute;
    top: calc(-1 * var(--lock-reach));
    left: 50%;
    transform: translate(-50%, -50%);
    /* Above everything else among the games - both tiles, the spread boxes,
       and a tile lifted to 5 while the pointer is on it or on its spread box,
       whose logo would otherwise draw over the lock beside it. It cannot rise
       over the page's overlays: the entries column holding the games sets its
       own z-index (.pickEntryListEntriesColumn), so the menus, the info panel,
       and the modals stack against the column as a whole. */
    z-index: 10;
    pointer-events: none;

    align-items: center;
    background: #fff;
    border-radius: var(--r2);
    display: flex;
    font-size: calc(var(--pick-width)/4);
    height: 1.75em;
    width: 1.75em;
    justify-content: center;
    line-height: 1;
    color: var(--c1-a5);
    border: 2px solid var(--c1-a5);

    /* drop-shadow on the disc keeps it from melting into a pale tile. Kept
       faint so it reads as depth, not as an outline. */
    filter: drop-shadow(0 1px 1px rgba(23, 33, 54, 0.22));
    box-shadow: 0 0 0 2px var(--c-s1);

    /* Drawn on a layer of its own, always. The badge is centred by a half-size
       translate, so it sits on fractional pixels, and hovering a tile fades it
       and lifts it (opacity and z-index - see .pickOptionWrap:has(.pick:hover)
       .pick). On a GPU-composited page that change regroups what is painted
       together, and the badge, its shadow, and its gradient-filled glyph were
       repainted on a slightly different subpixel - a visible jump. Kept on one
       layer, it is painted once and the neighbours' changes leave it alone. */
    will-change: transform;
}

/* A game flagged for more than one thing - two weather alerts, or a neutral
   site with weather - carries the count of them all in a small badge at the
   bottom right of the disc, navy on the white disc's border so it reads apart
   from the disc it sits on. The disc stays a disc whatever the count. Its
   text is 0.6 of the disc's, and every size below is in that text's em, so the
   count follows the disc as --pick-width scales it. */
.matchupBadgeCount{
    position: absolute;
    right: -0.55em;
    bottom: -0.55em;
    box-sizing: border-box;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 0.25em;
    border: 1px solid var(--c-s1);
    border-radius: 0.8em;
    background: var(--c1);
    color: var(--c-s1);
    font-family: var(--ff1);
    font-size: 0.6em;
    font-weight: var(--fw3);
    line-height: calc(1.6em - 2px);
    text-align: center;
}

/* A game that locks while the page is open swaps to the lock on the next
   load; until then its other badge goes, since the weather and the field no
   longer bear on a pick that cannot be made. The lock itself is the one badge
   holding .fa-lock, and stays: a game already locked when the page drew it
   carries .pickGameCard--locked too. */
.pickGameCard--locked .matchupBadge:not(:has(.fa-lock)){
    display: none;
}

/* Start (top) and Inside put the bottom team's spread box before its tile, so
   the lock reaches back past that box as well. Outside and End (bottom) put it
   after the tile, and the gap between the teams is right before the tile. */
.pickGameCard--spreads-top .matchupBadge,
.pickGameCard--spreads-inside .matchupBadge{
    --lock-reach: calc(var(--lock-spread-box) + var(--row-gap) / 2);
}

/* The teams sit side by side in the vertical layout, so the lock reaches left
   from the bottom tile instead of up, and is centred on the row's height. A
   spread box there is a fixed width rather than one line high - see
   --pick-vertical-spread-box-width on #picksBody. */
.pickEntrySections--vertical .matchupBadge{
    --lock-spread-box: var(--pick-vertical-spread-box-width);

    left: calc(-1 * var(--lock-reach));
    top: 50%;
}

/* A locked column offers nothing to click, so nothing in it should suggest
   otherwise. The pick tiles keep their .pick class when locked — the markup
   swaps the <label> for a <div> but reuses the styling — and .pick carries
   cursor: pointer for the interactive case, which left a hand cursor hovering
   over games that can no longer be changed. */
.pickGameCard[data-locked="1"],
.pickGameCard[data-locked="1"] *{
    cursor: default;
}

/* The alert raised when a save carried a pick for a game that had already
   kicked off. Everything but the width comes from the shared .modal, which
   sizes to its content - a single sentence would otherwise stretch into one
   long line across the dashboard. */
.stalePickAlert{
    max-width: 480px;
    width: 480px;
}

.stalePickAlertMessage{
    line-height: 1.45;
}

/* --- Rename dialog, over the settings modal --------------------------------
   The entry name is edited here rather than in the row it sits in, so the list
   keeps its width while a name is being typed and only resizes once the name is
   settled. Its z-index clears .modalBackdrop's so it stacks over the settings
   modal that opened it rather than behind it. */
.pickEntryRenameBackdrop{
    z-index: 4200;
}

.pickEntryRenameModal{
    width: 320px;
    max-width: calc(100vw - 32px);
}

.pickEntryRenameField{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 18px;
}

.pickEntryRenameLabel{
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-small3);
    font-weight: var(--fw2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pickEntryRenameInput{
    width: 100%;
}

/* --- Saved-picks toast ---------------------------------------------------
   Pinned to the dashboard's own box with the same four values .modalBackdrop
   uses, so it centres over the dashboard exactly as the alerts on this page do
   and stays put while the panel behind it scrolls.

   No dimming and no pointer, unlike a modal: the save is finished and nothing
   is being asked of the member, so the page underneath stays live and usable.
   It sits just under .modalBackdrop's z-index, because a real alert - a stale
   pick, say - outranks a confirmation. */
.pickSaveToastLayer{
    align-items: center;
    bottom: var(--db-edge-gap);
    display: flex;
    justify-content: center;
    left: var(--db-content-left);
    pointer-events: none;
    position: fixed;
    right: var(--db-overlay-right);
    top: var(--db-overlay-top);
    z-index: 300;
}

/* The site's own transient notice, moved into the dashboard: same green, radius,
   type and padding as .pcf-verify-notice, which is what a save confirmation
   looks like everywhere else here. */
.pickSaveToast{
    /*background: rgba(255,255,255,.5);*/
    background: rgb(from var(--c1) r g b / .5);
    backdrop-filter: blur(10px);
    border-radius: var(--r3);
    box-shadow: 0 10px 30px rgba(23, 33, 54, .18);
    box-sizing: border-box;
    color: var(--c-s1);
    font-family: var(--ff1);
    font-size: var(--fs-big3);
    font-weight: var(--fw1);
    line-height: 1.2;
    max-width: 640px;
    opacity: 0;
    padding: 60px 120px;
    text-align: center;
    transform: translateY(6px) scale(.98);
    /* Leaving. The site opens overlays in 190ms ease-out and closes them in
       150ms ease-in - see pcfModalBackdropOpen and its closing pair in main.css
       - so the toast arrives and leaves on the same two curves. */
    transition: opacity 150ms ease-in, transform 150ms ease-in;
    width: fit-content;
    text-transform: uppercase;
}

/* Arriving. */
.pickSaveToastLayer.is-visible .pickSaveToast{
    opacity: 1;
    transform: none;
    transition: opacity 190ms ease-out, transform 190ms ease-out;
}

@media (prefers-reduced-motion: reduce){
    .pickSaveToast{
        transform: none;
        transition: none;
    }
}

#pickToolbarSettingsButton{
    transition: all 60ms linear;
}

#pickToolbarSettingsButton:hover{
    cursor: pointer;
    background: var(--c1-a2);
}