/*
 * v2.css — the Redesign v2 presentation layer.
 *
 * Loaded after components.css and main.css, so everything here wins. It holds
 * only what the v2 design changes; components.css stays the v1 baseline we are
 * progressively replacing. Once every screen is converted this file folds back
 * into components.css and disappears.
 *
 * Figma: page "Redesign v2" in fFRoXsIfVLX8cEFB15lBsM.
 * Geometry below is read off those frames, not estimated.
 *
 * @package Vero_Jobs
 */

/* ------------------------------------------------------------------ Nav -- */
/* V2 01 Nav (123:4). Logo 165x34, 18px vertical padding, 32px gap. Sign in is
   a plain link in v2, not an outlined button, so the one orange button in the
   header is the only thing competing for a click. */

.vj-header__inner {
	gap: var(--vj-space-32);
	padding-block: 18px;
}

.vj-header__logo img {
	width: 165px;
	height: 34px;
}

.vj-header__nav ul {
	gap: 26px;
}

.vj-header__nav a {
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

/* The section you are in: bold and full strength, one step smaller so the
   heavier weight does not make it wider than its neighbours. */
.vj-header__nav .current-menu-item > a,
.vj-header__nav a[aria-current] {
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
}

/* Sign in: a link, but still a 44px target. */
.vj-header__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--vj-space-4);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-label-15-size);
	font-weight: 600;
	line-height: var(--vj-text-label-15-line);
	text-decoration: none;
}

.vj-header__link:hover {
	color: var(--vj-text-primary);
	text-decoration: underline;
}

/* ----------------------------------------------------------- Home hero -- */
/* V2 01 Hero (123:17). White page. The heading and lead sit above a single
   navy search module, and the evidence row sits below it. No banner gradient
   and no illustration: the search is the only thing asking to be used. */

.vj-hero {
	background: none;
}

.vj-hero__inner {
	/* Undoes the two-column grid that reserved space for the v1 artwork.
	   align-items and justify-content must both be reset: v1 set them for a
	   row, and in a column they centre every child instead, which collapsed
	   the hero to the width of its text. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--vj-space-24);
	/* Figma draws 56/44; snapped to the spacing scale. */
	padding-block: var(--vj-space-48) var(--vj-space-40);
}

.vj-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vj-hero__title {
	max-width: 24ch;
	margin: 0;
	font-size: var(--vj-text-display-xl-size);
	line-height: var(--vj-text-display-xl-line);
	letter-spacing: var(--vj-text-display-xl-tracking);
}

.vj-hero__lead {
	max-width: 760px;
	margin: 0;
}

/* ---- The navy module ---- */

.vj-hero__module {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	overflow: hidden;
	border-radius: 22px;
	background: var(--vj-brand-navy);
}

/*
 * A warm glow bleeding in from the right, so the navy block is not a flat
 * rectangle. A radial gradient rather than the three-stop linear fill in the
 * design: same impression, nothing to download, and it scales for free.
 */
.vj-hero__glow {
	position: absolute;
	top: -260px;
	right: -140px;
	width: 520px;
	height: 520px;
	pointer-events: none;
	background: radial-gradient(
		circle at 50% 50%,
		color-mix(in srgb, var(--vj-brand-orange) 34%, transparent) 0%,
		color-mix(in srgb, var(--vj-brand-pink) 20%, transparent) 42%,
		color-mix(in srgb, var(--vj-brand-purple) 0%, transparent) 72%
	);
}

/* Everything in the module sits above the glow. */
.vj-hero__module > :not(.vj-hero__glow) {
	position: relative;
}

/* ---- The search bar inside it ---- */

.vj-hero__module .vj-search {
	max-width: none;
	padding: 6px;
	border: 0;
	border-radius: 14px;
	box-shadow: none;
}

.vj-hero__module .vj-search__field {
	padding: 14px var(--vj-space-16);
}

.vj-hero__module .vj-search__field--where {
	flex: 0 0 300px;
}

.vj-hero__module .vj-search__submit {
	padding: 15px var(--vj-space-32);
	border-radius: 11px;
}

/* ---- Popular searches, on dark ---- */

.vj-hero__popular {
	margin: 0;
	gap: var(--vj-space-8);
}

.vj-hero__popular-label {
	color: var(--vj-text-on-dark-faint);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

.vj-hero__popular .vj-chip {
	padding: 7px 13px;
	border: 0;
	border-radius: var(--vj-radius-full);
	background: color-mix(in srgb, var(--vj-text-on-dark) 12%, transparent);
	color: var(--vj-text-on-dark);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

.vj-hero__popular .vj-chip:hover {
	background: color-mix(in srgb, var(--vj-text-on-dark) 20%, transparent);
}

.vj-hero__popular .vj-chip:focus-visible {
	outline: 2px solid var(--vj-text-on-dark);
	outline-offset: 2px;
}

/* ---- The evidence row ---- */
/* Four plain facts, separated by rules rather than boxed in cards: the claim
   is the number, and a card around it would read as decoration. */

.vj-hero__evidence {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-hero__evidence li {
	display: flex;
	flex: 1 1 0;
	min-width: 150px;
	flex-direction: column;
	gap: 2px;
	padding-inline: var(--vj-space-32);
	border-left: 1px solid var(--vj-border-default);
}

.vj-hero__evidence li:first-child {
	padding-left: 0;
	border-left: 0;
}

.vj-hero__evidence strong {
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

.vj-hero__evidence span {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

/* --------------------------------------------------------- Job card v2 -- */
/* V2 JobRow (desktop 139:406, mobile 136:236). Tighter than v1 by 2px of
   padding, 2px of radius and a 4px smaller logo, and the title drops a step.
   Four cards now fit where three did. */

.vj-job-card {
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 5px 14px;
	padding: 18px;
	border-radius: 16px;
}

.vj-job-card__logo,
.vj-job-card__logo img {
	width: 44px;
	height: 44px;
}

.vj-job-card__logo {
	border-radius: 11px;
}

.vj-job-card__head {
	gap: 5px;
}

.vj-job-card__title {
	font-size: var(--vj-text-label-15-size);
	line-height: var(--vj-text-label-15-line);
}

.vj-job-card__employer {
	font-size: var(--vj-text-body-14-size);
}

.vj-job-card__facts {
	gap: 5px var(--vj-space-16);
}

.vj-job-card__fact {
	font-size: var(--vj-text-body-13-size);
}

.vj-job-card__tags .vj-chip {
	padding: 4px 10px;
	font-size: var(--vj-text-body-13-size);
}

.vj-job-card__posted {
	font-size: var(--vj-text-body-13-size);
}

/* --------------------------------------------------------------- 1199 -- */

@media (max-width: 1199px) {
	.vj-hero__inner {
		padding-block: var(--vj-space-32) var(--vj-space-32);
	}

	.vj-hero__title {
		font-size: var(--vj-text-display-l-size);
		line-height: var(--vj-text-display-l-line);
		letter-spacing: var(--vj-text-display-l-tracking);
	}

	/* The button drops under the two fields rather than squeezing them. */
	.vj-hero__module .vj-search {
		flex-wrap: wrap;
	}

	.vj-hero__module .vj-search__submit {
		flex: 1 1 100%;
		justify-content: center;
	}

	.vj-hero__evidence li {
		padding-inline: var(--vj-space-20);
	}
}

/* ---------------------------------------------------------------- 767 -- */

@media (max-width: 767px) {
	.vj-hero__inner {
		gap: var(--vj-space-20);
		padding-block: var(--vj-space-20) var(--vj-space-24);
	}

	.vj-hero__title {
		font-size: var(--vj-text-heading-1-size);
		line-height: var(--vj-text-heading-1-line);
		letter-spacing: var(--vj-text-heading-1-tracking);
	}

	.vj-hero__lead {
		font-size: var(--vj-text-body-14-size);
		line-height: var(--vj-text-body-14-line);
	}

	.vj-hero__module {
		gap: var(--vj-space-12);
		padding: 14px;
		border-radius: 16px;
	}

	.vj-hero__glow {
		top: -300px;
		right: -200px;
	}

	/* Two rows of two, with the rules only between columns. */
	.vj-hero__evidence {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--vj-space-16) 0;
	}

	.vj-hero__evidence li {
		min-width: 0;
		padding-inline: var(--vj-space-16);
	}

	.vj-hero__evidence li:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.vj-hero__evidence strong {
		font-size: var(--vj-text-heading-2-size);
		line-height: var(--vj-text-heading-2-line);
		letter-spacing: var(--vj-text-heading-2-tracking);
	}

	/* Mobile job card: 14px padding, 38px logo. */
	.vj-job-card {
		grid-template-columns: 38px minmax(0, 1fr) auto;
		gap: 4px 11px;
		padding: 14px;
		border-radius: 14px;
	}

	.vj-job-card__logo,
	.vj-job-card__logo img {
		width: 38px;
		height: 38px;
	}

	.vj-job-card__logo {
		border-radius: 10px;
	}

	.vj-job-card__employer {
		font-size: var(--vj-text-body-13-size);
	}
}

/* ------------------------------------------------------ Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
	.vj-hero__glow {
		display: none;
	}
}

/* ------------------------------------------------- Hire a consultant -- */
/* The employer hiring offer. Navy, because this is the one commercial ask
   on the site and it should read as a different kind of thing from the free
   self-serve content around it. Only ever rendered on employer pages. */

.vj-hire {
	margin-block: var(--vj-space-48);
}

.vj-hire__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: var(--vj-space-40);
	align-items: start;
	padding: var(--vj-space-40);
	overflow: hidden;
	border-radius: var(--vj-radius-xl);
	background: var(--vj-brand-navy);
}

.vj-hire__eyebrow {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-on-dark-faint);
	font-size: var(--vj-text-overline-12-size);
	font-weight: var(--vj-text-overline-12-weight);
	letter-spacing: var(--vj-text-overline-12-tracking);
	text-transform: uppercase;
}

.vj-hire__title {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-l-size);
	font-weight: 800;
	line-height: var(--vj-text-display-l-line);
	letter-spacing: var(--vj-text-display-l-tracking);
	color: var(--vj-text-on-dark);
}

.vj-hire__lead {
	max-width: 56ch;
	margin: 0 0 var(--vj-space-24);
	color: var(--vj-text-on-dark-muted);
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
}

.vj-hire__facts {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
	margin: 0 0 var(--vj-space-24);
	padding: 0;
	list-style: none;
}

.vj-hire__facts li {
	display: flex;
	gap: var(--vj-space-12);
	align-items: flex-start;
	color: var(--vj-text-on-dark);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

.vj-hire__facts .vj-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--vj-status-success-soft);
}

