/**
 * FictionX Vote (the poll archive) - Frontend Styles
 *
 * The page shell below - tokens, hero, scrim, search pill, band, empty state - is
 * COPIED from assets/css/modules/updates/updates.css, as every module in this pass is.
 * If one of the shared values is changed, change the others.
 */

:root {
	--fxv-teal: #26667c;        /* the site's own --bs-primary */
	--fxv-teal-deep: #0E3D4C;
	--fxv-ink: #0B2B33;
	--fxv-muted: #5B7076;
	--fxv-mist: #EFF3F4;
	--fxv-rule: #DCE4E6;

	/* The theme's --bs-primary-rgb is 40,84,109, which is NOT --bs-primary (#26667c):
	   every rgba(var(--bs-primary-rgb), …) tint comes out a different blue. */
	--fxv-primary-rgb: 38, 102, 124;
}

[data-bs-theme="dark"] {
	/* The teal is ink and border in almost every rule below, and on the dark surface
	   #26667c measured 2.85:1 - under the 4.5:1 a 12.5px label needs. Lightened for
	   dark only, which repairs every teal word at once rather than per component.
	   Its one BACKGROUND use (.fxv-search-btn:hover, white text) is pinned back to the
	   deep teal further down, or that button would invert into pale-on-white. */
	--fxv-teal: #4FA3BA;
	--fxv-ink: #E8F0F2;
	--fxv-muted: #9FB3B9;
	--fxv-mist: #0F1B1F;
	--fxv-rule: rgba(255, 255, 255, .10);
}

/* ==============================================================================
   The hero, on the band header.dwt paints behind every module page
   ============================================================================== */
.fxv-hero {
	position: relative;
	z-index: 3;
	padding: 18px 0 0;
}
/* A one-way ramp: nothing at the top, where the band's video is left alone behind the
   nav, coming on through the lower half and ending opaque under the search pill.

   It was a near-opaque slab from edge to edge, which is the same mistake the library
   made: it read as a dark rectangle dropped on the page and drew a hard line where it
   met the bright band above it. Measured here at every width from 390 to 1920 — the
   scrim started at .87 immediately, so the cut was at the hero's top edge, around y=103
   on a desktop.

   The stops are deliberately uneven. A straight two-stop ramp spends most of its length
   pale, and that is the height at which the band's video changes tone, so the darkening
   is held back and then brought on quickly. These values are the library's, exactly —
   the two pages are meant to be indistinguishable here. */
.fxv-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(5, 27, 34, 0) 0%,
		rgba(5, 27, 34, .10) 30%,
		rgba(5, 27, 34, .34) 52%,
		rgba(5, 27, 34, .70) 74%,
		rgba(5, 27, 34, .92) 89%,
		rgba(5, 27, 34, 1) 100%);
	pointer-events: none;
}
/* Start-aligned, not centred: a centred column reads as a campaign banner over the
   site's video band, and `text-align: start` resolves to right in Arabic and left in
   English on its own. The 46px below was clearance for the pill that hung off the
   hero's lower edge; nothing straddles the seam now, so it is 26px. */
.fxv-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding-bottom: 26px;
}
.fxv-hero-crumbs .breadcrumb {
	justify-content: flex-start;
	margin-bottom: 6px;
	opacity: .85;
}
.fxv-hero-crumbs .breadcrumb-item,
.fxv-hero-crumbs .breadcrumb-item a {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 500;
}
/* The crumbs carry Metronic's .text-hover-primary, whose rule is
   `color: var(--bs-text-primary) !important` — #26667c, the hero's own colour, so a
   hovered crumb vanished. Colour is not winnable here (.text-white is !important too),
   so the feedback rides on opacity. */
