/* .breadcrumbs normally sits right under the FIELD LIST/MODEL/LIVE COVERAGE/
   RESULTS tab row (super-upper-div, events/_base.html), which gives it
   breathing room above for free - these pages aren't scoped to one event
   and skip that tab row entirely, same as major_winners.css's own pages, so
   breadcrumbs was sitting flush against the top instead (same fix, same
   value, as that file's own .breadcrumbs rule) */
.breadcrumbs {
  margin-top: 10px;
}

/* .col-date's own full/short date pair (dg_rankings_all_time.html) - same
   col-label-full/col-label-mobile pattern several other pages' own CSS
   files already use (eg live_stats.css, tee_times.css) for this exact
   "two pre-rendered labels, CSS just picks one" approach. both spans
   always render; .col-label-mobile hidden by default (desktop keeps the
   full label unchanged) */
.col-label-mobile {
  display: none;
}

/* DG Rankings - skeleton pass. column widths mirror field_list.css's own
   col-dgr/col-owgr treatment (rank-outer tier badge + a star/player
   column), just with a 3rd rank column (DGP), each rank's own narrow delta
   column next to it, and a skill bar (.sg-bar-container, shared CSS already
   in live_feeds.css - same bidirectional bar major_seasons.html's own
   total_cumulative_sg column uses) in place of a 4th rank */

/* no .col-star override here - the shared global default (live_feeds.css,
   20px with min/max pinning it rigid) is exactly what every other table on
   the site already relies on, this one included now */

/* group-label row above DG/Δ/DG Skill - same .rf-group-label-sg convention
   recent_form.css already uses (olive text + a light olive tint, reading
   as its own tinted group rather than a plain grey banner) */
/* .leaderboard > thead > tr (live_feeds.css) sets a flat 25px height + a
   border-bottom on every header row - more specific (type+type+class vs
   this rule's single class), so these need the same compound shape plus
   the row's own class to actually win. same fix recent_form.css's own
   .rf-group-header-row already uses for this identical issue */
.leaderboard > thead > tr.dg-rankings-group-header-row {
  height: 19px;
}

.leaderboard > thead > tr.dg-rankings-group-header-row > th {
  border-top: none;
  border-bottom: none;
}

.leaderboard > thead > tr > th.dg-rankings-group-label {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
}

.leaderboard > thead > tr > th.dg-rankings-group-label-dg {
  color: var(--olive);
  background-color: rgba(61, 153, 112, 0.12);
}

/* plain small gray "#" column - the all-time page's own leading rank
   column, same convention major_winners.css's own .col-rank uses (no
   tier badge, unlike .col-dg-rank/.col-dgp-rank/.col-owgr-rank below) */
.dg-rankings-table .col-rank {
  width: 20px;
  text-align: left;
  color: var(--font-color-faint-2);
}

/* # stays sortable (data-sort="rank") - just never shows the shared ▲/▼
   caret (live_feeds.css) even when it's the active sort column, same
   treatment ranking_trends.html's own # column got - the caret read oddly
   next to a column that's already just a plain rank number */
.dg-rankings-table .col-rank.sorted-asc::after,
.dg-rankings-table .col-rank.sorted-desc::after {
  content: '';
  margin-left: 0;
}

/* a real, guaranteed % - never auto. auto can shrink toward nothing on a
   narrow viewport once enough other explicit-width columns are fighting
   for space; a % holds a stable proportional floor regardless */
.dg-rankings-table .col-player {
  width: 27.5%;
}

/* DG/DGP/OWGR's rank badge and its Δ next to it each read as one unit, so
   the 3 rank columns share one width, and the 3 delta columns share
   another, rather than each pair having its own independent size */
.dg-rankings-table .col-dg-rank,
.dg-rankings-table .col-dgp-rank,
.dg-rankings-table .col-owgr-rank {
  width: 62px;
  text-align: center;
}

.dg-rankings-table .col-dg-rank-chg,
.dg-rankings-table .col-dgp-rank-chg,
.dg-rankings-table .col-owgr-rank-chg {
  width: 28px;
  text-align: center;
}

.dg-rankings-table .col-age {
  width: 44px;
  text-align: center;
}

/* all-time page only - links each row's own peak week into that week's
   weekly-ranking page */
.dg-rankings-table .col-date {
  width: 82px;
  text-align: center;
}

.dg-rankings-table th.col-skill {
  text-align: center;
}

