/* Steam reviews — the Steam review block on a review page (/item.php,
   steamRenderReviewBlock()). The /steam-reviews/ listing itself is a regular
   poster page and uses main.css. Site tokens only, so the theme, dark mode and
   high contrast carry through; the verdict is the one colour of its own
   (green / red), always with its word and thumb beside it. */

[data-component="steam-review"] {
	--sr-line: color-mix(in srgb, var(--primary-color) 14%, transparent);
	--sr-card: color-mix(in srgb, var(--primary-color) 3%, var(--bg-color));
	--sr-muted: color-mix(in srgb, var(--primary-text-color) 68%, var(--bg-color));
	--sr-radius: 0.75rem;
	/* Dark enough for small bold text on the card (≥ 4.5 : 1). */
	--sr-up: #22692b;
	--sr-down: #a8291d;
}

[data-accessibility~="dark"] [data-component="steam-review"] {
	--sr-up: #6cc275;
	--sr-down: #ef7a6c;
}

/* High contrast: the verdict in the theme's own text colour; 👍 / 👎 and the
   word tell them apart. */
[data-accessibility~="high-contrast"] [data-component="steam-review"] {
	--sr-up: var(--primary-text-color);
	--sr-down: var(--primary-text-color);
}

/* ── The verdict ──────────────────────── */
[data-component="steam-review"] [data-part="verdict"] {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	width: fit-content;
	padding: 0.1rem var(--spacing-x-small);
	border-radius: 999px;
	font-size: var(--font-size-small);
	font-weight: 700;
}

[data-verdict="up"] [data-part="verdict"] {
	color: var(--sr-up);
	background: color-mix(in srgb, var(--sr-up) 12%, transparent);
}

[data-verdict="down"] [data-part="verdict"] {
	color: var(--sr-down);
	background: color-mix(in srgb, var(--sr-down) 12%, transparent);
}

[data-part="thumb"] {
	font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* ── The Steam review on a review page (/item.php) ───────────────────── */
/* The card itself (border, padding, width) is item.css, shared with the
   written review. Here: the heading and the verdict on one row. */
[data-component="steam-review"] [data-part="head"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-x-small) var(--spacing-normal);
}

[data-component="steam-review"] [data-part="head"] h2 {
	margin: 0;
}

[data-component="steam-review"] [data-part="facts"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xx-small) var(--spacing-normal);
	margin: var(--spacing-small) 0 var(--spacing-normal);
	padding: 0;
	list-style: none;
	font-size: var(--font-size-small);
	color: var(--sr-muted);
}

[data-component="steam-review"] [data-part="facts"] li {
	margin: 0;
	padding: 0;
	text-indent: 0;
}

[data-component="steam-review"] [data-part="facts"] li::before {
	content: none;
}

[data-component="steam-review"] [data-part="text"] {
	padding-left: var(--spacing-normal);
	border-left: 0.15rem solid var(--sr-line);
}

[data-component="steam-review"][data-verdict="up"] [data-part="text"] {
	border-left-color: color-mix(in srgb, var(--sr-up) 55%, transparent);
}

[data-component="steam-review"][data-verdict="down"] [data-part="text"] {
	border-left-color: color-mix(in srgb, var(--sr-down) 55%, transparent);
}

[data-component="steam-review"] [data-part="store"] {
	margin-top: var(--spacing-normal);
	font-weight: 600;
}