/* BIKOTIC compare - the BIKES overlay (picker.js): built like the MVP's GEOMETRY / COMPARE cards in style.css - the same
   white blurred backdrop, the same cards dealt in and swept off, the same close button - with the fight game heads-up
   band over them. Sage = P1, plum = P2, orange only on the buy button, numbers in JetBrains Mono. Colours from
   brand/bikotic-colours.css. Scrolls inside itself on a small screen; the page never does. */

.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#picker
{
	position: fixed;
	inset: 0;
	z-index: 500;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 24px 16px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

#picker.open
{
	display: flex;
	animation: cardsFadeIn 0.25s ease both;
}

#picker.closing
{
	overflow: hidden;
	animation: cardsBackdropOut 0.45s ease-out both;
}

#picker.closing .pkHud, #picker.closing .pkHint, #picker.closing .pkNote { animation: fadeAway 0.3s ease-out both; }
#picker.closing .cardL { animation: cardSweepLeft 0.45s ease-out both; }
#picker.closing .cardR { animation: cardSweepRight 0.45s ease-out both; }

#pickerInner
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: clamp(16px, 3vw, 48px);
	perspective: 1400px;
	margin: auto;
	width: 100%;
	max-width: calc(2 * max(300px, min(420px, 50vw - 48px)) + clamp(16px, 3vw, 48px));		/* two cards and the gap - the band spans them */
}

/* no bikes yet - nothing to go back to, so no way out but picking */
#pickerClose		/* the shared close (style.css .xBtn) */
{
	position: fixed;
	top: var(--pad, 21px);
	right: var(--pad, 21px);
}
#picker.locked #pickerClose { display: none; }

/* ---------------------------------------------------------------- HEADS-UP BAND: P1 | VS + tally | P2 */