.vj-hire__proof {
	margin: 0;
	padding-top: var(--vj-space-20);
	border-top: 1px solid var(--vj-border-on-dark);
	color: var(--vj-text-on-dark-muted);
	font-size: var(--vj-text-body-14-size);
}

/* ---- The form, a white card on the navy ---- */

.vj-hire__panel {
	padding: var(--vj-space-24);
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
}

.vj-hire__panel-title {
	margin: 0 0 var(--vj-space-4);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-hire__panel-lead {
	margin: 0 0 var(--vj-space-20);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-14-size);
}

.vj-hire__panel .vj-form__actions .vj-btn {
	width: 100%;
	justify-content: center;
}

.vj-hire__small {
	margin: var(--vj-space-12) 0 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	line-height: var(--vj-text-body-12-line);
}

.vj-hire__ref {
	margin: var(--vj-space-4) 0 0;
}

@media (max-width: 1199px) {
	.vj-hire__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vj-space-32);
		padding: var(--vj-space-32);
	}

	.vj-hire__title {
		font-size: var(--vj-text-heading-1-size);
		line-height: var(--vj-text-heading-1-line);
		letter-spacing: var(--vj-text-heading-1-tracking);
	}
}

@media (max-width: 767px) {
	.vj-hire {
		margin-block: var(--vj-space-32);
	}

	.vj-hire__inner {
		padding: var(--vj-space-20);
		border-radius: var(--vj-radius-lg);
	}

	.vj-hire__title {
		font-size: var(--vj-text-heading-2-size);
		line-height: var(--vj-text-heading-2-line);
		letter-spacing: var(--vj-text-heading-2-tracking);
	}

	.vj-hire__panel {
		padding: var(--vj-space-20);
	}
}

/* ------------------------------------------------------ Landing pages -- */
/* V2 04 (139:2), V2 05 (139:406), V2 06 (140:2). Two changes from v1: the
   sidebar grows from 300px to 436px so the cards in it are readable rather
   than cramped, and the main internal-link groups move out of it into
   full-width rows of their own between the hero and the body. */

.vj-listing {
	/* 820 + 24 + 436 = 1280, the container width. */
	grid-template-columns: minmax(0, 1fr) 436px;
	gap: var(--vj-space-24);
}

.vj-listing__side {
	gap: var(--vj-space-20);
}

.vj-listing__title {
	font-size: var(--vj-text-display-l-size);
	line-height: var(--vj-text-display-l-line);
	letter-spacing: var(--vj-text-display-l-tracking);
}

/* ---- The hero stats: a divided row, not a row of cards ---- */

.vj-listing__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: var(--vj-space-20);
}

.vj-listing__stats .vj-stat {
	flex: 0 1 auto;
	min-width: 140px;
	padding: 0 var(--vj-space-32);
	border: 0;
	border-left: 1px solid var(--vj-border-default);
	border-radius: 0;
	background: none;
}

.vj-listing__stats .vj-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

/* ---- Link rows ---- */

.vj-linkrows {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-24);
	margin-bottom: var(--vj-space-32);
}

.vj-linkrows:empty {
	display: none;
	margin: 0;
}

.vj-tilerow__title,
.vj-chiprow__title {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-tilerow__grid {
	display: grid;
	/* Four across at 1280, dropping to three, then two, then one. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--vj-space-12);
}

.vj-tilerow__tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--vj-space-16) var(--vj-space-20);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
	text-decoration: none;
}

.vj-tilerow__tile:hover {
	border-color: var(--vj-border-strong);
	background: var(--vj-surface-selected);
}

.vj-tilerow__tile:focus-visible {
	outline: 2px solid var(--vj-state-focus-ring);
	outline-offset: 2px;
}

.vj-tilerow__name {
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
}

.vj-tilerow__sub {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-chiprow__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
}

.vj-chiprow__chip {
	gap: 6px;
	color: var(--vj-brand-navy);
	font-weight: 600;
}

.vj-chiprow__count {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	font-weight: 400;
}

@media (max-width: 1199px) {
	.vj-listing {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-listing__stats .vj-stat {
		padding-inline: var(--vj-space-20);
	}

	.vj-tilerow__title,
	.vj-chiprow__title {
		font-size: var(--vj-text-heading-3-size);
		line-height: var(--vj-text-heading-3-line);
		letter-spacing: var(--vj-text-heading-3-tracking);
	}
}

@media (max-width: 767px) {
	.vj-linkrows {
		gap: var(--vj-space-20);
		margin-bottom: var(--vj-space-24);
	}

	/* Two across, with the rule only between columns. */
	.vj-listing__stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--vj-space-12) 0;
	}

	.vj-listing__stats .vj-stat {
		min-width: 0;
		padding-inline: var(--vj-space-16);
	}

	.vj-listing__stats .vj-stat:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.vj-tilerow__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-tilerow__tile {
		padding: var(--vj-space-12) var(--vj-space-16);
	}
}

/* ----------------------------------------------------- Search results -- */
/* V2 02 (129:2). v1 put the filters in a 280px rail to the left of the
   results. v2 puts them in a horizontal bar above the results, which gives
   the list the full container width and stops the filters being the first
   thing the eye lands on. The markup order is unchanged — filters, then
   results — so stacking them is all this takes.

   Below 1024px components.css already turns the same markup into a bottom
   sheet, so every rule here is scoped above that. */

