/* scatter plot (Average Major SG vs Expected Major SG) - same D3 v3 scatter
   approach blogs_sub/4.html's "Major Performers" post already uses (same
   /player classes/data shape family: diagonal y=x line, dashed zero-grids,
   quadrant titles, hover crosshair), just under a perf- prefix and rebuilt
   fluid-width here since this page lives in the majors-section feed-div
   layout (static/major_winners.css) rather than a fixed-width blog column.
   headshot-image markers from that original post are intentionally left out
   for now - plain dots only. */
/* restrictions list straight from the feed's own 'restrictions' array -
   collapsed by default (toggled the same show/hide way .favourites-toggle
   already works on this page), so it's available without crowding the
   intro note for everyone who doesn't need it */
.major-performers-methodology {
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 10.5px;
  color: var(--font-color-faint-2);
}

.major-performers-methodology p {
  margin: 0;
}

.major-performers-methodology-subheader {
  margin-top: 8px;
  font-weight: bold;
  color: var(--font-color-base);
}

.major-performers-methodology ul {
  margin: 4px 0 0 0;
  padding-left: 16px;
}

.major-performers-methodology li {
  margin-bottom: 3px;
}

@media (max-width: 768px) {
  .major-performers-methodology {
    font-size: 9.5px;
    line-height: 1.3;
    margin-bottom: 7.5px;
  }

  .major-performers-methodology-subheader {
    margin-top: 5px;
  }

  .major-performers-methodology ul {
    margin-top: 2px;
  }

  .major-performers-methodology li {
    margin-bottom: 1px;
  }
}

.perf-plot-container {
  position: relative;
  width: 100%;
  /* height is set in JS (gen_perf_plot) - scales continuously with width
     instead of jumping at a single breakpoint */
  cursor: crosshair;
  overflow: visible;
}

.perf-plot-axis-label {
  position: absolute;
  font: 10px Helvetica;
  color: var(--blue);
  pointer-events: none;
}

.perf-plot-axis-label-x {
  right: 6px;
}

.perf-plot-axis-label-y {
  top: 4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* the arrow glyph doesn't inherit the surrounding vertical-rl flow the same
   way plain text characters do (it renders sideways instead of pointing
   "up" in line with the text) - force it upright with its own rotation
   instead of relying on writing-mode to orient it correctly */
.perf-plot-axis-label-y i {
  display: inline-block;
  transform: rotate(90deg);
}

.perf-scatter-grids {
  stroke: var(--font-color-faint-2);
  opacity: 0.25;
  pointer-events: none;
}

.perf-scatter-grids-zero {
  stroke: var(--font-color-base);
  stroke-dasharray: 3,2;
  opacity: 0.75;
  stroke-width: 1.2;
}

.perf-scatter-labels {
  font: 9px Helvetica;
  fill: var(--font-color-base);
  paint-order: stroke;
  stroke: #FFF;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.perf-dot-label {
  font: 9px Helvetica;
  font-weight: bold;
  fill: var(--font-color-base);
  paint-order: stroke;
  stroke: #FFF;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0;
}

.perf-size-legend-title {
  font: bold 9px Helvetica;
  fill: var(--font-color-faint);
}

.perf-size-legend-dot {
  fill: none;
  stroke: var(--font-color-faint);
  stroke-width: 1px;
}

.perf-size-legend-label {
  font: 9px Helvetica;
  fill: var(--font-color-faint);
}

.perf-diag-line {
  stroke: var(--blue);
  stroke-width: 1.75;
  opacity: 0.75;
}

/* fill (olive above the diagonal, red below) and opacity (scaled by
   distance from the diagonal) are both set per-dot inline from JS
   (sg_edge-driven) rather than here - this is just the shared base */
.perf-dots {
  cursor: pointer;
}

.perf-dots-backed {
  opacity: 0.15 !important;
  transition: all 150ms ease-out;
}

.perf-hover-line {
  stroke: var(--blue);
  stroke-dasharray: 3,2;
  pointer-events: none;
  opacity: 0;
}

.perf-dot-label-pos { fill: var(--olive); }
.perf-dot-label-neg { fill: var(--red); }

/* same :root[color-mode="dark"] attribute-selector convention
   static/global_dg.css itself uses for every other light/dark override -
   a white outline would be invisible (or worse, a bright halo) against a
   dark background, so dark mode gets a black one instead */
:root[color-mode="dark"] .perf-scatter-labels,
:root[color-mode="dark"] .perf-dot-label {
  stroke: #000;
}

@media (max-width: 768px) {
  .perf-plot-axis-label {
    font-size: 8px;
  }
}

/* table - reuses static/major_winners.css's shared .leaderboard.major-winners-table
   look (same family as major_points.html/major_seasons.html), only the 3
   SG columns below are new to this page */
#major-performers-table .col-player,
#major-performers-favourites-table .col-player {
  width: 24%;
}

#major-performers-table .col-expsg,
#major-performers-favourites-table .col-expsg,
#major-performers-table .col-actsg,
#major-performers-favourites-table .col-actsg {
  width: 70px;
  text-align: center;
}

#major-performers-table .col-edge,
#major-performers-favourites-table .col-edge {
  width: 110px;
  text-align: center;
}

.sg-pos { color: var(--olive); }
.sg-neg { color: var(--red); }

/* same col-top5s-header-desktop/mobile convention static/major_winners.css
   already uses (full label on desktop, short one on mobile) */
.col-sg-header-mobile {
  display: none;
}

@media (max-width: 768px) {
  #major-performers-table .col-expsg,
  #major-performers-favourites-table .col-expsg,
  #major-performers-table .col-actsg,
  #major-performers-favourites-table .col-actsg {
    width: 50px;
  }

  #major-performers-table .col-edge,
  #major-performers-favourites-table .col-edge {
    width: 90px;
  }

  /* same 34px mobile .col-wins width static/major_winners.css already uses
     for major_points.html/best-seasons - the colored marker groups are gone
     here too (just a 1-2 digit count), so the 110px desktop width is just
     as oversized; freed space goes back to Player/Diff */
  #major-performers-table .col-wins,
  #major-performers-favourites-table .col-wins {
    width: 34px;
  }

  /* Age is low-information at a glance and this page is already tight on
     mobile - drop it rather than squeeze it in, same reasoning
     static/major_winners.css uses to drop Starts on major_seasons.html */
  #major-performers-table .col-age,
  #major-performers-favourites-table .col-age {
    display: none;
  }

  .major-quals-legend {
    display: none;
  }

  .col-sg-header-desktop {
    display: none;
  }

  .col-sg-header-mobile {
    display: inline;
  }
}