/* The game info panel: a game's details and weather, and its injury reports,
   built by pcf_render_my_picks_game_info_html(). My Picks raises it over a
   hovered game and docks it beside the entry list, and the score strip raises
   it from the cloud and crutch beside each game, so it is styled here, where
   every page with the strip loads it, rather than in my-picks.css. Where the
   panel docks and slides on My Picks stays in my-picks.css.

   Loaded after my-picks.css on the dashboard, which is where these rules sat in
   that file's order: nothing after them there touched the panel.

   Everything inside the panel is scoped to .pickGameInfo. The NFL Hub's schedule
   raises it too, from the cloud in a game's details, and places it beside the
   game box itself (see .scheduleGameInfoPanel in nfl-hub.css). */

.pickGameInfo{
    position: fixed;
    display: none;
    width: 760px;
    max-width: calc(100vw - 40px);
    min-height: 0;
    height: auto;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    text-align: left;
    padding: 12px;
    box-sizing: border-box;
    /* A tray from the site's blue-grey ramp rather than a flat neutral: the
       panel floats over the white page, so it needs a tint the drop shadow can
       sit against, and --c1-a3 is the same family the dashboard chrome uses. The
       sections below sit on white, so the tray is what separates them. */
    background: var(--c-s2);
    
    /*border: 1px solid var(--c1);*/
    border-radius: var(--r3);
    /*box-shadow: 0 8px 24px rgba(0, 0, 0, .18);*/
    z-index: 200;
    line-height: 1.35;
    pointer-events: none;
}

.pickGameCardLeftEdge .pickGameInfo{
    left: 0;
    transform: none;
}

.pickGameCardRightEdge .pickGameInfo{
    left: auto;
    right: 0;
    transform: none;
}

.pickGameInfo .pickGameInfoSections{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* White cards on that tray. Beyond reading as cards rather than as panels of a
   slightly different grey, this is what carries the label text: .pickGameInfoLabel
   is rgba(0, 0, 0, .55), which came to only 4.27:1 on the old lightgray and
   missed AA for normal text. On white it clears it. */
.pickGameInfo .pickGameInfoSection{
    min-width: 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--c-s1);
}

.pickGameInfo .pickGameInfoSectionTitle{
    font-size: var(--fs-small3);
    font-weight: var(--fw3);
    letter-spacing: var(--ls2);
    text-transform: uppercase;
    color: rgba(0, 0, 0, .6);
    margin-bottom: 8px;
    position: relative;
    white-space: nowrap;
}

/* Centred on the title's line box, which is what the injury view's flex row does
   to its own logo. The two panels used to place their logos by different means -
   this one pinned at a hand-set top: -4px, the injury row left to align-items:
   center - and landed about 1.5px apart. Same mechanism, same result, and the
   one optical correction they both need is on .pickGameInfoTeamLogo below. */
.pickGameInfo .pickGameInfoTeamLogos{
    align-items: center;
    display: inline-flex;
    gap: 1px;
    height: 20px;
    justify-content: flex-end;
    line-height: 0;
    pointer-events: none;
    position: absolute;
    left: 92px;
    top: 50%;
    transform: translateY(-50%);
    width: 49px;
}

/* A team in the details grid: its logo and its code on one line, in a cell the
   same width as Venue's or Location's. */
/* Block-level flex, not inline-flex: an inline-level box sits on a text line, and
   the line reserves descender space beneath it that the logo and the code never
   use - which made this row taller than a row of plain text even with the logo cut
   to the line's own height. As a block there is no line box to leave residue. */
.pickGameInfo .pickGameInfoTeam{
    align-items: center;
    display: flex;
    min-width: 0;
}

.pickGameInfo .pickGameInfoTeamCode{
    letter-spacing: var(--ls1);
}

/* The team's spread after its code, in the same figures down the panel. */
.pickGameInfo .pickGameInfoTeamSpread{
    font-variant-numeric: tabular-nums;
}

