/* .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 - this page skips that tab row entirely
   (not scoped to one event), so breadcrumbs was sitting flush against the
   top of the page instead */
.breadcrumbs {
  margin-top: 10px;
}

/* the 3 majors pages' own top-of-page description notes - slightly bigger
   than the base .table-note default (10.5px, live_feeds.css) since these
   read as real page-level context rather than this page's own smaller
   secondary captions elsewhere */
.major-winners-intro-note,
.major-points-intro-note,
.major-quals-intro-note,
.major-seasons-intro-note {
  font-size: 11.5px;
}

/* .major-points-intro-note/.major-quals-intro-note both sit directly in
   .container-fluid, right after .event-title, same as every other page's
   own top note - this one alone sits inside .feed-div (Past Champions'
   own table needs the two-column .feed-div/.feed-div-left layout the other
   2 pages don't use), which carries its own 5px padding-top (live_feeds.
   css, shared sitewide) stacking on top of the note's own 3px margin-top
   and pushing the title-to-note gap to 8px instead of the 3px the other
   2 pages get - this cancels that extra 5px back out so all 3 land on the
   same real gap despite the different DOM depth */
.major-winners-intro-note {
  margin-top: -2px;
}

@media (max-width: 768px) {
  /* sits flush against .breadcrumbs (or .event-title on the home page,
     the one exception that keeps the ticker below the title instead)
     without this - a little breathing room above, same as .breadcrumbs'
     own correction above */
  .mobile-toggle-row {
    margin-top: 6px;
  }
}

/* just .event-title moves to match the table's text below it (.leaderboard's
   first cell carries its own normal left padding, same as every other table
   on the site, landing its text 5px right of .feed-div's own left edge) -
   .breadcrumbs stays at its own default position, not pulled along with it */
.event-title {
  margin-left: -10px;
}

/* same reasoning/offset as .event-title above - these notes sit directly in
   .container-fluid too (not inside a feed-section like every other
   .table-note on this page), so they need the same correction to line up
   with the title instead of sitting under .container-fluid's own Bootstrap
   padding */
.major-points-intro-note,
.major-seasons-intro-note {
  margin-left: -10px;
}

/* field-fullness stacked bars (major_fullness, events.major_qualifications_
   summary()) - one row per major, label above its own full-width bar. the
   track's own plain grey is what an "open" (unfilled) spot reads as - the
   two fill divs only ever cover the locked/on-track portion, so whatever's
   left of the track underneath them is already the right color for open
   with no 3rd div needed */
.major-quals-fullness-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.major-quals-fullness-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 1px;
}

/* straight to that major's own per-event qualification page
   (events.qualification) - plain text color until hovered, same
   understated "doesn't look like a normal blue link" treatment the rest
   of this page's own player names use, rather than drawing extra
   attention to it among the other fixed (non-link) stats on this row */
.major-quals-fullness-name {
  color: var(--blue);
  text-decoration: none;
}

.major-quals-fullness-name:hover {
  text-decoration: underline;
}

.major-quals-fullness-count {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.65;
}

.major-quals-fullness-track {
  position: relative;
  height: 12px;
  border-radius: 3px;
  background-color: rgba(150, 150, 150, 0.2);
  overflow: hidden;
}

/* same glossy top-light-to-bottom-dark sheen .dgpts-bar-segment uses below
   (major_points.html's own bars) - there it's baked into each major's own
   3-stop gradient; here the background-color (server-set inline, per
   segment) already carries the real major color/intensity, so the sheen's
   layered on top as a separate background-image instead of needing a
   bespoke gradient per major per segment */
.major-quals-fullness-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
  .major-quals-fullness-row {
    gap: 6px;
    margin: 8px 0;
  }

  .major-quals-fullness-label {
    font-size: 9.5px;
  }

  .major-quals-fullness-count {
    font-size: 8px;
  }

  .major-quals-fullness-track {
    height: 9px;
  }
}

/* Recent Qualifiers sidebar - same .qualification-bubble-table/
   .qualification-changes-table rules qualification.css's own per-event
   Recent Changes list uses, ported here since that stylesheet isn't
   loaded on this page. no IN/OUT symbol here (this list is locked-
   qualifiers only, see events.major_qualifications_summary()) and no
   dots column either (that list's own cat_nums are per-event category
   numbers - this sidebar mixes all 4 majors together, which don't share
   one category numbering) - just the col-player layout plus a right-
   aligned days-ago column instead */
