/*
 * «Пиши грамотно» — опитування «а ти знав».
 *
 * Окремий файл, не pysh-tools.css: блок сайтвайд (osn_content_after,
 * як «Настрій Марева» на marevo.net.ua), не використовує обгортку
 * .pysh-tool — власна розмітка й підключається за іншою умовою
 * (увімкнено в Customizer, а не шорткод/віджет).
 */

.pysh-poll {
	padding: 22px 0;
	background: var(--pysh-surface-alt);
	border-top: 1px solid var(--pysh-line);
	border-bottom: 1px solid var(--pysh-line);
}

.pysh-poll__question {
	margin: 0 0 14px;
	font-family: var(--pysh-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--pysh-ink);
	text-wrap: balance;
}

.pysh-poll__example {
	margin: 0 0 14px;
	font-size: var(--osn-fs-small);
	font-style: italic;
	color: var(--pysh-ink-muted);
}

.pysh-poll__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.pysh-poll__option {
	display: grid;
	gap: 8px;
	padding: 12px 16px;
	background: var(--pysh-surface);
	border: 1px solid var(--pysh-line);
	border-radius: var(--pysh-r-md);
	text-align: left;
	cursor: pointer;
	transition-property: border-color, background-color, scale;
	transition-duration: .15s;
}

.pysh-poll__option:hover:not(:disabled) {
	border-color: var(--pysh-accent);
}

.pysh-poll__option:active:not(:disabled) {
	scale: .97;
}

.pysh-poll__option:disabled {
	cursor: default;
}

.pysh-poll__option.is-picked {
	border-color: var(--pysh-accent);
	background: var(--pysh-accent-soft);
}

.pysh-poll__option-bar {
	display: none;
	height: 6px;
	background: var(--pysh-surface-alt);
	border-radius: 100px;
	overflow: hidden;
}

.pysh-poll.is-voted .pysh-poll__option-bar {
	display: block;
}

.pysh-poll__option-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pysh-accent);
	border-radius: 100px;
	transition-property: width;
	transition-duration: .3s;
	transition-timing-function: ease-out;
}

.pysh-poll__option-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.pysh-poll__option-text {
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--pysh-ink);
}

.pysh-poll__option-pct {
	display: none;
	font-size: var(--osn-fs-meta);
	font-variant-numeric: tabular-nums;
	color: var(--pysh-ink-muted);
}

.pysh-poll.is-voted .pysh-poll__option-pct {
	display: inline;
}

.pysh-poll__total {
	margin: 12px 0 0;
	font-size: var(--osn-fs-meta);
	color: var(--pysh-ink-faint);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
	.pysh-poll__options {
		grid-template-columns: 1fr;
	}
}