/**
 * Applicant pages rendered by Virexa Core: application form, sign-in and
 * password pages, application success, and the applicant dashboard.
 * Loaded only on those views (see virexa_view_is_app in inc/assets.php).
 */

.vx-app-page {
	background: var(--vx-color-surface-alt);
}

/* Shared card for sign-in, password and confirmation pages ---------------- */

.vx-auth-card {
	max-width: 32rem;
	margin-inline: auto;
	padding: var(--vx-space-8) var(--vx-space-6);
}

@media (min-width: 640px) {
	.vx-auth-card {
		padding: var(--vx-space-10);
	}
}

.vx-auth-card__title {
	margin-bottom: var(--vx-space-2);
	font-size: var(--vx-text-h2);
}

.vx-auth-card__lead {
	margin-bottom: var(--vx-space-6);
	color: var(--vx-color-text-muted);
}

.vx-auth-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vx-space-3);
	margin-bottom: var(--vx-space-5);
}

.vx-auth-card__row .vx-field {
	margin-bottom: 0;
}

.vx-auth-card__foot {
	margin: var(--vx-space-6) 0 0;
	text-align: center;
	color: var(--vx-color-text-muted);
}

.vx-auth-card .vx-alert,
.vx-auth-card .vx-error-summary {
	margin-bottom: var(--vx-space-5);
}

/* Application form ---------------------------------------------------------- */

.vx-apply__layout {
	display: grid;
	gap: var(--vx-space-6);
}

@media (min-width: 1024px) {
	.vx-apply__layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: start;
	}
}

.vx-apply__card {
	padding: var(--vx-space-6);
}

@media (min-width: 640px) {
	.vx-apply__card {
		padding: var(--vx-space-10);
	}
}

.vx-apply__title {
	margin-bottom: var(--vx-space-2);
	font-size: var(--vx-text-h2);
}

.vx-apply__lead,
.vx-apply__intro {
	margin-bottom: var(--vx-space-6);
	color: var(--vx-color-text-muted);
}

.vx-apply__step {
	display: grid;
	gap: var(--vx-space-5);
	margin: 0 0 var(--vx-space-6);
	padding: 0;
	border: 0;
	min-width: 0;
}

.vx-apply__step[hidden] {
	display: none;
}

.vx-apply__step + .vx-apply__step {
	padding-top: var(--vx-space-6);
	border-top: 1px solid var(--vx-color-border);
}

.vx-apply__legend {
	margin-bottom: var(--vx-space-1);
	padding: 0;
	font-size: var(--vx-text-h4);
	font-weight: var(--vx-weight-bold);
}

.vx-apply__legend:focus {
	outline: none;
}

/* When the script shows one step at a time, no divider is needed. */
.js .vx-apply__step + .vx-apply__step {
	padding-top: 0;
	border-top: 0;
}

.vx-apply__consent {
	display: grid;
	gap: var(--vx-space-4);
	margin-top: var(--vx-space-2);
	padding: var(--vx-space-5);
	border-radius: var(--vx-radius-md);
	background: var(--vx-color-surface-alt);
}

.vx-apply__policy {
	margin: calc(-1 * var(--vx-space-2)) 0 0 var(--vx-space-8);
}

.vx-apply__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--vx-space-3);
}

.vx-apply__actions [data-vx-next],
.vx-apply__actions [data-vx-submit] {
	margin-left: auto;
}

.vx-apply__account {
	margin: var(--vx-space-6) 0 0;
	text-align: center;
	color: var(--vx-color-text-muted);
}

.vx-apply__signin {
	margin-bottom: var(--vx-space-5);
}

.vx-apply__aside {
	padding: var(--vx-space-6);
	border-radius: var(--vx-radius-lg);
	background: var(--vx-color-surface);
	box-shadow: var(--vx-shadow-xs);
}

.vx-apply__points {
	display: grid;
	gap: var(--vx-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vx-apply__points li {
	display: flex;
	gap: var(--vx-space-4);
	align-items: flex-start;
	color: var(--vx-color-text-muted);
	font-size: var(--vx-text-small);
}

.vx-apply__points strong {
	display: block;
	margin-bottom: var(--vx-space-1);
	color: var(--vx-color-text);
	font-size: var(--vx-text-body);
}

/* Honeypot: off-screen for people, still in the form for bots. */
.vx-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Stepper (shown by the script). */
.vx-stepper {
	display: flex;
	gap: var(--vx-space-2);
	margin: 0 0 var(--vx-space-8);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.vx-stepper__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vx-space-2);
	position: relative;
	color: var(--vx-color-text-subtle);
	font-size: var(--vx-text-small);
	text-align: center;
}

.vx-stepper__step + .vx-stepper__step::before {
	content: "";
	position: absolute;
	top: 1rem;
	right: calc(50% + 1.25rem);
	left: calc(-50% + 1.25rem);
	height: 2px;
	background: var(--vx-color-border);
}

.vx-stepper__number {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--vx-color-border);
	border-radius: 50%;
	background: var(--vx-color-surface);
	font-weight: var(--vx-weight-bold);
}

