/* DGP's #1 specifically uses gold (#ffc107) rather than the shared
   .dg-1 { background-color: var(--yellow); } (live_feeds.css) that DGR
   (same DG_TIERS, rank_class()) still uses elsewhere on this page -
   scoped to just .col-dgp so DGR's own #1 is untouched. same opacity
   schedule the shared DG_TIERS classes already use (dg-10 full, dg-30 0.5,
   dg-100 0.3), just rgba(133, 20, 75) instead of olive */
.qualification-table .col-dgp .dg-1, .qualification-bubble-table .col-dgp .dg-1 {
  background-color: #ffc107;
}

.qualification-table .col-dgp .dg-10, .qualification-bubble-table .col-dgp .dg-10 {
  background-color: rgba(133, 20, 75, 1);
  color: #fff;
}

.qualification-table .col-dgp .dg-30, .qualification-bubble-table .col-dgp .dg-30 {
  background-color: rgba(133, 20, 75, 0.5);
}

.qualification-table .col-dgp .dg-100, .qualification-bubble-table .col-dgp .dg-100 {
  background-color: rgba(133, 20, 75, 0.3);
}

/* same .col-player/.rank-outer markup (player_name_cell(), rank_class())
   the main tables use, just in a narrower 2-column table sized for the
   right sidebar instead of the 30%/44px split those use - no star column,
   this list isn't favouritable */
.qualification-bubble-table {
  margin-top: 6px;
}

/* Recent Changes/Outside Looking In sit noticeably further apart than their
   own compact row height (above) suggests - shared .feed-section-margin-top
   (live_feeds.css, 10px) is sized for the page's bigger sections, not two
   short sidebar lists back to back */
.feed-div-right .feed-section-margin-top {
  margin-top: 4px;
}

/* same 6px indent as the table rows below it (.qualification-bubble-table
   .col-player) - without this the explanatory text sits flush with the
   title above while the table it's describing is visibly indented under it */
.feed-div-right .table-note {
  padding-left: 6px;
}

/* .leaderboard's own border-bottom per row (live_feeds.css) suits the big
   multi-column tables it was built for, but just reads as clutter on these
   compact 2-column sidebar lists - dropped, and rows pulled tighter
   (height/padding) to match */
.qualification-bubble-table tbody td {
  border-bottom: none;
}

.qualification-bubble-table > tbody > tr {
  height: 19px;
}

.qualification-bubble-table .col-player {
  width: auto;
  padding-left: 6px;
}

.qualification-bubble-table .col-dgp {
  width: 40px;
  text-align: center;
}


/* Recent Changes' own add/remove indicator - IN/OUT text, same convention
   field_changes.css's .field-change-in/.field-change-out use there, just
   inline here (no dedicated status column) rather than its own column */
.qualification-change-symbol {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}

.qualification-change-added {
  color: var(--olive);
}

.qualification-change-removed {
  color: var(--red);
}

.qualification-notes {
  margin: 0;
  padding-left: 16px;
}

.qualification-notes li {
  font-size: 11.5px;
  padding: 3px 0;
}

/* Recent Changes reuses .qualification-bubble-table's own .col-player (name
   formats the same as every other player list on the site, full-first vs
   short-first responsive toggle included - that needs a real .col-player
   ancestor and table-layout to size against, which an earlier flex <li>
   version of this row didn't have, so .player-col-inner was collapsing to
   0 width and invisible). the "added"/"removed" text now sits right inside
   this same cell (not its own column) so it's flush against the name
   instead of wherever a separate column's own width happened to start -
   flex row so the name (a block-level div on its own) and that text sit on
   one line instead of the div forcing a line break before it */
