/**
 * MER Polls — component styles.
 *
 * WHY THIS FILE EXISTS AT ALL
 *
 * The poll used to lean on Tailwind utility classes and ship no CSS. That
 * silently did nothing: MER-theme compiles Tailwind from `@source
 * '../../**\/*.php'` — its OWN PHP only — so a utility that appears just in
 * this plugin's markup is never generated and arrives as a no-op class. The
 * committed evidence screenshots showed the result: no card border, no option
 * borders, no padding. CI is worse again, because there the plugin is
 * assembled into a theme with no Tailwind at all.
 *
 * So the component owns its own stylesheet, keyed off stable `mer-poll*`
 * hooks. Every colour comes from MER-theme's design tokens, referenced as the
 * custom properties WordPress emits from `theme.json`, each with the theme's
 * own hex as the fallback — the same idiom the theme uses in
 * `resources/css/app.css`. That fallback is what makes the poll render
 * correctly in CI and under any other theme.
 *
 * The "ink" variants are deliberate, not arbitrary darkenings: #5b9a3f and
 * #808080 fail WCAG AA 4.5:1 for small text on the cream page background, and
 * the E2E axe gate enforces that. Small text ON CREAM uses ink; borders and
 * other non-text uses may take the true brand hexes. Text on a filled block
 * is judged against that block instead — which is why the selected option's
 * label is plain lime on deep-forest (10.9:1) and needs no ink variant.
 */

