/* TS Theme Switch - review button. Fixed colours on purpose: it must look the same in both themes. */
.tsts {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
	font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tsts__label {
	padding: 0 8px 0 10px;
	color: #444;
	font-weight: 600;
	letter-spacing: .02em;
}

.tsts button {
	appearance: none;
	border: 0;
	margin: 0;
	padding: 9px 14px;
	border-radius: 999px;
	background: transparent;
	color: #222;
	font: inherit;
	cursor: pointer;
	min-height: 36px;
}

.tsts button:hover {
	background: rgba(0, 0, 0, .06);
}

.tsts button[aria-pressed="true"] {
	background: #222;
	color: #fff;
}

.tsts button:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.tsts {
		left: 10px;
		bottom: 10px;
	}

	.tsts__label {
		display: none;
	}
}

/* Four options: tighter on phones, wrap if the screen is very narrow. */
@media (max-width: 600px) {
	.tsts {
		flex-wrap: wrap;
		max-width: calc(100vw - 20px);
		border-radius: 22px;
	}

	.tsts button {
		padding: 8px 10px;
		font-size: 12px;
		min-height: 34px;
	}
}