/* solid (full-opacity) near-white/near-black used to dim every bar but the
   hovered player's own on the rank-gap chart (ranking_trends_rank_gap.html) -
   245/40 rather than true 255/0 so there's still a hair of contrast against
   the page's own white/black background, not literally invisible */
:root {
  --rg-dim-color: rgb(245, 245, 245);
}

:root[color-mode="dark"] {
  --rg-dim-color: rgb(40, 40, 40);
}

/* .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;
}

.yi-chart-title {
  font: 600 15px Helvetica;
  color: var(--font-color-base);
  margin-top: 14px;
}

.yi-section-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--font-color-base);
  margin-top: 2px;
}

/* .dg-rankings-intro-note's own -10px margin-left (major_winners.css) is
   there to offset .container-fluid's Bootstrap padding for notes that sit
   directly in it - this note instead sits inside .feed-section alongside
   the "Who is influencing..." title/table it describes, so it needs to
   stay flush with those, same fix .yi-intro-note needs below */
.yi-current-age-note {
  margin-left: 0;
}

.yi-current-age-value {
  font-weight: 700;
}

/* "Who is influencing the index most today?" - todays_top_influencers,
   direction (the Influence column's own red/blue arrow) inferred server-
   side by comparing each player's real age to the index's own latest
   value. .col-rank/.col-player/.col-age/.col-skill all reuse the sitewide
   plain-gray-rank, player-name, age, and bidirectional-skill-bar
   conventions already in live_feeds.css/major_winners.css, but with this
   table's own column widths (.col-player becomes the width:auto safety
   valve here instead of .col-skill, which otherwise soaked up more
   leftover space than a short skill bar actually needs) */
.yi-influencers-table {
  margin-top: 8px;
}

/* Influence header's own full/short label pair (mobile swaps to "Infl.") -
   same col-label-full/col-label-mobile pattern several other pages' own
   CSS files use (eg live_stats.css, tee_times.css, dg_rankings.css) for
   this exact "two pre-rendered labels, CSS just picks one" approach */
.col-label-mobile {
  display: none;
}

.yi-influencers-table .col-rank {
  width: 20px;
  text-align: left;
  color: var(--font-color-faint-2);
}

.yi-influencers-table .col-player {
  width: auto;
}

.yi-influencers-table .col-age {
  width: 60px;
  text-align: center;
}

.yi-influencers-table .yi-col-dg-rank {
  width: 80px;
  text-align: center;
}

.yi-influencers-table .col-skill {
  width: 180px;
  text-align: center;
}

.yi-influencers-table .yi-col-influence {
  width: 72px;
  text-align: center;
}

/* small solid triangle + a real stem below/above it (a proper ↑/↓ glyph,
   not just a bare triangle), same shape/colors as the chart's own tiny
   monthly-pull arrowheads above (yi-pull-arrow-old/-young markers,
   ranking_trends.html) - border-trick CSS triangle here since this is a
   plain table cell, not SVG. older (blue) points up, younger (red) points
   down, same convention as the chart arrows and the Rank column's bars.
   flex+order (not just source order) since the head/stem need to swap
   which one's on top depending on direction, off the same two child spans */
.yi-influence-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
}