/* One typed space between the logo and the code, and between the code and the
   spread. The row is a flex container, which drops whitespace between its
   items, so each space is written into the start of the item that follows it.
   white-space: pre keeps it from being collapsed away. The code only takes one
   when a logo comes before it. */
.pickGameInfo .pickGameInfoTeamLogo + .pickGameInfoTeamCode::before,
.pickGameInfo .pickGameInfoTeamCode + .pickGameInfoTeamSpread::before{
    content: " ";
    white-space: pre;
}

/* The logo is sized to the line it sits on rather than to a pixel count, so it
   cannot make its row taller than a row of plain text: 1lh is exactly the value's
   own line box. Every line in the panel is then one line high, whether it holds a
   logo or not, without any row having to reserve space for the tallest thing that
   might appear in it.

   The same unit the pick card uses for its row gap. Scoped to the details grid -
   the injury view shares .pickGameInfoTeamLogo and wants its own size. */
.pickGameInfo .pickGameInfoTeam .pickGameInfoTeamLogo{
    flex-basis: auto;
    height: 1lh;
    width: auto;
}

/* The blank seeded panel has no game in context, so neither view shows a team
   logo - see seedBlankListPickInfoPanelFromCard() in site.js. */
.pickGameInfo.pickGameInfo--hideTeamLogos .pickGameInfoTeamLogos,
.pickGameInfo.pickGameInfo--hideTeamLogos .pickGameInfoInjuryTeamLogo{
    display: none;
}

/* The shared logo, in the details panel and in the injury view alike.

   The 1px lift is the optical correction both of them need. A 20px logo centred
   on a 15px line box overhangs it at both ends, and the line box reserves
   descender space that an uppercase label or a team name never uses - so a logo
   centred on the box reads low against the letters beside it. Applied here, on
   the logo itself, it reaches every panel that shows one. */
.pickGameInfo .pickGameInfoTeamLogo{
    display: block;
    flex: 0 0 24px;
    height: 20px;
    object-fit: contain;
    width: 24px;
    transform: translateY(-1px);
}

/* The injury report repeats the details view's logo beside each team's heading,
   to the right of the name. The shared .pickGameInfoSectionTitle is used by the
   details sections too, which have no logo, so the row treatment is a modifier
   rather than a change to the title itself. */
.pickGameInfo .pickGameInfoSectionTitle--withLogo{
    align-items: center;
    display: flex;
    gap: 6px;
}

.pickGameInfo .pickGameInfoSectionGrid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    column-gap: 12px;
    row-gap: var(--g2);
}

.pickGameInfo .pickGameInfoLine{
    min-width: 0;
    white-space: nowrap;
}

.pickGameInfo .pickGameInfoLabel{
    display: block;
    font-size: var(--fs-small3);
    letter-spacing: var(--ls1);
    text-transform: uppercase;
    color: rgba(0, 0, 0, .55);
}

