/* Inherits the theme's font and color. Override --smp-cv-accent in the theme or Customizer CSS. */
.smp-cv {
	--smp-cv-accent: #c8102e;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-top: .5rem;
}
.smp-cv__btn {
	font: inherit;
	font-weight: 600;
	padding: .55em 1.4em;
	border: 2px solid var(--smp-cv-accent);
	border-radius: 4px;
	background: var(--smp-cv-accent);
	color: #fff;
	cursor: pointer;
	min-height: 44px; /* tap target */
}
.smp-cv__btn:hover:not(:disabled) { filter: brightness(.9); }
.smp-cv__btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.smp-cv__btn:disabled { cursor: default; opacity: .6; }
.smp-cv.is-voted .smp-cv__btn { background: transparent; color: var(--smp-cv-accent); opacity: 1; }
.smp-cv__count { font-weight: 600; }
.smp-cv__msg { flex-basis: 100%; font-size: .875em; min-height: 1.2em; }
.smp-cv.has-error .smp-cv__msg { color: #b00020; }

.smp-cv-board { list-style: decimal; padding-left: 1.5em; margin: 0; }
.smp-cv-board__row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.smp-cv-board__img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.smp-cv-board__name { flex: 1; font-weight: 600; }
.smp-cv-board__votes { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.smp-cv__btn { transition: none; }
}