/** Pseudo-states for radioindex.org — hover / focus only. Base paint stays inline. */

@layer app-interactive {
	@media (hover: hover) and (pointer: fine) {
		/* Scrubber magnify on hover — drag uses data-scrubbing in progress-scrub.js. */
		@scope (.app-player-scrubber) {
			:scope:not([data-scrubbing="true"]):hover {
				--app-scrubber-track-h: var(--app-scrubber-track-h-active);
				--app-scrubber-time-size: var(--app-scrubber-time-size-active);
			}

			:scope:not([data-scrubbing="true"]):hover .app-player-thumb {
				transform: translate(-50%, -50%) scale(1.15);
			}
		}
	}
}

/*
 * Control hovers — UNLAYERED so they beat embedded base paint (background:transparent)
 * in render-document <style>. @layer app-interactive always loses to unlayered rules.
 */
@media (hover: hover) and (pointer: fine) {
	/* Sm squarish oval (--app-control-radius-sm): list toolbar, toolbar-button, row controls */
	[data-app-control="sm"]:hover,
	list-toolbar button-group [data-app-control="sm"]:hover,
	search-field[data-search-toggle] button-group toolbar-button:hover,
	.search-toggle-clear:hover,
	.tags-list-search-clear:hover,
	.search-clear:hover,
	button-group toolbar-button:hover,
	.header-row-inner toolbar-button:hover,
	.item-controls-footer .item-control-add:hover,
	.item-controls-footer .item-control-save:hover,
	.item-controls-footer .item-control-more:hover,
	.item-controls-footer toolbar-button:hover,
	.continue-actions .item-control-add:hover,
	.continue-actions .item-control-save:hover,
	.continue-actions .item-control-more:hover,
	.header-row-kebab:hover {
		background: var(--genre-bg);
		color: var(--type-color);
	}

	.filter-bar-tab:hover:not(.filter-bar-tab-active),
	.dashboard-icon-btn:hover,
	.dashboard-filters-btn:hover,
	.dashboard-dots-btn:hover,
	.dashboard-section-title-button:hover,
	.continue-remove:hover,
	.continue-chevron:hover,
	.continue-remove-action:hover {
		background: var(--genre-bg);
		color: var(--type-color);
	}

	.filter-bar-tab-active:hover {
		background: var(--selected-bg);
		color: var(--selected-fg);
	}

	.continue-remove-action-destructive:hover {
		color: var(--status-red);
	}

	more-actions-menu .menu-action:hover,
	more-actions-menu .menu-action:focus-visible {
		background: var(--menu-hover);
	}

	more-actions-menu .menu-action:hover .mi-icon,
	more-actions-menu .menu-action:focus-visible .mi-icon {
		color: var(--menu-text);
	}

.group-row-item button-group toolbar-button:not([data-app-control="oval-sm"]):hover {
		background: var(--genre-bg);
		color: var(--type-color);
	}

	/* Play circle stays inverted (white fill, dark icon) — no genre-bg swap on hover */
	.group-row-item button-group toolbar-button[data-app-control="oval-sm"]:hover::before {
		background: var(--app-control-oval-sm-bg);
	}

	.group-row-item button-group toolbar-button[data-app-control="oval-sm"]:hover {
		background: transparent;
		color: var(--app-control-oval-sm-fg);
	}

	/* Pre-filled sm pills: deepen on hover */
	.continue-actions .item-control-pill:hover {
		background: color-mix(in srgb, var(--genre-bg) 50%, var(--fg));
	}

	/* Lg circle (--action-target): nav, dock, transport via ::before ring */
	.action-button:hover::before,
	.action-button:focus-visible::before,
	.logo-link:hover::before,
	.logo-link:focus-visible::before,
	[data-app-control="lg"]:hover::before,
	[data-app-control="lg"]:focus-visible::before {
		background: var(--genre-bg);
		border: var(--control-secondary-border);
	}

	.app-player-transport .action-button:not([data-app-action="play-toggle"]):hover::before,
	player-transport.app-player-transport .action-button:not([data-app-action="play-toggle"]):hover::before,
	[data-component="now-playing-dock"] .now-playing-dock-controls .action-button:hover::before {
		background: var(--genre-bg);
	}

	[data-component="now-playing-dock"] .now-playing-dock-grabber-row,
	[data-component="now-playing-dock"] .now-playing-dock-resize:hover {
		cursor: grab;
	}

	[data-component="now-playing-dock"] .now-playing-dock-resize:active {
		cursor: grabbing;
	}

	.app-player-transport [data-app-action="play-toggle"]:hover,
	player-transport.app-player-transport [data-app-action="play-toggle"]:hover {
		background: color-mix(in srgb, var(--genre-bg) 50%, var(--fg));
	}

	/* Wordmark pill hover — rounded rect, same tokens as lg action buttons */
	.wordmark:hover,
	.wordmark:focus-visible,
	a.wordmark[data-app-control="lg"]:hover,
	a.wordmark[data-app-control="lg"]:focus-visible,
	button.wordmark[data-app-control="lg"]:hover,
	button.wordmark[data-app-control="lg"]:focus-visible {
		background: var(--genre-bg);
		border: var(--control-secondary-border);
	}

	/* Hub pills — hover state for inactive pills */
	.hub-pill:hover:not([aria-current]),
	.hub-pill:focus-visible:not([aria-current]) {
		background: color-mix(in srgb, var(--fg) 8%, transparent);
		color: var(--fg);
	}

	.list-toolbar-filter-trigger:hover:not([aria-expanded="true"]),
	.list-toolbar-filter-trigger:focus-visible:not([aria-expanded="true"]) {
		background: var(--genre-bg);
		border: var(--control-secondary-border);
		color: var(--control-secondary-fg);
	}

	button.group-row-toggle[data-group-toggle="true"]:hover,
	button[data-component="layout-show-more-row"][data-group-toggle="true"]:hover,
	button.group-row-toggle[data-group-toggle="true"]:hover .group-row-toggle-label,
	button[data-component="layout-show-more-row"][data-group-toggle="true"]:hover .group-row-toggle-label {
		color: var(--link);
		background: transparent;
		text-decoration: none;
	}

	.dashboard-show-more:hover,
	.dashboard-show-more:hover .dashboard-show-more-label {
		color: var(--link);
		background: transparent;
	}

	.resource-collection-row {
		transition: background 0.15s;
		border-radius: 10px;
	}

	.resource-collection-row:hover {
		background: var(--control-secondary-bg-hover);
	}

	.resource-collection-row[data-selected="true"]:hover {
		background: var(--item-surface-bg);
	}

}