@media (min-width: 1024px) {
	.vj-results {
		display: block;
	}

	/* ---- The bar ---- */

	.vj-filters {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vj-space-8);
		margin-bottom: var(--vj-space-20);
		padding: 0 0 var(--vj-space-16);
		border: 0;
		border-bottom: 1px solid var(--vj-border-default);
		border-radius: 0;
		background: none;
	}

	/* The "Filters" heading and the close button belong to the sheet. */
	.vj-filters__head,
	.vj-filters__close {
		display: none;
	}

	.vj-filters__body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vj-space-8);
		padding: 0;
	}

	/* ---- Each group is a chip that opens a panel ---- */

	.vj-filters__group {
		position: relative;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.vj-filters__summary {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 7px 12px;
		border: 1px solid var(--vj-border-default);
		border-radius: var(--vj-radius-full);
		background: var(--vj-surface-card);
		color: var(--vj-text-secondary);
		font-size: var(--vj-text-label-13-size);
		font-weight: 600;
		line-height: var(--vj-text-label-13-line);
		cursor: pointer;
		list-style: none;
	}

	/* Chrome and Safari draw their own marker without this. */
	.vj-filters__summary::-webkit-details-marker,
	.vj-filters__summary::marker {
		display: none;
		content: '';
	}

	.vj-filters__summary:hover {
		border-color: var(--vj-border-strong);
		color: var(--vj-text-primary);
	}

	.vj-filters__summary:focus-visible {
		outline: 2px solid var(--vj-state-focus-ring);
		outline-offset: 2px;
	}

	.vj-filters__summary .vj-icon {
		color: var(--vj-text-muted);
		transform: rotate(90deg);
		transition: transform 120ms ease-out;
	}

	.vj-filters__group[open] > .vj-filters__summary {
		border-color: var(--vj-brand-navy);
		color: var(--vj-text-primary);
	}

	.vj-filters__group[open] > .vj-filters__summary .vj-icon {
		transform: rotate(-90deg);
	}

	/* The panel floats over the results rather than pushing them down. */
	.vj-filters__fields {
		position: absolute;
		z-index: 20;
		top: calc(100% + 6px);
		left: 0;
		min-width: 260px;
		max-height: 360px;
		margin: 0;
		padding: var(--vj-space-16);
		overflow-y: auto;
		border: 1px solid var(--vj-border-default);
		border-radius: var(--vj-radius-md);
		background: var(--vj-surface-card);
		box-shadow: var(--vj-shadow-card);
	}

	.vj-filters__group--pay .vj-filters__fields {
		min-width: 320px;
	}

	/* A panel near the right edge would otherwise run off the page. */
	.vj-filters__group:nth-last-child(-n+2) .vj-filters__fields {
		left: auto;
		right: 0;
	}

	/* ---- The walk-in switch sits in the bar as its own chip ---- */

	.vj-filters__walkin {
		padding: 0;
	}

	.vj-filters__walkin .vj-switch {
		gap: var(--vj-space-8);
		padding: 6px 12px 6px 14px;
		border: 1px solid var(--vj-border-default);
		border-radius: var(--vj-radius-full);
		background: var(--vj-surface-card);
	}

	.vj-filters__walkin .vj-switch__hint {
		display: none;
	}

	.vj-filters__walkin .vj-switch__title {
		font-size: var(--vj-text-label-13-size);
		font-weight: 600;
	}

	/* ---- Reset and the submit button finish the bar ---- */
	/* The submit stays visible: with no JavaScript it is the only way to apply
	   what has been ticked. */

	.vj-filters__foot {
		display: flex;
		gap: var(--vj-space-8);
		align-items: center;
		margin-left: auto;
		padding: 0;
		border: 0;
	}

	.vj-filters__foot .vj-btn {
		padding: 8px 16px;
		font-size: var(--vj-text-label-13-size);
	}
}

/* The chosen-filters chips read as a second row under the bar. */
.vj-results__bar {
	margin-bottom: var(--vj-space-12);
}

