/* The Shift page is built from the site's own tiles, hero, pills, cards and folds. This adds only
   what they don't cover, in the same type and colours. */

.px-shift {
  --sh-tile: var(--cs-tile, rgba(255, 255, 255, .05));
  --sh-line: var(--cs-line, rgba(255, 255, 255, .08));
  --sh-disp: var(--f-disp, var(--f-sans));
  display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px;
}
.px-shift .px-card { padding: 22px 24px 24px; }
.px-shift .px-card.px-fold { padding: 0; }
.px-shift .px-foot { margin: 4px 2px 0; }
.px-shift .px-bar { padding-bottom: 0; }
html.cs .px-shift .px-tabs-wrap { margin: 0; }
.px-shift .px-slates { flex-wrap: wrap; }
html:not(.cs) .px-shift .px-slates { border-radius: 18px; }
.px-shift .px-rail { margin-bottom: 0; }
.px-shift .up { color: var(--px-up); }
.px-shift .down { color: var(--px-down-hi, var(--px-down)); }
.px .px-slate[disabled] { opacity: .4; cursor: default; }
html.cs .px-shift .px-tile { min-height: 96px; }
.sh-none { margin: 0; font-size: 14px; color: var(--px-ink-2); }

/* a team's logo tile */
.sh-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.px .sh-team { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 6px 14px; overflow: hidden; border: 0; border-radius: 14px; background: var(--sh-tile); color: var(--px-ink); cursor: pointer; }
.sh-team::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--t1); }
.sh-team img { width: 52px; height: 52px; object-fit: contain; }
.sh-team b { font: 800 19px/1 var(--sh-disp); }
@media (hover: hover) and (pointer: fine) { .px .sh-team:not([disabled]):hover { box-shadow: inset 0 0 0 2px var(--px-gold, #fff); } }

/* the same tile with a player on it */
.px .sh-player { justify-content: flex-start; padding: 16px 8px 14px; }
.sh-shot { display: flex; justify-content: center; width: 100%; height: 84px; overflow: hidden; }
.sh-team .sh-shot img { width: auto; height: 100%; max-width: 100%; object-fit: cover; object-position: 50% 0; }
.sh-player b { font-size: 18px; line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
.sh-mates { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.px .sh-player.small { padding: 12px 6px 11px; gap: 6px; }
.sh-player.small .sh-shot { height: 58px; }
.sh-player.small b { font-size: 16px; }
.px .sh-player.on { background: color-mix(in srgb, var(--t1) 55%, var(--cs-panel, #12141a)); box-shadow: inset 0 0 0 2px var(--px-gold, #fff); }
.px .sh-player[disabled] { opacity: .35; cursor: default; }
.px .px-slate.sh-change:not(.on) { background: var(--sh-tile); }

/* pills under the player's name (Trend) */
.sh-hero-pick { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; margin-top: 18px; }
.sh-hero-pick .px-slates, html.cs .px-shift .px-hero .sh-hero-pick .px-slates { margin: 0; }

/* pills and filters along the top of a card */
.sh-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 4px; }
.sh-tools-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.px .px-slate.sh-filter-pill:not(.on) { background: var(--sh-tile); }
.sh-filters { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: var(--sh-tile); }
.sh-filter { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
.sh-filter > span { font: 500 13.5px var(--f-sans); color: var(--px-ink-2); }

/* two columns of big numbers */
.sh-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 900px; margin: 18px auto 0; }
.sh-side { min-width: 0; padding: 14px 12px 12px; border-radius: 12px; background: var(--sh-tile); text-align: center; }
.sh-side > b { display: block; font: 800 22px/1.15 var(--sh-disp); color: #fff; }
.px .sh-side select {
  width: 100%; max-width: 100%; padding: 0 20px; border: 0; background: none; color: #fff; font: 800 22px/1.15 var(--sh-disp); text-align: center; text-align-last: center; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-size: 6px 6px; background-position: right 6px center, right 0 center; background-repeat: no-repeat;
}
.sh-side option { color: #000; text-transform: none; }
.sh-side em { display: block; margin-top: 4px; font: 500 13px var(--f-sans); color: var(--px-ink-2); }
.sh-lines { display: flex; flex-direction: column; width: 100%; max-width: 900px; margin: 6px auto 0; }
.sh-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(116px, 190px) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 66px; padding: 8px 0; }
.sh-line + .sh-line { border-top: 1px solid var(--sh-line); }
.sh-line > b { text-align: center; font: 800 34px/1 var(--sh-disp); color: var(--px-ink-3); font-variant-numeric: tabular-nums; }
.sh-line > b.top { color: #fff; }
.sh-line-k { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font: 500 14px/1.2 var(--f-sans); color: var(--px-ink-2); }
.sh-line-k em { font: 800 18px/1 var(--sh-disp); font-style: normal; color: var(--px-ink-3); }
.sh-line-k em.up { color: var(--px-up); }
.sh-line-k em.down { color: var(--px-down-hi, var(--px-down)); }

/* a ranked list of players */
.sh-ranks { display: flex; flex-direction: column; margin-top: 12px; }
.sh-rank { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.sh-rank + .sh-rank { box-shadow: 0 -1px 0 var(--sh-line); }
@media (hover: hover) and (pointer: fine) { .sh-rank:hover { background: var(--sh-tile); } }
.sh-rank.few { opacity: .5; }
.sh-rank .px-face { width: 52px; height: 52px; }
.sh-rank-who { min-width: 0; }
.sh-rank-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 22px/1.1 var(--sh-disp); color: #fff; }
.sh-rank-who i { font: 500 13px var(--f-sans); color: var(--px-ink-3); }
.sh-rank-nums { display: grid; grid-template-columns: repeat(3, 84px); gap: 6px; }
.sh-fig { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sh-fig b { font: 800 28px/1 var(--sh-disp); color: #fff; font-variant-numeric: tabular-nums; }
.sh-fig b.up { color: var(--px-up); }
.sh-fig b.down { color: var(--px-down-hi, var(--px-down)); }
.sh-fig i { font: 500 12.5px var(--f-sans); color: var(--px-ink-3); }

/* tables, behind a fold */
.sh-scroll { overflow-x: auto; scrollbar-width: thin; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.sh-table th { padding: 8px 12px; font: 500 13px var(--f-sans); color: var(--px-ink-3); text-align: right; white-space: nowrap; }
.sh-table td { padding: 12px; border-top: 1px solid var(--sh-line); text-align: right; white-space: nowrap; color: var(--px-ink); }
.sh-table .l { text-align: left; }
.sh-table tr.few { opacity: .5; }

/* a link to this page from a pick */
.sh-to-shift { display: inline-block; margin-top: 10px; font: 600 13px var(--f-sans); color: var(--px-ink); }

/* the display face's capitals, back over the sentence-case reset */
html.cs #app :is(.sh-side > b, .sh-side select, .sh-team b, .sh-rank-who b) { text-transform: uppercase; letter-spacing: .01em; }

@media (max-width: 720px) {
  .px-shift .px-card { padding: 16px 16px 18px; }
  .sh-tools, .sh-tools-r { align-items: flex-start; }
  .sh-filter { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sh-teams { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .sh-side { padding: 12px 8px 10px; }
  .sh-side > b, .px .sh-side select { font-size: 16px; }
  .px .sh-side select { padding: 0 12px 0 2px; background-position: right 5px center, right 0 center; }
  .sh-line { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); min-height: 60px; }
  .sh-line > b { font-size: 28px; }
  .sh-line-k { font-size: 13px; }
  .sh-rank { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 14px 4px; }
  .sh-rank .px-face { width: 44px; height: 44px; }
  .sh-rank-nums { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}