.vx-stepper__step.is-current,
.vx-stepper__step.is-done {
	color: var(--vx-color-primary);
}

.vx-stepper__step.is-current .vx-stepper__number {
	border-color: var(--vx-color-primary);
	background: var(--vx-color-primary);
	color: #fff;
}

.vx-stepper__step.is-done .vx-stepper__number {
	border-color: var(--vx-color-primary);
}

.vx-stepper__step.is-done::before,
.vx-stepper__step.is-current::before {
	background: var(--vx-color-primary);
}

/* Success ------------------------------------------------------------------- */

.vx-success__icon {
	margin-bottom: var(--vx-space-4);
	color: var(--vx-color-success);
}

.vx-success__lead {
	font-size: var(--vx-text-lead);
}

.vx-success__facts,
.vx-details {
	display: grid;
	gap: var(--vx-space-3);
	margin: var(--vx-space-5) 0;
}

.vx-success__facts > div,
.vx-details > div {
	display: grid;
	gap: var(--vx-space-1);
}

@media (min-width: 640px) {
	.vx-success__facts > div,
	.vx-details > div {
		grid-template-columns: 12rem minmax(0, 1fr);
		gap: var(--vx-space-4);
	}
}

.vx-success__facts dt,
.vx-details dt {
	color: var(--vx-color-text-muted);
	font-size: var(--vx-text-small);
	font-weight: var(--vx-weight-semibold);
}

.vx-success__facts dd,
.vx-details dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.vx-success__subtitle {
	margin-top: var(--vx-space-8);
	font-size: var(--vx-text-h4);
}

.vx-success__next {
	padding-left: var(--vx-space-6);
}

.vx-success__next li + li {
	margin-top: var(--vx-space-2);
}

.vx-success__actions {
	margin: var(--vx-space-8) 0 0;
}

/* Dashboard ----------------------------------------------------------------- */

.vx-dashboard {
	padding-block: var(--vx-space-8) var(--vx-space-16);
	background: var(--vx-color-surface-alt);
}

.vx-dashboard__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vx-space-6);
}

/* Grid items default to min-width: auto, which would let the scrolling
   nav strip widen the whole page on small screens. */
.vx-dashboard__inner > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.vx-dashboard__inner {
		grid-template-columns: 15rem minmax(0, 1fr);
		align-items: start;
	}
}

.vx-dashboard__nav {
	border-radius: var(--vx-radius-lg);
	background: var(--vx-color-ink);
	color: var(--vx-color-on-ink);
}

.vx-dashboard__nav ul {
	/* Positioned, so screen-reader-only text (absolutely positioned) is clipped with the strip. */
	position: relative;
	display: flex;
	gap: var(--vx-space-1);
	margin: 0;
	padding: var(--vx-space-2);
	overflow-x: auto;
	list-style: none;
}

@media (min-width: 1024px) {
	.vx-dashboard__nav {
		position: sticky;
		top: calc(var(--vx-header-height) + var(--vx-space-4));
	}

	.vx-dashboard__nav ul {
		flex-direction: column;
		padding: var(--vx-space-4);
		overflow: visible;
	}
}

.vx-dashboard__link {
	display: flex;
	align-items: center;
	gap: var(--vx-space-3);
	padding: var(--vx-space-3) var(--vx-space-4);
	border-radius: var(--vx-radius-md);
	color: var(--vx-color-on-ink-muted);
	font-weight: var(--vx-weight-semibold);
	white-space: nowrap;
	text-decoration: none;
}

.vx-dashboard__link:hover,
.vx-dashboard__link.is-current {
	background: var(--vx-color-ink-raised);
	color: var(--vx-color-on-ink);
}

.vx-dashboard__link:focus-visible {
	box-shadow: var(--vx-focus-ring-on-dark);
}

.vx-dashboard__count {
	margin-left: auto;
}

.vx-dashboard__main {
	display: grid;
	gap: var(--vx-space-6);
	min-width: 0;
}

.vx-dashboard__main > .vx-alert {
	margin: 0;
}

.vx-dashboard__title {
	margin-bottom: var(--vx-space-1);
	font-size: var(--vx-text-h2);
}

.vx-dashboard__lead {
	margin: 0;
	color: var(--vx-color-text-muted);
}

.vx-dashboard__panel {
	padding: var(--vx-space-6);
}

.vx-dashboard__panel-title {
	margin-bottom: var(--vx-space-5);
	font-size: var(--vx-text-h4);
}

.vx-dashboard__panel > :last-child {
	margin-bottom: 0;
}

.vx-dashboard__grid {
	display: grid;
	gap: var(--vx-space-6);
}

@media (min-width: 1280px) {
	.vx-dashboard__grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

.vx-dashboard__switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vx-space-3);
}

