/* Player props uses the house palette. Also compiled separately for scoped releases. */
.pp-page {
  min-width: 0;
  color: #fff;
  /* Row 1: eyebrow+title and the related-tool pills share a line, subtitle
     folds in tight underneath (was three stacked blocks + a separate nav). */
  /* Related-tool links, ported from .pr-scoring-open-btn's outline recipe
     (core/static/scss/_projections.scss: amber 1px border, 34px, transparent)
     so they read as secondary actions next to the page title - round 2 swap
     off .pr-util-btn, which read as too quiet next to a page title. */
  /* Row 2 (date / O-U-ALT / market tabs) and the bookmaker-line-switcher
     (row 3) are both single wrapping toolbar strips with the same rhythm. */
  /* Matchup cell (compact) - "TEAM @/vs OPP" over two thin rank bars */
  /* Market tabs, ported from the projections page's VISIBLE toolbar this
     round (round 1 wrongly cited .tabBtnWrapper/.tabBtn/.activeType, which
     actually styles that page's hidden player-detail chart tabs, not its
     main toolbar). The real target is the "Skaters Table | Goalies Table |
     All Table" segmented group (.tableJump-body/.tableJump-body-side in
     _projections.scss): one bordered/backgrounded group housing quiet
     26px-tall pills, amber-outlined + amber text + subtle amber tint when
     active, muted grey otherwise - no fill, no scale, no box-shadow.
     #tableSwitcher is also used unscoped by nhl_pickem.html, so every rule
     here stays ID-qualified under .pp-page to outrank that shared,
     unsourced main.css chrome. */
  /* "Sort by" stays the select's accessible name via the wrapping <label>
     but is visually hidden - row 3 shows only the select, no floating text. */
  /* Compact/Detailed density toggle, ported from the "Categories League |
     Points League" segmented group (.wrapper-marker/.marker) - same
     bordered/backgrounded outer track as the market tabs above, pinned
     right as before. */
  /* #ppSide (side note) and #betTypeButtonsContainer (Over/Under pills) now
     live directly in .bookmaker-line-switcher (moved out of #mainTableContainer
     in the template) so row 3 is one true row - grep of the inline <script>
     confirmed nothing queries them scoped under #mainTableContainer
     (document.getElementById/querySelector throughout), so no JS changes
     were needed for the move; aria-busy stays on #mainTableContainer itself. */
  /* Over/Under pills (#betTypeButtonsContainer .radio-container), ported
     from the "ESPN | Yahoo" radio-dot pill (.radio, form.adp_pos) - this is
     the one place the real target markup already matches: actual <input
     type=radio> + <label> pairs, same as Django's RadioSelect, just JS-built
     instead of server-rendered. Same track/pill/dot metrics. */
  /* O/U <-> ALT sliding switch. The "ESPN | Yahoo" idiom is two separate
     radio inputs with visible dots; this control is one checkbox driving a
     sliding highlight between two label spans (kept, JS reads
     #toggle-${tableId}.checked directly) - a literal dot doesn't fit a
     single-input slider, so it takes the plain segmented-group track/pill
     treatment instead, per the fallback. ID-qualified for the same reason
     as #tableSwitcher above (shared unscoped id with nhl_pickem.html). */
}
.pp-page .pg-head {
  margin-bottom: 6px;
}
.pp-page .pp-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
}
.pp-page .pp-head__id {
  min-width: 0;
}
.pp-page .pg-head__title {
  margin: 2px 0 0;
}
.pp-page .pg-head__sub {
  margin: 6px 0 0;
}
.pp-page .pp-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.pp-page .pp-tools a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(255, 163, 26, 0.45);
  border-radius: 8px;
  background: transparent;
  color: #ffb340;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pp-page .pp-tools a:hover {
  background: rgba(255, 163, 26, 0.1);
  border-color: #ffa31a;
}
.pp-page .pp-tools a:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 3px;
}
.pp-page .pp-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.pp-page .pp-date-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #b3b3b3;
}
.pp-page .pp-date-form label {
  font-size: 12px;
  white-space: nowrap;
}
.pp-page #ppDate {
  min-height: 44px;
  padding: 8px 12px;
  background: #1b1b1b;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color-scheme: dark;
}
.pp-page .ppr-pl {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pp-page .ppr-pl__hs {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #242424;
}
.pp-page .ppr-pl__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.pp-page .ppr-pl__name {
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-page .ppr-pl__sub {
  font: 11px "IBM Plex Mono", monospace;
  color: #b3b3b3;
}
.pp-page .ppr-pl__link {
  width: 11px;
  height: 11px;
  flex: none;
  opacity: 0.5;
}
.pp-page .pp-mtch-cell {
  justify-content: center !important;
}
.pp-page .pp-mtch-header .ag-header-cell-label {
  justify-content: center;
}
.pp-page .ppr-mtch {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.pp-page .ppr-mtch__txt {
  font: 12px "IBM Plex Mono", monospace;
  color: #fff;
  white-space: nowrap;
}
.pp-page .ppr-mtch__sep {
  color: #b3b3b3;
}
.pp-page .ppr-mtch__bars {
  display: flex;
  gap: 4px;
}
.pp-page .ppr-mtch__bar, .pp-page .ppr-rk__bar {
  display: block;
  width: 32px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.pp-page .ppr-mtch__bar i, .pp-page .ppr-rk__bar i {
  display: block;
  height: 100%;
}
.pp-page .ppr-crest {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.pp-page .ppr-rk {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pp-page .ppr-rk__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.pp-page #tableSwitcher {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #181818;
  border-radius: 6px;
  padding: 3px;
}
.pp-page #tableSwitcher .tableSwitchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #8a8a8a;
  font: 600 12px "Poppins", sans-serif;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pp-page #tableSwitcher .tableSwitchBtn:hover {
  color: #cfcfcf;
}
.pp-page #tableSwitcher .tableSwitchBtn.active {
  border-color: rgba(255, 163, 26, 0.5);
  background: rgba(255, 163, 26, 0.08);
  font-weight: 700;
}
.pp-page #tableSwitcher .tableSwitchBtn:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.pp-page #tableSwitcher .tableSwitchBtn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.pp-page button:focus-visible, .pp-page select:focus-visible, .pp-page input:focus-visible,
.pp-page .toggle:focus-visible + .toggle-label {
  outline: 2px solid #ffa31a;
  outline-offset: 3px;
}
.pp-page .bookmaker-line-switcher {
  align-items: center;
}
.pp-page #tableSwitcherBookmakers, .pp-page #tableSwitcherLines {
  margin: 0;
}
.pp-page .bookmaker-select, .pp-page .line-select, .pp-page #ppSort {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #1b1b1b;
  color: inherit;
  font: 13px "Poppins", sans-serif;
}
.pp-page .bookmaker-select:hover, .pp-page .line-select:hover, .pp-page #ppSort:hover {
  border-color: rgba(255, 163, 26, 0.4);
}
.pp-page .bookmaker-select:disabled, .pp-page .line-select:disabled, .pp-page #ppSort:disabled {
  color: #b3b3b3;
  cursor: not-allowed;
}
.pp-page .pp-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  color: #b3b3b3;
  font-size: 11px;
}
.pp-page .pp-sort-label__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pp-page #ppViewBar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #181818;
  border-radius: 6px;
  padding: 3px;
}
.pp-page #ppViewBar .pp-seg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #8a8a8a;
  font: 600 12px "Poppins", sans-serif;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pp-page #ppViewBar .pp-seg__btn:hover {
  color: #cfcfcf;
}
.pp-page #ppViewBar .pp-seg__btn.is-active {
  color: #ffb340;
  border-color: rgba(255, 163, 26, 0.5);
  background: rgba(255, 163, 26, 0.08);
  font-weight: 700;
}
.pp-page #ppViewBar .pp-seg__btn:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.pp-page #ppSide {
  display: flex;
  align-items: center;
  margin: 0;
  color: #b3b3b3;
  font-size: 12px;
  white-space: nowrap;
}
.pp-page #betTypeButtonsContainer {
  display: flex;
  align-items: center;
  margin: 0;
}
.pp-page .pp-status {
  margin: 0 0 6px;
  color: #ffb340;
  font-size: 13px;
}
.pp-page .pp-status:empty {
  display: none;
  margin: 0;
}
.pp-page #betTypeButtonsContainer .radio-container {
  margin: 0;
}
.pp-page #betTypeButtonsContainer .radio-container ul {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0;
  list-style: none;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}