.qualification-changes-table .col-player {
  vertical-align: middle;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* table-layout:fixed (.leaderboard, live_feeds.css) was splitting col-player/
   the dots column ~evenly regardless of content - auto layout lets
   col-player shrink to fit its own (now longer) name+text content instead,
   with the dots column simply taking whatever's left on the row */
.qualification-changes-table {
  table-layout: auto;
}

/* auto layout (above) measures each cell's real content width to size
   columns, but .player-col-inner's own container-type:inline-size
   (live_feeds.css) makes it report a 0 intrinsic width (CSS containment) -
   same collapse bug as the very first version of this row (a flex <li> with
   no .col-player ancestor at all) for a different reason: fixed layout
   never needed to measure content, auto layout does. dropping back to
   container-type:normal avoids it; the @container rule it existed for
   still falls back fine to its own default (.col-player .short-first
   stays hidden, full name shows) since this now has a real .col-player
   ancestor, unlike that earlier flex version */
.qualification-changes-table .player-col-inner {
  container-type: normal;
}

/* dots-only now - right-aligned so they land at the row's far right edge,
   same spot justify-content:space-between used to put them before this
   column's own text moved into .col-player above */
.qualification-changes-table .qualification-change-detail {
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}

.qualification-note-time {
  font-size: 10px;
  color: var(--font-color-faint-2);
}

.qualification-legend {
  margin: 0;
  padding: 3px 0;
  list-style: none;
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid var(--olive);
  border-bottom: 1px solid var(--olive);
  background-color: var(--datarow-hover);
  /* hides the scrollbar while keeping it scrollable - Firefox/IE and
     Chrome/Safari each need their own property for this */
  scrollbar-width: none;
}

.qualification-legend::-webkit-scrollbar {
  display: none;
}

/* status dot in front of each of the 3 player-table section titles -
   solid fill for the two definite states (qualified/in a qualifying spot),
   olive outline-only for the third (qualified but not playing - still
   "qualified" at heart, so olive rather than a neutral grey, just hollow
   to read as the odd one out against the two filled dots) */
.qualification-section-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  /* default inline-block baseline alignment sits a round dot too low
     against the title text next to it - centers it on the text's own
     line instead */
  vertical-align: middle;
}

@media (max-width: 768px) {
  .qualification-section-dot {
    width: 7px;
    height: 7px;
  }

  /* same sizing as live_stats.css/hole_stats.css/course_insights.css/
     tee_times.css's own mobile round toggles - this page never had the
     matching override, so the All/Rookies/Ams/Past Champs radios were
     still rendering at the browser's native ~13px */
  .form-window-option input[type="radio"] {
    width: 11px;
    height: 11px;
  }
}

.qualification-section-dot-green {
  background-color: var(--olive);
}

.qualification-section-dot-orange {
  background-color: var(--orange);
}

.qualification-section-dot-outline {
  background-color: transparent;
  border: 1px solid var(--olive);
}

.qualification-legend li {
  display: flex;
  /* was align-items:center - fine for a single line, but once the category
     text wraps to 2+ lines the dot gets centered against the whole wrapped
     block instead of sitting next to its first line, floating oddly mid-
     paragraph. flex-start keeps it pinned to the top, same as any icon-
     next-to-wrapping-text pattern */
  align-items: flex-start;
  gap: 5px;
  padding: 2px 0 2px 4px;
  font-size: 10.5px;
  cursor: pointer;
  border-radius: 3px;
}

@media (max-width: 768px) {
  /* each wrapped multi-line category reads as its own row more clearly
     with a light divider between them, rather than just whitespace - same
     light rgba border majors-upcoming-item (major_winners.css) uses for
     the same "separate stacked items" purpose. last item skips it so it
     doesn't double up against .qualification-legend's own border-bottom */
  .qualification-legend li {
    padding: 1px 0 1px 4px;
    font-size: 10px;
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  }

  .qualification-legend li:last-child {
    border-bottom: none;
  }
}

/* flex-shrink defaults to 1 on every flex child, including this one -
   multi-line category text wanting more width than the row has squeezed
   the dot's own width down to fit, while its height stayed put, turning
   the circle into an oval. pins it to its real 15x15px size regardless of
   how much room the text next to it needs */
.qualification-legend-item .qual-dot {
  flex-shrink: 0;
  /* .qualification-legend li is align-items:flex-start (above) so the dot
     doesn't center against a wrapped multi-line block - but a plain box-top
     alignment still reads as sitting a touch high against the actual text
     glyphs on the first line, since the line-box's own leading pushes
     those glyphs down from its top edge while the dot (no leading of its
     own) doesn't get pushed down at all. nudges it down to roughly match */
  margin-top: 2px;
}

@media (max-width: 768px) {
  /* shared 15x15px/8px (.qual-dot) is a bit smaller here on mobile only -
     desktop keeps the normal size. must come after .qual-dot's own rule
     elsewhere in this file for the override to actually win */
  .qualification-legend-item .qual-dot {
    width: 12px;
    height: 12px;
    font-size: 7px;
  }
}

.qualification-legend-item:hover {
  background-color: var(--olive-superlight);
}

.qualification-legend-active {
  background-color: var(--olive-light);
  font-weight: 600;
}

/* :hover on its own (.qualification-legend-item:hover above) is two
   pseudo-class/class selectors deep, same specificity as this needs to beat
   it on the active item - without this, hovering the already-selected
   category would fall back to the dimmer hover tint instead of staying on
   the active one */
.qualification-legend-active:hover {
  background-color: var(--olive-light);
}