.pkHud
{
	flex: 0 0 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	gap: 6px 16px;
	padding: 14px 20px 16px;
	border-radius: 18px;
	background: var(--bk-hero-gradient);
	color: #ffffff;
	box-shadow: 0 18px 50px rgba(var(--shadowRGB), 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
	animation: cardsFadeIn 0.4s ease 0.1s both;
}

.pkLogo { grid-column: 1 / -1; justify-self: start; line-height: 0; }
.pkLogo img { display: block; height: 20px; width: auto; }

.hudSide { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hudSide.p2 { align-items: flex-end; text-align: right; }
.hudTag { font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--bk-mist); }
.hudName
{
	font-weight: 600;
	font-size: clamp(15px, 1.8vw, 22px);
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.pips { display: flex; gap: 6px; }
.pip { width: 22px; height: 8px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.45); box-sizing: border-box; }
.p1 .pip.on { background: var(--bk-bike1-on-dark); border-color: var(--bk-bike1-on-dark); }
.p2 .pip.on { background: var(--bk-bike2-on-dark); border-color: var(--bk-bike2-on-dark); }
.hudVs { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vsBig { font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: 0.04em; }
.tally { font-family: var(--data); font-weight: 700; font-size: 16px; color: var(--bk-text-on-dark); white-space: nowrap; }

/* "Pick two bikes to start." - in the MVP's own message look */
.pkHint
{
	flex-basis: 100%;
	margin: 0;
	text-align: center;
	color: #555555;
	font-size: 20px;
	animation: cardsFadeIn 0.4s ease 0.2s both;
}

/* under the hint: the way into Browse (and the starred tray) */
.pkTools
{
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	animation: cardsFadeIn 0.4s ease 0.25s both;
}
#picker.closing .pkTools { animation: fadeAway 0.3s ease-out both; }

.pkNote
{
	flex-basis: 100%;
	max-width: 640px;
	margin: 0;
	font-family: var(--body);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: #555555;
	text-align: center;
	animation: cardsFadeIn 0.4s ease 0.6s both;
}

/* ---------------------------------------------------------------- THE TWO BIKE CARDS (style.css .card, .row...) */

.pkCard
{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 420px;
}

.pkCard .cardModel { padding-right: 0; }
.pkCard .cardHead { padding-right: 84px; }		/* clear of the wins tally */

.pkBody { flex: 1; display: flex; flex-direction: column; }
.pkCard.loading .pkBody { opacity: 0.5; }
.pkCard .cardImg { position: relative; display: flex; align-items: center; justify-content: center; }		/* holds the star (browse.css .brStar) */
.pkCard .rowValue small { display: block; font-family: var(--body); font-size: 11px; color: #767676; }

/* a bike photo: plain grey 16:9 while it loads, one more go, then Try again */
.photoBox { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #E6E9EC; overflow: hidden; }
.photoBox.ok { background: #ffffff; }
.photoBox img
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	opacity: 0;
	transition: opacity 0.25s ease;
	-webkit-user-drag: none;
	user-select: none;
}
.photoBox.ok img { opacity: 1; }
.photoNote
{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px;
	text-align: center;
	font-family: var(--body);
	font-size: 13px;
	color: #555555;
}
.photoBox.ok .photoNote { display: none; }
.noPhoto { letter-spacing: 0.1em; color: #555555; text-transform: uppercase; }

/* THE WHOLE CARD SWAPS THE BIKE (Ben, 13 Nov 2026): a real button over the whole card (picker.js), see-through, with the
   Buy button, the star and a photo's Try again lifted above it, so those never swap and nothing covers Buy. An edge in
   the side's colour under a mouse, a tint while it's pressed */
.pkSwap
{
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow 0.15s ease, background-color 0.1s ease;
}
@media (hover: hover)
{
	.pkSwap:hover { box-shadow: inset 0 0 0 3px var(--bk-bike1); }
	.cardR .pkSwap:hover { box-shadow: inset 0 0 0 3px var(--bk-bike2); }
}
.pkSwap:active, .pkSwap.press { background: rgba(94, 143, 110, 0.16); box-shadow: inset 0 0 0 3px var(--bk-bike1); }		/* .press: set by picker.js while a finger is down */
.cardR .pkSwap:active, .cardR .pkSwap.press { background: rgba(122, 63, 110, 0.14); box-shadow: inset 0 0 0 3px var(--bk-bike2); }
.pkSwap:focus-visible { outline: 3px solid var(--ui); outline-offset: -3px; }
.pkFoot .buyBtn { position: relative; z-index: 2; }
.pkCard .brStar { z-index: 2; }
.pkCard .photoNote .topBtn { position: relative; z-index: 2; }
.pkCard .legacyChip { position: relative; z-index: 2; }		/* LEGACY still opens its own note */

.pkFoot
{
	margin-top: auto;
	padding: 12px 18px 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	border-top: 1px solid #eef0f2;
}
.pkFoot:empty { display: none; }
/* the footer's buttons keep to the card's outer edge (P1 left, P2 right), clear of the floating COMPARE in the middle */
.pkCard.cardR .pkFoot { justify-content: flex-end; }
/* one card above the other: P2's Buy keeps to the left too, or the floating COMPARE passes over it as the page scrolls (nothing may cover Buy: CLAUDE.md) */
html.phone:not(.land) .pkCard.cardR .pkFoot { justify-content: flex-start; }
/* a phone on its side: two narrow cards side by side. The foot (now just Buy: the whole card swaps the bike, 13 Nov 2026)
   keeps to the card's outer edge, clear of the floating COMPARE in the middle: nothing may cover Buy (CLAUDE.md) */
html.phone.land .pkFoot { flex-direction: column; align-items: flex-start; }
html.phone.land .pkCard.cardR .pkFoot { align-items: flex-end; justify-content: flex-start; }

.buyBtn
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bk-buy);
	color: var(--bk-buy-text);
	font-family: var(--body);
	font-weight: 600;
	font-size: 14px;
	padding: 9px 14px;
	border-radius: 6px;
	text-decoration: none;
}
.buyBtn:hover { filter: brightness(1.1); }
.buyBtn .num { font-family: var(--data); font-weight: 500; }

/* an empty card is one big button: it goes to Browse, picking that side */
.pkPick
{
	flex: 1;
	margin: 16px;
	border: 2px dashed var(--border);
	border-radius: 12px;
	background: var(--uiFaint);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--head);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ui);
	cursor: pointer;
}
.pkPick:hover { border-color: var(--ui); }
.pkPick .plus { font-size: 40px; line-height: 1; color: var(--accent); }
.pkMsg { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 14px; color: #141414; }

/* ---------------------------------------------------------------- COMPARE: both bikes in - shut the cards, see the bikes */

/* the main action, Bikotic blue (Ben's call - the guide's white "Compare bikes" button is for dark backgrounds).
   Sticks to the bottom of the overlay, so it's in view even while stacked cards scroll under it on a phone; the strip
   round it lets clicks through, so clicking outside the cards still closes them */
.pkGo
{
	flex-basis: 100%;
	position: sticky;
	bottom: 4px;
	z-index: 3;
	display: flex;
	justify-content: center;
	pointer-events: none;
	animation: cardsFadeIn 0.4s ease 0.4s both;
}
.pkGo[hidden] { display: none; }
#pkGoBtn
{
	pointer-events: auto;
	font-family: var(--head);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.16em;
	color: #ffffff;
	background: var(--ui);
	border: 0;
	border-radius: 999px;
	padding: 12px 46px 13px 48px;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(var(--shadowRGB), 0.28);
	transition: background-color 0.15s ease;
}
/* one card above the other: "Buy from £4,999" is wide and sits at the foot's left, so the floating COMPARE keeps to the
   right and is narrower, clear of it as the page scrolls (nothing may cover Buy: CLAUDE.md) */
html.phone:not(.land) .pkGo { justify-content: flex-end; padding-right: 10px; }
html.phone:not(.land) #pkGoBtn { padding: 12px 20px 13px 22px; }
#pkGoBtn:hover { background: var(--bk-navy); }
#pkGoBtn:focus-visible { outline: 2px solid var(--ui); outline-offset: 3px; }
#picker.closing .pkGo { animation: fadeAway 0.3s ease-out both; }

/* ---------------------------------------------------------------- A BIKE ROW: thumb, name, year and price (the starred tray) */

.thumb { flex: none; width: 88px; aspect-ratio: 16 / 9; background: #E6E9EC; border-radius: 4px; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: #ffffff; }
.srchWords { display: flex; flex-direction: column; min-width: 0; }
.srchName { font-weight: 500; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.srchMeta { font-size: 13px; color: #555555; }
.srchMeta .num { font-family: var(--data); }
.legacySmall
{
	margin-left: 8px;
	font-family: var(--head);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--uiLine);
	border-radius: 3px;
	padding: 0 4px;
}

/* the starred tray under the hint */
.pkTray
{
	flex-basis: 100%;
	max-width: 720px;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 14px;
	padding: 14px 16px 10px;
	box-shadow: 0 18px 50px rgba(var(--shadowRGB), 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
	animation: cardsFadeIn 0.3s ease both;
}
.pkTray[hidden] { display: none; }
#picker.closing .pkTray { animation: fadeAway 0.3s ease-out both; }
.trayHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 500; font-size: 13px; letter-spacing: 0.16em; color: var(--ui); }
.trayHead .link { background: none; border: 0; padding: 0; font-family: var(--body); font-size: 13px; letter-spacing: 0; color: var(--ui); text-decoration: underline; cursor: pointer; }
.trayEmpty { margin: 4px 0 6px; font-family: var(--body); font-size: 14px; color: #555555; }
.trayRow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-family: var(--body); color: #141414; }
.trayRow .srchWords { flex: 1; min-width: 0; }
.trayRow .brP { flex: none; width: 54px; }
.trayX { flex: none; background: none; border: 0; padding: 4px; color: #9aa4ad; font-size: 15px; cursor: pointer; }
.trayX:hover { color: var(--ui); }
@media (max-width: 480px)
{
	.trayRow { flex-wrap: wrap; }
	.trayRow .thumb { width: 72px; }
	/* the name gets the line beside the thumb; P1 / P2 / ✕ go under it, on the right */
	.trayRow { row-gap: 6px; }
	.trayRow .srchWords { flex-basis: calc(100% - 84px); }
	.trayRow .brP.p1 { margin-left: auto; }
	/* thumb-sized taps on a phone: P1 / P2 and the ✕ at 44px */
	.trayRow .brP { min-height: 44px; }
	.trayX { min-width: 44px; min-height: 44px; }
}

/* stacked (two cards won't fit side by side) - each card the band's full width */
@media (max-width: 660px)
{
	.pkCard { width: min(420px, 100%); min-width: 0; }
}

@media (max-width: 480px)
{
	.pkHud { padding: 12px 14px 14px; gap: 6px 10px; }
	.pip { width: 16px; }
	.pkCard { min-height: 380px; }
}

/* ---------------------------------------------------------------- THE BIKES BUTTON */

/* it sits before GALLERY / GEOMETRY / COMPARE; where four won't fit on one line (phones) it drops under them, so the
   MVP's own three stay exactly where they were */
@media (max-width: 470px)
{
	#bikesBtn { position: absolute; top: calc(100% + 10px); right: 0; }
}


/* THE VIDEO SLOT (api/compare.js videoSlot, picker.js; off until part 2): a matchup with a video gets a play button under
   the cards. Nothing loads from YouTube until it's pressed; then the player, 16:9, from youtube-nocookie.com.
   Brand blue, never orange (orange is only for buying). */
.pkVideo { flex-basis: 100%; max-width: 720px; box-sizing: border-box; }
.pkVideo[hidden] { display: none; }
#picker.closing .pkVideo { animation: fadeAway 0.3s ease-out both; }
.pkVideoBtn
{
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 2px 14px;
	width: 100%;
	min-height: 64px;
	padding: 12px 16px;
	box-sizing: border-box;
	border: 2px solid var(--ui);
	border-radius: 14px;
	background: #ffffff;
	color: var(--ui);
	font-family: var(--body);
	text-align: left;
	cursor: pointer;
}
.pkVideoPlay { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ui); color: #ffffff; font-size: 16px; padding-left: 3px; box-sizing: border-box; }
.pkVideoWord { font-weight: 600; font-size: 16px; }
.pkVideoBtn small { font-size: 12px; color: #555555; }
.pkVideoFrame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #000000; }