/* The written paragraph under the generated lead on a landing page. */
.vj-listing__about {
	max-width: 76ch;
	margin: var(--vj-space-12) 0 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

@media (max-width: 767px) {
	.vj-listing__about {
		font-size: var(--vj-text-body-14-size);
		line-height: var(--vj-text-body-14-line);
	}
}

/* ------------------------------------------------- Search bar focus -- */
/*
 * One focus ring, not two.
 *
 * main.css gives every interactive element a two-tone ring — sky with a navy
 * outer edge — because sky alone measures about 2.5:1 on white and WCAG 1.4.11
 * asks for 3. It is drawn with box-shadow, not outline.
 *
 * The search bar also rings the whole field on :focus-within, so the indicator
 * surrounds the icon and the input together rather than getting lost inside
 * the bar. components.css tried to silence the inner one with
 * `.vj-search__input:focus { outline: none }`, which cannot work: the global
 * ring is a shadow, and outline:none does not touch it. The result was a
 * rounded ring around the field and a square one hugging the input.
 *
 * So: silence the input's shadow, and move the two tones onto the field as an
 * inset ring. Inset keeps it inside the field box, so it neither overlaps the
 * divider and the city field beside it nor spills onto the navy module, and
 * the contrast guarantee is preserved — navy against white reads about 15:1.
 */

.vj-search__field:focus-within {
	outline: none;
	border-radius: var(--vj-radius-md);
	box-shadow:
		inset 0 0 0 2px var(--vj-state-focus-ring),
		inset 0 0 0 4px var(--vj-brand-navy);
}

.vj-search__input:focus,
.vj-search__input:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Windows high contrast draws its own indicator; ours would fight it. */
@media (forced-colors: active) {
	.vj-search__field:focus-within {
		outline: 3px solid CanvasText;
		box-shadow: none;
	}
}

/* ----------------------------------------------------- Button labels -- */
/*
 * Centre the text inside every button and call to action.
 *
 * .vj-btn already centres its contents with justify-content, which is why a
 * one-line label looks right. It never declared text-align, though, so that
 * was inherited from whatever the button happened to sit inside — and on the
 * live site it came out inconsistent: "Search jobs" and "Send me jobs"
 * inherited center, while "Post a job free" and "See all 49 open jobs, newest
 * first" inherited start.
 *
 * On a wide screen nothing wraps, so the difference is invisible. It shows up
 * the moment a label runs to two lines: a full-width button on a 390px phone,
 * a long count like "See all 4,860 sales jobs", or a translated string. Then
 * justify-content centres the block while the second line sits ragged left.
 *
 * Declaring it on the button itself makes it independent of the parent.
 */

.vj-btn,
.vj-section__more,
.vj-empty__actions .vj-btn,
.vj-form__actions .vj-btn,
.vj-filters__foot .vj-btn,
.vj-menu__actions .vj-btn,
button.vj-btn,
a.vj-btn {
	text-align: center;
	text-wrap: balance;
}

/* --------------------------------------- Search filter bar, corrected -- */
/*
 * Measured against Figma 129:2 on the live site, three things were wrong.
 *
 * 1. The bar sat in a band of its own below the search band. In v2 both live
 *    in one strip, so the filters move in the template and the strip loses the
 *    gap between them.
 * 2. "Walk-in interviews only" wrapped onto three lines and collapsed over its
 *    own toggle, because the label had nothing stopping it wrapping once the
 *    switch became a chip in a flex row.
 * 3. The orange "Show N jobs" submit was the loudest thing in the bar. v2 has
 *    no submit, because filters.js already applies a change immediately at
 *    desktop width. It is only needed with JavaScript off, so it is hidden
 *    when the .vj-js class is present and shown otherwise.
 *
 * Clear sits at the end of the bar, as in the design: the head becomes
 * display:contents so the link joins the bar's own flex row rather than
 * staying trapped in a hidden container.
 */

@media (min-width: 1024px) {
	.vj-search-band .vj-filters {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* Let Clear out of the head without showing the sheet's title and close. */
	.vj-filters__head {
		display: contents;
	}

	.vj-filters__title,
	.vj-filters__close {
		display: none;
	}

	.vj-filters__clear {
		order: 99;
		margin-left: var(--vj-space-4);
		font-size: var(--vj-text-label-13-size);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* Walk-in: one line, never wrapping over its own toggle. */
	.vj-filters__walkin .vj-switch {
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.vj-filters__walkin .vj-switch__text {
		flex: 0 0 auto;
	}

	.vj-filters__walkin .vj-switch__title {
		white-space: nowrap;
	}

	/* With scripting, a change applies itself; the submit is dead weight. */
	.vj-js .vj-filters__foot {
		display: none;
	}
}

/* ------------------------------------------------- .vj-switch collision -- */
/*
 * components.css defines .vj-switch twice, for two different components:
 *
 *   line 2429  .vj-switch { appearance: none; width: 52px; height: 30px; ... }
 *              the checkbox itself, drawn as a toggle (privacy settings).
 *   line 3768  .vj-switch { display: flex; gap: 16px; padding: 12px; ... }
 *              a wrapper label holding .vj-switch__text and .vj-switch__track
 *              (the walk-ins filter).
 *
 * The second never overrides width or height, so the wrapper inherits a 52px
 * box. With the hint visible in the old sidebar that just looked cramped; once
 * the filters became a single-line bar it put 202px of label into a 52px box
 * and clipped the W off "Walk-in interviews only".
 *
 * The real repair is to rename one of them, which means touching both
 * components and every template that uses them. Until then, a wrapper is
 * recognisable by the fact that it contains a track, so size it by content.
 */

.vj-switch:has(.vj-switch__track) {
	width: auto;
	height: auto;
}

/* Same rule without :has(), for anything that does not support it. */
.vj-filters__walkin .vj-switch,
.vj-privacy .vj-switch:not(input) {
	width: auto;
	height: auto;
}

/* ---------------------------------------------------- Job alert prompt -- */
/* Figma 129:2: navy card, orange button — it is an offer, and on a page of
   white cards a white card does not read as one. */

.vj-results .vj-alert-banner,
.vj-results__main .vj-alert-banner {
	background: var(--vj-brand-navy);
	border-color: var(--vj-brand-navy);
}

.vj-results .vj-alert-banner__title,
.vj-results__main .vj-alert-banner__title {
	color: var(--vj-text-on-dark);
}

.vj-results .vj-alert-banner__hint,
.vj-results__main .vj-alert-banner__hint {
	color: var(--vj-text-on-dark-muted);
}

.vj-results .vj-alert-banner__icon,
.vj-results__main .vj-alert-banner__icon {
	background: color-mix(in srgb, var(--vj-text-on-dark) 12%, transparent);
	color: var(--vj-text-on-dark);
}

.vj-results .vj-alert-banner .vj-btn,
.vj-results__main .vj-alert-banner .vj-btn {
	background: var(--vj-brand-orange);
	border-color: var(--vj-brand-orange);
	color: var(--vj-text-primary);
}

/* ==========================================================================
   Job detail — v2
   Figma 135:2 (desktop 1440), 165:2 (tablet 768), 138:2 (mobile 390).

   The v1 markup was already the right shape, so almost all of this is
   geometry and colour. Four things did change in the template: the warning
   moved above the verification card, similar jobs moved out of the sidebar
   into a two-up grid in the main column, and the sidebar gained a salary card
   and a list of related searches.

   The v2 frames use a 2px rhythm (gaps of 7, 10, 14, 18; padding of 22 and
   26) that does not sit on the 4px token scale, so those numbers are written
   out. Every colour is a token.
   ========================================================================== */

/* -- The two columns ----------------------------------------------------- */

.vj-job {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 436px;
	gap: var(--vj-space-24);
	align-items: start;
	padding-block: var(--vj-space-16) 44px;
}

.vj-job__main,
.vj-job__side {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
	min-width: 0;
}

.vj-job .vj-card {
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
	border: 0;
}

/* -- The heading card ---------------------------------------------------- */

.vj-job__head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px;
}

.vj-job__identity {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--vj-space-16);
	align-items: start;
}

.vj-job__logo {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	font-weight: 700;
}

.vj-job__heading {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.vj-job__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: var(--vj-text-heading-1-weight);
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
	text-wrap: balance;
}

.vj-job__employer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
}

.vj-job__save-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vj-text-muted);
	cursor: pointer;
}

.vj-job__save-icon:hover,
.vj-job__save-icon[aria-pressed="true"] {
	color: var(--vj-brand-navy);
}

/* -- The four facts ------------------------------------------------------ */

/*
 * Figma draws four fixed 184px tiles. A grid of equal tracks gives the same
 * result at 1440 and degrades sensibly when the column is narrower, which the
 * fixed width would not.
 */
.vj-job__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.vj-job__tile {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-4);
	padding: 13px 15px;
	border-radius: var(--vj-radius-md);
	background: var(--vj-surface-page);
}

.vj-job__tile dt {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

.vj-job__tile dt svg {
	flex: none;
	color: var(--vj-text-muted);
}

.vj-job__tile dd {
	margin: 0;
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-text-primary);
}

.vj-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

.vj-job__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vj-job__paynote {
	margin: 0;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

/* -- Never pay ----------------------------------------------------------- */

.vj-job__never-pay {
	display: flex;
	gap: var(--vj-space-12);
	padding: var(--vj-space-16) 18px;
	border: 0;
	border-radius: 16px;
	background: var(--vj-status-danger-soft);
	color: var(--vj-status-danger-ink);
}

.vj-job__never-pay > svg {
	flex: none;
	margin-block-start: 1px;
	color: var(--vj-status-danger);
}

.vj-job__never-pay .vj-notice__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.vj-job__never-pay p {
	margin: 0;
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-status-danger-ink);
}

.vj-job__never-pay-title {
	font-size: var(--vj-text-label-15-size) !important;
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
}

.vj-job__never-pay-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-status-danger);
	text-decoration: none;
}

.vj-job__never-pay-link:hover {
	text-decoration: underline;
}

/* -- How we checked this employer ---------------------------------------- */

.vj-job__checked {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: var(--vj-space-24);
}

.vj-job__checked-stamp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
}

.vj-job__checked-body {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	min-width: 0;
}

.vj-job__checked-title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	font-weight: var(--vj-text-heading-3-weight);
	line-height: var(--vj-text-heading-3-line);
	letter-spacing: var(--vj-text-heading-3-tracking);
	color: var(--vj-text-primary);
}

.vj-job__checks {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job__check {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

.vj-job__check > svg {
	flex: none;
	color: var(--vj-status-success);
}

.vj-job__check-text {
	font-size: var(--vj-text-body-14-size);
	font-weight: 500;
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-secondary);
}

.vj-job__check-aside {
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

.vj-job__checked-note {
	margin: 0;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

/* -- About the job ------------------------------------------------------- */

.vj-job__about {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
}

.vj-job__block-title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: var(--vj-text-heading-2-weight);
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-job__about > p {
	margin: 0;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
}

.vj-job__kind {
	font-size: var(--vj-text-body-13-size) !important;
	font-weight: 500;
	color: var(--vj-text-muted) !important;
}

.vj-job__sub {
	margin: 0;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-primary);
}

.vj-job__about .vj-ticks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job__about .vj-ticks li {
	display: flex;
	gap: 10px;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
}

.vj-job__about .vj-ticks svg {
	flex: none;
	margin-block-start: 3px;
	color: var(--vj-status-success);
}

.vj-job__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0;
}

.vj-job__tags .vj-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 0;
	border-radius: var(--vj-radius-full);
	background: var(--vj-surface-page);
	font-size: var(--vj-text-body-14-size);
	font-weight: 500;
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-secondary);
}

.vj-job__tags .vj-chip--benefit {
	background: var(--vj-status-success-soft);
	color: var(--vj-status-success-ink);
}