.yi-influence-arrow-head {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.yi-influence-arrow-stem {
  width: 1px;
  height: 4px;
}

.yi-influence-arrow-older .yi-influence-arrow-head { border-bottom: 5px solid var(--blue); order: 1; }
.yi-influence-arrow-older .yi-influence-arrow-stem { background: var(--blue); order: 2; }
.yi-influence-arrow-younger .yi-influence-arrow-head { border-top: 5px solid var(--red); order: 2; }
.yi-influence-arrow-younger .yi-influence-arrow-stem { background: var(--red); order: 1; }

/* # stays sortable (data-sort="rank", ranking_trends.html) - just never
   shows the shared ▲/▼ caret (live_feeds.css) even when it's the active
   sort column, since the column's own "#" header already reads as a rank
   indicator and the caret next to it doubled up oddly */
.yi-influencers-table .col-rank.sorted-asc::after,
.yi-influencers-table .col-rank.sorted-desc::after {
  content: '';
  margin-left: 0;
}

.yi-influence-years {
  font-size: 10px;
  color: var(--font-color-faint-2);
}

/* height is set in JS (mainPlotHeight + however many influential_players
   lanes end up getting packed below it) - this is just a sane pre-JS
   fallback */
.yi-chart-outer {
  position: relative;
  width: 100%;
  height: 420px;
  margin-top: 2px;
}

.yi-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.yi-gridline {
  stroke: var(--font-color-faint-2);
  stroke-opacity: 0.15;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.yi-axis text {
  font: 10px Helvetica;
  fill: var(--font-color-faint-2);
}

/* y-axis only, both charts (rank-gap/skill-weighted-age) - now drawn on
   top of the bars/area (DOM order, draw_*_chart() JS) on desktop too, not
   just the mobile inside-plot case this halo originally covered below, so
   it needs the same legibility halo unconditionally now. x-axis stays
   below the chart on plain background and doesn't need this */
.yi-y-axis text {
  fill: var(--font-color-base);
  stroke: #fff;
  stroke-width: 2px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

:root[color-mode="dark"] .yi-y-axis text {
  stroke: #000;
}

.yi-axis path,
.yi-axis line {
  display: none;
}

.yi-area {
  fill: url(#yi-area-gradient);
}

.yi-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.yi-line-weighted { stroke: var(--olive); }
.yi-line-raw { stroke: var(--blue); stroke-width: 1.25; stroke-opacity: 0.8; }

/* most_influential_range bars - lane-packed (JS) beneath the age line,
   sharing its x-axis. two independent groups stacked one under the other -
   influential_players (downward/younger pull, red) and oldest_pull_players
   (upward/older pull, blue). fill-opacity is set per-bar in JS from the
   feed's own influence_score, not here. own hover (.yi-range-tooltip),
   independent of the main crosshair above */
.yi-range-bar {
  cursor: pointer;
}

.yi-range-bar-young { fill: var(--red); }
.yi-range-bar-old { fill: var(--blue); }

/* hovered player's own monthly pull on the age line itself (.yi-pull-lines
   group, ranking_trends.html) - one thin stem per month in their own
   most_influential_range, from the line up to (old, blue) or down to
   (young, red) line+their own that-month pull. pointer-events:none so
   they never intercept the hover they only exist because of */
.yi-pull-line {
  stroke-width: 1px;
  pointer-events: none;
}

.yi-pull-line-old { stroke: var(--blue); }
.yi-pull-line-young { stroke: var(--red); }

/* shown on the age line itself while hovering any .yi-range-bar above -
   same date span, so it's clear which stretch of the line that player's
   range covers. plain gray regardless of group - the tooltip's own name
   text (.yi-range-tooltip-name-young/-old) is what carries the red/blue
   young-vs-old distinction now */
.yi-range-highlight {
  fill: var(--font-color-faint-2);
  fill-opacity: 0.12;
  pointer-events: none;
}

.yi-range-highlight-edge {
  stroke: var(--font-color-faint-2);
  stroke-opacity: 0.4;
  stroke-width: 1;
  pointer-events: none;
}

.yi-overlay {
  fill: none;
  pointer-events: all;
  cursor: crosshair;
}

.yi-focus-line {
  stroke: var(--font-color-faint-2);
  stroke-width: 1;
  stroke-dasharray: 2,2;
}

.yi-focus-dot {
  stroke: none;
}

.yi-focus-dot-weighted { fill: var(--olive); }
.yi-focus-dot-raw { fill: var(--blue); }

/* no popover box - plain text positioned right above the hovered dot, with
   a solid background-colored outline (light mode: white, dark mode: black)
   so it stays legible wherever it lands on the line/area/gridlines */
.yi-tooltip {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 11px Helvetica;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  text-shadow:
    -1px -1px 0 var(--black-base), 1px -1px 0 var(--black-base),
    -1px 1px 0 var(--black-base), 1px 1px 0 var(--black-base),
    0 -1px 0 var(--black-base), 0 1px 0 var(--black-base),
    -1px 0 0 var(--black-base), 1px 0 0 var(--black-base);
}

.yi-tooltip-date {
  color: var(--font-color-faint-2);
}

.yi-tooltip-value {
  color: var(--font-color-base);
  font-weight: 600;
}

/* hover for .yi-range-bar - fully separate from .yi-tooltip above. pinned
   to the top of the age line plot (not the hovered bar's own position),
   horizontally centered over .yi-range-highlight */
.yi-range-tooltip {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 5px;
  border-radius: 3px;
  border: 1px solid rgba(150, 150, 150, 0.4);
  background: var(--black-base);
  font: 10px Helvetica;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
}

/* toggled on (draw_range_group(), ranking_trends.html) when the age line
   sits in the plot's upper half during the hovered player's own window -
   a top-pinned tooltip there would sit right on top of the line it's
   describing. top itself gets set to the plot's bottom edge in that case,
   and this flips the box to grow upward from that point (instead of its
   usual downward from a top-of-plot anchor) so it still lands inside the
   plot rather than spilling past the x-axis */
.yi-range-tooltip-bottom {
  transform: translateX(-50%) translateY(-100%);
}

.yi-range-tooltip-name-young { color: var(--red); }
.yi-range-tooltip-name-old { color: var(--blue); }

/* name + date range sit on one row now, not stacked - the range reads as
   a parenthetical right next to who it's about rather than its own
   separate line */
.yi-range-tooltip-header {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* full base text color (not the faint gray age/skill/infl use below) -
   the brackets (set in JS, ranking_trends.html) already read as
   secondary/parenthetical on their own, doesn't need a faded color on
   top of that too */
.yi-range-tooltip-years {
  color: var(--font-color-base);
  font-size: 9px;
}

.yi-range-tooltip-age,
.yi-range-tooltip-skill {
  color: var(--font-color-faint-2);
}

.yi-range-tooltip-label {
  font-weight: 600;
}

/* one shared row shape for Age/Avg Skill/Avg Infl. (ranking_trends.html) -
   these used to be a plain, unstyled div for the first two and only the
   Infl. row had its own real layout/font-size/color, which is exactly why
   they read as visibly inconsistent sizes against each other despite
   looking like "the same kind of row" */
.yi-range-tooltip-row {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--font-color-faint-2);
  font-size: 9px;
}

.yi-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 1px;
  margin-bottom: 0;
  font: 10px Helvetica;
  color: var(--font-color-faint-2);
}

.yi-legend-top {
  margin-top: 10px;
}

.yi-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.yi-legend-dot {
  width: 14px;
  height: 6px;
  border-radius: 1px;
  display: inline-block;
}

.yi-legend-dot-player { background: var(--red); }
.yi-legend-dot-player-old { background: var(--blue); }

/* .dg-rankings-intro-note's own -10px margin-left (major_winners.css) is
   there to offset .container-fluid's Bootstrap padding for notes that sit
   directly in it - this note instead sits inside .feed-section alongside
   the chart title/chart it describes, so it needs to stay flush with
   those, not inherit that correction */
.yi-intro-note {
  margin-left: 0;
}

/* 2px surface-gap stroke between touching segments (same bar and
   neighboring bars alike) - a background-colored outline, not a dark
   border, so adjacent same-tour segments across months still read as one
   continuous band while still separating from the segment above/below
   them within a single bar */
/* thin, not the original 1px - enough to separate stacked segments within
   one bar without reading as a grid of seams between adjacent bars at 201
   bars wide (the problem the original 1px version had) */
.ta-bar-segment {
  stroke: var(--black-base);
  stroke-width: 0.3px;
  opacity: 1;
  /* y/height also animate on hover (isolating the hovered tour re-stacks
     it from the bottom) - JS sets those attrs directly, this just makes
     both that move and the opacity fade read as one smooth transition */
  transition: opacity 0.15s ease, y 0.15s ease, height 0.15s ease;
}

/* other tours' segments while one is isolated via legend hover - fully
   hidden (not just dimmed), since the point is seeing the hovered tour's
   own trend in isolation, not a comparison view */
.ta-bar-segment.ta-bar-dim {
  opacity: 0;
}

/* every other month while a single bar is isolated via the range plot's
   min/max hover (below) - dimmed, not hidden like .ta-bar-dim above, since
   the point here is placing the one highlighted bar in context against the
   rest of the series, not viewing it in isolation */
.ta-bar-group {
  opacity: 1;
  transition: opacity 0.15s ease;
}

.ta-bar-group.ta-bar-group-faded {
  opacity: 0.15;
}

/* within the one highlighted month (ta-bar-group-faded above doesn't apply
   to its own group), the tours other than the one actually being called
   out still fade the same amount individually */
.ta-bar-segment.ta-bar-segment-faded {
  opacity: 0.15;
}

.ta-legend-item {
  cursor: default;
}

.ta-focus-bar {
  fill: var(--font-color-faint-2);
  fill-opacity: 0.12;
  pointer-events: none;
}

/* notable-moment markers under the x-axis years */
.ta-event-marker {
  fill: var(--orange);
  cursor: default;
}

.ta-overlay {
  fill: none;
  pointer-events: all;
  cursor: crosshair;
}

/* pinned near the top of the plot, horizontally tracking the hovered bar -
   same "pin near the top, don't follow the cursor's own y" convention
   .yi-range-tooltip uses, just with its own multi-row date+breakdown
   layout instead of that one's single name/years/age/skill line */
.ta-tooltip {
  position: absolute;
  /* floats above its own top anchor (full own height + 6px) rather than
     growing down from it - briefly lost when the stale duplicate of this
     whole rule (which happened to carry this transform) got removed below,
     put back here on the one real rule instead */
  transform: translate(-50%, calc(-100% - 6px));
  min-width: 110px;
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid rgba(150, 150, 150, 0.4);
  background: var(--black-base);
  font: 10px Helvetica;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* same look as .ta-tooltip, just anchored above the marker instead of a
   bar, and no date/rows structure since it's a single line of text */
.ta-marker-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid rgba(150, 150, 150, 0.4);
  background: var(--black-base);
  color: var(--font-color-base);
  font: 10px Helvetica;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ta-tooltip-date {
  font-weight: 600;
  color: var(--font-color-base);
  margin-bottom: 3px;
}

.ta-tooltip-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
}

.ta-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ta-tooltip-label {
  color: var(--font-color-faint-2);
  flex: 1;
}

.ta-tooltip-pct {
  color: var(--font-color-base);
  font-weight: 600;
}

/* Tour Affiliation stacked-bar chart - reuses .yi-intro-note above for its
   own methodology note (same -10px:0 fix applies regardless of which chart
   the note sits next to) */
.ta-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
  font: 10px Helvetica;
  color: var(--font-color-faint-2);
}

.ta-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ta-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.ta-range-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 16px;
}

.ta-range-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  font: 9px Helvetica;
  color: var(--font-color-faint-2);
}