.qualification-bubble-table {
  margin-top: 6px;
}

.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-changes-table {
  table-layout: auto;
}

.qualification-changes-table .col-player {
  vertical-align: middle;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.qualification-changes-table .player-col-inner {
  container-type: normal;
}

.qualification-changes-table .qualification-change-time {
  vertical-align: middle;
  text-align: right;
  padding-right: 6px;
  white-space: nowrap;
  font-size: 10px;
  color: var(--font-color-faint-2);
}

@media (max-width: 768px) {
  /* shared .table-note default (live_feeds.css) is 10.5px - same mobile
     shrink weather.html's own .weather-table-note uses (9px) for its top
     intro note, scoped the same way (its own classes, not .table-note
     itself, which other pages still rely on at the normal size). all 3
     majors-page intro notes share this, same as they share the desktop
     bump above */
  .major-winners-intro-note,
  .major-points-intro-note,
  .major-quals-intro-note,
  .major-seasons-intro-note {
    font-size: 9px;
  }
}

/* .leaderboard's own table-layout:fixed default (live_feeds.css) is back -
   with .col-year given its own smaller width below, the 4 winner columns
   (no explicit width) split the remaining space evenly regardless of each
   column's own content length, rather than each sizing to fit its longest
   name like table-layout:auto did */
.major-winners-table .col-year {
  width: 60px;
  font-weight: 600;
}

.major-winners-table td.col-year {
  font-size: 9px;
  color: rgba(150, 150, 150, 0.8);
}

/* container-type:normal: kept even though table-layout:fixed doesn't need
   to measure content width the way :auto did (the bug this originally
   worked around) - harmless either way, avoids re-litigating it if the
   layout ever changes back.
   display:inline-flex: name + (major count) need to sit on one line -
   .player-col-inner defaults to a block-level div, which would otherwise
   force the count below it onto a new line. display:flex on .col-player
   itself (the <td>) would do this too, but a <td> stops participating in
   table layout entirely once it's a flex container - .player-col-inner is
   what needs to go inline-level instead, not its parent cell */
.major-winners-table .player-col-inner {
  container-type: normal;
  display: inline-flex;
  vertical-align: middle;
}

/* .player-name-desktop's own full-first/short-first toggle (live_feeds.css)
   normally depends on @container player-col, which needs container-type:
   inline-size (just turned off above) to ever fire - defaults to full-first
   as a result. this table is dense enough (4 winner columns + the (N) major
   count below) that "F. Last" reads better here even with room to spare, so
   it's forced rather than left to the container query */
.major-winners-table .full-first {
  display: none;
}

.major-winners-table .short-first {
  display: inline;
}

.major-winners-number {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  /* box-centered already (confirmed via getBoundingClientRect, within a
     fraction of a px of .player-col-inner) - this is just the glyph-ink of
     small text sitting visually low in its own box, same optical quirk hit
     earlier elsewhere on the site with small markers next to bigger text */
  margin-top: -1px;
  font-size: 10px;
  color: var(--font-color-faint-2);
}

.major-winners-dash {
  opacity: 0.4;
}

/* first major championship of that player's career - major_number now comes
   straight from the feed itself (==1), not computed here. a shield rather
   than a star - stars are already the site's favourites symbol elsewhere */
.major-winners-first-icon {
  color: rgb(61, 153, 112);
  font-size: 9px;
  margin-left: 2px;
  vertical-align: middle;
}

.major-winners-legend {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--font-color-faint-2);
}

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

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

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

  /* Past Champions only (home page's own (N) badge, .major-winners-number
     with no -full suffix, is untouched) - desktop keeps the shield/count/
     legend exactly as before, mobile hides all three to keep the dense
     Year+4-major table from getting even more cramped */
  .major-winners-table .col-year {
    font-size: 10px;
  }

  #major-winners-history-table .major-winners-first-icon,
  .major-winners-number-full,
  .major-winners-legend {
    display: none;
  }
}

.major-winners-table .col-player[data-dg-id] {
  cursor: pointer;
}

/* click-a-cell player spotlight (major_winners.html's own click handler) -
   every other cell's content fades to near-invisible, the clicked player's
   own cells (every year/major they won) get a highlight background instead
   so their full history reads clearly against the faded rest of the table */
