/* ========================================================================== 
   Overdrive V58 — canonical hover states + desktop auction readiness
   ========================================================================== */

/*
 * LIGHT MODE: every ordinary editorial/control surface uses the actual
 * Overdrive purple (#421AFF), not the stale #2458ff/#2962ff blues.
 * Photo-overlay headlines remain Electric Lime through V50.
 */
html[data-theme="light-mode"] body.go-verge,
html[data-theme="light"] body.go-verge {
	--go-interaction-hover: #421aff;
	--go-card-hover: #421aff;
	--go-editorial-card-hover: #421aff;
	--go-cluster-hover: #421aff;
	--link-hover: #421aff;
}

/* Cards inside .go-hero-visual rails are NOT photo overlays. Historical CSS
 * matched the whole hero container and incorrectly made these titles lime. */
html[data-theme="light-mode"] body.go-verge .go-hero-visual :where(
	.go-tile:not(.go-tile--overlay):not(.go-tile--feature),
	.go-stream__card,
	.go-archive-row,
	.go-aside-item,
	.go-v21-next article,
	.go-platform-story
):hover :where(a, .go-tile__title a, .go-stream__title a, .go-archive-row__title a, .go-aside-item__title a),
html[data-theme="light"] body.go-verge .go-hero-visual :where(
	.go-tile:not(.go-tile--overlay):not(.go-tile--feature),
	.go-stream__card,
	.go-archive-row,
	.go-aside-item,
	.go-v21-next article,
	.go-platform-story
):hover :where(a, .go-tile__title a, .go-stream__title a, .go-archive-row__title a, .go-aside-item__title a) {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
	text-decoration-color: #421aff !important;
	text-shadow: none !important;
}

/* Publisher-owned icon controls follow the same interaction colour. This also
 * prevents Bootstrap/default anchor blue from leaking into SVGs on hover. */
html[data-theme="light-mode"] body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-share-more__native,
	.go-product-action--save,
	.go-load-more,
	.go-topicbar__actions a,
	.go-topic-hub-v21__pagination a
):hover,
html[data-theme="light-mode"] body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-share-more__native,
	.go-product-action--save,
	.go-load-more,
	.go-topicbar__actions a,
	.go-topic-hub-v21__pagination a
):focus-visible,
html[data-theme="light"] body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-share-more__native,
	.go-product-action--save,
	.go-load-more,
	.go-topicbar__actions a,
	.go-topic-hub-v21__pagination a
):hover,
html[data-theme="light"] body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-share-more__native,
	.go-product-action--save,
	.go-load-more,
	.go-topicbar__actions a,
	.go-topic-hub-v21__pagination a
):focus-visible {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
	border-color: color-mix(in srgb, #421aff 34%, var(--border-strong, transparent)) !important;
}

html[data-theme="dark-mode"] body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-share-more__native,
	.go-product-action--save,
	.go-load-more,
	.go-topicbar__actions a,
	.go-topic-hub-v21__pagination a
):is(:hover, :focus-visible),
html[data-theme="dark"] body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-share-more__native,
	.go-product-action--save,
	.go-load-more,
	.go-topicbar__actions a,
	.go-topic-hub-v21__pagination a
):is(:hover, :focus-visible) {
	color: #d8ff38 !important;
	-webkit-text-fill-color: #d8ff38 !important;
}

/* Only recolour the publisher SVG, never provider/advertiser markup. */
body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-product-action--save,
	.go-load-more
):is(:hover, :focus-visible) svg {
	color: currentColor !important;
}
body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-product-action--save,
	.go-load-more
):is(:hover, :focus-visible) svg [stroke]:not([stroke="none"]) {
	stroke: currentColor !important;
}
body.go-verge .go-site :where(
	.go-iconbtn,
	.go-theme-toggle,
	.go-scored-masthead__action,
	.go-share-more__toggle,
	.go-product-action--save,
	.go-load-more
):is(:hover, :focus-visible) svg [fill]:not([fill="none"]) {
	fill: currentColor !important;
}

/* Keep the photo contract explicit and last: only text that is actually on a
 * photographic surface uses lime in light mode. */
html[data-theme] body.go-verge :where(
	.go-hero-visual__feature .go-tile:not(.go-tile--noimage),
	.go-tile--overlay,
	.go-tile--feature:not(.go-tile--noimage),
	.go-scored-masthead,
	.figure-overlay
) :where(a, button):is(:hover, :focus-visible) {
	color: #d8ff38 !important;
	-webkit-text-fill-color: #d8ff38 !important;
	text-decoration-color: #d8ff38 !important;
}