.ta-range-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ta-range-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* min/max share the same hollow-ring look - position along the row (left
   vs right end of the line) is what tells them apart, not styling */
.ta-range-dot-min,
.ta-range-dot-max {
  background: transparent;
  border: 1.5px solid var(--font-color-faint-2);
}

.ta-range-dot-avg {
  background: var(--font-color-faint-2);
}

.ta-range-dot-current {
  width: 8px;
  height: 8px;
  background: var(--font-color-base);
}

.ta-range-chart-outer {
  position: relative;
  width: 100%;
  margin-top: 6px;
}

.ta-range-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ta-range-label {
  font: 11px Helvetica;
  fill: var(--font-color-base);
}

.ta-range-line {
  stroke-width: 3px;
  stroke-opacity: 0.35;
}

/* actual chart markers (not the generic legend swatches above) - same
   hollow-ring/solid-gray/larger-solid language, just rendered as real SVG
   circles sized to the plot */
.ta-range-chart-outer .ta-range-dot-min,
.ta-range-chart-outer .ta-range-dot-max {
  fill: var(--black-base);
  stroke: var(--font-color-faint-2);
  stroke-width: 1.5px;
}

.ta-range-chart-outer .ta-range-dot-avg {
  fill: var(--font-color-faint-2);
}

.ta-range-chart-outer .ta-range-dot-current {
  stroke: var(--black-base);
  stroke-width: 1.5px;
  cursor: default;
}