.major-winners-table.major-winners-filtering .col-player {
  opacity: 0.08;
  transition: opacity 0.15s;
}

.major-winners-table.major-winners-filtering .col-player.major-winners-selected {
  opacity: 1;
  background-color: rgba(173, 216, 230, 0.4);
}

/* Qualification Summary page - same shared .major-winners-table/leaderboard
   base as Past Champions, just a Player column instead of Year and one
   check/dash column per major instead of one winner column per major */
.major-winners-table .col-qual-status {
  width: auto;
  text-align: center;
}

@media (max-width: 768px) {
  /* the win-square marker (desktop 9.5px, live_feeds.css's shared
     .win-marker/.win-square) crowds the already-narrow "MAS"/"PGA"/"USO"/
     "OPEN" mobile header codes next to it - smaller, and vertical-align:
     middle to actually center it against that text's own line box instead
     of sitting baseline-aligned (which reads as sitting slightly too high
     relative to it). same treatment on both tables that carry this marker
     in their own header row - Qualification Summary's own .col-qual-status
     th, and Past Champions' plain (unclassed) th */
  .major-winners-table .col-qual-status .win-square,
  #major-winners-history-table thead th .win-square {
    width: 8px;
    height: 8px;
    margin-right: 0;
    position: relative;
    top: -0.5px;
    vertical-align: middle;
  }
}

/* .col-player had no explicit width here, so table-layout:fixed (.leaderboard)
   split it evenly with the 4 width:auto .col-qual-status columns above -
   way more room than a short "F. Last" name needs. a real % keeps it modest
   and leaves more room for those 4 */
#major-quals-table .col-player, #major-quals-favourites-table .col-player {
  width: 25%;
}

/* shared .col-dgr/.col-owgr default (live_feeds.css, 40px) is a touch tight
   here - just a few px more room, not a full redesign */
.major-winners-table .col-dgr, .major-winners-table .col-owgr {
  width: 48px;
}

/* search box + legend squares share one row, legend pushed to the far right */
.major-quals-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* major_points.html only - column-visibility toggle (PPS) sits between the
   search box and the legend, same .column-toggle/.hidden-column pattern
   live_model.html uses (live_feeds.css), just with .column-options'
   wrapper rule (normally event_live_model.css, not loaded on this page)
   ported in here instead */
.major-points-search-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.column-options {
  display: flex;
  align-items: center;
}

.major-quals-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--font-color-faint-2);
}

/* each square+label pair is one flex item (major_points.html's own 4-major
   legend) rather than loose siblings - otherwise a multi-word label like
   "U.S. Open" can wrap mid-phrase on a narrow flex row, same as any other
   flex child's text would */
.major-quals-legend-item {
  white-space: nowrap;
}

/* win-square sits baseline-aligned against its own label by default (no
   vertical-align set anywhere upstream) - reads as sitting slightly too
   high relative to the text next to it, same fix the table header's own
   win-square markers needed elsewhere on this page */
.major-quals-legend-item .win-square {
  vertical-align: middle;
}

@media (max-width: 768px) {
  /* side-by-side with the search box, 4 major-name labels wrapped mid-word
     ("U.S." stacking above "Open") rather than fitting cleanly - its own
     row below the search box instead, full width to wrap at word
     boundaries like a normal paragraph would */
  .major-quals-search-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* full width once it's its own row below the search box (above) - column
     toggle stays left, legend pushed to the far right edge instead of
     sitting bunched up right next to it */
  .major-points-search-right {
    width: 100%;
    justify-content: space-between;
  }

  .major-quals-legend {
    flex-wrap: wrap;
  }
}

/* translucent fill + solid border, same pairing .win-marker/.qual-dot use
   elsewhere on the site, rather than a flat opaque square */
.major-quals-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.major-quals-badge i {
  font-size: 7px;
  color: #fff;
}

@media (max-width: 768px) {
  /* smaller on mobile, in both the Locked/On track legend key and each
     row's own status badges. must come after the shared rule above - an
     earlier copy of this same override (now removed) sat before it in the
     file, so the unconditional desktop rule was winning the cascade even
     inside this media query's own matching viewport */
  .major-quals-badge {
    width: 10px;
    height: 10px;
  }

  .major-quals-badge i {
    font-size: 6px;
  }
}

.major-quals-locked {
  background-color: rgba(61, 153, 112, 0.75);
  border: 1px solid var(--olive);
}