.pickGameInfo .pickGameInfoValue{
    display: block;
    color: #111;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A team's cell holds only its logo and its short code, so it has no long text
   to cut off with an ellipsis. Clipping it cut the top pixel off every logo
   instead: the logo is lifted 1px (see .pickGameInfoTeamLogo) out of a box
   exactly its own height, and art that reaches the top of the image lost that
   row. */
.pickGameInfo .pickGameInfoValue:has(> .pickGameInfoTeam){
    overflow: visible;
}

.pickGameInfo .pickGameInfoNeutralSiteLabel{
    background: var(--c1);
    border-radius: var(--r1);
    color: var(--c-s1);
    display: inline;
    line-height: inherit;
    padding: 0 2px;
    white-space: nowrap;
}

.pickGameInfo .pickGameInfoTypeSeparator{
    color: rgba(0, 0, 0, .42);
}

@media (max-width: 520px){
    .pickGameInfo .pickGameInfoSections{
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Game info panel: weather / injuries ----------------------------------
   The panel is sized by the weather view and by nothing else. That view is the
   only one in flow; the injuries view is taken out of flow and stretched over
   it, so however long a report is it cannot lend the panel a single pixel. The
   weather view stays in place while injuries are shown - hidden by visibility,
   not display - so it keeps holding the panel open at its own height.

   A grid with both views in one cell was the first attempt and was wrong: a
   grid cell is as tall as its tallest item, so the panel grew to fit the longer
   report. It did not change size when toggling, but it was the wrong size to
   begin with. */
.pickGameInfo .pickGameInfoViews{
    position: relative;
}

.pickGameInfo .pickGameInfoView{
    min-width: 0;
}

.pickGameInfo .pickGameInfoView--injuries{
    /* No padding above or below: padding at either end of a scroll container is
       part of the scrolled content, so it is only on screen at that end of the
       list. Mid-list the next row occupies the space instead, which is why the
       gutter looked right at the foot of the list and gone everywhere else.

       Both gutters come from the inset rather than from padding, so they belong
       to the panel and not to the content, and are the same 12px at every
       scroll position. Only the sides stay padding: there is no scrolling
       across, so nothing moves through them. */
    padding: 0 6px;
    position: absolute;
    inset: 6px 0;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;

    /* A report longer than the panel scrolls, and says so with the fades below
       rather than with a scrollbar, which in a panel this narrow would take a
       visible bite out of the column. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pickGameInfo .pickGameInfoView--injuries::-webkit-scrollbar{
    display: none;
}

.pickGameInfo.is-showingInjuries .pickGameInfoView--data{
    visibility: hidden;
    pointer-events: none;
}

.pickGameInfo.is-showingInjuries .pickGameInfoView--injuries{
    visibility: visible;
    pointer-events: auto;
}

/* Fading to transparent is fading to the panel's own white, and which ends fade
   follows the scroll position - the classes come from syncGameInfoInjuryFades()
   in site.js - so a report that fits is not masked and neither end is softened
   when there is nothing past it. */
.pickGameInfo .pickGameInfoView--injuries{
    --pick-game-info-fade: 28px;
}

.pickGameInfo .pickGameInfoView--injuries.is-scrollable-up{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pick-game-info-fade));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pick-game-info-fade));
}

.pickGameInfo .pickGameInfoView--injuries.is-scrollable-down{
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 var(--pick-game-info-fade));
    mask-image: linear-gradient(to top, transparent 0, #000 var(--pick-game-info-fade));
}

.pickGameInfo .pickGameInfoView--injuries.is-scrollable-up.is-scrollable-down{
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--pick-game-info-fade),
        #000 calc(100% - var(--pick-game-info-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--pick-game-info-fade),
        #000 calc(100% - var(--pick-game-info-fade)),
        transparent 100%
    );
}

/* The crutch, in the same corner as .pickGameInfoSideToggle and sized to match
   it. It sits in the corner itself when it is the only button there - the card
   panels carry no side toggle, which site.js adds to the docked panel alone -
   and steps left by one button's width plus a gap when the side toggle is
   present, so the two never overlap and neither moves when the panel changes
   sides. */
.pickGameInfo .pickGameInfoInjuryToggle{
    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: 8pt;
    line-height: 1;
    border-radius: 50%;
    transition: all 120ms linear;
    z-index: 3;
}

.pickGameInfo .pickGameInfoInjuryToggle:active{
    transform: scale(.95);
}

.pickGameInfo .pickGameInfoInjuryToggle:hover{
    transform: scale(1.1);
}

/* Step left by one button plus a 4px gap, but only where the side toggle is
   actually on screen. Presence in the DOM is not the test: it is rendered into
   every docked panel and then hidden by display:none in Single Entry and in the
   hover overlay, where the panel does not switch sides. Which of those applies
   is decided at runtime, so updateListPickInfoPanelToggle() in site.js sets this
   class from the button's own offsetParent rather than this file trying to
   restate the conditions those display:none rules use. */
.pickGameInfo--withSideToggle .pickGameInfoInjuryToggle{
    right: 28px;
}

