/* Shared readability and navigation corrections. Loaded after page styles. */
.ytgs-channel-bio#bio > p { margin: 0 0 1em; }
.ytgs-channel-bio#bio > :last-child { margin-bottom: 0; }
.ytgs-header-inner { max-width: 1100px; gap: 2.5rem; justify-content: space-between; }
.ytgs-logo { flex-shrink: 0; }
/* The nav is right-aligned against the content edge, so widening the gaps is
   what walks its left edge back toward the logo. Fluid, because the space to
   spread into disappears as the window narrows: ~1rem at 1000px (the narrowest
   desktop width, where only ~112px separates logo and nav) up to 1.875rem past
   ~1440px, which reclaims ~100px across the seven gaps. */
.ytgs-nav-links { --nav-gap: clamp(1rem, 3.2vw - 1rem, 1.875rem); gap: var(--nav-gap); align-items: center; }
.ytgs-nav-links a { white-space: nowrap; letter-spacing: .04em; }
/* Item separators — a rule between every nav item so they don't read as one
   continuous band. The rule carries the separation, so the gap is tighter than
   it would be without it. left sits on the gap's midpoint and the translate
   centres the rule on it, so changing its width keeps it centred. Reset in the
   mobile block below, where the stacked items get bottom borders instead. */
.ytgs-nav-links > li + li { position: relative; }
.ytgs-nav-links > li + li::before { content: ''; position: absolute; left: calc(var(--nav-gap) / -2); top: 50%; transform: translate(-50%, -50%); width: 2px; height: 30px; background: rgba(74, 222, 128, .2); }
.ytgs-events-dropdown { position: relative; }
.ytgs-events-dropdown summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; font: 600 .82rem 'DM Sans', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--cream-dark); padding: .25rem 0; }
.ytgs-events-dropdown summary::-webkit-details-marker { display: none; }
.ytgs-events-dropdown summary:hover, .ytgs-events-dropdown[open] summary { color: var(--green-400); }
.ytgs-events-links { position: absolute; right: 0; top: calc(100% + .75rem); min-width: 240px; margin: 0; padding: .5rem; list-style: none; background: var(--green-950); border: 1px solid var(--green-700); border-radius: 6px; box-shadow: 0 8px 24px #0004; z-index: 100; }
/* Bridge the visual gap so the pointer can reach the submenu without closing it. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
    .ytgs-events-links::before { content: ''; position: absolute; left: 0; right: 0; top: -.85rem; height: .85rem; }
}
.ytgs-nav-links .ytgs-events-links a { display: block; padding: .8rem; text-transform: none; letter-spacing: 0; }
.ytgs-nav-links .ytgs-events-links a:is(:hover, :focus-visible) { background: #174c30; color: #fff; }
.ytgs-nav-links .ytgs-events-links a::after { display: none; }
.ytgs-archive-desc, .ytgs-footer-tagline, .ytgs-ygt-desc,
.ytgs-ygt-section-sub { font-size: max(14px, .9rem); }
/* .ytgs-ygt-desc is the hero paragraph, on dark green. .ytgs-ygt-section-sub
   is NOT — all nine of its uses are section subtitles on cream. Grouping the
   two here put pale hero text on a pale ground at 1.14:1, which is what made
   "What's changed on this page" all but disappear. Ground, then colour. */
.ytgs-ygt-desc { color: #dce5dd; }
.ytgs-hero a:not([class]), .ytgs-profile-hero a:not([class]) { color: #a9e8b1; text-decoration: underline; }
body.ytgs .ytgs-footer a:not(.ytgs-logo) { color: var(--sand); text-decoration: none; }
body.ytgs .ytgs-footer a:not(.ytgs-logo):is(:hover, :focus-visible) { color: var(--green-400); text-decoration: none; }
/* Explicit interaction colors prevent the parent theme's dark link state from
   appearing on dark backgrounds. Do not recolor light-filled CTA buttons. */
body.ytgs .ytgs-hero-chip { color: var(--cream-dark); }
body.ytgs .ytgs-hero-chip:is(:hover, :focus, :active) { color: #fff; background: #174c30; border-color: var(--green-400); }
body.ytgs :is(.ytgs-hero, .ytgs-profile-hero) a:not([class]):is(:hover, :focus, :active),
body.ytgs .ytgs-archive-header :is(.ytgs-archive-desc, .ytgs-hero-tagline) a:is(:hover, :focus, :active) { color: #fff; }
.ytgs-archive-header .ytgs-archive-desc a,
.ytgs-archive-header .ytgs-hero-tagline a { color: #a9e8b1; text-decoration: underline; }
.ytgs-hero-updated, .ytgs-ygt-hero-updated { color: #b6c9bb; font-size: .8rem; }
.ytgs-eq-drivers-hero-stats, .ytgs-witb-item-meta { font-size: .85rem; }
.ytgs-hero-stat-label, .ytgs-eq-model-meta, .ytgs-creator-tracked-line { font-size: .8rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible { outline: 3px solid #55b96a; outline-offset: 3px; }
@media (max-width: 999px) {
    .ytgs-header-inner { justify-content: space-between; }
    /* Centres the bars inside the 44px target set below. `display` must stay
       inside this query — the desktop base rule is `display: none`, and an
       unscoped display here would show the hamburger on desktop. */
    .ytgs-mobile-toggle { display: flex; align-items: center; justify-content: center; }
    .ytgs-nav-links {
        display: none; position: absolute; top: 64px; left: 0; right: 0;
        background: var(--green-950); border-bottom: 3px solid var(--green-500);
        flex-direction: column; align-items: stretch; padding: 1rem 2rem;
        gap: 0; max-height: calc(100dvh - 64px); overflow-y: auto;
        box-shadow: 0 8px 24px #0005;
    }
    .ytgs-nav-links.ytgs-nav-open { display: flex; }
    .ytgs-nav-links a { display: block; padding: .75rem 0; font-size: .9rem; }
    .ytgs-nav-links li { border-bottom: 1px solid var(--green-900); }
    .ytgs-nav-links a::after { display: none; }
    /* Stacked nav already separates items with the bottom borders above. */
    .ytgs-nav-links > li + li::before { display: none; }
    .ytgs-events-dropdown summary { padding: .75rem 0; font-size: .9rem; }
    .ytgs-events-links { position: static; min-width: 0; margin: 0 0 .5rem; border: 0; border-left: 2px solid var(--green-700); border-radius: 0; box-shadow: none; }
    .ytgs-nav-links .ytgs-events-links li { border: 0; }
}
@media (max-width: 600px) {
    .ytgs-hero-inner { padding-top: 2rem; padding-bottom: 1.5rem; }
    .ytgs-hero-popular-header { margin-bottom: .75rem; }
    .ytgs-hero-popular-cards {
        display: flex; flex-wrap: nowrap; justify-content: flex-start;
        overflow-x: auto; gap: .6rem; padding: .25rem .1rem .75rem;
        scroll-snap-type: x proximity;
    }
    .ytgs-hero-popular-card { flex: 0 0 96px; scroll-snap-align: start; }
}

/* ============================================================
   MOBILE READABILITY FIXES — measured audit, 7 Sep 2026
   Findings 2 (type floor), 3 (contrast), 4 (tap target),
   8 (clipped YGT pill). Measurements in the audit report.
   ============================================================ */

/* --- 4. Menu button measured 38x18px. 44px is the documented minimum,
   and it's the only route to navigation on mobile. --- */
/* Sizing only — no `display` here. The base rule hides this on desktop and
   the mobile query above turns it on; setting display at this scope would
   override that and put a hamburger in the desktop header. */
.ytgs-mobile-toggle {
    min-width: 44px; min-height: 44px;
    margin-right: -8px;   /* keep the bars optically flush with the edge */
}

/* --- 2. Type floor. These micro-labels ran 7.7-9.9px; 0.75rem = 12px is
   the practical floor for small text on a phone. --- */
.ytgs-creator-card-stat-label,
.ytgs-h2h-stat-label,
.ytgs-course-card-stat-label,
.ytgs-course-card-roster-label,
.ytgs-course-card-tee-more,
.ytgs-hero-popular-stat-label,
.ytgs-creator-hero-stat-label,
.ytgs-ygtcr-detail-label,
.ytgs-ygtcr-detail-sub,
.ytgs-ygt-wc-label,
.ytgs-hcp-history-date,
.ytgs-ep-list-format,
/* Creator page: measured 9.9-10.7px across the hero stat rail, the rivals'
   "Latest:" line, episode dates and the YGT badges. */
.ytgs-stat-card-label,
.ytgs-stat-card-sublink,
.ytgs-h2h-latest-label,
.ytgs-ep-date,
.ytgs-ygtcr-badge,
.ytgs-ygtcr-stop-meta,
.ytgs-ygtcr-qualifier-badge,
.ytgs-ygt-email-disclaimer,
.ytgs-ygt-email-btn-text,
/* WITB cards: slot label 10.9px, buy button 11.5px, price date 11.2px. */
.ytgs-witb-card-slot,
.ytgs-witb-card-price-date,
.ytgs-witb-buy-btn,
.ytgs-played-with-count,
.ytgs-ygtcr-stop-label,
.ytgs-ygtcr-result-pill { font-size: .75rem; }

/* The detail label is a fixed-width column. It stacks the phase over the
   format played ("FRONT 9" / "Shamble + Best Ball"), so it needs the room. */
.ytgs-ygtcr-detail-label { width: 132px; }

/* --- 3. Contrast. #888/#999/#aaa/#bbb on the white (#fff) and cream
   (#f3f1eb / #f5f0e8) card grounds measured 2.32-3.54:1, under the 4.5:1
   AA threshold. This warm ink is ~6.2-6.9:1 on both grounds. --- */
.ytgs-course-card-stat-label,
.ytgs-course-card-roster-label,
.ytgs-course-card-tee-more,
.ytgs-course-card-location,
.ytgs-played-with-count,
.ytgs-ygtcr-detail-label,
.ytgs-channel-handle,
.ytgs-hcp-history-date,
.ytgs-ygt-wc-label,
.ytgs-ep-date,
.ytgs-ep-list-course { color: #5f5a4e; }

.ytgs-ygtcr-detail-sub { color: #6b6659; }

/* Cream-on-dark label: half-alpha is thin at label sizes. Only the creator
   card is safe to lift this way — .ytgs-h2h-stat-label renders on both a
   dark and a cream ground, so a single colour breaks one of them. Its size
   is corrected above; its colour needs per-context selectors. */
.ytgs-creator-card-stat-label { color: rgba(255,255,255,.80); }

/* Scorecard yardage cells lose to `.ytgs-sc-row-hcp td` (0,1,1) on
   specificity, so match it with td.<class> and win on order. Left at their
   inherited size: dense tabular figures inside an already-scrolling table
   are the one place small type is defensible, and widening them adds
   horizontal scroll. Contrast was the real problem here (3.14:1). */
td.ytgs-sc-hole-info { color: #5f5a4e; }

/* --- 8. YGT stop row. This used to carry `flex: 1 1 200px` to stop the info
   column squeezing the details when the row was a horizontal flex. The row is
   a column now (thin event strip above, scores below), so that same 200px was
   being read as a minimum HEIGHT and left a dead gap under every event. The
   info column it defended against is gone, so the override goes with it. --- */

/* --- 1. Progressive reveal. The archives still render every card so search
   and sort keep working across the whole set; this caps how many are shown.
   !important because ytgsArchiveFilter writes inline display on the same
   elements — the two layers are deliberately on separate channels. --- */
.ytgs-capped { display: none !important; }

/* Spacing lives on the button, not the wrapper, so that once everything is
   revealed and the button is hidden the wrapper collapses to nothing instead
   of leaving a gap at the foot of the list. */
.ytgs-reveal-more { display: flex; justify-content: center; }
.ytgs-reveal-more-btn {
    margin: 1.5rem 0 .5rem;
    font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .9rem;
    letter-spacing: .04em; text-transform: uppercase;
    min-height: 48px; padding: 0 1.75rem;
    color: var(--green-950); background: var(--green-400);
    border: 0; border-radius: 6px; cursor: pointer;
    transition: background .2s, transform .06s;
}
.ytgs-reveal-more-btn:is(:hover, :focus-visible) { background: var(--green-300); }
.ytgs-reveal-more-btn:active { transform: translateY(1px); }
.ytgs-reveal-more-btn[hidden] { display: none; }

/* --- 5. iOS Safari zooms the page whenever a focused input is under 16px
   and never zooms back out. These sit on the archive filter bars, exactly
   where someone is narrowing a long list. --- */
@media (max-width: 999px) {
    .ytgs-filter-input, .ytgs-filter-select,
    .ytgs-ygt-email-input, .ytgs-search-input,
    input[type="search"], input[type="email"], select { font-size: 16px; }
    /* .ytgs-ygt-email-form--strip .ytgs-ygt-email-input is (0,2,0) and would
       otherwise keep its 0.84rem. Match the specificity rather than !important. */
    .ytgs-ygt-email-form--strip .ytgs-ygt-email-input,
    .ytgs-ygt-email-fields .ytgs-ygt-email-input { font-size: 16px; }
}

/* --- 6. Tap targets. Small links in dense stat rows sit within a few pixels
   of each other, so a miss hits a neighbour rather than nothing. Expand the
   hit area with a pseudo-element so nothing moves visually. --- */
.ytgs-course-card-record-who,
.ytgs-course-card-record-score,
.ytgs-sc-player-link,
.ytgs-ygt-qs-player,
.ytgs-ii-creator-teammate,
.ytgs-h2h-name,
.ytgs-ygtcr-teammate,
/* Creator page: buy buttons measured 30-32px, social icons 32px. */
.ytgs-witb-buy-btn,
.ytgs-creator-social-icon { position: relative; }

.ytgs-course-card-record-who::after,
.ytgs-course-card-record-score::after,
.ytgs-sc-player-link::after,
.ytgs-ygt-qs-player::after,
.ytgs-ii-creator-teammate::after,
.ytgs-h2h-name::after,
.ytgs-ygtcr-teammate::after,
.ytgs-witb-buy-btn::after,
.ytgs-creator-social-icon::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 44px; min-height: 100%;
}

/* Keep the expanded areas from stacking over each other in tight rows. */
.ytgs-course-card-record-who::after,
.ytgs-course-card-record-score::after { height: 38px; }

/* --- 3b. h2h labels, per context. The base label sits on a white card
   (.ytgs-h2h-card) at rgba(26,26,26,.45) = ~3.5:1; the self-row variant sits
   on dark green at rgba(245,240,232,.6). One blanket colour breaks whichever
   ground it wasn't written for, so each gets its own, at matching
   specificity. --- */
.ytgs-h2h-stat-label { color: rgba(26, 26, 26, .72); }
.ytgs-h2h-self-stats .ytgs-h2h-stat-label { color: rgba(245, 240, 232, .85); }

/* --- 2b. Channel-card stat labels. Held back earlier because bumping them
   overflowed .ytgs-lb-card's overflow:hidden — the stat row is a flex row
   with a 1.5rem gap. Let it wrap and tighten the gap and letter-spacing so
   12px labels fit; on the narrowest screens drop the radar grid from four
   columns to two, which is what actually makes the room. --- */
@media (max-width: 999px) {
    .ytgs-channel-card-stats { gap: .9rem; flex-wrap: wrap; }
    .ytgs-creator-mini-label,
    .ytgs-channel-card--compact .ytgs-creator-mini-label {
        font-size: .72rem; letter-spacing: .04em;
        color: rgba(26, 26, 26, .72);
    }
}
@media (max-width: 600px) {
    .ytgs-channels-grid--radar { grid-template-columns: repeat(2, 1fr); }
    .ytgs-courses-grid--radar  { grid-template-columns: repeat(2, 1fr); }
}

/* The leaderboard tile is only ~130px wide, so the label at full size and
   letter-spacing overran it by 2px. Drop the tracking and a step of size
   there specifically — still far above the 9.6px it was. */
.ytgs-lb-card .ytgs-creator-mini-label { font-size: .7rem; letter-spacing: 0; }

/* ============================================================
   ROUND-LOG TABLES ON MOBILE  (.ytgs-table--rounds)
   The creator page's "Handicap History" and "Course Stats" put a video
   card (thumbnail + title + date + course) in one cell beside two or
   three single-character numeric columns. At 390px the video cell is
   squeezed to ~186px, so the thumbnail stacks above a wrapping title and
   each row grows to 206px — about four rounds per screen, with the
   numeric columns almost entirely whitespace.

   Below, the row becomes a flat grid: thumbnail and text side by side,
   numbers right-aligned under their own labels (the header is dropped,
   so data-label carries the column name).
   ============================================================ */
@media (max-width: 700px) {
    .ytgs-table--rounds,
    .ytgs-table--rounds tbody { display: block; }
    .ytgs-table--rounds thead { display: none; }

    /* Fixed numeric columns rather than `auto`: each row is its own grid
       container, so `auto` sizes every row independently and the labels
       zig-zag down the page while short columns clip values like "-0.4". */
    /* One row of four columns left the video cell 188px and its title 123px,
       so 16 of 20 episode titles and every single course name were being
       ellipsised. The video takes the whole row now and the numbers sit
       underneath — the same shape .ytgs-table--rounds-course already used.
       Costs about 25px a row and buys back the titles. */
    .ytgs-table--rounds tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        column-gap: .5rem;
        row-gap: .4rem;
        padding: .55rem 0;
        border-bottom: 1px solid var(--cream-dark);
    }
    .ytgs-table--rounds td:first-child { grid-column: 1 / -1; }
    .ytgs-table--rounds tr:last-child { border-bottom: 0; }

    .ytgs-table--rounds td { display: block; padding: 0; border: 0; min-width: 0; }

    /* Left-aligned now that each number owns a third of its own line. */
    .ytgs-table--rounds td[data-label] { text-align: left; white-space: nowrap; }
    /* The year is dropped here so the course name gets the width instead —
       these rows are in date order, so the year rarely carries the meaning. */
    .ytgs-table--rounds .ytgs-rr-year { display: none; }
    .ytgs-table--rounds td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: 'IBM Plex Mono', monospace;
        font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
        color: #6b6659; line-height: 1.2;
    }

    /* Thumbnail and text side by side instead of stacked. A rule at
       max-width:640px sets flex-direction:column and width:100% on the thumb
       (stacking them because the old narrow first column cramped them) — that
       is what produced the 206px rows, so both need resetting explicitly, not
       just `display:flex`. The grid above gives the text room instead. */
    .ytgs-table--rounds .ytgs-rr-video {
        display: flex; flex-direction: row; align-items: center;
        gap: .55rem; min-width: 0;
    }
    .ytgs-table--rounds .ytgs-rr-thumb {
        width: 56px; height: 32px; flex: 0 0 56px;
        aspect-ratio: auto; object-fit: cover; border-radius: 4px;
    }
    .ytgs-table--rounds .ytgs-rr-video-body { min-width: 0; }
    .ytgs-table--rounds .ytgs-rr-video-title {
        font-size: .8rem; line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Date and course share one line; the course ellipsises rather than
       wrapping onto a second line (worth ~20px a row). The base rule makes
       the course an inline-flex with a pin icon, and text-overflow can't
       ellipsis a flex container's children — so drop the icon and let it be
       an ordinary truncating block. */
    .ytgs-table--rounds .ytgs-rr-video-meta {
        display: flex; align-items: baseline; gap: .35rem;
        min-width: 0; flex-wrap: nowrap; overflow: hidden;
    }
    .ytgs-table--rounds .ytgs-rr-video-meta > span:first-child { flex: 0 0 auto; white-space: nowrap; }
    .ytgs-table--rounds .ytgs-rr-video-course {
        display: block; min-width: 0; flex: 0 1 auto;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ytgs-table--rounds .ytgs-rr-video-course svg { display: none; }

    /* Course Stats leads with the course, which needs a full line of its own. */
    .ytgs-table--rounds-course tr { grid-template-columns: minmax(0, 1fr) repeat(2, 3.2rem); }
    .ytgs-table--rounds-course td:first-child {
        grid-column: 1 / -1; margin-bottom: .25rem; font-weight: 600;
    }
}

/* ============================================================
   CREATOR PAGE — mobile sweep
   ============================================================ */

/* The 12px type floor above is what pushed "ROUND EQUIVALENTS (RE)" onto a
   third line in a ~120px hero column. The letters, not the size, are what
   don't fit: dropping the tracking brings it back to two lines at 12px. */
@media (max-width: 640px) {
    .ytgs-creator-hero-stat-label {
        letter-spacing: .02em;
        line-height: 1.25;
    }
}

/* The subscribe block sits between the hero and the first real section, so
   on a phone it was a full screen of newsletter before any content. Keeping
   the placement (it converts there) but taking back the dead height. */
@media (max-width: 640px) {
    .ytgs-creator-email-strip { padding: 1rem 1rem 1.1rem; }
    .ytgs-creator-email-strip .ytgs-ygt-email-strip-label {
        font-size: 1.35rem;
        line-height: 1.1;
    }
    .ytgs-creator-email-strip .ytgs-ygt-email-strip-sub {
        font-size: .82rem;
        line-height: 1.35;
        margin: .35rem 0 .6rem;
    }
    .ytgs-creator-email-strip .ytgs-ygt-email-disclaimer {
        line-height: 1.4;
        margin-top: .5rem;
    }
}

/* ============================================================
   YOUR GOLF TOUR — text contrast
   ============================================================ */

/* The individual-match table dimmed everything that wasn't the winner:
   scores at #bbb (1.92:1), the "vs" at #ccc (1.61:1), and the losing row at
   opacity .5 (~2.85:1). Dimming the loser is the right idea, but a player's
   name and score are the data — they have to stay readable. Same warm ink as
   the rest of the site; the winner keeps its green and its heavier weight, so
   the distinction survives.
   :not(--won) because .ytgs-ygt-1v1t-score--won carries equal specificity and
   sits earlier in the cascade — a bare .ytgs-ygt-1v1t-score here would win
   against it and grey out the winners too. */
.ytgs-ygt-1v1t-score:not(.ytgs-ygt-1v1t-score--won) { color: #5f5a4e; }
.ytgs-ygt-1v1t-vs { color: #5f5a4e; }

.ytgs-ygt-1v1t-player--lost { opacity: 1; color: #5f5a4e; }
/* Keep the "this one lost" cue on the avatar, where fading costs no legibility. */
.ytgs-ygt-1v1t-player--lost .ytgs-ygt-1v1t-avatar { opacity: .55; }

/* Same #bbb/#999-on-white problem elsewhere on the page. */
.ytgs-ygt-sched-upcoming,
.ytgs-ygt-qs-benched-note,
.ytgs-ygt-team-wc-stop,
.ytgs-ygt-quicknav-label { color: #5f5a4e; }

/* On the dark green ground the fix runs the other way — these were dark grey
   or near-transparent on near-black green (2.4-2.8:1), so they need to get
   lighter, not darker. */
.ytgs-ygt-stop-format { color: rgba(245, 240, 232, .72); }
.ytgs-ygt-1v1-vs { color: rgba(255, 255, 255, .62); }
.ytgs-ygt-email-disclaimer { color: rgba(245, 240, 232, .62); }

/* ============================================================
   CONTRAST — YGT + Internet Invitational, grouped by ground
   ============================================================ */

/* ---- On cream / white: needs dark ink ---- */
.ytgs-ygt-section-sub,
.ytgs-ygt-team-wc-tbd,
.ytgs-ygt-sched-tbd,
.ytgs-ygt-sched-vid-channel,
.ytgs-ii-hub-section-sub,
.ytgs-ii-edition-stat-label,
.ytgs-ii-edition-card-meta { color: #5f5a4e; }

/* The event gold reads fine on the dark hero but drops to 2.42:1 on the white
   edition cards. Darker gold on light grounds only — the hero keeps --ii-gold. */
.ytgs-ii-edition-year,
.ytgs-ii-edition-winners-label,
.ytgs-ii-hub-format-step-num,
.ytgs-ii-status-badge--upcoming { color: #8a6a0f; }
.ytgs-ii-status-badge--completed { color: #116e34; }

/* Team race totals: --green-400 is a dark-ground green and measured 1.54:1 on
   the cream YGT panels. Scoped to the YGT page — .ytgs-sc-team-score is also
   the episode scorecard's, where it sits on dark and is fine as is. */
.ytgs-ygt-body .ytgs-sc-team-score { color: #116e34; }

/* ---- On dark green: needs light ink (the fix runs the other way) ---- */
.ytgs-ygt-stop-tag,
.ytgs-ygt-stop-done { color: var(--green-400); }
.ytgs-ygt-qs-total-lbl { color: rgba(255, 255, 255, .62); }
.ytgs-ii-hub-hero-stat-label { color: rgba(255, 255, 255, .62); }
.ytgs-footer-text { color: rgba(245, 240, 232, .62); }

/* The step number carries opacity:.55 on top of its colour, so recolouring
   alone left it at 2.1:1. It's a numbered step — structure, not a watermark. */
.ytgs-ii-hub-format-step-num { opacity: 1; }

/* Remaining YGT items, again grouped by ground. */
.ytgs-ygt-sched-vid-date { color: #5f5a4e; }
.ytgs-ygt-1v1t-badge { color: #8f5502; }
.ytgs-ygt-stop-badge--in_progress { color: #0f5a2a; }
.ytgs-ygt-sched-stop-num,
.ytgs-ygt-qs-badge { color: rgba(255, 255, 255, .62); }
/* Only the info rows (Yards/Par), which sit on the light #f3f1eb band. The
   same label column also appears in the dark header and team rows, where a
   dark ink would be the bug rather than the fix — scoping to .ytgs-sc-row-info
   is what keeps this on one ground. */
.ytgs-ygt-body .ytgs-sc-row-info .ytgs-sc-player-col { color: #5f5a4e; }

/* Just under AA on the dark panels; same treatment as the labels above. */
.ytgs-ygt-sched-stop-loc,
.ytgs-ygt-1v1-player-team { color: rgba(255, 255, 255, .58); }

/* The changelog header on an Internet Invitational edition page should read
   like the Your Golf Tour one it mirrors: subtitle beneath the title rather
   than shoved to the far right by .ytgs-section-header's space-between, and
   without the heavy rule, since the cards below already bound the section. */
.ytgs-section-header--stack {
    display: block;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 1.75rem;
}
.ytgs-section-header--stack .ytgs-section-title {
    display: block;
    margin: 0 0 .4rem;
}
/* Match the YGT subtitle size. Scoped to this header so the invitational hub's
   other subtitles keep their own scale. */
.ytgs-section-header--stack .ytgs-ii-hub-section-sub { font-size: max(14px, .9rem); }

/* The hero bio is a six-line paragraph set centred, which is the hardest way
   to read body copy — every line starts in a different place. The block stays
   centred in the hero; only the text aligns left, at a readable measure.
   Scoped to the creator hero because .ytgs-channel-bio is also the channel
   page's description, which is a single short line in a different layout. */
.ytgs-creator-hero .ytgs-channel-bio { text-align: left; }

/* ============================================================
   CREATOR PAGE — contrast + type floor consistency pass
   Same two rules as the rest of the site: 12px minimum for text, and the
   warm ink on light grounds. Grouped by ground, because several of these
   classes appear on both and a blanket colour would break one of them.
   ============================================================ */

/* ---- On white or cream: warm ink ---- */
.ytgs-h2h-latest-label,
.ytgs-stat-card-label,
.ytgs-ep-highlight-stat-label,
.ytgs-rr-year,
.ytgs-hcp-chart-note,
.ytgs-clb-diff-note,
.ytgs-ygtcr-stop-meta,
.ytgs-ii-creator-draft-label,
.ytgs-ii-creator-match-format,
.ytgs-ii-creator-match-side-label,
.ytgs-ii-round-result-pill,
.ytgs-ii-result-badge,
.ytgs-ygtcr-qualifier-badge--elim,
.ytgs-ygtcr-result-pill--benched,
.ytgs-h2h-record--tie { color: #5f5a4e; }

/* The rank chip is cream text at 70% on an 8%-green tint over the cream page
   ground — styled for a dark surface it doesn't sit on, so it read as very
   nearly nothing. */
.ytgs-creator-rank-chip-value { color: #5f5a4e; }

/* --loss is red on a red tint (3.76:1); --win already passes and is left be. */
.ytgs-h2h-record--loss { color: #b3261e; }

/* Scoped: .ytgs-h2h-stat-val is green-400 on the dark self row and dark ink on
   the white rival cards. Only the card variant needs help. */
.ytgs-h2h-card .ytgs-h2h-stat-val { color: var(--charcoal); }

/* Brand green is too light on a light ground for text at this size. */
.ytgs-ep-highlight-label { color: var(--green-700); }

/* ---- On dark grounds the fix runs the other way ---- */
.ytgs-creator-hero-stat-rank { color: rgba(245, 240, 232, .62); }
.ytgs-ii-creator-edition-meta { color: rgba(255, 255, 255, .62); }

/* ---- 12px floor ---- */
.ytgs-creator-hero-stat-rank,
.ytgs-creator-rank-chip-value,
.ytgs-pagenav-meta,
.ytgs-pagenav-up,
.ytgs-witb-card-condition,
.ytgs-footer-text,
.ytgs-rr-year,
.ytgs-ygtcr-detail-format,
.ytgs-ii-creator-match-label,
.ytgs-ii-creator-match-side-label,
.ytgs-ii-creator-draft-label,
.ytgs-ii-creator-match-format,
.ytgs-ii-creator-edition-meta,
.ytgs-ii-round-result-pill,
.ytgs-ii-result-badge,
/* Channel hero: the meta pills were 10.6px and the latest-video meta line
   11.2px. Both pre-date the roster work; found while scanning the hero for
   the new table. */
.ytgs-channel-meta-pill,
.ytgs-channel-hero-ep-meta span,
/* And one of mine: 26px roster avatars fall back to initials, at 9.6px. */
.ytgs-ch-roster-avatar .ytgs-creator-avatar-initials { font-size: .75rem; }

/* The date already carries the warm ink; a 0.75 opacity on top was what
   diluted it to 3.77:1. Fix the dilution, not the colour. */
.ytgs-ep-date { opacity: 1; }

/* Episode-list meta (channel name) was #999 at 10.9px. */
.ytgs-ep-list-meta { color: #5f5a4e; font-size: .75rem; }

/* --green-700 lands at 4.42:1 on the cream ground — just under AA. A shade
   darker clears it and is all but indistinguishable at these sizes. */
.ytgs-section-link,
.ytgs-stat-chip strong,
.ytgs-witb-disclosure a { color: #116e34; }
.ytgs-witb-disclosure a { font-size: .75rem; }

/* Table headers sat at 11.2px. */
.ytgs-table th { font-size: .75rem; }

/* Last two under the floor: the breadcrumb (10.9px) and the rank chip's
   position marker (11.5px). Both already have ample contrast. */
.ytgs-profile-breadcrumb,
.ytgs-profile-breadcrumb a,
.ytgs-creator-rank-chip strong { font-size: .75rem; }

/* The flat-index case is a single entry in a container built for a row of
   them — drop the divider it would draw against nothing and let it sit
   centred rather than hugging the left edge. */
.ytgs-hcp-history-entry--flat {
    border-right: 0;
    margin-inline: auto;
    padding: 0;
    text-align: center;
}

/* ============================================================
   HANDICAP ROUNDS TABLE — course-led rows
   The row used to lead with a thumbnail and episode title, which took most
   of the width on a phone and said nothing about the index. It now leads
   with the course and the rating/slope the round was played off — the
   inputs to the differential behind every other number in the row.
   ============================================================ */
.ytgs-rr-round {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.ytgs-rr-round-body { flex: 1 1 auto; min-width: 0; }

.ytgs-rr-course {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--charcoal);
}
.ytgs-rr-round:is(:hover, :focus-visible) .ytgs-rr-course { color: var(--green-700); }

.ytgs-rr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .6rem;
    margin-top: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .75rem;
    color: #5f5a4e;
}
/* Rating/slope reads as a pair, so it gets a divider rather than a label on
   every row — the header note explains it once. */
.ytgs-rr-tee { white-space: nowrap; }

.ytgs-rr-go {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--green-700);
}

/* The chevron belongs at the end of the row on a phone too, where the cell
   spans the full width. */
@media (max-width: 700px) {
    .ytgs-table--rounds .ytgs-rr-round { width: 100%; }
}

/* Label above value cost a whole line per row for three two-character
   numbers. Inline reads the same and gives the row back ~16px. */
@media (max-width: 700px) {
    .ytgs-table--rounds td[data-label]::before {
        display: inline;
        margin-right: .35rem;
    }
}

/* Rows sat flush against the card edge; give them a gutter. Alternating rows
   get a faint green wash so a long log is easier to track across. */
.ytgs-table--rounds tbody tr {
    padding-left: .85rem;
    padding-right: .85rem;
}
.ytgs-table--rounds tbody tr:nth-child(even) { background: rgba(22, 163, 74, .045); }

/* Tee colour as a swatch beside the rating/slope pair. A ring keeps a white
   or very pale tee visible against the row. */
.ytgs-rr-tee-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: baseline;
    box-shadow: 0 0 0 1px rgba(26, 26, 26, .28);
}

/* Above the stacked breakpoint the row is a real <table> row, where padding on
   <tr> is ignored — the gutter has to sit on the edge cells instead. */
@media (min-width: 701px) {
    .ytgs-table--rounds thead th:first-child,
    .ytgs-table--rounds tbody td:first-child { padding-left: .85rem; }
    .ytgs-table--rounds thead th:last-child,
    .ytgs-table--rounds tbody td:last-child { padding-right: .85rem; }
}