.mer-poll {
	background: var( --wp--preset--color--page-bg, #fffcf8 );
	border: 1px solid var( --wp--preset--color--hairline, #999999 );
	color: var( --wp--preset--color--foreground, #1a1a1a );
	padding: 24px;
}

/*
 * Font is the theme's, not ours: inherit rather than naming a stack, so the
 * poll picks up Inter under MER-theme and the host theme's face elsewhere.
 */
.mer-poll,
.mer-poll input,
.mer-poll select,
.mer-poll textarea,
.mer-poll button {
	font-family: inherit;
}

.mer-poll__eyebrow {
	color: var( --wp--custom--ink--primary, #497b32 );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.mer-poll__fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

/*
 * A <legend> is not in normal flow, so its margins collapse oddly across
 * browsers. Give it a plain block layout and space the stack below it from the
 * options container instead.
 */
.mer-poll__question {
	color: var( --wp--preset--color--foreground, #1a1a1a );
	display: block;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
	margin: 14px 0 0;
	padding: 0;
	width: 100%;
}

.mer-poll__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.mer-poll__option {
	border: 1px solid var( --wp--preset--color--hairline, #999999 );
	border-radius: 5px;
	color: var( --wp--preset--color--foreground, #1a1a1a );
	cursor: pointer;
	display: block;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
	position: relative;
	text-align: left;

	/*
	 * The trailing gutter is reserved on EVERY option, selected or not, so the
	 * checkmark appearing does not reflow the label text. Leading space is
	 * deliberately not reserved: the mock has the text starting at the padding
	 * edge, which is only possible because the native control is out of flow.
	 */
	padding: 14px 40px 14px 18px;
}

.mer-poll__option-label {
	display: block;
}

/* Dropdown, typeahead and free-text controls — same card vocabulary. */
.mer-poll__control {
	background: transparent;
	border: 1px solid var( --wp--preset--color--hairline, #999999 );
	border-radius: 5px;
	color: var( --wp--preset--color--foreground, #1a1a1a );
	font-size: 18px;
	padding: 12px 16px;
	width: 100%;
}

.mer-poll__submit {
	background: transparent;
	border: 1px solid var( --wp--custom--ink--primary, #497b32 );
	border-radius: 5px;
	color: var( --wp--custom--ink--primary, #497b32 );
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	margin-top: 18px;
	padding: 10px 20px;
}

.mer-poll__submit:disabled {
	cursor: default;
	opacity: 0.6;
}

/*
 * "You have answered everything" — the end of the road for a hide-answered
 * placement. Sized like the question it replaces, because it IS the card's
 * content in that state, not a footnote to it.
 */
.mer-poll__complete {
	color: var( --wp--preset--color--foreground, #1a1a1a );
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
	margin: 14px 0 0;
}

/*
 * A hide-answered placement may resolve to a different poll, to a poll the
 * reader has already answered, or to the thank-you above — so the shell the
 * cache served is hidden for the one REST round trip it takes to find out,
 * rather than flashing a poll up and taking it away. `visibility` and not
 * `display`: the space stays reserved, so the page does not jump. Added and
 * removed by the client, so a reader without JavaScript never meets it.
 */
.mer-poll--resolving {
	visibility: hidden;
}

.mer-poll__message {
	color: var( --wp--custom--ink--meta, #6d6d6d );
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	margin: 12px 0 0;
}

.mer-poll__message:empty {
	display: none;
}

.mer-poll__results {
	margin-top: 18px;
}

/*
 * The client hides the form and the results panel with the `hidden` attribute
 * (and a `hidden` class that only exists under Tailwind). Nothing above sets
 * `display` on either, but say so explicitly rather than relying on that
 * staying true — a stylesheet rule would otherwise beat the UA's
 * `[hidden] { display: none }` and leave the answered poll showing its form.
 */
.mer-poll [hidden] {
	display: none;
}

/*
 * Everything below depends on `:has()`, and they depend on it TOGETHER on
 * purpose. Without it the native radios/checkboxes stay visible and the Vote
 * button stays where it has always been — today's behaviour, degraded but
 * fully usable. Hiding the controls or the button outside this gate would
 * leave a browser that cannot evaluate `:checked` upward with an unvotable
 * poll, and the no-JS submit path exists precisely so that never happens.
 */
@supports selector( :has( * ) ) {

	/*
	 * Visually hidden, NOT `display: none` and NOT `visibility: hidden`: the
	 * input has to stay in the accessibility tree, stay focusable, keep arrow
	 * keys working across a radio group, and keep posting to admin-post.php
	 * without JavaScript.
	 *
	 * It is hidden by making it transparent and stretching it over the whole
	 * option, rather than by the usual 1px `screen-reader-text` clip. The clip
	 * pattern is for text; applied to a control it removes the control from hit
	 * testing, so the visible thing a pointer lands on is the label and the
	 * input can no longer be clicked at all. Covering the row keeps the input
	 * itself the hit target — which is also the behaviour the design implies,
	 * since the rounded rectangle IS the control as far as the reader is
	 * concerned.
	 */
	.mer-poll__option-input {
		appearance: none;
		border: 0;
		cursor: pointer;
		height: 100%;
		inset: 0;
		margin: 0;
		opacity: 0;
		padding: 0;
		position: absolute;
		width: 100%;
	}

	/*
	 * The selected option is a FILLED block, not an outline. An outlined
	 * treatment (green border + green label on the same cream the unselected
	 * rows sit on) read as too close to unselected — the only difference was
	 * the stroke colour, at a stroke width shared with every other row. A
	 * solid deep-forest fill changes the row's whole value, so "which one did
	 * I pick" is answered by the block, not by a hue comparison.
	 *
	 * The border takes deep-forest too, so the row reads as one solid block
	 * rather than a fill inside a contrasting outline. Keeping the border on
	 * (rather than dropping it to 0) is what stops the row changing size on
	 * selection.
	 *
	 * Lime on deep-forest is 10.9:1 — AAA — so the label is more legible here
	 * than it was as ink-primary on cream, not less.
	 */
	.mer-poll__option:has( .mer-poll__option-input:checked ) {
		background: var( --wp--preset--color--deep-forest, #00302b );
		border-color: var( --wp--preset--color--deep-forest, #00302b );
		color: var( --wp--preset--color--lime, #d9e896 );
	}

	/*
	 * Decorative only — `content: ""` keeps it out of the accessibility tree,
	 * where the input's own checked state is what assistive tech reports. It
	 * is a CSS tick rather than a glyph in the markup so the no-JS path needs
	 * no extra DOM, and it sits at the TRAILING edge: a leading mark would
	 * either reflow the label on selection or force a permanent indent, and
	 * the design has neither.
	 *
	 * It takes the label's lime rather than the border's deep-forest: it sits
	 * INSIDE the filled block, where deep-forest on deep-forest would be
	 * invisible.
	 */
	.mer-poll__option:has( .mer-poll__option-input:checked )::after {
		border: solid var( --wp--preset--color--lime, #d9e896 );
		border-width: 0 2px 2px 0;
		content: "";
		height: 12px;
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY( -65% ) rotate( 45deg );
		width: 6px;
	}

	/*
	 * With the control clipped away, the label IS the visible control — so it
	 * has to carry the focus ring, or a keyboard user loses the cursor
	 * entirely. `:focus-visible` rather than `:focus` so clicking an option
	 * does not leave a ring behind.
	 */
	.mer-poll__option:has( .mer-poll__option-input:focus-visible ) {
		outline: 2px solid var( --wp--preset--color--primary, #5b9a3f );
		outline-offset: 2px;
	}

	/*
	 * The Vote button is meaningless until something is selected, so it is not
	 * shown until then — driven by CSS, never by JavaScript. Voting without JS
	 * is a deliberate feature of this plugin; a JS-revealed button would make
	 * the poll unanswerable for anyone whose scripts never run.
	 *
	 * Scoped to `.mer-poll--choice`. Dropdown, typeahead and free-text polls
	 * keep their always-visible button: "has a value" is not expressible in
	 * CSS for those, and adding JS to express it would reintroduce exactly the
	 * regression this rule avoids.
	 */
	.mer-poll--choice .mer-poll__submit {
		display: none;
	}

	.mer-poll--choice
		.mer-poll__form:has( .mer-poll__option-input:checked )
		.mer-poll__submit {
		animation: mer-poll-reveal 220ms ease-out both;
		display: inline-block;
	}

	@media ( prefers-reduced-motion: reduce ) {

		.mer-poll--choice
			.mer-poll__form:has( .mer-poll__option-input:checked )
			.mer-poll__submit {
			animation: none;
		}
	}
}

@keyframes mer-poll-reveal {

	from {
		opacity: 0;
		transform: translateY( -8px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}