/* gamingbroject.com s145 lab: features (WS6). Lab only: /testqq/, manifest part 60-features.json, loaded only on the
 * pages tx-features.php changed (body tokens gbs145-fx-free, gbs145-fx-hub, gbs145-fx-cal).
 *
 * WHAT. F2 "Free right now" rows (/free-games-this-week/ and "Also free right now" on free-game articles), F1 game hubs
 * (status sentence, plain fact line, trailer row, dated timeline, quick answers behind ?s145on=qa) and F6 day counts on
 * /upcoming-games/. All markup is printed server-side by tx-features.php; features-freenow.js and features-hub.js only
 * tick text and turn trailer pictures into play buttons.
 *
 * CASCADE (plan 3.1). Part A is unlayered and every selector starts with .gbs145- (elements the lab creates), so the
 * tested look of the design proof holds: unlayered normal rules beat the live layers' normal rules. Part B is the
 * @layer s145 block, !important, for the few live elements touched (the hub eyebrow) and for the Day values of the lab's
 * own elements: Day mode's catch-all (gbl) turns every text to ink and every border to one line with !important, which
 * only an s145 !important can answer. Colours come from the shared tokens with fallbacks (WS1 owns them); the private
 * names are --gbs145-*. Halloween is never overridden: nothing here touches html.gb-hw, gbhw controls or article cards.
 *
 * PORTED from design/features/s145/features.css (tested 30/10). Planned trims: no status dot, progress bar, ticket stub
 * (dashed divider), count pill or arrow; the meta line is the warm label; labels read in sentence case (humanize). Radii
 * and separators follow the shared tokens (trailer frames --s145-r-l 14 px and timeline pictures --s145-r-s 6 px, where
 * the proof had 12 and 8; separators --s145-hairline). */

/* ============================================================ A. lab elements (unlayered, .gbs145-* only) ========== */