/* this table's own safety-valve column (table-layout:fixed, live_feeds.
   css's shared .leaderboard rule, needs exactly one width:auto column or
   it proportionally rescales every explicit-width column instead,
   including col-star - see major_winners.css's own .col-dgpts comment on
   this exact issue) - deliberately uncapped (no .sg-bar-container width
   override) so the bar fills the real column width; the fixed -4/+4
   domain (events/routes.py) means no real player's bar reaches the outer
   edges regardless, so there's no ballooning risk the way col-player's
   open-ended text once had */
.dg-rankings-table .col-skill {
  width: auto;
}

.dg-rankings-table th.col-tours {
  text-align: center;
}

/* explains what the Tours column's own stacked bar segments mean (hover
   popover, data-toggle="popover" already wired sitewide) - same small
   faint "?" convention course_insights.css's own .insight-info-icon uses,
   not shared from there since that stylesheet isn't loaded on this page */
.dg-rankings-info-icon {
  font-size: 9px;
  color: var(--font-color-faint-2);
  cursor: help;
}

.dg-rankings-table .col-tours {
  width: 91px;
}

/* all-time page only - last_event_played (the feed's own field, not a
   derived stat) - no sort (nothing numeric to rank it by) */
.dg-rankings-table .col-recent-start {
  width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* all-time page, desktop only - swaps which of the two gets to be this
   table's own width:auto safety-valve column (table-layout:fixed needs
   exactly one, see .col-skill's own comment above). Skill Est. becomes a
   real fixed width instead, and Most Recent Start absorbs whatever's left
   over instead. :has() (not a page-specific class - there isn't one,
   dg_rankings.html/dg_rankings_all_time.html share the exact same
   .dg-rankings-table markup) scopes this to tables that actually have a
   .col-recent-start column, ie only the all-time page's two tables - the
   weekly page's own .col-skill still needs to stay width:auto, since it
   has no .col-recent-start of its own to hand the safety-valve role to.
   wrapped in its own min-width media query (not just relying on this
   selector's own higher specificity) because .col-recent-start still
   EXISTS in the DOM on mobile (just display:none, from the 768px block
   below) - :has() would still match there, and this selector's higher
   specificity would otherwise beat that block's own .col-skill:auto rule
   even though mobile needs col-skill flexible again once Most Recent
   Start itself disappears */
@media (min-width: 769px) {
  .dg-rankings-table:has(.col-recent-start) .col-skill {
    width: 135px;
  }

  .dg-rankings-table:has(.col-recent-start) .col-recent-start {
    width: auto;
  }
}

.recent-start-finish {
  color: var(--red);
}

.recent-start-at {
  color: var(--font-color-faint-2);
}

.recent-start-event {
  color: var(--font-color-base);
}

/* a player's tour exposure (tour_weights) - one rectangle, divided into
   colored segments proportional to each tour's own weight (they already
   sum to ~100%, no scaling needed, unlike the skill/DG Points bars above
   which scale against a field max). TOUR_ORDER (events/routes.py) fixes
   the left-to-right order of whichever tours a given player actually has,
   so every row's segments line up the same way down the column. fixed
   width + centered regardless of col-tours' own (now auto, possibly much
   wider) width */
.tour-bar-container {
  position: relative;
  width: 60px;
  height: 10px;
  margin: 0 auto;
  background-color: var(--container-color-base);
  border-radius: 1px;
  overflow: hidden;
}

/* TOUR_COLORS (events/routes.py) are mostly solid/saturated tokens (plain
   --pga/--euro/--kft etc.) - this opacity is what actually mutes them,
   rather than re-deriving a separate muted color per tour */
.tour-bar-segment {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0.6;
  cursor: pointer;
}

/* purple family the site already uses for DG Points rank elsewhere
   (all_time_rankings_2.css/home_page_3.css/live_blog.css/new_rankings_w.css'
   own .dgp-1/-10/-30/-100) - same rgba values, just the first page to pull
   them in through rank_class() instead of a hardcoded badge */
.dgp-100 { background-color: rgba(133, 20, 75, 0.3); }
.dgp-30 { background-color: rgba(133, 20, 75, 0.5); }
.dgp-10 { background-color: rgba(133, 20, 75, 1); color: white; }
.dgp-1 { background-color: gold; color: black; }

/* a rank's own up/down movement since last published, in its own narrow
   column next to the rank badge - caret + magnitude, same meaning as
   live_model.html's col-chg (positive = moved toward 1, i.e. improved) but
   this site's actual --olive/--red tokens instead of that older page's
   plain green/red */
.rank-change {
  display: inline-block;
  font-size: 9px;
  white-space: nowrap;
}

.rank-change-pos {
  color: var(--olive);
}

.rank-change-neg {
  color: var(--red);
}

.rank-change-flat {
  color: var(--font-color-faint-2);
}

.dg-rankings-as-of {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--font-color-faint-2);
}

/* the feed's own coverage_note (events/routes.py) - only rendered at all
   when it says something other than full coverage, so this is always a
   real heads-up when it shows up, not a routine status line */
.dg-rankings-coverage-note {
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--orange);
}