.vj-job__tags .vj-chip--benefit svg {
	color: var(--vj-status-success);
}

/* -- The employer strip -------------------------------------------------- */

.vj-job__company {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: var(--vj-space-16);
	align-items: center;
	padding: var(--vj-space-24);
}

.vj-job__company-head {
	display: contents;
}

.vj-job__company .vj-job-card__logo {
	width: 48px;
	height: 48px;
	border-radius: var(--vj-radius-md);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	font-weight: 700;
}

.vj-job__company-name {
	margin: 0;
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-primary);
}

.vj-job__company-meta {
	margin: 0;
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-muted);
}

.vj-job__company-link {
	grid-column: 3;
	white-space: nowrap;
}

/*
 * The employer's own blurb is not in the v2 strip, which is one line tall. It
 * is kept, below the strip, because dropping real copy to match a frame is a
 * worse trade than a slightly taller card.
 */
.vj-job__company-about {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-secondary);
}

/* -- Similar jobs, now in the main column -------------------------------- */

.vj-job__similar {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
}

.vj-job__similar-head {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: var(--vj-text-heading-2-weight);
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-job__similar-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job__similar-link {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: var(--vj-space-12);
	align-items: start;
	padding: var(--vj-space-16);
	border-radius: 14px;
	background: var(--vj-surface-card);
	text-decoration: none;
}

.vj-job__similar-link:hover {
	box-shadow: inset 0 0 0 2px var(--vj-border-default);
}

.vj-job__similar-logo {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
}

.vj-job__similar-text {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-4);
	min-width: 0;
}

.vj-job__similar-title {
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-primary);
}

.vj-job__similar-meta {
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

/* -- The apply card ------------------------------------------------------ */

.vj-job__apply {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
	padding: 22px;
}

.vj-job__apply-label {
	margin: 0;
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-muted);
	order: 2;
}

.vj-job__apply-pay {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: var(--vj-text-heading-2-weight);
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
	order: 1;
}

.vj-job__apply-extras {
	margin: 0;
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-muted);
	order: 3;
}

.vj-job__apply-btn {
	order: 4;
	padding: 15px var(--vj-space-24);
	border-radius: var(--vj-radius-md);
	font-size: var(--vj-text-label-16-size);
	font-weight: 600;
}

.vj-job__apply-row {
	order: 5;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.vj-job__apply-row .vj-btn {
	padding: 11px var(--vj-space-16);
	border-radius: var(--vj-radius-md);
}

.vj-job__apply-note {
	order: 6;
	display: flex;
	gap: var(--vj-space-8);
	margin: 0;
	padding: 10px var(--vj-space-12);
	border-radius: 10px;
	background: var(--vj-surface-soft-blue);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-brand-navy);
}

.vj-job__apply-note svg {
	flex: none;
	margin-block-start: 2px;
}

.vj-job__closing {
	order: 7;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vj-job__closing-text {
	display: flex;
	gap: var(--vj-space-12);
	margin: 0;
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

.vj-job__closing-bar {
	display: block;
	height: 6px;
	border-radius: 99px;
	background: var(--vj-border-default);
	overflow: hidden;
}

.vj-job__closing-bar > span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--vj-status-success);
}

/* -- Typical pay --------------------------------------------------------- */

.vj-job__payguide {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	padding: 22px;
	background: var(--vj-brand-orange-soft) !important;
}

.vj-job__payguide-label {
	margin: 0;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-brand-orange-ink);
}

.vj-job__payguide-figure {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: var(--vj-text-heading-1-weight);
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

.vj-job__payguide-text {
	margin: 0;
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-brand-orange-ink);
}

.vj-job__payguide-link {
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-brand-navy);
	text-decoration: none;
}

.vj-job__payguide-link:hover {
	text-decoration: underline;
}

/* -- Spot a fake job ----------------------------------------------------- */

.vj-job__tips {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border-radius: var(--vj-radius-lg);
	background: var(--vj-brand-navy);
}

.vj-job__tips-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-on-dark);
}

.vj-job__tips ul {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job__tips li {
	position: relative;
	padding-inline-start: 23px;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-on-dark-muted);
}

/*
 * Figma draws a tick beside each line. The markup is a plain list, so the tick
 * is drawn here rather than adding an icon call per item.
 */
.vj-job__tips li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 5px;
	width: 9px;
	height: 5px;
	border-inline-start: 2px solid var(--vj-status-success);
	border-block-end: 2px solid var(--vj-status-success);
	transform: rotate(-45deg);
}

.vj-job__tips > a {
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-text-on-dark);
}

/* -- More jobs like this ------------------------------------------------- */

.vj-job__more {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	padding: 22px;
}

.vj-job__more-title {
	margin: 0;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-primary);
}

.vj-job__more-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job__more-list a {
	display: block;
	padding-block: 6px;
	font-size: var(--vj-text-label-15-size);
	font-weight: 600;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-brand-navy);
	text-decoration: none;
}

.vj-job__more-list a:hover {
	text-decoration: underline;
}

/* -- The sticky bar ------------------------------------------------------ */

.vj-apply-bar {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto auto;
	gap: var(--vj-space-16);
	align-items: center;
	padding: 14px var(--vj-space-80);
	background: var(--vj-surface-card);
	box-shadow: 0 -1px 0 var(--vj-border-default);
}

.vj-apply-bar__logo {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
}

.vj-apply-bar__id {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.vj-apply-bar__title,
.vj-apply-bar__meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vj-apply-bar__title {
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-primary);
}

.vj-apply-bar__meta {
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

.vj-apply-bar__save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vj-space-8);
	padding: 11px var(--vj-space-16);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-md);
	background: var(--vj-surface-card);
	font-size: var(--vj-text-label-14-size);
	font-weight: 600;
	color: var(--vj-text-primary);
	cursor: pointer;
}

.vj-apply-bar__go {
	padding: 13px var(--vj-space-32);
	border-radius: var(--vj-radius-md);
	font-size: var(--vj-text-label-16-size);
	font-weight: 600;
}

/* -- Tablet 768 — Figma 165:2 -------------------------------------------- */

@media (max-width: 1100px) {
	.vj-job {
		grid-template-columns: minmax(0, 1fr);
		padding-block: var(--vj-space-16) var(--vj-space-32);
	}

	/*
	 * At 768 the apply card is the one thing that must not fall below a long
	 * description, so the sidebar comes first and reads as a row of cards.
	 */
	.vj-job__side {
		order: -1;
	}

	.vj-job__checked {
		grid-template-columns: 64px minmax(0, 1fr);
		align-items: start;
	}

	.vj-job__checked-stamp {
		width: 64px;
		height: 64px;
	}
}

/* -- Mobile 390 — Figma 138:2 -------------------------------------------- */

@media (max-width: 640px) {
	.vj-job {
		gap: var(--vj-space-12);
	}

	.vj-job__main,
	.vj-job__side {
		gap: var(--vj-space-12);
	}

	.vj-job__head,
	.vj-job__about {
		gap: 14px;
		padding: 18px;
	}

	.vj-job__checked,
	.vj-job__company {
		padding: 18px;
	}

	.vj-job__apply,
	.vj-job__payguide,
	.vj-job__tips,
	.vj-job__more {
		padding: 18px;
	}

	.vj-job__identity {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		gap: var(--vj-space-12);
	}

	.vj-job__logo {
		width: 48px;
		height: 48px;
		border-radius: var(--vj-radius-md);
	}

	.vj-job__title {
		font-size: var(--vj-text-heading-2-size);
		line-height: var(--vj-text-heading-2-line);
	}

	/* Two tiles across rather than four squeezed. */
	.vj-job__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vj-job__similar-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-job__checked {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vj-space-12);
	}

	.vj-job__company {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.vj-job__company-link {
		grid-column: 1 / -1;
		justify-self: start;
	}

	/*
	 * The bar is fixed under the thumb on a phone, so it carries the buttons
	 * only — the title is already at the top of the screen they came from.
	 */
	.vj-apply-bar {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--vj-space-12);
		padding: var(--vj-space-12) var(--vj-space-16);
	}

	.vj-apply-bar__logo,
	.vj-apply-bar__id {
		display: none;
	}

	.vj-apply-bar__save-label {
		display: none;
	}

	.vj-apply-bar__save {
		padding: 11px var(--vj-space-12);
	}

	.vj-apply-bar__go {
		justify-content: center;
	}
}