.major-quals-provisional {
  background-color: rgba(255, 133, 27, 0.75);
  border: 1px solid var(--orange);
}

/* DG Points page - Rank/Player/Starts/Wins fixed narrow, DG Points (the
   stacked bar) takes the rest */
.major-winners-table .col-rank {
  width: 20px;
  text-align: left;
  color: var(--font-color-faint-2);
}

/* sub-section headings in the main column (Upcoming Majors/Past Winners/
   Top DG Points) reuse .event-title/.event-title-text for the same bold
   look the page's own top title has, but they sit inside a normal
   .feed-section here (not directly in .container-fluid the way the page's
   real title does above) - .event-title's own -10px correction doesn't
   apply, and a smaller size reads better as a sub-heading than the page
   title's own 20px */
.majors-section-title {
  margin-left: 0;
  margin-bottom: 8px;
  font-size: 13px;
}

/* home page only - each section's own content (the upcoming-majors list,
   the Past Winners table, the Top DG Points table) sits a touch right of
   its section title above, rather than flush with it */
.majors-home-indent {
  margin-left: 5px;
}

/* home page only - more breathing room between Upcoming Majors/Past Winners/
   Top DG Points than the shared .feed-section-margin-top default (10px)
   gives, so the 3 sections read as clearly separate */
.majors-home-section-gap {
  margin-top: 28px;
}

/* "See full history"/"See full list" - shared .table-note default
   (live_feeds.css) is 10.5px with a 3px gap above - a bit bigger here,
   with its own breathing room above instead of that shared 3px */
.majors-home-see-more {
  font-size: 12px;
  margin-top: 6px;
}

@media (max-width: 768px) {
  /* was never scoped to mobile at all - sat at the same 12px desktop size
     regardless of viewport, noticeably bigger than everything else on
     this page gets at this breakpoint */
  .majors-home-see-more {
    font-size: 10px;
    margin-top: 4px;
  }
}

/* the real source of the big gap above was .leaderboard's own shared
   margin-bottom (15px, live_feeds.css) - .majors-home-see-more's own
   negative margin-top barely touched that. scoped to just these two
   home-page tables (both sit inside .majors-home-indent) rather than
   touching .leaderboard sitewide */
.majors-home-indent .major-winners-table {
  margin-bottom: 2px;
}

.majors-section-title .event-title-text {
  font-size: 13px;
}

/* 4 upcoming majors stacked, not side-by-side cards - mostly text, so a
   plain list reads better than bordered boxes */
.majors-upcoming-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.majors-upcoming-item {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
}

.majors-upcoming-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.majors-upcoming-title {
  margin-left: 0;
  margin-bottom: 4px;
  font-size: 12px;
  display: block;
}

.majors-upcoming-title .event-title-text {
  font-size: 12px;
}

/* Start/Course/Players Qualified - shared .event-infos default (live_feeds.css)
   is 12px, brought down to match the rest of the page's table-row text
   rather than reading noticeably bigger than everything below it */
.majors-upcoming-item .event-infos {
  font-size: 10.5px;
}

/* mobile override for the 5 rules just above - deliberately placed here,
   AFTER those unconditional rules rather than up in the earlier 768px
   block this file already has, since an unconditional rule appearing
   later in the file beats an earlier-appearing @media rule at equal
   specificity regardless of viewport (bit us before - see live_feeds.css) */
@media (max-width: 768px) {
  .majors-upcoming-grid {
    gap: 7px;
  }

  .majors-upcoming-item {
    padding-bottom: 7px;
  }

  .majors-upcoming-title {
    margin-bottom: 3px;
    font-size: 11px;
  }

  .majors-upcoming-title .event-title-text {
    font-size: 11px;
  }

  .majors-upcoming-item .event-infos {
    font-size: 10px;
  }
}



/* .col-player's shared default (live_feeds.css) is 40% - a bit wide now that
   Starts/Top 5s/Wins all have their own fixed widths below, so just this
   table's player column gets trimmed */
#major-points-table .col-player, #major-points-favourites-table .col-player {
  width: 35%;
}

/* major_seasons.html has even more fixed-width columns competing for room
   than major_points.html above (Season/Wins/Cumulative SG on top of
   Starts/Top 5s) - trimmed further so Player doesn't crowd them out.
   every column on this table is a % (not px, unlike the shared .major-
   winners-table rules below) so the whole row scales proportionally with
   the table's own width rather than holding a fixed pixel size - ID-scoped
   so these win over those shared px rules regardless of file order */