.fxv-hero-crumbs .breadcrumb-item.opacity-75 {
	opacity: .72 !important;
	transition: opacity .2s ease;
}
.fxv-hero-crumbs .breadcrumb-item.opacity-75:hover {
	opacity: 1 !important;
}
.fxv-hero-crumbs .breadcrumb-item a:hover {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.fxv-hero-title {
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 18px + 3.2vw, 56px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
.fxv-hero-sub {
	/* Not `auto`: that re-centres the paragraph inside the start-aligned column. */
	margin: 14px 0 0;
	max-width: 54ch;
	color: rgba(255, 255, 255, .86);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.9;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------- the toolbar ----
   The search and the count, on one row above the cards: search at the reading-start
   edge, count at the other. `space-between` with the form first does that in both
   directions, so Arabic gets search-right/count-left and English the mirror without
   a single direction-specific rule.
   ------------------------------------------------------------------------------ */
.fxv-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 0 0 28px;
}
.fxv-toolbar-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------- the search ---
   It was a white elevated pill straddling the hero/band seam. On the band it is an
   ordinary field, the shape every other module's toolbar uses: 42px, one hairline,
   10px radius. */
.fxv-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: min(460px, 100%);
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}
.fxv-search-field {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;            /* or a long placeholder refuses to shrink */
	height: 42px;
	padding-inline: 14px;
	margin: 0;
	background: var(--bs-body-bg);
	border: 1px solid var(--fxv-rule);
	border-radius: 10px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.fxv-search-icon {
	flex: 0 0 auto;
	color: var(--fxv-muted);
	font-size: 15px;
}
.fxv-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--fxv-ink);
	font-size: 13.5px;
	font-weight: 500;
	padding: 0;
}
.fxv-search-input::placeholder {
	color: var(--fxv-muted);
	font-weight: 400;
	opacity: 1;
}
.fxv-search-input:focus {
	outline: 0;
}
/* The ring is the focus affordance, so it stays - on the FIELD now, which is the box
   that has an edge. On .fxv-search it would have drawn around the button too. */
.fxv-search-field:focus-within {
	border-color: var(--fxv-teal);
	box-shadow: 0 0 0 3px rgba(var(--fxv-primary-rgb), .18);
}
.fxv-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.fxv-search-btn {
	flex: 0 0 auto;
	height: 42px;
	border: 0;
	border-radius: 10px;
	background: var(--fxv-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	padding: 0 22px;
	transition: background .2s ease;
}
.fxv-search-btn:hover,
.fxv-search-btn:focus-visible {
	background: var(--fxv-teal);
}
[data-bs-theme="dark"] .fxv-search-btn:hover,
[data-bs-theme="dark"] .fxv-search-btn:focus-visible {
	background: #2E7E96;
}
[data-bs-theme="dark"] .fxv-search-field {
	background: #16262B;
}
[data-bs-theme="dark"] .fxv-search-btn {
	background: #2E7F96;
}
[data-bs-theme="dark"] .fxv-search-btn:hover {
	background: #3C9AB4;
}

.fxv-band {
	position: relative;
	z-index: 2;
	background: var(--fxv-mist);
	/* 86px used to clear the pill hanging off the hero. Nothing straddles the seam
	   now, so this is the ordinary band padding the other listings use. 46px / -46px
	   / 86px were one system and moved together - none of the three is left here. */
	padding: 40px 0 56px;
}

/* .fxv-resultline is gone from the markup: the count is no longer a row of its own
   with a rule under it, it is the toolbar's end-edge member. The two rules below are
   reused unchanged by both states - the idle count and the "N results for" line. */
.fxv-resultline-text {
	margin: 0;
	color: var(--fxv-muted);
	font-size: 15px;
	font-weight: 500;
}
.fxv-resultline-text strong {
	color: var(--fxv-ink);
	font-weight: 700;
}
.fxv-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fxv-teal);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.fxv-clear,
.fxv-clear:hover {
	transition: color .2s ease;
}
.fxv-clear:hover {
	color: var(--fxv-teal-deep);
}
[data-bs-theme="dark"] .fxv-clear:hover {
	color: var(--fxv-ink);
}

