/*
 * Temporary audience poll (js/poll.js builds the markup; inc/poll.php loads
 * this only on target pages inside the date window, after style.css).
 *
 * A peach callout with a heavy red top rule and solid red answer buttons, so
 * it reads as its own thing rather than part of the article (the first, grey
 * version was easy to scroll past). No uppercase label. The poll sits directly
 * inside .atb-content, so ".atb-content > *" already caps and centres it.
 *
 * style.css has no dark-mode rules (the theme is light only), so none here.
 * No transform, filter or containing-block properties: this lives inside
 * .atb-article, where Rule 1 forbids them. The dismiss button is positioned
 * with absolute offsets, which are allowed.
 */

.atb-poll {
	/*
	 * The theme has no tan or peach token, and this colour is used nowhere
	 * else, so it stays local (and out of the --atb- namespace) rather than
	 * adding a token to style.css that would outlive the poll. Ink on it is
	 * about 16:1; the red buttons' white text is 7.3:1 on the red itself.
	 */
	--poll-ground: #F8E7DD;

	position: relative;
	margin-block: var(--atb-sp5);
	padding: var(--atb-sp5);
	border-top: 6px solid var(--atb-red);
	background: var(--poll-ground);
	color: var(--atb-ink);
}

/* Two classes throughout: .atb-article p (0,1,1) and the global h2 rules
   would otherwise set these margins and fonts. */
.atb-poll .atb-poll-title {
	margin: 0 0 var(--atb-sp2);
	/* Clear of the dismiss button in the corner. */
	padding-right: 2.5rem;
	font: var(--atb-h3);
	letter-spacing: var(--atb-track-h3);
	color: var(--atb-ink);
}

.atb-poll .atb-poll-intro {
	margin: 0 0 var(--atb-sp4);
	font: var(--atb-body);
	color: var(--atb-ink);
}

.atb-poll .atb-poll-q {
	margin: 0 0 var(--atb-sp3);
	font: var(--atb-lede);
	font-weight: 700;
	color: var(--atb-ink);
}

.atb-poll-answers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--atb-sp2);
}

.atb-poll-btn {
	min-height: 2.75rem;
	padding: 0.5rem var(--atb-sp4);
	border: 1px solid var(--atb-red);
	border-radius: var(--atb-radius);
	background: var(--atb-red);
	color: var(--atb-paper);
	font-family: var(--atb-font);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.atb-poll-btn:hover {
	border-color: var(--atb-red-deep);
	background: var(--atb-red-deep);
}

.atb-poll-x {
	position: absolute;
	top: var(--atb-sp1);
	right: var(--atb-sp1);
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--atb-ink);
	font-family: var(--atb-font);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.atb-poll-x:hover {
	color: var(--atb-red);
}

.atb-poll-btn:focus-visible,
.atb-poll-x:focus-visible,
.atb-poll-live:focus-visible {
	outline: 2px solid var(--atb-ink);
	outline-offset: 3px;
}

/* The thank-you takes over the box under the title; ground and rule stay. */
.atb-poll .atb-poll-live {
	margin: 0;
	font: var(--atb-lede);
	color: var(--atb-ink);
}

.atb-poll-live:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.atb-poll-btn { transition: none; }
}

/* Forced colours drop backgrounds and rules, so the box and every button
   carry a real border in system colours, and the hover fill is replaced by
   the system highlight pair. */
@media (forced-colors: active) {
	.atb-poll {
		border: 1px solid CanvasText;
	}

	.atb-poll-btn,
	.atb-poll-x {
		border: 1px solid ButtonText;
		color: ButtonText;
	}

	.atb-poll-btn:hover,
	.atb-poll-x:hover {
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
	}

	.atb-poll-btn:focus-visible,
	.atb-poll-x:focus-visible,
	.atb-poll-live:focus-visible {
		outline-color: Highlight;
	}
}