/**
 * psp-slider (2026-10-12) — js/psp-slider.js. One card per view, swipe
 * (scroll-snap), prev / next with a counter above, dots below.
 */
.psp-slider { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.psp-slider__track {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}
.psp-slider__track::-webkit-scrollbar { display: none; }
.psp-slider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.psp-slider__slide > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.psp-slider__bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; order: -1; }
.psp-slider__count { min-width: 52px; text-align: center; font: 700 13px/1 'JetBrains Mono', Consolas, monospace; color: #a9bdd6; }
.psp-slider__btn {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba( 255, 176, 32, 0.45 );
	background: rgba( 255, 255, 255, 0.05 );
	color: #ffd27a;
	font: 700 22px/1 sans-serif;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.psp-slider__btn:hover:not( :disabled ) { background: rgba( 255, 176, 32, 0.16 ); transform: translateY( -1px ); }
.psp-slider__btn:disabled { opacity: 0.35; cursor: default; }
.psp-slider__btn:focus-visible,
.psp-slider__dot:focus-visible { outline: 3px solid #9cc6ff; outline-offset: 2px; }
.psp-slider__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.psp-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba( 234, 244, 255, 0.25 ); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; }
.psp-slider__dot.is-on { width: 24px; background: #ffb020; }
/* Bigger touch target without a bigger dot. */
.psp-slider__dot { position: relative; }
.psp-slider__dot::after { content: ""; position: absolute; inset: -10px -4px; }

/* In the article: a heading row with the controls on the right. */
.proace-post-predictions__slider { margin-top: 6px; }
.proace-post-predictions__slider .psp-slider__count { order: -1; margin-right: auto; text-align: left; font-size: 14px; }
.proace-post-predictions__slider .psp-slider__count::before { content: "Match "; font-family: 'Outfit', sans-serif; color: #8fa6c4; }

html[data-theme="light"] .psp-slider__count { color: #4a5f7c; }
html[data-theme="light"] .psp-slider__btn { background: #fff; color: #a86300; }
html[data-theme="light"] .psp-slider__dot { background: rgba( 10, 30, 56, 0.2 ); }

@media ( prefers-reduced-motion: reduce ) {
	.psp-slider__btn,
	.psp-slider__dot { transition: none; }
}

/* Sidebar "Open Predictions": General / Premium tabs, each an auto slider. */
.cricket-sidebar-open__tabs { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 12px; background: rgba( 255, 255, 255, 0.05 ); border: 1px solid rgba( 255, 255, 255, 0.1 ); }
.cricket-sidebar-open__tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #cdd9ea; font: 800 13px/1 'Outfit', sans-serif; cursor: pointer; }
.cricket-sidebar-open__tab span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: rgba( 255, 255, 255, 0.1 ); font-size: 11px; }
.cricket-sidebar-open__tab[aria-selected="true"] { background: rgba( 58, 134, 224, 0.9 ); color: #fff; }
.cricket-sidebar-open__tab.is-premium[aria-selected="true"] { background: linear-gradient( 180deg, #ffd27a, #ffb020 ); color: #1a1200; }
.cricket-sidebar-open__tab.is-premium[aria-selected="true"] span { background: rgba( 26, 18, 0, 0.15 ); }
.cricket-sidebar-open__tab:focus-visible { outline: 3px solid #9cc6ff; outline-offset: 2px; }
.cricket-sidebar-open__group[hidden] { display: none !important; }
.cricket-sidebar-open__glabel { margin: 0 0 8px; font: 800 11px/1 'Outfit', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #9cc6ff; }
.cricket-sidebar-open__glabel.is-premium { color: #ffd27a; }
.cricket-sidebar-open__slider .psp-slider__bar { justify-content: space-between; }
.cricket-sidebar-open__slider .psp-slider__count { order: 0; }
.cricket-sidebar-open__slider .psp-slider__btn { width: 32px; height: 32px; font-size: 20px; }
/* The sidebar card is light: darker text for the tabs and counter. */
.cricket-sidebar-open .cricket-sidebar-open__tabs { background: rgba( 10, 30, 56, 0.06 ); border-color: rgba( 10, 30, 56, 0.12 ); }
.cricket-sidebar-open .cricket-sidebar-open__tab { color: #33475f; }
.cricket-sidebar-open .cricket-sidebar-open__tab span { background: rgba( 10, 30, 56, 0.1 ); }
.cricket-sidebar-open .cricket-sidebar-open__tab[aria-selected="true"] { color: #fff; }
.cricket-sidebar-open .cricket-sidebar-open__tab[aria-selected="true"] span { background: rgba( 255, 255, 255, 0.25 ); }
.cricket-sidebar-open .cricket-sidebar-open__tab.is-premium[aria-selected="true"] { color: #1a1200; }
.cricket-sidebar-open .psp-slider__count { color: #4a5f7c; }
.cricket-sidebar-open .psp-slider__btn { background: #fff; color: #a86300; border-color: rgba( 168, 99, 0, 0.45 ); }
.cricket-sidebar-open .psp-slider__dot { background: rgba( 10, 30, 56, 0.2 ); }
.cricket-sidebar-open .psp-slider__dot.is-on { background: #ffb020; }
.cricket-sidebar-open .cricket-sidebar-open__glabel { color: #1f5fb0; }
.cricket-sidebar-open .cricket-sidebar-open__glabel.is-premium { color: #a86300; }