.gbs145-free-list,
.gbs145-free-note,
.gbs145-free-now,
.gbs145-hub,
.gbs145-cal-d {
	--gbs145-ink: var(--s145-ink, var(--tx-1, #f7f5fb));
	--gbs145-ink-2: var(--s145-ink-2, var(--tx-2, #c9c3d1));
	--gbs145-ink-3: var(--tx-3, #9a93a5);
	--gbs145-warm: var(--s145-warm, var(--hz-warm, #c9b8a6));
	--gbs145-wait: var(--s145-wait, #ffcf7a);
	/* the live pumpkin (--gb-red) still leads with WS1's part off; WS1's tokens lead when it is on */
	--gbs145-red: var(--s145-red, var(--gb-red, var(--red, #ff2948)));
	--gbs145-red-text: var(--s145-red-text, #ff5c78);
	--gbs145-link: var(--cyan, #21eaff);
	--gbs145-surface: var(--s145-surface-1, var(--surface-1, #0f0916));
	--gbs145-surface-2: var(--s145-surface-2, var(--surface-2, #171021));
	/* separators are the shared hairline (transparent on the flat black ground); the outline of a row and the timeline
	   spine keep the stronger live line */
	--gbs145-line: var(--s145-hairline, var(--line-1, rgba(255, 255, 255, .1)));
	--gbs145-line-2: var(--line-2, rgba(255, 255, 255, .18));
	--gbs145-r: var(--s145-r-l, 14px);
	--gbs145-r-s: var(--s145-r-s, 6px);
	--gbs145-text: Inter, "Inter Fallback", system-ui, sans-serif;
	--gbs145-display: "GB Barlow Condensed", "Barlow Condensed", Inter, system-ui, sans-serif;
}

/* ---------- F2: Free right now rows ---------- */

.gbs145-free-list {
	display: grid;
	gap: 12px;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}
.gbs145-free-list > .gbs145-row {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr) auto;
	align-items: stretch;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--gbs145-line-2);
	border-radius: var(--gbs145-r);
	background: var(--gbs145-surface);
	color: var(--gbs145-ink);
	list-style: none;
}
.gbs145-free-list > .gbs145-row::marker { content: ""; }
.gbs145-free-list > .gbs145-row.no-ph { grid-template-columns: minmax(0, 1fr) auto; }
.gbs145-row > .gbs145-row-ph {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	min-height: 96px;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	background: var(--gbs145-surface-2);
	box-shadow: none;
}
.gbs145-row > .gbs145-row-bd {
	min-width: 0;
	align-self: center;
	padding: 14px 16px;
}
.gbs145-row .gbs145-row-meta {
	margin: 0 0 4px;
	font: 600 13px/1.4 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-warm);
}
.gbs145-row .gbs145-row-wait { color: var(--gbs145-wait); }
.gbs145-row .gbs145-row-nm {
	margin: 0;
	font: 800 22px/1.15 var(--gbs145-text, Inter, system-ui, sans-serif);
	letter-spacing: -.01em;
	color: var(--gbs145-ink);
	overflow-wrap: anywhere;
}
.gbs145-row .gbs145-row-when {
	margin: 4px 0 0;
	font: 400 15px/1.45 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink-2);
}
.gbs145-row > .gbs145-row-act {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	padding: 12px 18px 12px 6px;
	text-align: right;
}
.gbs145-row .gbs145-row-left {
	margin: 0;
	font: 700 17px/1.3 var(--gbs145-text, Inter, system-ui, sans-serif);
	font-variant-numeric: tabular-nums;
	color: var(--gbs145-ink);
	white-space: nowrap;
}
.gbs145-row.is-closing .gbs145-row-left { color: var(--gbs145-red-text); }
.gbs145-row .gbs145-row-go,
.gbs145-row .gbs145-row-go:link,
.gbs145-row .gbs145-row-go:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	box-shadow: none;
	font: 700 14px/1.3 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	white-space: nowrap;
	touch-action: manipulation;
}
.gbs145-free-list:has(+ .gbs145-free-note) { margin-bottom: 10px; }
.gbs145-free-list + .gbs145-free-note {
	margin: 0 0 1.2rem;
	font: 400 13px/1.5 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink-3);
}

/* "Also free right now" on free-game articles: compact rows, directly before the comments. Its heading takes the
   article's section-title step (the display face in ink, like the Comments title under it), not a small grey label. */
.gbs145-free-now { margin: 12px 0 28px; }
.gbs145-free-now .gbs145-free-h {
	margin: 0 0 14px;
	font: 700 24px/1.2 var(--gbs145-text, Inter, system-ui, sans-serif);
	letter-spacing: normal;
	text-transform: none;
	color: var(--gbs145-ink);
}
.gbs145-free-list.is-compact { margin: 0; }
.gbs145-free-list.is-compact > .gbs145-row { grid-template-columns: 112px minmax(0, 1fr) auto; }
.gbs145-free-list.is-compact > .gbs145-row.no-ph { grid-template-columns: minmax(0, 1fr) auto; }
.gbs145-free-list.is-compact .gbs145-row-nm { font-size: 19px; }
.gbs145-free-list.is-compact > .gbs145-row > .gbs145-row-bd { padding: 11px 14px; }

@media (max-width: 640px) {
	.gbs145-free-list > .gbs145-row,
	.gbs145-free-list.is-compact > .gbs145-row { grid-template-columns: 92px minmax(0, 1fr); }
	.gbs145-free-list > .gbs145-row.no-ph,
	.gbs145-free-list.is-compact > .gbs145-row.no-ph { grid-template-columns: minmax(0, 1fr); }
	.gbs145-row > .gbs145-row-ph { min-height: 0; height: auto; aspect-ratio: 1 / 1; align-self: start; }
	.gbs145-row > .gbs145-row-bd,
	.gbs145-free-list.is-compact > .gbs145-row > .gbs145-row-bd { align-self: start; padding: 12px 13px; }
	.gbs145-row .gbs145-row-nm { font-size: 20px; }
	.gbs145-free-list.is-compact .gbs145-row-nm { font-size: 19px; }
	.gbs145-row > .gbs145-row-act {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		/* 4 px above and below the link: the row clips its corners, and the focus ring (2 px plus a 2 px offset) needs room */
		padding: 4px 13px;
		border-top: 1px solid var(--gbs145-line);
		text-align: left;
	}
	.gbs145-row .gbs145-row-go,
	.gbs145-row .gbs145-row-go:link,
	.gbs145-row .gbs145-row-go:visited { min-height: 48px; }
}

/* ---------- F1: game hub ---------- */

.gbs145-hub.gbs145-status {
	max-width: 760px;
	margin: 12px 0 20px;
	font: 600 21px/1.45 var(--gbs145-text, Inter, system-ui, sans-serif);
	letter-spacing: -.005em;
	color: var(--gbs145-ink);
	text-wrap: pretty;
}
.gbs145-status .gbs145-days {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--gbs145-ink);
	white-space: nowrap;
}
/* The one fact the status sentence leaves (the genre), as a plain line under the intro instead of a bordered box. */
.gbs145-hub.gbs145-fact {
	max-width: 760px;
	margin: 0 0 20px;
	font: 400 16px/1.5 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink-2);
}
.gbs145-hub.gbs145-fact > b {
	font-weight: 700;
	color: var(--gbs145-ink);
}

.gbs145-hub.gbs145-sec { margin: 40px 0 52px; }
.gbs145-hub .gbs145-sec-h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gbs145-line);
}
.gbs145-hub .gbs145-sec-h h2 {
	margin: 0;
	font: 700 30px/1.05 var(--gbs145-display, "GB Barlow Condensed", Inter, system-ui, sans-serif);
	letter-spacing: .005em;
	color: var(--gbs145-ink);
}
.gbs145-hub .gbs145-sec-h small {
	flex: none;
	font: 600 12px/1.3 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink-3);
}

/* Trailer row: plain story links first; features-hub.js turns a picture into a play button once it finds the video. */
.gbs145-trailers .gbs145-vids {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* One server card: the trailer is the large player and one place stays for an official video (desktop only; the
   narrow screens scroll). */
@media (min-width: 901px) {
	.gbs145-trailers .gbs145-vids.is-one { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.gbs145-vids > .gbs145-vid { position: relative; min-width: 0; margin: 0; padding: 0; list-style: none; }
.gbs145-vid .gbs145-vid-thumb {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--gbs145-r, 14px);
	background: #000;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
}
.gbs145-vid .gbs145-vid-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}
.gbs145-vid .gbs145-vid-thumb iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.gbs145-vid .gbs145-vid-play {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px 7px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--gbs145-surface) 88%, transparent);
	font: 700 12px/1 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink);
	pointer-events: none;
}
.gbs145-vid .gbs145-vid-play::before {
	content: "";
	width: 9px;
	height: 12px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.gbs145-vid .gbs145-vid-t {
	display: -webkit-box;
	min-height: calc(2em * 1.35);
	margin: 10px 0 3px;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font: 600 16px/1.35 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink);
}
.gbs145-vid .gbs145-vid-t a,
.gbs145-vid .gbs145-vid-t a:link,
.gbs145-vid .gbs145-vid-t a:visited {
	color: inherit;
	text-decoration: none;
	touch-action: manipulation;
}
/* The title link opens the story. Its target is the whole card under the picture (title and "From our" line, well over
   44 px tall); the picture and the play button sit above it (z-index 1), so a tap there still plays. */
.gbs145-vid .gbs145-vid-t a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.gbs145-vid .gbs145-vid-from {
	margin: 0;
	font: 600 11px/1.3 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink-3);
}

/* Timeline: the story grid regrouped by month, newest first. */
.gbs145-tl .gbs145-tl-month {
	margin: 24px 0 6px 30px;
	font: 700 12px/1.2 var(--gbs145-text, Inter, system-ui, sans-serif);
	letter-spacing: .04em;
	color: var(--gbs145-ink-3);
}
.gbs145-tl .gbs145-sec-h + .gbs145-tl-month { margin-top: 6px; }
.gbs145-tl ol {
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
	list-style: none;
}
.gbs145-tl ol::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--gbs145-line-2);
}
.gbs145-tl ol > li {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 132px;
	gap: 18px;
	align-items: center;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--gbs145-line);
	list-style: none;
}
.gbs145-tl ol > li::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border: 2px solid var(--gbs145-red);
	border-radius: 50%;
	background: var(--gbs145-surface);
}
.gbs145-tl ol > li > time {
	font: 600 13px/1.3 var(--gbs145-text, Inter, system-ui, sans-serif);
	font-variant-numeric: tabular-nums;
	color: var(--gbs145-ink-3);
}
.gbs145-tl .gbs145-tl-t,
.gbs145-tl .gbs145-tl-t:link,
.gbs145-tl .gbs145-tl-t:visited {
	font: 600 17px/1.4 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
	touch-action: manipulation;
}
/* The whole row is the story link (one target per story, at least the row's 54 to 74 px height). */
.gbs145-tl .gbs145-tl-t::after {
	content: "";
	position: absolute;
	inset: 0;
}
.gbs145-tl .gbs145-tl-ph {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--gbs145-r-s, 6px);
	background: var(--gbs145-surface-2);
}
.gbs145-tl .gbs145-tl-ph img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Quick answers (stretch, Panos decides): printed server-side, shown only with ?s145on=qa, so nothing shifts. */
.gbs145-hub.gbs145-qa { display: none; margin: 30px 0 0; max-width: 760px; }
.gbs145-qa > h2 {
	margin: 0 0 8px;
	font: 700 30px/1.05 var(--gbs145-display, "GB Barlow Condensed", Inter, system-ui, sans-serif);
	color: var(--gbs145-ink);
}
.gbs145-qa .gbs145-qa-item {
	padding: 16px 0 17px;
	border-top: 1px solid var(--gbs145-line);
}
.gbs145-qa .gbs145-qa-item h3 {
	margin: 0 0 6px;
	font: 700 21px/1.2 var(--gbs145-display, "GB Barlow Condensed", Inter, system-ui, sans-serif);
	color: var(--gbs145-ink);
}
.gbs145-qa .gbs145-qa-item p {
	max-width: 62ch;
	margin: 0;
	font: 400 17px/1.6 var(--gbs145-text, Inter, system-ui, sans-serif);
	color: var(--gbs145-ink-2);
}