.pp-page #betTypeButtonsContainer .radio-container li {
  list-style: none;
}
.pp-page #betTypeButtonsContainer .radio-container label {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pp-page #betTypeButtonsContainer .radio-container label:hover {
  color: #cfcfcf;
}
.pp-page #betTypeButtonsContainer .radio-container label:has(input:checked) {
  color: #ffb340;
  border-color: rgba(255, 163, 26, 0.5);
  background: rgba(255, 163, 26, 0.08);
  font-weight: 700;
}
.pp-page #betTypeButtonsContainer .radio-container input[type=radio] {
  accent-color: #ffa31a;
  width: 12px;
  height: 12px;
  margin: 0;
}
.pp-page #betTypeButtonsContainer .radio-container label:has(input:focus-visible) {
  outline: 2px solid #ffa31a;
  outline-offset: 1px;
}
.pp-page #betTypeToggles {
  display: flex;
  align-items: center;
}
.pp-page #betTypeToggles .toggle-container {
  position: relative;
}
.pp-page #betTypeToggles .toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pp-page #betTypeToggles .toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 3px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: #181818;
  cursor: pointer;
}
.pp-page #betTypeToggles .toggle:focus-visible + .toggle-label {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.pp-page #betTypeToggles .toggle-circle {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: auto;
  width: calc(50% - 3px);
  border: 1px solid rgba(255, 163, 26, 0.5);
  border-radius: 4px;
  background: rgba(255, 163, 26, 0.08);
  transition: left 0.18s ease;
}
.pp-page #betTypeToggles .toggle:checked + .toggle-label .toggle-circle {
  left: 50%;
}
.pp-page #betTypeToggles .toggle-label-text {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 32px;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
  font: 600 12px "Poppins", sans-serif;
  color: #8a8a8a;
}
.pp-page #betTypeToggles .toggle-label-text:nth-child(1) {
  color: #ffb340;
  font-weight: 700;
}
.pp-page #betTypeToggles .toggle:checked + .toggle-label .toggle-label-text:nth-child(1) {
  color: #8a8a8a;
  font-weight: 600;
}
.pp-page #betTypeToggles .toggle:checked + .toggle-label .toggle-label-text:nth-child(2) {
  color: #ffb340;
  font-weight: 700;
}
.pp-page .bets-table {
  height: 550px;
}
.pp-page .bets-table .ag-root-wrapper {
  height: 100%;
}
.pp-page .bets-table .ag-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  line-height: normal !important;
  font-variant-numeric: tabular-nums;
}
.pp-page .bets-table .ag-cell[col-id=player_name] {
  justify-content: flex-start;
}
.pp-page .bets-table .ag-header-cell-text {
  font-size: 12px;
  white-space: normal;
  line-height: 1.4;
}
.pp-page .bets-table .ag-overlay-no-rows-center {
  max-width: 90%;
  padding: 16px;
  white-space: normal;
  text-align: center;
}
.pp-page .bets-table .pp-pbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pp-page .bets-table .pp-pbar__t {
  width: 34px;
  height: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.pp-page .bets-table .pp-pbar__f {
  display: block;
  height: 100%;
  background: #b3b3b3;
}
.pp-page .bets-table .pp-pbar__v {
  font: 500 13px "IBM Plex Mono", monospace;
}
@media (max-width: 600px) {
  .pp-page {
    /* Flex-wrap alone leaves .pp-tools squeezed onto the title's line instead
       of dropping to its own row at narrow widths (its two links wrap
       internally and overflow rather than the row breaking) - force the
       column layout explicitly below the breakpoint. */
  }
  .pp-page .pp-head__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .pp-page .bookmaker-line-switcher > div, .pp-page .pp-sort-label {
    max-width: 100%;
  }
  .pp-page .pp-sort-label {
    flex-basis: 100%;
  }
  .pp-page #ppSort {
    width: 100%;
  }
  .pp-page #ppViewBar {
    margin-left: 0 !important;
  }
  .pp-page #tableSwitcher .tableSwitchBtn {
    padding: 0 8px;
  }
  .pp-page .bets-table .ag-paging-panel {
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
    padding: 8px;
  }
}