/* Out to the NFL Hub's injury reports, immediately left of the toggle while that
   toggle is showing the cloud - which is to say, only while the panel is showing
   injuries. It is a way out of the report, so it has no business sitting beside
   the crutch on the weather view, where there is no report to leave.

   A bare glyph rather than a circle: it leaves the page rather than changing what
   this panel shows, so it should not read as another state toggle. It tracks the
   button beside it - one button width plus the same 4px gap - which is why it has
   its own offset for the case where the side toggle has pushed that button
   along. */
.pickGameInfo .pickGameInfoInjuryLink{
    display: none;
    position: absolute;
    top: 6px;
    right: 28px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    color: var(--c1);
    font-size: var(--fs-big2);
    line-height: 1;
    text-decoration: none;
    transition: all 120ms linear;
    z-index: 3;
}

.pickGameInfo--withSideToggle .pickGameInfoInjuryLink{
    right: 50px;
}

.pickGameInfo.is-showingInjuries .pickGameInfoInjuryLink{
    display: inline-flex;
}

.pickGameInfo .pickGameInfoInjuryLink:hover{
    transform: scale(1.1);
}

.pickGameInfo .pickGameInfoInjuryLink:active{
    transform: scale(.95);
}

/* Horizontal layout: the two teams side by side, matching the two columns the
   weather sections use in this width. */
.pickGameInfo .pickGameInfoInjuryTeams{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* Vertical layout: Entry List only. There the info panel is a narrow column
   beside the games - 340px - so the teams stack, the first team's report filling
   the top half and the second the bottom.

   Scoped to .pickEntrySections--all deliberately. Single Entry docks the panel
   too, but below the games and 666px wide, which is the horizontal layout and
   keeps the two columns above; keying this on the docked panel alone collapsed
   that one to a single column as well. */
.pickEntrySections--all .pickEntryListInfoColumn > .pickGameInfo--listDock .pickGameInfoInjuryTeams{
    grid-template-columns: minmax(0, 1fr);
}

.pickGameInfo .pickGameInfoInjuryTeam{
    min-width: 0;
}

.pickGameInfo .pickGameInfoInjuryList{
    display: grid;
    gap: 2px;
    margin-top: 4px;
}

.pickGameInfo .pickGameInfoInjuryRow{
    align-items: baseline;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) max-content;
}