#major-seasons-table .col-player, #major-seasons-favourites-table .col-player {
  width: 20%;
}

#major-seasons-table .col-season, #major-seasons-favourites-table .col-season {
  width: 8%;
}

#major-seasons-table .col-starts, #major-seasons-favourites-table .col-starts {
  width: 8%;
}

#major-seasons-table .col-top5s, #major-seasons-favourites-table .col-top5s {
  width: 8%;
}

#major-seasons-table .col-wins, #major-seasons-favourites-table .col-wins {
  width: 12%;
}

/* deliberately NOT a %, unlike every other column on this table - with every
   column pinned to an explicit width, table-layout:fixed has no "slack"
   column left to absorb the gap between their sum and the table's real
   rendered width, so it proportionally rescales ALL of them to force a fit
   - including col-star's supposedly-fixed 20px, which is how the star icon
   ended up rendering oversized/misaligned on mobile. auto gives dgpts that
   role back (same as major_points.html's own .col-dgpts), so every other
   column's declared width is finally honored exactly */
#major-seasons-table .col-dgpts, #major-seasons-favourites-table .col-dgpts {
  width: auto;
}

#major-seasons-table .col-sg, #major-seasons-favourites-table .col-sg {
  width: 18%;
}

.major-winners-table .col-starts {
  width: 50px;
  text-align: center;
}

.major-winners-table .col-top5s {
  width: 55px;
  text-align: center;
}

.major-winners-table .col-ppstart {
  width: 50px;
  text-align: center;
}

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

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

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

/* wider than .col-starts - holds actual win markers now (recent_form.html's
   own grouped-win treatment, ported server-side below since this page is
   otherwise fully server-rendered), not just a plain count, and a player
   with wins across all 4 majors needs real room for up to 4 markers */
.major-winners-table .col-wins {
  width: 110px;
  text-align: center;
}

/* major_seasons.html only - Season (year, plain) column */
.major-winners-table .col-season {
  width: 55px;
  text-align: center;
}

/* .col-sg's shared width:auto default (live_feeds.css, unscoped) would
   otherwise split the row's remaining space 50/50 with .col-dgpts (this
   table's other auto column) - fixed width here keeps the DG Points bar
   as the wide one, same as every other secondary stat column on this page */
.major-winners-table .col-sg {
  width: 90px;
  text-align: center;
}

/* same grouped-win-marker CSS as recent_form.css's own (see its write-up
   there for the full reasoning) - ported here since this page doesn't load
   that stylesheet */
.win-marker-group {
  position: relative;
  display: inline-block;
}

.col-wins:has(.win-marker-group) .win-marker {
  margin-top: 3px;
}

.win-marker-count-badge {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 700;
  color: var(--font-color-base);
  line-height: 1;
  white-space: nowrap;
}

.major-winners-table .col-dgpts {
  width: auto;
}

.dgpts-bar-container {
  position: relative;
  height: 20px;
}

.dgpts-axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #555;
  z-index: 1;
}

/* one segment per major, each its own 3-stop vertical gradient (light at
   the top, deepening toward that major's real color at the bottom) plus a
   thin inset highlight - same "premium" treatment recent_form.css's own
   single-color .dgpts-bar uses, just keyed per-major instead of one flat
   blue. stacked left-to-right (JS sets left/width in px) in the same order
   as major_order, so :first-child/:last-child always land on Masters/Open
   regardless of which segments are actually 0-width for a given player */
.dgpts-bar-segment {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 0;
}