/* DESKTOP ADS: preserve the single sidebar position but expose responsive
 * Display demand. The 300px rail is stable before request, the Google <ins>
 * measures a real width, and no height/max-height/crop is imposed on the
 * creative. This changes eligible sizes, not ad count or request timing. */
@media (min-width: 1101px) {
	body.single-post.go-verge .go-ad-slot--sidebar-desktop {
		inline-size: 300px;
		max-inline-size: 300px;
		min-inline-size: 300px;
		margin-inline: auto;
		overflow: visible;
		contain: none;
	}
	body.single-post.go-verge .go-ad-slot--sidebar-desktop > ins.go-ad-unit {
		display: block;
		inline-size: 100%;
		min-inline-size: 1px;
		max-inline-size: 100%;
		margin-inline: auto;
	}
}

/* Header is a lime chrome surface, not a white editorial surface. Its icon
 * controls stay ink-on-lime instead of inheriting the purple light-mode rule. */
body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle):is(:hover, :focus-visible),
body.go-verge .go-header--editorial :where(.go-iconbtn, .go-theme-toggle):is(:hover, :focus-visible) {
	color: #101217 !important;
	-webkit-text-fill-color: #101217 !important;
	border-color: rgba(16, 18, 23, .28) !important;
}
body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle):is(:hover, :focus-visible) svg,
body.go-verge .go-header--editorial :where(.go-iconbtn, .go-theme-toggle):is(:hover, :focus-visible) svg {
	color: currentColor !important;
}

/* Off-canvas is dark chrome even when the page theme is light. Never let the
 * ordinary-light purple icon state leak into that surface. */
body.go-verge .go-offcanvas :where(.go-iconbtn, .go-theme-toggle):is(:hover, :focus-visible) {
	color: #d8ff38 !important;
	-webkit-text-fill-color: #d8ff38 !important;
	border-color: color-mix(in srgb, #d8ff38 42%, transparent) !important;
}

/* Legacy ticker can still be rendered on a few archive/page templates. Keep
 * its hover on the canonical purple too. */
html[data-theme="light-mode"] body.go-verge .rt-news-ticker .ticker-content a:hover,
html[data-theme="light"] body.go-verge .rt-news-ticker .ticker-content a:hover {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
}

/* Small arrows/chevrons are controls on ordinary light surfaces. A handful of
 * older component sheets painted these blue independently of the text token. */
html[data-theme="light-mode"] body.go-verge .go-site :where(
	.go-ui-arrow,
	.go-topic-card__arrow,
	.go-home-platform__arrow,
	.go-release-agenda__arrow,
	.go-after-card__arrow,
	.go-context-links__arrow,
	.go-inline-related__arrow,
	.go-search-suggestion__arrow
):is(:hover, :focus-visible),
html[data-theme="light"] body.go-verge .go-site :where(
	.go-ui-arrow,
	.go-topic-card__arrow,
	.go-home-platform__arrow,
	.go-release-agenda__arrow,
	.go-after-card__arrow,
	.go-context-links__arrow,
	.go-inline-related__arrow,
	.go-search-suggestion__arrow
):is(:hover, :focus-visible) {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
	border-color: color-mix(in srgb, #421aff 38%, transparent) !important;
}
html[data-theme="light-mode"] body.go-verge .go-site :where(
	.go-topic-card,
	.go-home-platform,
	.go-release-agenda,
	.go-after-card,
	.go-context-links li,
	.go-inline-related__item,
	.go-search-suggestion
):hover :where(
	.go-ui-arrow,
	.go-topic-card__arrow,
	.go-home-platform__arrow,
	.go-release-agenda__arrow,
	.go-after-card__arrow,
	.go-context-links__arrow,
	.go-inline-related__arrow,
	.go-search-suggestion__arrow
),
html[data-theme="light"] body.go-verge .go-site :where(
	.go-topic-card,
	.go-home-platform,
	.go-release-agenda,
	.go-after-card,
	.go-context-links li,
	.go-inline-related__item,
	.go-search-suggestion
):hover :where(
	.go-ui-arrow,
	.go-topic-card__arrow,
	.go-home-platform__arrow,
	.go-release-agenda__arrow,
	.go-after-card__arrow,
	.go-context-links__arrow,
	.go-inline-related__arrow,
	.go-search-suggestion__arrow
) {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
}