/* ==========================================================================
   Company page — v2
   Figma 140:450 (desktop 1440), 158:340 (mobile 390).

   Two deliberate departures from the frame, both noted in the template: the
   Reviews and "Life at" tabs are not rendered because neither feature exists,
   and the never-pay card is kept at the foot of the sidebar because a safety
   line outranks matching a frame exactly.
   ========================================================================== */

.vj-company-cover {
	background: linear-gradient(135deg, var(--vj-brand-navy) 0%, #1b2a73 100%);
	padding-block: var(--vj-space-16) 46px;
}

.vj-company-cover .vj-breadcrumb,
.vj-company-cover .vj-breadcrumb a,
.vj-company-cover .vj-breadcrumb span {
	color: var(--vj-text-on-dark-muted);
}

.vj-company-cover .vj-breadcrumb a:hover {
	color: var(--vj-text-on-dark);
}

/* -- The header ---------------------------------------------------------- */

.vj-company__head {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	grid-template-areas:
		"logo identity actions"
		"tabs tabs      tabs";
	gap: 14px var(--vj-space-24);
	align-items: end;
	padding-block-end: var(--vj-space-20);
	background: var(--vj-surface-card);
}

/*
 * The tile sits across the bottom edge of the cover band, Figma 140:450. The
 * white ring is the wrap's own padding, so the logo keeps its colour.
 */
.vj-company__logo {
	grid-area: logo;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	margin-block-start: -46px;
	padding: 10px;
	border-radius: 20px;
	background: var(--vj-surface-card);
}

.vj-company__logo img,
.vj-company__logo > * {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	object-fit: cover;
}

.vj-company__logo:not(:has(img)) {
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	color: var(--vj-brand-orange-ink);
}

.vj-company__identity {
	grid-area: identity;
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-4);
	min-width: 0;
}

.vj-company__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: var(--vj-text-heading-1-weight);
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

.vj-company__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-4);
	padding: var(--vj-space-4) 10px var(--vj-space-4) var(--vj-space-8);
	border: 0;
	border-radius: var(--vj-radius-full);
	background: var(--vj-status-success-soft);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-12-size);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--vj-status-success-ink);
}

.vj-company__meta {
	margin: 0;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-muted);
}

.vj-company__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 10px;
}

.vj-company__actions .vj-btn {
	padding: 11px 18px;
	border-radius: var(--vj-radius-md);
	white-space: nowrap;
}

/* -- The section tabs ---------------------------------------------------- */

.vj-company__tabs {
	grid-area: tabs;
	display: flex;
	gap: var(--vj-space-24);
	padding-block-start: var(--vj-space-8);
	overflow-x: auto;
	scrollbar-width: none;
}

.vj-company__tabs::-webkit-scrollbar {
	display: none;
}

.vj-company__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block-end: var(--vj-space-8);
	border-block-end: 3px solid transparent;
	border-radius: 2px 2px 0 0;
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.vj-company__tab.is-current {
	border-block-end-color: var(--vj-brand-orange);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-company__tab-count {
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	color: var(--vj-text-muted);
}

/* -- The body ------------------------------------------------------------ */

.vj-company.vj-listing {
	padding-block: 30px 44px;
}

.vj-company .vj-listing__main,
.vj-company .vj-listing__side {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
	min-width: 0;
}

.vj-company .vj-card {
	border: 0;
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
}

.vj-company .vj-listing__main > .vj-card {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
	padding: 26px;
}

.vj-company .vj-listing__side > .vj-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
}

.vj-company .vj-card__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: var(--vj-text-heading-2-weight);
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-company .vj-card__title--small {
	font-size: var(--vj-text-heading-3-size);
	line-height: var(--vj-text-heading-3-line);
	letter-spacing: var(--vj-text-heading-3-tracking);
}

.vj-company .vj-card__text {
	margin: 0;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
}

.vj-company .vj-card__note {
	margin: 0;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

/*
 * v2 lifts the open jobs out of their card so each one is a card in its own
 * right, Figma 140:450.
 */
.vj-company__jobs {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
}

.vj-company__jobs-title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: var(--vj-text-heading-2-weight);
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-company__jobs .vj-job-list {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
}

.vj-company__jobs-empty {
	margin: 0;
	padding: 26px;
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
}

/* -- Sidebar cards ------------------------------------------------------- */

.vj-company-verified {
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--vj-space-12) 14px !important;
	align-items: center;
}

.vj-company-verified__stamp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}

.vj-company-details dl {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.vj-company-details dl > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	padding-block: 5px;
}

.vj-company-details dt {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-8);
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-muted);
}

.vj-company-details dt svg {
	flex: none;
}

.vj-company-details dd {
	margin: 0;
	font-size: var(--vj-text-label-14-size);
	font-weight: 600;
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-text-primary);
	text-align: end;
}

/* -- Mobile 390 — Figma 158:340 ------------------------------------------ */

@media (max-width: 860px) {
	.vj-company__head {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"logo"
			"identity"
			"actions"
			"tabs";
		align-items: start;
		gap: var(--vj-space-12);
	}

	.vj-company__logo {
		width: 76px;
		height: 76px;
		margin-block-start: -38px;
		padding: var(--vj-space-8);
	}

	.vj-company__logo img,
	.vj-company__logo > * {
		width: 60px;
		height: 60px;
		border-radius: 14px;
	}

	.vj-company__name {
		font-size: var(--vj-text-heading-2-size);
		line-height: var(--vj-text-heading-2-line);
	}

	.vj-company__actions .vj-btn {
		flex: 1 1 0;
		justify-content: center;
	}

	.vj-company.vj-listing {
		padding-block: var(--vj-space-20) var(--vj-space-32);
	}

	.vj-company .vj-listing__main > .vj-card,
	.vj-company__jobs-empty {
		padding: 18px;
	}

	.vj-company .vj-listing__side > .vj-card {
		padding: 18px;
	}
}

/* ==========================================================================
   Sign in, create an account, reset a password — v2
   Figma 141:221, 161:2, 161:138, 161:241, 161:339 (desktop 1440),
   162:2, 162:66, 162:137, 162:172, 162:208 (mobile 390).

   A 560px navy panel carrying the promise, and the form centred in what is
   left. The frame's illustration is replaced by a soft glow, which is what
   the panel actually draws (a 520px ellipse behind the type).
   ========================================================================== */

.vj-auth {
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	min-height: 100vh;
	padding: 0;
	background: var(--vj-surface-page);
}

/* -- The brand panel ----------------------------------------------------- */

.vj-auth__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--vj-space-40);
	padding: 48px 56px;
	background: var(--vj-brand-navy);
	overflow: hidden;
}

/* The 520px ellipse behind the type in Figma 141:221. */
.vj-auth__brand::before {
	content: "";
	position: absolute;
	inset-block-start: -120px;
	inset-inline-end: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(252, 110, 16, 0.22) 0%, rgba(252, 110, 16, 0) 70%);
	pointer-events: none;
}

.vj-auth__brand > * {
	position: relative;
}

.vj-auth__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-16);
}

.vj-auth__logo img {
	width: 165px;
	height: auto;
	/*
	 * The theme ships one logo, drawn for a light background. Figma uses the
	 * on-dark version here; inverting it is closer than a navy mark on navy.
	 */
	filter: brightness(0) invert(1);
}

.vj-auth__help {
	font-size: var(--vj-text-label-14-size);
	font-weight: 600;
	color: var(--vj-text-on-dark-muted);
	text-decoration: none;
}

.vj-auth__help:hover {
	color: var(--vj-text-on-dark);
}