.dg-rankings-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--font-color-base);
}

/* native <select> rendering ends up taller than its own CSS box-model math
   suggests, so align-items:center on the row doesn't land the label's own
   true center on it - nudged down to compensate, same fix the Age filter's
   own label needed */
.dg-rankings-date-row label {
  line-height: 1;
  margin-top: 6px;
}

/* same plain .round-select convention every event page's own scorecard
   round-picker already uses (live_feeds.css), just sized up - this one's
   a more prominent, important-to-notice control than a round picker */
.dg-rankings-date-select {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 5px;
  border: 1px solid rgba(150, 150, 150, 0.4);
  border-radius: 1px;
  background: transparent;
  color: var(--font-color-base);
  cursor: pointer;
}

:root[color-mode="dark"] .dg-rankings-date-select {
  color-scheme: dark;
}

.dg-rankings-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* plain pass-through wrapper on desktop - exists so mobile (see media
   query below) can force age filter + DGP Rank toggle + download/API
   icons to wrap onto their own line as one group, without this needing
   its own visual identity here, where it just behaves like its children
   were still direct .dg-rankings-search-row siblings. flex:1 is the part
   that actually matters for that - .data-actions-group's own margin-left:
   auto (live_feeds.css) only pushes it to the right edge of ITS direct
   flex container, so this wrapper needs to stretch to fill the row's own
   remaining width, same as when data-actions-group sat directly in
   .dg-rankings-search-row before this wrapper existed, or download/API
   stops reading as right-justified on desktop */
.dg-rankings-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.dg-rankings-age-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--font-color-faint-2);
}

/* a number input's native rendering (spinner box etc.) ends up taller than
   its own CSS box-model math suggests, so align-items:center on the row
   doesn't land this label's own true center on the input's - nudged down
   to compensate rather than chasing the input's real height further */
.dg-rankings-age-filter label {
  line-height: 1;
  margin-top: 6px;
}

.dg-rankings-age-input {
  width: 52px;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid rgba(150, 150, 150, 0.4);
  border-radius: 1px;
  color: var(--font-color-base);
  background: transparent;
}

.dg-rankings-age-input:focus {
  outline: none;
  border-color: var(--olive);
}

/* kept at the very end of the file, same convention live_feeds.css's own
   shared mobile breakpoint uses (its own comment calls this out directly)
   - a plain (non-media) rule anywhere above this point in the file would
   otherwise win the cascade over these at equal specificity regardless of
   viewport, since @media doesn't get special source-order priority on its
   own. this bit me once already: col-date/col-age/col-dg-rank's mobile
   widths were silently losing to their own desktop rule further down the
   file until this block got moved here */