.ta-range-gridline {
  stroke: var(--font-color-faint-2);
  stroke-opacity: 0.25;
  stroke-width: 1;
  stroke-dasharray: 2, 3;
  shape-rendering: crispEdges;
}

.ta-range-current-label {
  font: 9px Helvetica;
  fill: var(--font-color-base);
}

.ta-range-x-axis text {
  font: 10px Helvetica;
  fill: var(--font-color-faint-2);
}

.ta-range-x-axis path,
.ta-range-x-axis line {
  display: none;
}

.ta-range-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid rgba(150, 150, 150, 0.4);
  background: var(--black-base);
  color: var(--font-color-base);
  font: 10px Helvetica;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* no influence-lane bars below this one (unlike .yi-chart-outer), so no
   extra bottom space needed beyond the x-axis itself */
.ta-chart-outer {
  position: relative;
  width: 100%;
  height: 326px;
  margin-top: 2px;
}

.ta-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ta-gridline {
  stroke: var(--font-color-faint-2);
  stroke-opacity: 0.15;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.ta-axis text {
  font: 10px Helvetica;
  fill: var(--font-color-faint-2);
}

/* y-axis % labels only (not .ta-axis text generally, which also matches
   the x-axis year labels below the chart on plain background and doesn't
   need any of this) - these sit inside the plot, over the bars, so a solid
   stroke "halo" behind the fill (paint-order puts stroke first) is what
   keeps them legible regardless of which tour color happens to be
   underneath, same idea as an outlined map label */
.ta-y-axis text {
  font: 9px Helvetica;
  font-weight: 400;
  fill: var(--font-color-base);
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

:root[color-mode="dark"] .ta-y-axis text {
  stroke: #000;
}

.ta-axis path,
.ta-axis line {
  display: none;
}

/* fill color is set per-segment in JS (TOUR_COLORS, a per-tour CSS
   variable) rather than here, same as the weekly rankings page's own
   .tour-bar-segment convention */
.ta-bar-segment {
  shape-rendering: crispEdges;
}

/* vertical band spanning the hovered bar's own width - same "flat gray
   highlight behind the data" idea as .yi-range-highlight, just sized to
   one bar instead of a date range */
.ta-focus-bar {
  fill: var(--font-color-faint-2);
  fill-opacity: 0.12;
  pointer-events: none;
}

.ta-overlay {
  fill: none;
  pointer-events: all;
  cursor: crosshair;
}

/* site-owner comment at the bottom of a trend page (ranking_trends.html and
   ranking_trends_tour_affiliation.html both use this - shared "trend-"
   prefix, not "ta-"/"yi-", since it's not specific to either chart) -
   server only sends this through when there's actually a comment on that
   feed, so most of the time this section doesn't render at all */
.trend-comment-section {
  margin-top: 16px;
  margin-bottom: 20px;
}

/* very faint tint, no border (not the flat --container-color-base gray
   tried first - too heavy, read as a notification card rather than a
   quoted note) - semi-transparent gray, not a solid color, so it stays
   faint over either theme's own background */
.trend-comment {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(150, 150, 150, 0.07);
  border: 1px solid rgba(150, 150, 150, 0.3);
  border-radius: 4px;
}

.trend-comment + .trend-comment {
  margin-top: 10px;
}

.trend-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  font: 10px Helvetica;
  color: var(--font-color-faint-2);
}

.trend-comment-author {
  font: 13px Helvetica;
  font-weight: 600;
  color: var(--font-color-base);
}

.trend-comment-date {
  font: 700 10px Helvetica;
  color: var(--red);
}

.trend-comment-text {
  font: 12px/1.5 Helvetica;
  color: var(--font-color-faint);
}

/* comment text can now be pre-converted HTML (routes.py, | safe in the
   template) rather than plain text - a wrapping <p> (or similar block
   element) brings its own default top/bottom margin along with it,
   showing up as extra space this card was never designed to have */
.trend-comment-text > :first-child {
  margin-top: 0;
}

.trend-comment-text > :last-child {
  margin-bottom: 0;
}

/* mask fade (not the browser's own ellipsis) on the cut-off line - reads
   as "more text continues below" rather than a hard stop */
.trend-comment-text.trend-comment-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

.trend-comment-toggle {
  display: inline-block;
  margin-top: 4px;
  font: 600 10px Helvetica;
  color: var(--blue);
  cursor: pointer;
}

/* sidebar teaser (ranking_trends_rank_gap.html) - just the latest trend
   comment, reusing .trend-comment-meta/-text as-is, with its own "See all"
   link down to the full #trend-comments list further down the page */
#rg-latest-comment-section {
  margin-bottom: 10px;
}

.rg-latest-comment-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
}

/* same small/plain feel as the "What is the DG Index?" sidebar box
   (.table-note's own 10.5px, _dg_rankings_menu.html) - the shared .trend-
   comment-* sizing (above) is tuned for the full-width Notes list further
   down the page, too large for this narrower sidebar teaser */
.trend-comment-meta.rg-latest-comment-meta {
  font-size: 9px;
}

