/*
 * Vote-page-only rules (spec §5.5 step 1).
 *
 * The maroon top banner, `.pcfa-panel`, `.form-grid`, `.field`, `.consent-row`,
 * `.pcfa-hp-field`, `.pcfa-form-message`, every `.btn` variant and `.pcfa-empty`
 * all live in public.css and are not repeated here. What is left is the narrower
 * column this form sits in, the intro paragraph and the submit row.
 *
 * Metrics come from the approved prototype (`/home/claude/work/proto/vote.html`):
 * a 900px column, a 34px panel and a centred single action. Raw hex becomes the
 * semantic tokens and physical properties become logical ones, so the page mirrors
 * in Arabic without a second stylesheet.
 */

/* A voter-details form is five short fields; at the shared 1240px the labels and
   their inputs end up a hand-span apart and the pair stops reading as one thing. */
.vote-section .wrap {
	max-width: 900px;
}

.vote-panel {
	padding: 34px;
}

/* Both languages at the same size, one under the other rather than on a §2.5 row:
   this is a sentence, and the single-row treatment would leave a ragged gap down
   the middle of centred body copy. */
.vote-intro {
	margin-bottom: 24px;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--muted);
}

.vote-intro .ar {
	display: block;
	margin-top: 6px;
	color: var(--magenta);
}

.vote-form .consent-row {
	margin-bottom: 4px;
}

.vote-actions {
	display: flex;
	justify-content: center;
	margin-top: 6px;
}

/* The one action on the page, so it is allowed to be wide — but not the full
   width of a 900px column, which reads as a banner rather than a button. */
.vote-actions .btn {
	max-width: 320px;
	padding-block: 14px;
	font-size: 14.5px;
}

@media (max-width: 639px) {
	.vote-panel {
		padding: 22px 18px;
	}

	.vote-actions .btn {
		max-width: none;
	}
}