@media (max-width: 900px) {
	.gbs145-hub.gbs145-status { font-size: 19px; }
	.gbs145-hub .gbs145-sec-h h2,
	.gbs145-qa > h2 { font-size: 27px; }
	/* Phone and tablet: the trailers become one swipeable row (native scroll with snap points), so the page never scrolls
	   sideways. A card is at most 340 px wide, so a tablet shows two and the start of a third, not one huge trailer. The
	   4 px of padding (taken back by the margin) leave room for the focus ring, which the scroller would clip. */
	.gbs145-trailers .gbs145-vids {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: min(82%, 340px);
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 4px;
		margin: -4px -4px 0;
		padding: 4px 4px 16px;
	}
	.gbs145-hub.gbs145-sec { margin: 32px 0 36px; }
	.gbs145-vids > .gbs145-vid { scroll-snap-align: start; }
	.gbs145-tl ol { padding-left: 24px; }
	.gbs145-tl ol::before { left: 6px; }
	.gbs145-tl ol > li { grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 14px; }
	.gbs145-tl ol > li::before { left: -23px; }
	.gbs145-tl ol > li > time { grid-column: 1 / -1; }
	.gbs145-tl .gbs145-tl-t,
	.gbs145-tl .gbs145-tl-t:link,
	.gbs145-tl .gbs145-tl-t:visited { font-size: 16px; }
	.gbs145-tl .gbs145-tl-month { margin-left: 24px; }
}