.rg-latest-comment-meta .trend-comment-author {
  font-size: 11px;
}

.rg-latest-comment-meta .trend-comment-date {
  font-size: 9px;
}


.trend-comment-text.rg-latest-comment-text {
  font-size: 10.5px;
  cursor: pointer;
}

/* 3 classes, not the shared rule's 2 (.trend-comment-text.trend-comment-
   clamped above) - bigger preview than the main Notes list's own 5-line
   clamp, since this is the only hint of the comment visible without
   scrolling down to the full list */
.trend-comment-text.trend-comment-clamped.rg-latest-comment-text {
  -webkit-line-clamp: 10;
}

/* rank-gap page's own chart (ranking_trends_rank_gap.html) - one bar per
   week, no lanes underneath, so .rg-chart-outer's own fallback height only
   needs to cover the plot + x-axis margin, not any lane stacking like the
   age chart's .yi-chart-outer needs */
.rg-chart-outer {
  height: 322px;
  /* explicit (not auto) z-index, same reasoning as .rg-tooltip's own below -
     .view-toggle label (ranking_trends.css) is also a positioned element
     with its own explicit z-index:1, which otherwise wins the stacking
     comparison against this container's contents regardless of DOM order */
  z-index: 1;
}

/* chart's own Gap/Absolute toggle - shrunk to fit its own two labels
   exactly (unlike the shared .view-toggle default, which splits 50/50
   regardless of each tab's own text length - "Gap" and "Absolute" aren't
   the same length, so an even split left "Gap" looking padded).
   width:fit-content + flex:0 0 auto on the labels (overriding the shared
   flex:1) lets each tab size to its own content; the slider's own left/
   width get set in JS (rg_update_toggle_slider()) off the checked label's
   own measured position instead of the shared CSS's 50%/translateX(100%)
   rule, which assumes equal halves. sits in its own row below the chart
   title - doesn't matter that the chart tooltip floats up over it on
   hover, since the tooltip has a real z-index and always paints on top */
/* .view-toggle.rg-view-toggle (2 classes), not just .rg-view-toggle - the
   shared .view-toggle default below (width:100%/height:22px) is declared
   AFTER this block in the file, so at equal single-class specificity it
   was winning the cascade for every overlapping property on an element
   that carries both classes, not just width */
.view-toggle.rg-view-toggle {
  width: fit-content;
  height: 22px;
  margin-top: 6px;
  margin-bottom: 18px;
}

.view-toggle.rg-view-toggle label {
  flex: 0 0 auto;
  padding: 0 10px;
  font-size: 10.5px;
}

/* fill set per-bar in JS (d.rank1.color, server-assigned) - no shared
   color here. no stroke: at ~0.6-2px wide depending on viewport width,
   a stroke would just muddy same-color runs into visible seams instead of
   reading as one solid band for that player's own stretch at #1 */
.rg-bar {
  shape-rendering: crispEdges;
}

.rg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 6px;
  font: 10px Helvetica;
  color: var(--font-color-faint-2);
}

/* current #1 callout - one line, auto-generated (routes.py current_summary),
   sits between the chart/legend and the "All DG #1s" table */
.rg-current-summary {
  margin-top: 4px;
  line-height: 1.5;
}

/* beats plain .event-infos's own font-size:12px (live_feeds.css, loaded
   before this file) on specificity - 2 classes vs 1 */
.rg-current-summary .event-infos {
  font-size: 10.5px;
}

.rg-current-summary .event-infos + .event-infos {
  margin-top: 3px;
}

.rg-current-summary-flag {
  width: 14px;
  vertical-align: text-top;
  margin-right: 1px;
}

.rg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* every legend item except "Other" (no single dg_id behind it, template) -
   hover highlights that player's own bars (JS), same as a table row hover */
.rg-legend-item-hoverable {
  cursor: pointer;
}

.rg-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.rg-hidden-row {
  display: none;
}

/* "All DG #1s since 1983" table - same leaderboard/col-player conventions
   the age page's own yi-influencers-table uses, just with this table's own
   columns. col-player stays the width:auto safety valve */
.rg-table {
  margin-top: 8px;
}

.rg-table .rg-col-player {
  width: 20%;
}

.rg-table .rg-col-weeks {
  width: 80px;
  text-align: center;
}

.rg-table-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.rg-table-controls .table-search {
  margin-top: 0;
  margin-bottom: 0;
}

/* .all-probs-toggle* (live_feeds.css) is the shared slider-switch - this
   just resets the couple of properties that component's own row class
   (.all-probs-toggle-row) tunes for its original inline-with-a-dropdown
   context (margin-left:auto, position:relative;top:2px), which don't apply
   now that it sits centered above the Max Gap header's own text, and adds
   the "Max"/"Avg" flanking label style. font-weight:normal keeps it from
   inheriting the header's own bold */
.rg-gap-sort-toggle-row {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  left: 0;
  top: -8px;
  margin: 0;
  gap: 4px;
  font-size: 9px;
  font-weight: normal;
}

/* shrink the shared .all-probs-toggle* slider (live_feeds.css, 18x11 with
   a 7px circle) down to fit this small header context */
.rg-gap-sort-toggle-row .all-probs-toggle {
  width: 11px;
  height: 7px;
}

.rg-gap-sort-toggle-row .all-probs-toggle-slider:before {
  height: 5px;
  width: 5px;
  left: 1px;
  top: 1px;
}