.vj-auth__pitch {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 448px;
}

.vj-auth__headline {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-l-size);
	font-weight: var(--vj-text-display-l-weight);
	line-height: var(--vj-text-display-l-line);
	letter-spacing: var(--vj-text-display-l-tracking);
	color: var(--vj-text-on-dark);
	text-wrap: balance;
}

.vj-auth__promises {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-auth__promises li {
	display: flex;
	gap: var(--vj-space-12);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-on-dark-muted);
}

.vj-auth__promise-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-block-start: 2px;
	color: var(--vj-brand-orange);
}

.vj-auth__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--vj-text-label-14-size);
	font-weight: 600;
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-text-on-dark);
}

.vj-auth__stats [aria-hidden] {
	color: var(--vj-text-on-dark-faint);
}

/* -- The form panel ------------------------------------------------------ */

.vj-auth__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--vj-space-40) var(--vj-space-24);
}

.vj-auth__aside {
	position: absolute;
	inset-block-start: var(--vj-space-24);
	inset-inline-end: var(--vj-space-32);
	margin: 0;
	font-size: var(--vj-text-body-14-size);
	color: var(--vj-text-muted);
}

.vj-auth__aside a {
	font-weight: 600;
	color: var(--vj-brand-navy);
}

.vj-auth__form-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
	width: 100%;
	max-width: 400px;
}

.vj-auth__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: var(--vj-text-heading-1-weight);
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

/* The lead sits 7px under the title in Figma, inside one stack. */
.vj-auth__title + .vj-auth__lead {
	margin-block-start: -9px;
}

.vj-auth__lead {
	margin: 0;
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
	color: var(--vj-text-muted);
}

.vj-auth__google {
	justify-content: center;
	gap: 10px;
	padding: 13px var(--vj-space-20);
	border: 1px solid var(--vj-border-default);
	border-radius: 11px;
	background: var(--vj-surface-card);
	font-size: var(--vj-text-label-16-size);
	font-weight: 600;
	color: var(--vj-text-primary);
}

.vj-auth__divider {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	margin: 0;
}

.vj-auth__divider::before,
.vj-auth__divider::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--vj-border-default);
}

.vj-auth__divider span {
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	color: var(--vj-text-muted);
}

.vj-auth .vj-form {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
}

.vj-auth .vj-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.vj-auth .vj-field__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.vj-auth .vj-field__label {
	font-size: var(--vj-text-label-14-size);
	font-weight: 600;
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-text-primary);
}

.vj-field__optional {
	font-size: var(--vj-text-label-13-size);
	font-weight: 700;
	color: var(--vj-brand-navy);
}

.vj-auth .vj-field__with-icon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--vj-border-default);
	border-radius: 11px;
	background: var(--vj-surface-card);
}

.vj-auth .vj-field__with-icon:focus-within {
	border-color: transparent;
	box-shadow:
		inset 0 0 0 2px var(--vj-state-focus-ring),
		inset 0 0 0 4px var(--vj-brand-navy);
}

.vj-auth .vj-field__with-icon > svg {
	flex: none;
	color: var(--vj-text-muted);
}

.vj-field__prefix {
	flex: none;
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	color: var(--vj-text-secondary);
}

.vj-auth .vj-field__control {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-primary);
}

.vj-auth .vj-field__control:focus,
.vj-auth .vj-field__control:focus-visible {
	outline: none;
	box-shadow: none;
}

.vj-auth .vj-field__control::placeholder {
	font-weight: 400;
	color: var(--vj-text-muted);
}

.vj-auth .vj-field__reveal {
	flex: none;
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vj-text-muted);
	cursor: pointer;
}

.vj-auth .vj-field__hint {
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-muted);
}

.vj-auth .vj-field__error {
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-status-danger);
}

/* -- Checkboxes ---------------------------------------------------------- */

.vj-auth__keep {
	display: flex;
	align-items: start;
	gap: 10px;
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	color: var(--vj-text-secondary);
	cursor: pointer;
}

.vj-auth__keep input[type="checkbox"] {
	flex: none;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	border: 1px solid var(--vj-border-strong);
	border-radius: 6px;
	background: var(--vj-surface-card);
	appearance: none;
	cursor: pointer;
}

.vj-auth__keep input[type="checkbox"]:checked {
	border-color: var(--vj-brand-navy);
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6.5 4.6 9 10 3.5"/></svg>') center / 12px 12px no-repeat,
		var(--vj-brand-navy);
}

.vj-auth__keep input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--vj-state-focus-ring);
	outline-offset: 2px;
}

.vj-auth__keep a {
	font-weight: 600;
	color: var(--vj-brand-navy);
}

/* -- Buttons and the links under them ------------------------------------ */

.vj-auth__submit {
	justify-content: center;
	border-radius: var(--vj-radius-md);
}

.vj-auth .vj-btn--primary.vj-auth__submit {
	padding: 14px 22px;
	font-size: var(--vj-text-label-16-size);
	font-weight: 600;
}

.vj-auth .vj-btn--quiet.vj-auth__submit {
	padding: 13px 22px;
	border: 0;
	background: var(--vj-surface-page);
	font-size: var(--vj-text-label-15-size);
	font-weight: 600;
	color: var(--vj-text-primary);
}

.vj-auth__switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-muted);
}

.vj-auth__switch a {
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	color: var(--vj-brand-navy);
	text-decoration: none;
}

.vj-auth__switch a:hover {
	text-decoration: underline;
}

.vj-auth__forgot {
	font-size: var(--vj-text-label-13-size);
	font-weight: 600;
	color: var(--vj-brand-navy);
	text-decoration: none;
}

.vj-auth__message:not([hidden]) {
	padding: 12px 14px;
	border-radius: 11px;
	background: var(--vj-surface-soft-blue);
	font-size: var(--vj-text-body-14-size);
	color: var(--vj-brand-navy);
}

.vj-auth__message.is-error:not([hidden]) {
	background: var(--vj-status-danger-soft);
	color: var(--vj-status-danger-ink);
}

/* -- Mobile 390 — Figma 162:2 -------------------------------------------- */

@media (max-width: 900px) {
	.vj-auth {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/*
	 * On a phone the panel is a short header rather than half the screen: the
	 * form is why somebody opened the page, so it starts above the fold.
	 */
	.vj-auth__brand {
		gap: var(--vj-space-20);
		padding: var(--vj-space-24) var(--vj-space-16) var(--vj-space-32);
	}

	.vj-auth__brand::before {
		inset-block-start: -220px;
		inset-inline-end: -120px;
	}

	.vj-auth__headline {
		font-size: var(--vj-text-heading-1-size);
		line-height: var(--vj-text-heading-1-line);
		letter-spacing: var(--vj-text-heading-1-tracking);
	}

	/* The promises are the brand panel's job on desktop; on a phone they would
	   push the form down, and the same three lines are on the home page. */
	.vj-auth__promises {
		display: none;
	}

	.vj-auth__panel {
		justify-content: start;
		padding: var(--vj-space-24) var(--vj-space-16) var(--vj-space-40);
	}

	.vj-auth__aside {
		position: static;
		align-self: center;
		margin-block-end: var(--vj-space-16);
	}

	.vj-auth__title {
		font-size: var(--vj-text-heading-2-size);
		line-height: var(--vj-text-heading-2-line);
	}
}

/* ==========================================================================
   Search: nothing found, and waiting — v2
   Figma 144:8 (no results), 144:242 (loading).

   The frame's "similar jobs you can apply to" row and its synonym tip both
   need data the page does not fetch, so they are not here; the template says
   so where the suggestions are built.
   ========================================================================== */

.vj-empty {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: var(--vj-space-32);
	align-items: start;
	padding: 34px 38px;
	border: 0;
	border-radius: 22px;
	background: var(--vj-surface-card);
}

.vj-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: var(--vj-radius-full);
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
}

.vj-empty__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.vj-empty__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: var(--vj-text-heading-2-weight);
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-empty__text {
	margin: 0;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
}