.pickGameInfo .pickGameInfoInjuryPlayer{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pickGameInfo .pickGameInfoInjuryPosition{
    color: rgba(0, 0, 0, .55);
}

.pickGameInfo .pickGameInfoInjuryStatus{
    font-weight: var(--fw2);
    white-space: nowrap;
}

/* The statuses that change a pick read first, in red. Every status is set at
   the same weight, Q included. */
.pickGameInfo .pickGameInfoInjuryStatus--out,
.pickGameInfo .pickGameInfoInjuryStatus--injured-reserve,
.pickGameInfo .pickGameInfoInjuryStatus--suspension{
    color: var(--c-red);
}

.pickGameInfo .pickGameInfoInjuryStatus--doubtful{
    color: var(--c-red);
}

.pickGameInfo .pickGameInfoInjuryStatus--questionable{
    color: var(--c-amber, #b8770a);
}

.pickGameInfo .pickGameInfoInjuryEmpty{
    color: rgba(0, 0, 0, .55);
    margin-top: 4px;
}

/* --- Compact layout ---------------------------------------------------------
   pcf_render_my_picks_game_info_html()'s strip layout: everything at once, so
   nothing in it scrolls. The game details, the weather, and each team's
   injuries are white cards on the tray, each a single column of one-line
   entries - label left, value right; player left, status right - in type a step
   under the two-view panel: 12px for the entries, 10px for the labels and the
   card titles. The score strip's hover panel and My Picks' docked panel are
   both this panel; only where each puts it is theirs (main.css and
   my-picks.css).

   Left to itself it is a row: each card as wide as its longest line, so
   nothing is cut short, wrapping to a second row rather than running past the
   panel's edge. A team with a long report keeps its one column and scrolls
   past ten names - see .pickGameInfoInjuryList below. */
.pickGameInfo:where(:has(> .pickGameInfoStrip)){
    box-shadow: 0 10px 28px rgba(17, 31, 51, .28);
    padding: 5px;
    width: max-content;
}

.pickGameInfo .pickGameInfoStrip{
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 5px;
    line-height: 1.3;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoLabel,
.pickGameInfo .pickGameInfoStrip .pickGameInfoSectionTitle{
    font-size: 10px;
}

/* The logo in each injury card's title; the ones in the Away and Home rows are
   a line tall already and follow the smaller type on their own. */
.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryTeamLogo{
    height: 15px;
    width: 18px;
}

/* The two groupings the renderer wraps its cards in step aside, so every card
   is an item of the one row. */
.pickGameInfo .pickGameInfoStrip .pickGameInfoSections,
.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryTeams{
    display: contents;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoSection,
.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryTeam{
    background: var(--c-s1);
    border-radius: 6px;
    box-sizing: border-box;
    /* Never narrower than 164px, so a short card does not look pinched; grows to
       share out any room left on its row. */
    flex: 1 0 max-content;
    min-width: 164px;
    padding: 7px 9px;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoSectionTitle{
    margin-bottom: 5px;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoSectionGrid{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoLine{
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoLabel{
    flex: 0 0 auto;
}

/* The Away and Home rows carry a logo, taller than the text, so they centre the
   label on it rather than sitting it on the text's baseline. */
.pickGameInfo .pickGameInfoStrip .pickGameInfoLine:has(.pickGameInfoTeam){
    align-items: center;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoValue{
    text-align: right;
}

/* A line said on its own - Indoor Venue in place of an indoor game's
   forecast - centred across its whole section, in either layout. After the
   compact layout's line rules, whose space-between would otherwise pin it to
   the left. The grid it sits in takes the section's full width too, since it
   otherwise shrinks to the line and centres nothing. */
.pickGameInfo .pickGameInfoSectionGrid:has(> .pickGameInfoLine--notice){
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
}

.pickGameInfo .pickGameInfoLine--notice,
.pickGameInfo .pickGameInfoStrip .pickGameInfoLine--notice{
    grid-column: 1 / -1;
    /* A plain block centred by text-align rather than the compact layout's flex
       row, which would make the tag inside a block of its own; inline, it is
       drawn exactly as the Neutral Site tag is. */
    display: block;
    color: #111;
    text-align: center;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryList{
    column-gap: 12px;
    gap: 2px;
    margin-top: 0;
    /* Ten names tall - ten lines of this card's 1.3 line height and the 2px
       between them - and the rest scroll, rather than the list wrapping into a
       second column or pushing the panel taller. A list with more past either
       end fades there, as the two-view panel's report does above, and the
       fades stand in for a scrollbar. */
    max-height: calc(10 * 1.3em + 9 * 2px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    --pick-game-info-fade: 20px;
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryList::-webkit-scrollbar{
    display: none;
}

/* Which ends fade follows the scroll position - the classes come from
   pcfSyncGameInfoStripFades() in site.js - so a list that fits is not masked. */
.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryList.is-scrollable-up{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pick-game-info-fade));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pick-game-info-fade));
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryList.is-scrollable-down{
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 var(--pick-game-info-fade));
    mask-image: linear-gradient(to top, transparent 0, #000 var(--pick-game-info-fade));
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryList.is-scrollable-up.is-scrollable-down{
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--pick-game-info-fade),
        #000 calc(100% - var(--pick-game-info-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--pick-game-info-fade),
        #000 calc(100% - var(--pick-game-info-fade)),
        transparent 100%
    );
}

.pickGameInfo .pickGameInfoStrip .pickGameInfoInjuryEmpty{
    margin-top: 0;
}