.rg-gap-sort-toggle-row .all-probs-toggle input:checked + .all-probs-toggle-slider:before {
  transform: translateX(4px);
}

/* Max vs Avg isn't an on/off switch (both are valid, nothing is being
   "disabled"), so the track stays olive in both positions instead of the
   shared component's default off/grey -> on/olive */
.rg-gap-sort-toggle-row .all-probs-toggle-slider,
.rg-gap-sort-toggle-row .all-probs-toggle input:checked + .all-probs-toggle-slider {
  background-color: var(--olive);
}


.rg-gap-sort-text {
  color: var(--font-color-faint-2);
}

/* Avg/Max Gap merged into one column - the bar is this row's own max_gap
   against the table-wide max_gap scale (routes.py), and the dot is where
   avg_gap falls on that same scale (always inside the bar's own span,
   since avg can't exceed max) */
.rg-table .rg-col-gap-range {
  width: 110px;
}

/* tighter than the shared .leaderboard th[data-sort]::after default
   (margin-left:3px, live_feeds.css) - "Max #1 Gap" is a wider two-line
   header (the Max/Avg toggle sits above it), so the caret reads as too
   far from the text at that default gap. scoped to just this column, not
   a sitewide change - 2 classes + the attribute selector outranks the
   shared rule's own single class, so this wins regardless of source order */
.rg-table .rg-col-gap-range[data-sort]::after {
  margin-left: 1px;
}

/* flex lives on this inner wrapper, not the td itself - a flex td loses
   the table-cell height-stretch the rest of the row still has, which
   shrinks just this cell and throws its row-separator line out of
   alignment with the other columns */
.rg-gap-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* actual max_gap number, shown to the left of its own row's bar like a
   mini per-row axis label, since the bar alone only reads as relative
   length against the other rows */
.rg-gap-value {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--font-color-faint-2);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

.rg-gap-bar-track {
  position: relative;
  height: 6px;
  flex: 1;
}

.rg-gap-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--font-color-faint-2);
  opacity: 0.45;
  border-radius: 3px;
}

.rg-gap-avg-dot {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--font-color-base);
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* current #1's own Gap row (rg-current-summary) - sits inline with the
   "Gap over #2 X.XX" text rather than on its own line below it. a flat
   gray track (no colored fill) with a single dot marking where today's
   gap sits, same dot .rg-gap-avg-dot already is for the table's own avg
   marker - .rg-gap-bar-track's own flex:1 needs a flex parent, which this
   row provides, but a fixed width instead of letting it stretch the line */
.rg-current-summary-gap-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rg-current-summary-gap-track {
  flex: 0 0 90px;
  background: rgba(150, 150, 150, 0.25);
  border-radius: 3px;
}

/* plain "flag F. Last" link (template) - not player_name_cell(), whose own
   container-query sizing (for the full-first/short-first toggle) needs
   real layout room that this narrow a cell with a trailing % right after
   it doesn't have. plain inline content instead sits exactly as wide as
   its own text, so the % that follows lands right after each row's own
   name (not a fixed column-wide offset like a flex/table layout would
   force it into). desktop only - hidden on mobile below */
.rg-table .rg-col-rival {
  width: 130px;
  text-align: left;
}

.rg-rival-link {
  color: var(--font-color-base);
}

.rg-rival-link .player-flag {
  width: 14px;
  margin-right: 1px;
}

/* olive (#3D9970 lightened toward white ~15%, not global_dg.css's
   own --olive-light - that file's being phased out) rather than the usual
   faint gray, so the share % reads as tied to this page's own olive accent */
.rg-rival-share {
  color: #5aa483;
  font-size: 9px;
  margin-left: 4px;
}

.rg-table .rg-col-maxgapdate,
.rg-table .rg-col-last {
  width: 70px;
  text-align: center;
}

.rg-table .rg-col-maxgapdate {
  font-size: 10.5px;
}

/* same group-header-row convention dg_rankings.css uses for its own
   "DG Ranking" column group (dg-rankings-group-header-row/-label/-label-dg)
   - shrunk 19px row with no top/bottom border, sitting above the real
   header row rather than taking a full row of its own. desktop only -
   hidden on mobile below, where there's only one date column left */
.rg-table thead tr.rg-group-header-row {
  height: 19px;
}

.rg-table thead tr.rg-group-header-row th {
  border-top: none;
  border-bottom: none;
  /* this row scrolls away with the page instead of pinning - only the
     real header row below it (Max Gap date/Last included) stays sticky */
  position: static;
}

.rg-table .rg-col-date-group {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
  color: var(--olive);
  background-color: rgba(61, 153, 112, 0.12);
}

/* Gap/DG Index sliding pill toggle - same component/markup as
   recent_form.html's own Overview/Stats switch (.view-toggle/
   .view-toggle-slider, static/recent_form.css) and hole_stats.css's own
   port of it, repeated here since neither stylesheet is loaded on this
   page. #rg-view-absolute is this page's own id for the 2nd radio */
.view-toggle {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 22px;
  background-color: transparent;
  border: 1px solid rgba(150, 150, 150, 0.4);
  border-radius: 4px;
  padding: 1px;
  box-sizing: border-box;
}

.view-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.view-toggle label {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1;
  font-size: 10.5px;
  color: #000;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s;
  user-select: none;
}

:root[color-mode="dark"] .view-toggle label {
  color: #fff;
}