.vj-empty__ideas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-empty__ideas li + li {
	border-block-start: 1px solid var(--vj-border-default);
}

.vj-empty__ideas a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	padding-block: var(--vj-space-12);
	font-size: var(--vj-text-label-15-size);
	font-weight: 600;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-brand-navy);
	text-decoration: none;
}

.vj-empty__ideas a:hover {
	text-decoration: underline;
}

.vj-empty__ideas svg {
	flex: none;
	color: var(--vj-text-muted);
}

.vj-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-12);
	padding-block-start: var(--vj-space-8);
}

.vj-empty__actions .vj-btn {
	padding: var(--vj-space-12) var(--vj-space-20);
	border-radius: var(--vj-radius-md);
}

@media (max-width: 640px) {
	.vj-empty {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vj-space-16);
		padding: var(--vj-space-20);
	}

	.vj-empty__icon {
		width: 56px;
		height: 56px;
	}

	.vj-empty__actions .vj-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* -- Waiting for a filtered page, Figma 144:242 -------------------------- */

/*
 * Page one is server-rendered, so this is only ever seen when filters change
 * and filters.js fetches a new page. It sets aria-busy on the list, which both
 * announces the wait and draws it.
 */
.vj-job-list[aria-busy="true"] {
	position: relative;
	min-height: 320px;
}

.vj-job-list[aria-busy="true"] > * {
	opacity: 0.25;
	pointer-events: none;
}

.vj-skeleton-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vj-skeleton-card {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: var(--vj-space-12);
	padding: 14px var(--vj-space-16);
	border-radius: 14px;
	background: var(--vj-surface-card);
}

.vj-skeleton {
	border-radius: 6px;
	background: #e6eaf2;
}

.vj-skeleton--logo {
	width: 38px;
	height: 38px;
	border-radius: 10px;
}

.vj-skeleton-card__lines {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
}

.vj-skeleton-card__lines > .vj-skeleton:nth-child(1) { width: 62%; height: 14px; }
.vj-skeleton-card__lines > .vj-skeleton:nth-child(2) { width: 36%; height: 11px; }
.vj-skeleton-card__lines > .vj-skeleton:nth-child(3) { width: 48%; height: 11px; }

/*
 * A slow shimmer rather than a spinner: it says the page is working without
 * implying how long is left. Switched off for anyone who asked for less
 * motion, where the flat grey block is still a perfectly good placeholder.
 */
@media (prefers-reduced-motion: no-preference) {
	.vj-skeleton {
		background: linear-gradient(90deg, #e6eaf2 0%, #eef1f8 50%, #e6eaf2 100%);
		background-size: 200% 100%;
		animation: vj-shimmer 1.4s ease-in-out infinite;
	}

	@keyframes vj-shimmer {
		from { background-position: 100% 0; }
		to   { background-position: -100% 0; }
	}
}

/* ==========================================================================
   Tablet 768 — v2, site wide
   Figma 164:2, 164:330, 165:2, and the "Tablet 768: what changes from
   desktop" sheet on 147:2.

   The handoff is explicit that this is "one breakpoint, not a separate
   design", and that the pages not drawn in v2 are a "port from v1, no
   redesign needed". So the rules below are written once, against the shell
   and the generic page classes, and every template inherits them — rather
   than sixteen pages each being redesigned by hand.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
	/* "Page margin 32px, down from 80px." */
	.vj-container {
		padding-inline: var(--vj-space-32);
	}

	.vj-apply-bar {
		padding-inline: var(--vj-space-32);
	}

	/*
	 * "Two-column bodies become one column. Sidebar cards drop below the main
	 * column in the same order." Source order already puts the sidebar second
	 * everywhere except the job page, which hoists the apply card deliberately.
	 */
	.vj-listing,
	.vj-company.vj-listing {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * "Category and trust tiles go from four across to two." These are the four
	 * grids in the theme that are four across at desktop: the facts on a job,
	 * the stats on a listing band, the category grid on browse, and the tile
	 * rows on the landing pages.
	 */
	.vj-job__tiles,
	.vj-tiles,
	.vj-browse__cats,
	.vj-listing-band .vj-listing__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The three trust items on the home page sit side by side; two and one
	   reads worse than a single column at this width. */
	.vj-trust {
		grid-template-columns: minmax(0, 1fr);
	}

	/* "The filter bar wraps to two rows rather than scrolling sideways." */
	.vj-search-band .vj-filters,
	.vj-search-band .vj-filters__body {
		flex-wrap: wrap;
		overflow: visible;
	}

	/* "Breadcrumb wraps rather than truncating." */
	.vj-breadcrumb {
		flex-wrap: wrap;
	}

	.vj-breadcrumb > * {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}

	/*
	 * "Five columns become three, with the city links on their own row
	 * underneath." The city column is the last one, so it spans the full width
	 * on its own row rather than sitting half-empty beside a short column.
	 */
	.vj-footer__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vj-footer__cols > :last-child {
		grid-column: 1 / -1;
	}

	.vj-footer__bottom {
		flex-wrap: wrap;
	}
}

/* -- The More menu ------------------------------------------------------- */

/*
 * Walk-ins and Career advice are inline above 1200, inside More between 768
 * and 1199, and in the mobile menu below 768. All three states come from the
 * same markup.
 */
.vj-nav__item--more {
	display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
	.vj-nav__item--secondary {
		display: none;
	}

	.vj-nav__item--more {
		display: block;
	}
}

.vj-nav__more {
	position: relative;
}

.vj-nav__more > summary {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
	cursor: pointer;
	list-style: none;
}

.vj-nav__more > summary::-webkit-details-marker {
	display: none;
}

.vj-nav__more[open] > summary {
	color: var(--vj-text-primary);
}

.vj-nav__more[open] > summary svg {
	transform: rotate(180deg);
}

.vj-nav__more-list {
	position: absolute;
	z-index: 40;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 0;
	min-width: 180px;
	margin: 0;
	padding: var(--vj-space-8);
	border-radius: 14px;
	background: var(--vj-surface-card);
	box-shadow: 0 12px 28px rgba(7, 11, 58, 0.14);
	list-style: none;
}

.vj-nav__more-list a {
	display: block;
	padding: var(--vj-space-8) 10px;
	border-radius: 10px;
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	color: var(--vj-text-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.vj-nav__more-list a:hover,
.vj-nav__more-list a[aria-current] {
	background: var(--vj-surface-page);
	color: var(--vj-text-primary);
}

/* ==========================================================================
   The ported pages — v2 shell on v1 layouts
   147:2: "Port from v1, no redesign needed" — about and contact, privacy and
   terms, safe job search, grievance officer and the forms, career advice
   index and article, cookie consent, the confirmation screens, walk-ins,
   browse and the salary guide.

   Those pages keep their v1 structure. What they need is the v2 surface: the
   page tint behind them, cards at 18px with v2 padding, and headings on the
   Anek Latin scale rather than v1's. Written once, against the classes they
   already share.
   ========================================================================== */

.vj-main {
	background: var(--vj-surface-page);
}

/* v1 drew cards with a 1px border and a 12px radius; v2 drops the border. */
.vj-main .vj-card {
	border: 0;
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
}

.vj-prose h1,
.vj-section__title,
.vj-listing__title {
	font-family: var(--vj-font-display);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

.vj-prose h2,
.vj-prose h3 {
	font-family: var(--vj-font-display);
	color: var(--vj-text-primary);
}

.vj-prose p,
.vj-prose li {
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
	color: var(--vj-text-secondary);
}

/*
 * v2 has one chip, at 7px by 13px on a full radius. v1 had several sizes; this
 * settles them so a chip on the walk-ins page matches one on a job.
 */
.vj-main .vj-chip {
	padding: 7px 13px;
	border-radius: var(--vj-radius-full);
	font-size: var(--vj-text-body-14-size);
	font-weight: 500;
	line-height: var(--vj-text-body-14-line);
}

.vj-main .vj-notice {
	border: 0;
	border-radius: 16px;
}