/* near-invisible rather than fully hidden - a dimmed dot still marks a
   category's presence at a glance, just de-emphasized against whichever
   one is actively filtered */
.qual-dot-dimmed {
  opacity: 0.15;
}

.qual-dot-dimmed:hover {
  opacity: 0.15;
}

/* same 30% field_list.html's own table uses (.field-list-table .col-player,
   live_feeds.css) rather than the generic 40% default - this page is a
   field-list variant with plenty of other columns competing for room too */
.qualification-table .col-player {
  width: 30%;
}

/* bigger than the shared 40px (live_feeds.css) - DGR/OWGR/DGP are more
   central to this page than on field_list, where plenty of other columns
   compete for room. col-dgp isn't part of live_feeds.css's own shared
   .col-dgr/.col-owgr/... rule (new column, not in that original list), so
   it gets its own explicit width + center here to match the other two
   exactly instead of falling back to left-aligned/no-width */
.qualification-table .col-dgr, .qualification-table .col-owgr, .qualification-table .col-dgp {
  width: 44px;
  text-align: center;
}

/* a little breathing room before Qualifications starts - the 3 ranking
   columns above sit tight against each other on purpose, but Qualifications
   is a different kind of column (dots, not a rank badge) and reads better
   with a small gap ahead of it */
.qualification-table .col-owgr {
  padding-right: 5px;
}

/* no width set - col-qual is the other important column here, so it takes
   whatever's left over once every other column (col-star/col-player/
   col-dgr/col-owgr/col-starts/col-wins) claims its fixed share, same
   table-layout:fixed behavior noted above */
.col-qual {
  text-align: center;
}

.qual-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin: 1px 0.5px;
  border-radius: 50%;
  /* fill at reduced opacity, border at full - so the border still reads as
     a solid 1px ring even though the middle is translucent, same pairing
     style win-marker/MAJOR_COLORS use elsewhere on this page (--olive is
     #3D9970, rgb(61, 153, 112)) */
  background-color: rgba(61, 153, 112, 0.6);
  border: 1px solid var(--olive);
  color: #000;
  font-size: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s;
}

.qual-dot:hover {
  background-color: var(--olive);
}

.qual-dot-open {
  /* --orange is #FF851B, rgb(255, 133, 27) */
  background-color: rgba(255, 133, 27, 0.6);
  border: 1px solid var(--orange);
  color: #000;
}

.qual-dot-open:hover {
  background-color: var(--orange);
}

/* black digits read fine against the light page background in light mode,
   but disappear against the same translucent fill once the page itself
   goes dark - same :root[color-mode="dark"] convention live_feeds.css uses */
:root[color-mode="dark"] .qual-dot {
  color: #fff;
}

/* full per-category dot list on desktop (room for it, and seeing exactly
   which categories a player qualifies under is genuinely useful there) -
   contracts to one circle on mobile instead, where there isn't room for
   several dots per row. comes after .qual-dot's own display:inline-flex
   above so this display:none actually wins (same selector specificity,
   later in the cascade) */
.col-qual-mobile {
  display: none;
}

.col-qual-header-mobile {
  display: none;
}

@media (max-width: 768px) {
  .col-qual-desktop {
    display: none;
  }

  .col-qual-mobile {
    display: inline-flex;
    width: 11px;
    height: 11px;
  }

  .col-qual-mobile i {
    font-size: 6px;
  }

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

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

/* table-layout:fixed (.leaderboard, live_feeds.css) splits any width:auto
   column evenly across the remaining space - these two need to stay small
   and fixed so col-player/col-qual keep the room they actually need */
.col-starts {
  width: 47px;
  text-align: center;
}

.col-wins {
  width: 68px;
  text-align: center;
}

/* widest tables on the site (Star/Player/DGR/DGP/OWGR/Qualifications/
   Starts/Wins) - no room for all 8 on a narrow screen even with col-qual
   now just one small circle (20+30%+44+44+44+47+68 already exceeds a
   390px viewport before col-qual gets anything). DGP is the one that goes
   on mobile - DGR + OWGR together already cover "where do they rank" -
   same column-hiding approach field_list.css's own .col-popularity uses,
   not a scroll wrapper */
@media (max-width: 768px) {
  .qualification-table .col-dgp {
    display: none;
  }
}

/* .win-marker/.win-marker.win-square now shared in live_feeds.css (same
   rule recent_form.html uses) - color here comes from the MAJOR_COLORS
   lookup in the route (win_color), applied as an inline style per marker.
   no margin override here anymore - same spacing as recent_form's own
   Wins column, straight from the shared rule */