.view-toggle input[type="radio"]:checked + label {
  color: #fff;
  opacity: 1;
}

.view-toggle-slider {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(50% - 1px);
  height: calc(100% - 2px);
  background-color: var(--olive);
  border-radius: 2px;
  transition: transform 0.2s ease;
  z-index: 0;
}

#rg-view-absolute:checked ~ .view-toggle-slider {
  transform: translateX(100%);
}

/* hovered week's own #1/#2 - stacked under the date/gap row already
   provided by .yi-tooltip/.yi-tooltip-date/.yi-tooltip-value (reused as-
   is), so .rg-tooltip only needs to turn that shared flex-row tooltip into
   a column and add the two player rows below it. unlike .yi-tooltip's own
   plain-text-with-halo treatment, this one gets a real solid background box
   (same as .yi-range-tooltip's) - with 20+ bar colors behind it rather than
   one line/area, the halo trick alone didn't stay legible everywhere it
   could land, and a solid box also means it doesn't matter which bar color
   it's sitting on top of */
.rg-tooltip {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 5px;
  border-radius: 3px;
  border: 1px solid rgba(150, 150, 150, 0.4);
  background: var(--black-base);
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 10px;
  /* same "float above the plot's own top edge" convention
     ranking_trends_tour_affiliation.html's own .ta-tooltip uses (JS pins
     top to margin.top), rather than following the hovered bar's own
     height like .yi-tooltip's shared translate(-50%, -100%) assumes. a
     real z-index (not just DOM order) so it always paints above the Gap/
     Absolute toggle it floats over on hover, regardless of where that
     toggle sits on the page - .view-toggle label's own z-index:1
     (ranking_trends.css) would otherwise win since it's also a positioned
     element */
  z-index: 2;
  transform: translate(-50%, calc(-100% - 6px));
}

.rg-tooltip-top {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

/* shown only when the tooltip was pinned by a table row/legend item hover
   (rg_show_tooltip_for_index's own isMax flag, template JS) - calls out
   that this specific week is that player's own single biggest #1-vs-#2
   gap, not just whatever week the mouse happens to be over */
.rg-tooltip-max-badge {
  display: none;
  color: var(--red);
  font-weight: 400;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 1px;
}

.rg-tooltip-player {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--font-color-faint-2);
}

.rg-tooltip-rank {
  font-weight: 600;
  width: 12px;
}

.rg-tooltip-flag {
  width: 10px;
}

.rg-tooltip-name {
  color: var(--font-color-base);
}