/* ---------- F6 (stretch): day counts inside the /upcoming-games/ calendar rows ---------- */

/* The count follows the row's date (the live row is a wrapping flex line) and keeps to the row's right edge. The body
   token tx-features adds (.gbs145-fx-cal) lifts it over the live ".gb-cal-list span" rule without !important. */
.gbs145-fx-cal .gbs145-cal-d {
	margin-left: auto;
	font: 700 15px/1.35 var(--gbs145-text, Inter, system-ui, sans-serif);
	font-variant-numeric: tabular-nums;
	color: var(--gbs145-ink);
	white-space: nowrap;
}

/* ---------- Pointer and motion (hover only where it exists; motion only when asked for) ---------- */

@media (hover: hover) and (pointer: fine) {
	.gbs145-tl .gbs145-tl-t:hover,
	.gbs145-vid .gbs145-vid-t a:hover { text-decoration: underline; text-underline-offset: 3px; }
	.gbs145-row .gbs145-row-go:hover { text-decoration-thickness: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
	.gbs145-vid .gbs145-vid-thumb img { transition: scale 350ms cubic-bezier(.23, 1, .32, 1); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.gbs145-vid button.gbs145-vid-thumb:hover img { scale: 1.03; }
}

/* ============================================================ B. @layer s145 (live elements, Day values) =========== */

@layer s145 {
	/* The hub eyebrow «GamingBroject // Game hub» goes: the H1 says what the page is (humanize: fewer labels). */
	body.tax-gb_game main.gb-game-hub > p.gb-game-kicker { display: none !important; }

	/* Quick answers show only with ?s145on=qa (plan 3.7: zero-specificity guard, hidden-safe). */
	:where(html.s145-on-qa) .gbs145-hub.gbs145-qa:not([hidden]):not(.hz-hidden) { display: block !important; }

	/* "Also free right now" is a p with role heading, so humanize's display face for h1 to h3 misses it and gbu's
	   site-wide text face (!important) would win: it takes the display face here, exactly when the Comments title under
	   it has it (humanize on), and the text face with ?gbhuman=0 like that title. */
	:where(html.gb-human) .gbs145-free-now .gbs145-free-h { font-family: var(--gbs145-display, "GB Barlow Condensed", Inter, system-ui, sans-serif) !important; }

	/* Humanize rounds every button to its control radius (!important); a trailer frame is media and keeps the panel
	   radius before (a link), after (the play button) and while playing. */
	.gbs145-vid .gbs145-vid-thumb { border-radius: var(--s145-r-l, 14px) !important; }

	/* Day mode: gbl's catch-all sets every text to ink and every border to one line (!important). The lab's own
	   elements get their Day colours back from the shared tokens; the fallbacks are the Day values themselves. */
	html[data-gb-theme="light"] :is(.gbs145-row .gbs145-row-meta, .gbs145-row .gbs145-row-meta > .gbs145-row-store) { color: var(--s145-warm, #7a6450) !important; }
	html[data-gb-theme="light"] .gbs145-row .gbs145-row-wait { color: var(--s145-wait, #8a5a00) !important; }
	html[data-gb-theme="light"] :is(.gbs145-row .gbs145-row-when, .gbs145-qa .gbs145-qa-item p, .gbs145-hub.gbs145-fact) { color: var(--s145-ink-2, #4f4958) !important; }
	html[data-gb-theme="light"] :is(.gbs145-free-note, .gbs145-tl .gbs145-tl-month, .gbs145-tl ol > li > time,
		.gbs145-hub .gbs145-sec-h small, .gbs145-vid .gbs145-vid-from, .gbs145-vid .gbs145-vid-from > time) { color: var(--tx-3, #6a6474) !important; }
	html[data-gb-theme="light"] :is(.gbs145-free-now .gbs145-free-h, .gbs145-hub.gbs145-fact > b) { color: var(--s145-ink, #15121b) !important; }
	/* Separators: the shared Day hairline, not gbl's catch-all line (the row outline is set below). */
	html[data-gb-theme="light"] :is(.gbs145-hub .gbs145-sec-h, .gbs145-tl ol > li, .gbs145-qa .gbs145-qa-item, .gbs145-row > .gbs145-row-act) { border-color: var(--s145-hairline, #e4e0ea) !important; }
	html[data-gb-theme="light"] .gbs145-row .gbs145-row-go { color: var(--cyan, #007385) !important; }
	html[data-gb-theme="light"] .gbs145-row.is-closing .gbs145-row-left { color: var(--s145-red-text, #b80d32) !important; }
	html[data-gb-theme="light"] .gbs145-free-list > .gbs145-row {
		background-color: var(--s145-surface-2, #f4f2f7) !important;
		border-color: var(--s145-hairline, #e4e0ea) !important;
	}
	/* On articles the strip sits on the page ground beside white cards, so its rows are cards too. */
	html[data-gb-theme="light"] .gbs145-free-now .gbs145-free-list > .gbs145-row { background-color: var(--s145-surface-1, #ffffff) !important; }
	html[data-gb-theme="light"] :is(.gbs145-row > .gbs145-row-ph, .gbs145-tl .gbs145-tl-ph, .gbs145-vid .gbs145-vid-thumb) { background-color: #ece9f1 !important; }
	html[data-gb-theme="light"] .gbs145-tl ol > li::before { border-color: var(--s145-red, #d1123a) !important; background-color: var(--s145-surface-1, #ffffff) !important; }
	html[data-gb-theme="light"] .gbs145-vid .gbs145-vid-play { background-color: rgba(255, 255, 255, .92) !important; color: #15121b !important; }

	/* Flat black ground (?s145black=1, Panos decides): the lab's rows follow the live cards (no outline). */
	html.s145-black:not(.gb-hw):not([data-gb-theme="light"]) .gbs145-free-list > .gbs145-row { border-color: transparent !important; }
}