@media (max-width: 768px) {
  /* .feed-div-right here only ever holds the DG Rankings menu
     (_dg_rankings_menu.html) plus, on these two pages, its own "What is
     the DG Index?" blurb. setup_mobile_section_menu() (this page's own
     <script>) already relocates the menu itself into the mobile ticker
     row above, leaving just the DG Index blurb behind - not worth a
     sidebar box on mobile, and without this the now-near-empty container
     still renders its own border-top/padding (live_feeds.css) as a stray
     line with nothing above or below it */
  .feed-div-right {
    display: none;
  }

  /* sits flush against .breadcrumbs without this - a little breathing
     room above, same fix major_winners.css's own .mobile-toggle-row
     needed (ported verbatim, same value) */
  .mobile-toggle-row {
    margin-top: 6px;
  }

  /* same mobile shrink major_winners.css's own intro notes get (11.5px
     desktop -> 9px mobile) - ported verbatim, same value */
  .dg-rankings-intro-note {
    font-size: 9px;
  }

  /* no horizontal scroll, per site convention (same approach major_
     winners.css takes on its own dense tables) - drop the secondary
     columns and keep Player, Age, Date (where it exists), DG Rank (+ its
     own Δ), OWGR Rank, and Skill Est. OWGR's own Δ still goes (one rank-
     change column, DG's, is enough on mobile). DGP Rank is hidden by
     default (.hidden-column, live_feeds.css) unless the user's own
     "Show DGP Rank" toggle turns it on - its own Δ stays hidden on mobile
     either way, overriding that toggle at this width specifically.
     .dg-rankings-table covers both the main and favourites tables on both
     this page and dg_rankings_all_time.html (same shared class), so one
     rule covers all 4 */
  .dg-rankings-table .col-tours,
  .dg-rankings-table .col-owgr-rank-chg,
  .dg-rankings-table .col-dgp-rank-chg {
    display: none;
  }

  /* all-time page only - "Most Recent Start" is wide (240px desktop) and
     purely nice-to-have, not core "DG Rankings" info. Date stays - it's
     part of what the ranking itself means on this page (the all-time
     figure as of a specific date), not a secondary/duplicate stat */
  .dg-rankings-table .col-recent-start {
    display: none;
  }

  /* Date's own day-of-month isn't worth the column width on mobile -
     "Sep 2000" instead of "Sep 11, 2000" */
  .col-date .col-label-full {
    display: none;
  }

  .col-date .col-label-mobile {
    display: inline;
  }

  /* .col-player's own 28% (desktop) has more room to give now that half
     the row's columns are gone - same reasoning major_winners.css's own
     mobile .col-player overrides use throughout (eg #major-points-table).
     trimmed a bit further than the first pass, along with date/age/dg-
     rank below, to hand col-skill (width:auto) more of the freed space -
     it's the one column whose bar actually needs it */
  .dg-rankings-table .col-player {
    width: 28%;
  }

  /* desktop's own px widths (82/44/62) were sized for "Sep 11, 2000"-style
     full dates and a rank badge + its own Δ column next to it - mobile
     drops the Δ column and shortens the date (col-label-mobile above), so
     each of these can shrink too. col-skill stays width:auto (its own
     safety-valve rule, above) and is what actually benefits from the
     space all of this frees up. (this first went further - 40/24/36 - but
     once the cascade-order bug above got fixed and these actually started
     applying, col-skill ballooned more than intended; eased back here) */
  .dg-rankings-table .col-date {
    width: 58px;
  }

  .dg-rankings-table .col-age {
    width: 34px;
  }

  .dg-rankings-table .col-dg-rank {
    width: 52px;
  }

  .dg-rankings-table .col-owgr-rank,
  .dg-rankings-table .col-dgp-rank {
    width: 40px;
  }

  .dg-rankings-table .col-dg-rank-chg {
    width: 18px;
  }

  /* 10.5px is actually already the sitewide default here - live_feeds.css
     has its own shared `.leaderboard > tbody > tr > td { font-size:
     10.5px; }` at this same breakpoint, which is what the Masters
     field-list page's .col-age (no override of its own) was already
     getting. stated explicitly here anyway for clarity/to make it obvious
     this was a deliberate check, not an accident if someone touches this
     file later. .sg-bar-text is already 10px by default (live_feeds.css,
     shared sitewide too), one step smaller than plain td text elsewhere,
     so it gets its own -1px step from that baseline instead */
  .dg-rankings-table .col-date,
  .dg-rankings-table .col-age {
    font-size: 10.5px;
  }

  .dg-rankings-table .sg-bar-text {
    font-size: 9px;
  }

  /* same -1px step everything else on this page's own controls gets at
     this width (col-date/col-age above, .dg-rankings-intro-note earlier) -
     .dg-rankings-age-filter/.dg-rankings-age-input exist on both this page
     and dg_rankings_all_time.html (shared class), .dg-rankings-date-row/
     .dg-rankings-date-select are weekly-ranking only */
  .dg-rankings-date-row {
    font-size: 10px;
  }

  /* desktop's own label margin-top:6px (above) was tuned to center against
     the select's own native-rendering height at 11px - the shared -1px
     mobile font step moves that off by ~1px, confirmed live */
  .dg-rankings-date-row label {
    margin-top: 7px;
  }

  .dg-rankings-date-select {
    font-size: 10px;
    padding: 1px 4px;
  }

  .dg-rankings-age-filter {
    font-size: 10px;
  }

  .dg-rankings-age-input {
    width: 44px;
    font-size: 10px;
  }

  /* forces the break right after search - age filter/DGP Rank/download-
     API all ride together on the new line this creates, as tight to each
     other as still reads cleanly (tighter than the 10px desktop gap) */
  .dg-rankings-controls-row {
    flex-basis: 100%;
    gap: 6px;
  }

  /* desktop's own 10px row gap (also the gap between search and the
     controls-row wrapper that wraps below it, now that there are only
     ever 2 "lines" here on mobile) - tightened to match */
  .dg-rankings-search-row {
    gap: 4px;
  }

  /* the "DG Ranking" group-label bar spanning Rank/Δ/Skill Est. - desktop's
     own 19px (above) was sized for the 9px text, shrinks to match the 8px
     mobile text here */
  .leaderboard > thead > tr.dg-rankings-group-header-row {
    height: 15px;
  }

  .leaderboard > thead > tr > th.dg-rankings-group-label {
    font-size: 8px;
  }
}