.vx-dashboard__switch .vx-label {
	margin: 0;
}

.vx-dashboard__switch .vx-select {
	width: auto;
	max-width: 100%;
}

/* Status cards. */
.vx-stat-cards {
	display: grid;
	gap: var(--vx-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.vx-stat-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.vx-stat-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vx-stat-card {
	display: flex;
	gap: var(--vx-space-4);
	align-items: flex-start;
	padding: var(--vx-space-5);
}

.vx-stat-card__label {
	display: block;
	margin-bottom: var(--vx-space-1);
	color: var(--vx-color-text-muted);
	font-size: var(--vx-text-small);
}

.vx-stat-card__value {
	display: block;
	overflow-wrap: anywhere;
}

.vx-stat-card__value--text {
	font-size: var(--vx-text-small);
	font-weight: var(--vx-weight-semibold);
}

/* Progress steps. */
.vx-progress {
	display: grid;
	gap: var(--vx-space-4);
	margin: 0 0 var(--vx-space-5);
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.vx-progress {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
	}
}

.vx-progress__step {
	display: flex;
	align-items: center;
	gap: var(--vx-space-3);
	position: relative;
	color: var(--vx-color-text-subtle);
	font-size: var(--vx-text-small);
}

@media (min-width: 640px) {
	.vx-progress__step {
		flex-direction: column;
		text-align: center;
	}

	.vx-progress__step + .vx-progress__step::before {
		content: "";
		position: absolute;
		top: 0.625rem;
		right: calc(50% + 0.75rem);
		left: calc(-50% + 0.75rem);
		height: 2px;
		background: var(--vx-color-border);
	}

	.vx-progress__step.is-done::before {
		background: var(--vx-color-primary);
	}
}

.vx-progress__dot {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--vx-color-border-strong);
	border-radius: 50%;
	background: var(--vx-color-surface);
}

.vx-progress__step.is-done {
	color: var(--vx-color-text);
}

.vx-progress__step.is-done .vx-progress__dot {
	border-color: var(--vx-color-primary);
	background: var(--vx-color-primary);
}

.vx-progress__step.is-current {
	color: var(--vx-color-primary);
	font-weight: var(--vx-weight-semibold);
}

.vx-progress__step.is-current .vx-progress__dot {
	box-shadow: 0 0 0 4px var(--vx-color-primary-lighter);
}

/* Timeline. */
.vx-timeline {
	display: grid;
	gap: var(--vx-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vx-timeline__item {
	position: relative;
	padding-left: var(--vx-space-6);
}

.vx-timeline__item::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--vx-color-primary);
}

.vx-timeline__text {
	display: block;
	font-weight: var(--vx-weight-semibold);
}

.vx-timeline__date {
	color: var(--vx-color-text-muted);
	font-size: var(--vx-text-small);
}

.vx-timeline__note {
	margin: var(--vx-space-2) 0 0;
	padding: var(--vx-space-3) var(--vx-space-4);
	border-radius: var(--vx-radius-md);
	background: var(--vx-color-surface-alt);
}

/* Messages. */
.vx-message-list {
	display: grid;
	gap: var(--vx-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vx-message-list__link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--vx-space-2) var(--vx-space-4);
	padding: var(--vx-space-4) var(--vx-space-5);
	color: var(--vx-color-text);
	text-decoration: none;
}

.vx-message-list__item.is-unread .vx-message-list__subject {
	font-weight: var(--vx-weight-bold);
}

.vx-message-list__subject {
	display: inline-flex;
	align-items: center;
	gap: var(--vx-space-2);
	overflow-wrap: anywhere;
}

.vx-message-list__meta,
.vx-message__meta {
	color: var(--vx-color-text-muted);
	font-size: var(--vx-text-small);
}

.vx-message__header {
	margin-bottom: var(--vx-space-5);
	padding-bottom: var(--vx-space-4);
	border-bottom: 1px solid var(--vx-color-border);
}

.vx-message__body {
	overflow-wrap: anywhere;
}

/* Tables (documents). */
.vx-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--vx-color-surface);
	font-size: var(--vx-text-small);
}

.vx-table th,
.vx-table td {
	padding: var(--vx-space-3) var(--vx-space-4);
	border-bottom: 1px solid var(--vx-color-border);
	text-align: left;
	vertical-align: top;
}

.vx-table th {
	color: var(--vx-color-text-muted);
	font-weight: var(--vx-weight-semibold);
}

.vx-table td {
	overflow-wrap: anywhere;
}

/* Small screens: each row becomes a block. */
@media (max-width: 639px) {
	.vx-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.vx-table tr,
	.vx-table td {
		display: block;
	}

	.vx-table tr {
		padding: var(--vx-space-3) 0;
		border-bottom: 1px solid var(--vx-color-border);
	}

	.vx-table td {
		padding: var(--vx-space-1) var(--vx-space-4);
		border: 0;
	}
}