/*
 * City Sorter trial: the standalone trial page and the trial part of the unified game page.
 * The board itself is the platform's sortable-game.css. States use text and icons, never color alone
 * (A11Y-B08-007).
 */

.city-sorter-trial {
	max-width: 46rem;
}

.city-sorter-trial__result[data-kind="correct"] {
	--gp-sortable-state: var(--gp-sortable-success);
}

.city-sorter-trial__result[data-kind="expired"],
.city-sorter-trial__result[data-kind="rateLimited"] {
	--gp-sortable-state: var(--gp-sortable-warning);
}

/* Once a trial game has cities or a result, the mode launcher steps aside; Another trial game continues. */
.city-sorter-game:has(> [data-city-sorter-trial-content] > [data-trial-list] > li) > .city-sorter-game__launch,
.city-sorter-game:has(> [data-city-sorter-trial-content] > [data-trial-result]:not([hidden])) > .city-sorter-game__launch {
	display: none;
}

/* Next to the full game, the trial is the secondary choice. */
.city-sorter-game__button + .city-sorter-trial__button {
	border-color: var(--gp-sortable-border-strong);
	background: transparent;
	box-shadow: none;
	color: var(--gp-sortable-text);
}

.city-sorter-game__button + .city-sorter-trial__button:hover {
	border-color: var(--gp-sortable-text);
	background: var(--gp-sortable-surface-raised);
	box-shadow: none;
}

/* Trial limitations: an inline disclosure below the launch buttons. */
.city-sorter-trial-info {
	flex-basis: 100%;
	color: var(--gp-sortable-muted);
	font-size: 0.9375rem;
}

.city-sorter-trial-info > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.city-sorter-trial-info > summary::-webkit-details-marker {
	display: none;
}

.city-sorter-trial-info > summary:focus-visible {
	outline: var(--gp-sortable-focus);
	outline-offset: 2px;
}

.city-sorter-trial-info ul {
	margin: 0.25rem 0 0;
	padding: 0.75rem 1rem 0.75rem 2rem;
	border-radius: var(--gp-sortable-radius);
	background: var(--gp-sortable-surface);
}

.city-sorter-trial__badge {
	display: inline-block;
	margin: 0 0 0.625rem;
	padding: 0.2em 0.75em;
	border: 1px solid color-mix(in srgb, var(--gp-highlight, currentColor) 50%, var(--gp-sortable-canvas));
	border-radius: var(--gp-radius-pill, 4px);
	background: color-mix(in srgb, var(--gp-highlight, currentColor) 10%, var(--gp-sortable-canvas));
	color: var(--gp-highlight, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}