/* The console's own tokens, beside Tailwind: the focus ring every interactive
   element shares, the live indicator, toasts, and the palette's highlight. */

.focus-ring:focus-visible {
	outline: 2px solid rgb(14 165 233);
	outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
	.focus-ring:focus-visible {
		outline-color: rgb(56 189 248);
	}
}

#live.on {
	background: rgb(16 185 129);
	box-shadow: 0 0 0 3px rgb(16 185 129 / 0.25);
}

.toast {
	pointer-events: auto;
	min-width: 16rem;
	max-width: 24rem;
	border-radius: 0.5rem;
	border: 1px solid rgb(228 228 231);
	background: white;
	padding: 0.625rem 0.875rem;
	font-size: 0.875rem;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
	animation: toast-in 150ms ease-out;
}
.toast.bad {
	border-color: rgb(253 164 175);
	background: rgb(255 241 242);
	color: rgb(159 18 57);
}
@media (prefers-color-scheme: dark) {
	.toast {
		background: rgb(24 24 27);
		border-color: rgb(63 63 70);
		color: rgb(244 244 245);
	}
	.toast.bad {
		background: rgb(76 5 25 / 0.6);
		border-color: rgb(159 18 57);
		color: rgb(254 205 211);
	}
}
@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

#palette-results li[aria-selected="true"] {
	background: rgb(244 244 245);
}
@media (prefers-color-scheme: dark) {
	#palette-results li[aria-selected="true"] {
		background: rgb(39 39 42);
	}
}

/* A card that has keyboard focus: its shortcuts are armed. */
[data-item]:focus-within,
[data-item].armed {
	box-shadow: 0 0 0 2px rgb(14 165 233 / 0.5);
}

mark.quote {
	background: rgb(254 240 138 / 0.7);
	color: inherit;
	border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
	mark.quote {
		background: rgb(202 138 4 / 0.45);
	}
}