@media (max-width: 768px) {
  /* .feed-div-right on these 3 pages only ever holds two things: the DG
     Rankings menu (_dg_rankings_menu.html), which setup_mobile_section_menu()
     (this page's own <script>) already relocates into the mobile ticker
     row above, and the "Latest Note" sidebar teaser (latest_comment_teaser(),
     _comments.html), which just duplicates the full Notes list
     (comments_section()) further down the page. once the menu's moved out,
     nothing left in here is meant to be seen on mobile - without this, the
     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;
  }

  /* Current Skill Gap section (rg-current-summary) - desktop's own
     10.5px/14px (above) shrunk down a bit further here */
  .rg-current-summary .event-infos {
    font-size: 9.5px;
  }

  .rg-current-summary-flag {
    width: 11px;
  }

  /* exact match for major_winners.css's own .mobile-toggle-row rule -
     that page has the identical breadcrumbs -> event-title -> mobile-
     toggle-row structure these two trend pages do (most major pages put
     the ticker right after breadcrumbs instead, but major_winners.html is
     the one exception that puts it after the title, same as here) */
  .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, same as
     dg_rankings.css's own identical rule for the other two DG Rankings
     pages */
  .dg-rankings-intro-note {
    font-size: 9px;
  }

  .yi-chart-title {
    font-size: 13px;
    margin-top: 6px;
  }

  /* Gap/Absolute toggle (rg-view-toggle) - sits between the intro text and
     the chart itself (template), shrunk down a bit on mobile */
  .view-toggle.rg-view-toggle {
    height: 18px;
  }

  .view-toggle.rg-view-toggle label {
    padding: 0 6px;
    font-size: 9px;
  }

  /* "Who is influencing the index most today?" - same ~13% reduction
     ratio .yi-chart-title above gets (15px -> 13px), applied from this
     section title's own 13px desktop size instead (13 * 13/15 ≈ 11) */
  .yi-section-title {
    font-size: 11px;
  }

  /* .yi-influencers-table - same mobile treatment as the main DG Rankings
     tables (dg_rankings.css): drop the secondary rank column, Player
     becomes a real fixed % instead of the desktop width:auto safety
     valve (auto can shrink toward nothing once enough other explicit-
     width columns are fighting for space on a narrow viewport), and
     col-skill (the bar column) takes over as the new safety valve since
     it's the one that actually benefits from whatever room is left */
  .yi-influencers-table .col-rank {
    width: 14px;
    font-size: 8px;
  }

  .yi-influencers-table .col-player {
    width: 32%;
  }

  .yi-influencers-table .col-age {
    width: 26px;
  }

  .yi-influencers-table .yi-col-dg-rank {
    width: 62px;
  }

  .yi-influencers-table .col-skill {
    width: auto;
  }

  .yi-influencers-table .yi-col-influence {
    width: 60px;
  }

  .yi-influencers-table .sg-bar-text {
    font-size: 9px;
  }

  .yi-influencers-table .col-label-full {
    display: none;
  }

  .yi-influencers-table .col-label-mobile {
    display: inline;
  }

  /* axis tick labels (dates/ages) */
  .yi-axis text {
    font-size: 9px;
  }

  /* main age line - mainPlotHeight itself (JS, not CSS) already shrinks
     the actual plot height on mobile; this is purely the line's own
     stroke getting a hair thinner to match the smaller plot */
  .yi-line {
    stroke-width: 1.25;
  }

  .yi-legend {
    font-size: 9px;
    gap: 3px;
  }

  .yi-legend-dot {
    width: 11px;
    height: 5px;
  }

  /* both chart popovers - crosshair hover (.yi-tooltip, 11px) and the
     influence-bar hover (.yi-range-tooltip, 10px base + 9px sub-rows) -
     scaled down by roughly the same ~18% the rest of this page's own
     mobile text takes */
  .yi-tooltip {
    font-size: 9px;
  }

  .yi-range-tooltip {
    font-size: 8px;
    padding: 2px 4px;
  }

  /* .yi-range-tooltip-row's own 9px (unconditional, desktop rule above)
     was winning over this at mobile widths too - the Age/Avg Skill/Avg
     Infl. row class itself needed its own mobile override, not just its
     child label/value spans, or everything riding on that row's own
     inherited size (the label most visibly) stayed full desktop size */
  .yi-range-tooltip-row,
  .yi-range-tooltip-age,
  .yi-range-tooltip-skill,
  .yi-range-tooltip-label,
  .yi-range-tooltip-infl-value {
    font-size: 7.5px;
  }

  /* the real mobile override for .ta-tooltip - a stale, unconditional
     (not actually media-scoped despite looking like it belonged here)
     duplicate of this exact rule used to sit elsewhere in this file and
     silently win over the desktop block above regardless of viewport,
     same "later source order beats an earlier @media rule at equal
     specificity" bug this session kept hitting - removed, this is the
     genuine one */
  .ta-tooltip {
    font-size: 9px;
    padding: 3px 5px;
    min-width: 90px;
  }

  .ta-tooltip-dot {
    width: 6px;
    height: 6px;
  }

  /* ranking_trends_tour_affiliation.html's own chart - same ratio the age
     page's .yi-legend/.yi-axis above take from their own matching 10px
     desktop sizes (10px -> 9px text, legend dot shrunk to match) */
  .ta-legend {
    font-size: 9px;
    gap: 6px 10px;
  }

  .ta-legend-dot {
    width: 8px;
    height: 8px;
  }

  .ta-axis text {
    font-size: 9px;
  }

  .ta-range-x-axis text {
    font-size: 9px;
  }

  /* inside-plot %-labels (0/20/40/60/80/100%) on the main stacked bar
     chart - own rule since .ta-axis text above (9px) doesn't reach this
     more specific selector's own 9px base */
  .ta-y-axis text {
    font-size: 8px;
  }

  /* range plot's own tour labels (PGA/DPWT/LIV/KFT/OTH, JS) and current-
     value labels (64%/21%/etc above each current dot) */
  .ta-range-label {
    font-size: 9px;
  }

  .ta-range-current-label {
    font-size: 8px;
  }

  /* "Where does each tour stand today?" header row - tighter gap below
     the main chart above it */
  .ta-range-header {
    margin-top: 8px;
  }

  /* Notes section (_comments.html) - author/date/meta/body all shrink
     proportionally from their own desktop sizes */
  .trend-comment {
    padding: 6px 6px;
  }

  .trend-comment-meta {
    font-size: 9px;
  }

  .trend-comment-author {
    font-size: 11px;
  }

  .trend-comment-date {
    font-size: 9px;
  }

  .trend-comment-text {
    font-size: 10px;
  }

  .trend-comment-toggle {
    font-size: 9px;
  }

  /* rank-gap tooltip - same ~18% reduction .yi-tooltip above takes */
  .rg-tooltip {
    font-size: 9px;
  }

  .rg-tooltip-flag {
    width: 9px;
  }

  .rg-legend {
    font-size: 9px;
    gap: 2px 8px;
  }

  /* "Every #1 Finisher" table - same mobile treatment the age page's own
     yi-influencers-table gets: drop the full-width labels for their short
     mobile equivalents, col-player becomes a real fixed % instead of the
     desktop width:auto safety valve */
  .rg-table .rg-col-player {
    width: 28%;
  }

  .rg-table .rg-col-weeks,
  .rg-table .rg-col-avg-gap,
  .rg-table .rg-col-max-gap {
    width: auto;
  }

  .rg-table .col-label-full {
    display: none;
  }

  .rg-table .col-label-mobile {
    display: inline;
  }

  /* Primary Rival dropped entirely on mobile, not just shrunk - a player
     name + share doesn't compress the way a bare number does, and the
     table's already tight on room. Ranking Dates group header goes too -
     once Rival/Last are both gone there's only Max Date left under it,
     nothing left to group. desktop keeps all of this (rules above) */
  .rg-table .rg-col-rival,
  .rg-table .rg-col-last {
    display: none;
  }

  .rg-table thead tr.rg-group-header-row {
    display: none;
  }

  /* Max Date is the one date column left standing on mobile (desktop's
     own 70px/10.5px, above) - same shrink the old Last column used to get
     here before this swap */
  .rg-table .rg-col-maxgapdate {
    width: 60px;
    font-size: 9px;
  }
}