.fxv-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 64px 20px;
	background: var(--bs-body-bg);
	border: 1px solid var(--fxv-rule);
	border-radius: 14px;
}
.fxv-empty-icon {
	color: var(--fxv-muted);
	font-size: 36px;
	opacity: .5;
	margin-bottom: 16px;
}
.fxv-empty-title {
	margin: 0;
	color: var(--fxv-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
.fxv-empty-text {
	margin: 10px 0 0;
	color: var(--fxv-muted);
	font-size: 15px;
}
.fxv-empty-text:empty {
	display: none;
}
.fxv-empty-btn {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 11px 26px;
	border-radius: 999px;
	background: var(--fxv-teal);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease;
}
.fxv-empty-btn:hover {
	background: var(--fxv-teal-deep);
	color: #fff;
}


/* ==============================================================================
   Poll cards
   ==============================================================================
   A poll is a question and its result, so the card is the question with the bars
   beneath it. The bars used to carry their colour as an inline style built in PHP,
   which meant the stylesheet could not touch them - including in dark mode.
   ============================================================================== */
.fxv-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--fxv-ink);
	font-size: 17px;
	font-weight: 700;
}
.fxv-head i {
	color: var(--fxv-teal);
	font-size: 15px;
}
.fxv-head-n {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(var(--fxv-primary-rgb), .10);
	color: var(--fxv-teal);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.fxv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	/* Equal rows: a poll with a long question would otherwise make its whole row
	   taller and leave its neighbour half-filled. */
	grid-auto-rows: 1fr;
	gap: 16px;
}
.fxv-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid var(--fxv-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
}
.fxv-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.fxv-question {
	margin: 0;
	color: var(--fxv-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.75;
	overflow-wrap: anywhere;
}
/* A poll that is still taking votes is the one thing on this page with a state, so
   it is the only thing that gets a tone. Everything else is chrome. */
.fxv-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(23, 139, 86, .10);
	color: #15794C;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
[data-bs-theme="dark"] .fxv-badge {
	background: rgba(80, 205, 137, .16);
	color: #6FD9A0;
}
.fxv-answers {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fxv-answer {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.fxv-answer-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	color: var(--fxv-ink);
	font-size: 13px;
	line-height: 1.6;
}
.fxv-answer-text {
	min-width: 0;
	overflow-wrap: anywhere;
}
.fxv-answer.is-top .fxv-answer-text {
	font-weight: 700;
}
.fxv-pct {
	flex: 0 0 auto;
	color: var(--fxv-muted);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.fxv-answer.is-top .fxv-pct {
	color: var(--fxv-ink);
}
.fxv-bar-wrap {
	height: 8px;
	border-radius: 999px;
	background: rgba(var(--fxv-primary-rgb), .09);
	overflow: hidden;
}
[data-bs-theme="dark"] .fxv-bar-wrap {
	background: rgba(255, 255, 255, .07);
}
.fxv-bar {
	height: 100%;
	border-radius: 999px;
	/* The WIDTH is data and stays inline; the colour is a class, so the sheet owns
	   the palette and can change it per theme. */
	background: var(--fxv-teal);
	min-width: 2px;
}
/* Six tones, cycling, so neighbouring answers stay apart. */
.fxv-bar-0 { background: #3699FF; }
.fxv-bar-1 { background: #F0B11D; }
.fxv-bar-2 { background: #1BC5BD; }
.fxv-bar-3 { background: #F64E60; }
.fxv-bar-4 { background: #8950FC; }
.fxv-bar-5 { background: #FFA621; }
.fxv-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
	color: var(--fxv-muted);
	font-size: 12.5px;
}
.fxv-total {
	font-weight: 700;
	color: var(--fxv-ink);
	font-variant-numeric: tabular-nums;
}
.fxv-date {
	margin-inline-start: auto;
	white-space: nowrap;
}
.fxv-pager-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

@media (max-width: 575.98px) {
	.fxv-card {
		padding: 16px 18px;
	}
}

@media (max-width: 991.98px) {
	/* The off-canvas drawer sits outside the viewport; without this the page can be
	   scrolled sideways to reach it. */
	.wrapper {
		overflow-x: clip;
	}
}

@keyframes fxv-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* The search is no longer part of the hero, so it is no longer part of the hero's
   entrance - it would have risen on its own, out of sequence, down in the band. */
.fxv-hero-title,
.fxv-hero-sub {
	animation: fxv-rise .55s cubic-bezier(.22, .7, .3, 1) both;
}
.fxv-hero-sub { animation-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
	.fxv-hero-title,
	.fxv-hero-sub {
		animation: none;
	}
	/* Reduced motion means no MOVEMENT, not a dead page. */
	.fxv-bar {
		transition: none;
	}
}

/* This sheet had no screen media query touching the header, so the hero was the
   one part of the page that never responded at narrow widths. */
@media (max-width: 767.98px) {
	.fxv-hero {
		padding-top: 6px;
	}
	.fxv-hero-inner {
		padding-bottom: 20px;
	}
	/* The field takes the row and the count drops under it, rather than the two
	   squeezing side by side. */
	.fxv-search {
		width: 100%;
	}
	.fxv-band {
		padding-top: 28px;
	}
}

/* The shared pager's active page.
   class.pager.php emits its own CSS as an inline <style> inside {PageNumber}, i.e.
   AFTER this sheet, so overriding it takes specificity rather than source order.
   Without this the current page stays the theme's blue while everything around it is
   teal - it was set on only 2 of the 14 sheets that render a pager. */
#kt_content .fx-pager .fx-pg-btn.active {
	background: var(--fxv-teal);
	border-color: var(--fxv-teal);
}