/*
 * People's Choice Awards — Fragrance Edition
 * Route stylesheet: Verify a Winner (spec §5.9).
 *
 * The filename is the underscored route key, which is how
 * Frontend\Assets::route_asset() finds it and enqueues it after public.css.
 *
 * Page-unique rules only. The maroon top banner, `.pcfa-panel`, `.field` and its
 * inputs, `.bi-row`, `.verify-block`, `.pcfa-code`, `.pcfa-empty` and the buttons
 * all live in public.css and are deliberately not repeated here.
 *
 * Metrics come from the approved prototype (`/home/claude/work/proto/verify.html`).
 * Its script is not the reference for anything — it reads an undefined global and
 * dies before the page works — but its layout is.
 */

/* ==========================================================================
   1. Column
   ========================================================================== */

/*
 * Narrower than the site's 1240px measure: this page is one field and one result,
 * and at full width the tab pair stretched into two enormous pills.
 */
.verify-wrap {
	max-width: 640px;
}

/* ==========================================================================
   2. Tabs
   ========================================================================== */

.verify-tabs {
	display: flex;
	gap: 8px;
	padding: 5px;
	margin-bottom: 24px;
	border-radius: 999px;
	background: var(--magenta-50);
}

.verify-tab {
	flex: 1 1 0;
	padding: 11px 8px;
	border: none;
	border-radius: 999px;
	background: none;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--magenta-deep);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.verify-tab:hover {
	background: var(--magenta-100);
}

/*
 * Selected state is driven by `aria-selected`, not by a class. There is then one
 * source of truth for which tab is current: a tab that looks selected is a tab
 * that announces itself as selected, and neither can be updated without the other.
 */
.verify-tab[aria-selected='true'] {
	background: var(--magenta-deep);
	color: var(--white);
}

/* ==========================================================================
   3. Enter Code panel
   ========================================================================== */

.code-input-row {
	display: flex;
	gap: 10px;
}

.code-input-row input[type='text'] {
	flex: 1 1 auto;
	/* Without this a long code stretches the flex item past the panel instead of
	   scrolling inside it. */
	min-width: 0;
}

.code-input-row .btn {
	flex: none;
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* Stacked on a narrow phone: side by side, the field was too short to show a
	   whole code and the button too narrow to read. */
	.code-input-row {
		flex-direction: column;
	}
}

/* ==========================================================================
   4. Scan QR panel
   ========================================================================== */

.qr-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

/*
 * The preview is `hidden` until a stream is attached, so the panel does not show an
 * empty black rectangle to somebody who has not asked for the camera yet. The
 * reserved aspect ratio means unhiding it does not shift the button underneath.
 */
.qr-video {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	background: var(--ink);
	object-fit: cover;
}

.qr-status {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
}

/* ==========================================================================
   5. Result
   ========================================================================== */

.verify-result {
	margin-top: 26px;
	border: 1.5px solid var(--magenta-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--white);
}

/*
 * `contain` on a dark panel, never `cover`: cropping a perfume bottle was rejected
 * during development (spec §5.2, §10), and this is the same photograph the winner
 * tiles show. The fixed height keeps the panel from jumping when a taller or
 * shorter image loads.
 */
.verify-result-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 260px;
	background: var(--ink);
}

.verify-result-hero img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.verify-result-body {
	padding: 24px 26px 26px;
}

.verify-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--magenta);
	color: var(--white);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The badge carries both languages, and on this pill the secondary half must not
   pick up the muted magenta the shared `.bi-row` gives it — the pill is already
   magenta. */
.verify-badge .ar {
	color: var(--magenta-100);
}

/*
 * The size sits on the row so both names inherit exactly the same one. A per-half
 * font-size is how a bilingual pair drifts apart (spec §2.5).
 */
.verify-names {
	margin-bottom: 16px;
	font-size: clamp(18px, 2.4vw, 22px);
	font-weight: 800;
}

.verify-result .verify-block {
	margin-bottom: 18px;
}

.verify-meta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 20px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--magenta-100);
}

.verify-meta dt,
.verify-meta dd {
	margin: 0;
}

/* Both halves of a micro-label at one size and weight, on one row (spec §2.5).
   The shared `.bi-row` handles the start/end placement; this only sets the size,
   once, on the row itself. */
.verify-meta .label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--magenta);
}

.verify-meta .value {
	margin-top: 4px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
}

.verify-meta .value a {
	color: var(--magenta-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.verify-meta .value a:hover {
	color: var(--magenta);
}

/* The category prints both languages, one under the other: the two values are the
   same length as each other and side by side they crowd the two-column grid. */
.verify-meta .value .ar {
	display: block;
	margin-top: 2px;
	color: var(--magenta);
}

.verify-empty {
	margin-top: 26px;
}

@media (max-width: 480px) {
	.verify-result-hero {
		height: 200px;
	}

	.verify-result-body {
		padding: 20px 18px 22px;
	}

	.verify-meta {
		grid-template-columns: 1fr;
	}
}