/*
 * Touch — no sticky press flash. Fine-pointer hover/active feedback stays above.
 * Selected nav (aria-current, data-active) and :focus-visible are untouched.
 */
@media (hover: none) and (pointer: coarse) {
	[data-app-control="sm"]:active,
	list-toolbar button-group [data-app-control="sm"]:active,
	search-field[data-search-toggle] button-group toolbar-button:active,
	.search-toggle-clear:active,
	.tags-list-search-clear:active,
	.search-clear:active,
	button-group toolbar-button:active,
	.header-row-inner toolbar-button:active,
	.group-row-item button-group toolbar-button:active,
	.item-controls-footer .item-control-add:active,
	.item-controls-footer .item-control-save:active,
	.item-controls-footer .item-control-more:active,
	.item-controls-footer toolbar-button:active,
	.continue-actions .item-control-add:active,
	.continue-actions .item-control-save:active,
	.continue-actions .item-control-more:active,
	.header-row-kebab:active,
	.horizontal-scroll-btn:active,
	.hub-tab:active:not([aria-current]):not([data-active="true"]),
	.control-list-index-letter:active:not([data-list-index-active="true"]) {
		background: transparent;
		color: inherit;
	}

	button.group-row-toggle[data-group-toggle="true"]:active,
	button[data-component="layout-show-more-row"][data-group-toggle="true"]:active {
		color: var(--link);
		background: transparent;
	}

	.dashboard-show-more:active {
		color: var(--link);
		background: transparent;
	}

	.group-row-item button-group toolbar-button:not([data-app-control="oval-sm"]):active {
		background: transparent;
		color: inherit;
	}

	.group-row-item button-group toolbar-button[data-app-control="oval-sm"]:active::before {
		background: var(--app-control-oval-sm-bg);
	}

	.group-row-item button-group toolbar-button[data-app-control="oval-sm"]:active {
		background: transparent;
		color: var(--app-control-oval-sm-fg);
	}

	.hub-tab--sub[aria-current]:active,
	.hub-tab--sub[data-active="true"]:active {
		background: var(--hub-tab-sub-active-bg);
		color: var(--hub-tab-sub-active-fg);
	}

	.continue-actions .item-control-pill:active {
		background: color-mix(in srgb, var(--genre-bg) 72%, transparent);
	}

	.action-button:active::before,
	[data-app-control="lg"]:active::before {
		background: transparent;
		border-color: transparent;
	}

	.app-player-transport .action-button:not([data-app-action="play-toggle"]):active::before,
	player-transport.app-player-transport .action-button:not([data-app-action="play-toggle"]):active::before,
	[data-component="now-playing-dock"] .now-playing-dock-controls .action-button:active::before {
		background: transparent;
	}

	.app-player-transport [data-app-action="play-toggle"]:active,
	player-transport.app-player-transport [data-app-action="play-toggle"]:active {
		background: transparent;
	}

	.wordmark:active,
	a.wordmark[data-app-control="lg"]:active,
	button.wordmark[data-app-control="lg"]:active,
	button.wordmark:active:not([aria-expanded="true"]) {
		background: transparent;
		border-color: transparent;
	}

	.hub-tab--primary:active:not([aria-current]):not([data-active="true"]) {
		color: var(--hub-segment-active-fg);
		background: var(--hub-segment-active-bg);
	}

	.hub-tab--sub:active:not([aria-current]):not([data-active="true"]) {
		color: var(--muted);
	}

	.control-list-index-letter:active:not([data-list-index-active="true"]) {
		color: var(--type-color-light);
	}

	more-actions-menu .menu-action:active {
		background: var(--menu-hover);
	}

	more-actions-menu .menu-action:active .mi-icon {
		color: var(--menu-text);
	}
}