.dgpts-bar-segment:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.dgpts-bar-segment:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.dgpts-bar-masters-tournament {
  background: linear-gradient(180deg, rgba(173, 230, 213, 0.75) 0%, rgba(44, 160, 128, 0.75) 55%, rgba(7, 102, 82, 0.75) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dgpts-bar-pga-championship {
  background: linear-gradient(180deg, rgba(185, 196, 222, 0.75) 0%, rgba(90, 112, 156, 0.75) 55%, rgba(41, 63, 104, 0.75) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dgpts-bar-us-open {
  background: linear-gradient(180deg, rgba(255, 189, 204, 0.75) 0%, rgba(237, 84, 128, 0.75) 55%, rgba(224, 0, 64, 0.75) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dgpts-bar-the-open-championship {
  background: linear-gradient(180deg, rgba(255, 232, 173, 0.75) 0%, rgba(255, 213, 90, 0.75) 55%, rgba(255, 193, 7, 0.75) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dgpts-bar-text {
  position: absolute;
  top: 0;
  left: 4px;
  line-height: 20px;
  font-size: 10px;
  white-space: nowrap;
}

.dgpts-bar-text-inside {
  color: #fff;
}

/* Wins column: full colored/grouped win markers on desktop, a plain count
   on mobile - frees up enough room on the DG Points tables to keep
   Starts/Top 5s visible there too instead of hiding them */
.col-wins-mobile {
  display: none;
}

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

  .col-wins-mobile {
    display: inline;
  }

  /* shared 110px width (above) was sized for the colored marker groups -
     oversized now that mobile only ever shows a 1-2 digit number here,
     and starving .col-dgpts (the whole point of this page) of the room it
     needs for a legible bar */
  #majors-home-dgpts-table .col-wins,
  #major-points-table .col-wins,
  #major-points-favourites-table .col-wins,
  #majors-home-seasons-table .col-wins {
    width: 34px;
  }

  /* Starts/Top 5s are almost always 1-2 digits - their shared 50px/55px
     desktop widths have more room than the content needs, same reasoning
     as .col-wins above. every px reclaimed here goes straight to
     .col-dgpts, the one column on this page that actually needs it */
  #majors-home-dgpts-table .col-starts,
  #major-points-table .col-starts,
  #major-points-favourites-table .col-starts,
  #majors-home-dgpts-table .col-top5s,
  #major-points-table .col-top5s,
  #major-points-favourites-table .col-top5s,
  #majors-home-seasons-table .col-top5s {
    width: 32px;
  }

  /* majors-home-seasons-table only - Season has no equivalent on the sibling
     Most DG Points teaser above, own rule rather than folded into either
     shared group */
  #majors-home-seasons-table .col-season {
    width: 44px;
  }

  /* Starts is almost always 4 on this page (one per major that season) -
     low-information on mobile, dropped to free up room for the rest of
     the row rather than squeezing it in (no horizontal scroll, per site
     convention) */
  #major-seasons-table .col-starts,
  #major-seasons-favourites-table .col-starts {
    display: none;
  }

  /* dropping Starts above freed up room - Season/Top 5s/Wins get a bit
     more of it than the shared 32px/34px other majors-section tables use,
     own rules (not the shared ones above) since those still serve pages
     that kept their Starts column */
  #major-seasons-table .col-season,
  #major-seasons-favourites-table .col-season {
    width: 48px;
  }

  #major-seasons-table .col-top5s,
  #major-seasons-favourites-table .col-top5s {
    width: 38px;
  }

  #major-seasons-table .col-wins,
  #major-seasons-favourites-table .col-wins {
    width: 42px;
  }

  #major-points-table .col-ppstart,
  #major-points-favourites-table .col-ppstart {
    width: 34px;
  }

  /* Cumulative SG is a nice-to-have bar, not core info - dropped on mobile
     rather than squeezing it in alongside everything else this table
     already shows (no horizontal scroll, per site convention) */
  #major-seasons-table .col-sg,
  #major-seasons-favourites-table .col-sg {
    display: none;
  }

  /* shared 35%/40% defaults (above, live_feeds.css) leave .col-dgpts short
     on a narrow screen - trimmed back since the mobile 2-line name stack
     doesn't need nearly as much width as "F. Last" desktop format does */
  #major-points-table .col-player,
  #major-points-favourites-table .col-player,
  #majors-home-dgpts-table .col-player,
  #major-seasons-table .col-player,
  #major-seasons-favourites-table .col-player {
    width: 26%;
  }

  #major-quals-table .col-owgr,
  #major-quals-favourites-table .col-owgr {
    display: none;
  }

  /* 5 columns (Year + 4 majors) with no column left to hide - every one of
     them is the whole point of this table. the mobile 2-line name stack
     (.player-name-mobile, live_feeds.css) already needs all the room it
     can get for longer last names ("Schauffele", "DeChambeau"), so the (N)
     major-count badge - extra width pressure for secondary info that's
     still available via the click-to-spotlight interaction - goes instead
     of squeezing the name further */
  #major-winners-history-table .col-year {
    width: 36px;
  }

  #major-winners-history-table .major-winners-number {
    display: none;
  }
}