/*
 * Vula Amathuba Festival: site and portal styles.
 * Depends on tokens.css (enqueued first). Phone first: base rules are for 360 px, then 480, 760, 900 and 1024.
 * Class names are agreed with the developer session (docs/design.md). Scripts use data attributes only.
 * No third-party fonts, icons or scripts. Montserrat is self-hosted from plugin/assets/fonts/.
 */

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Base ----------
   Element rules sit inside :where() so they carry no specificity and every component class wins. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.vula-body {
	margin: 0;
	font-family: var(--vula-font);
	font-size: var(--vula-fs-2);
	line-height: var(--vula-lh-body);
	color: var(--vula-ink);
	background: var(--vula-paper);
	-webkit-font-smoothing: antialiased;
}

.vula {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.vula-main {
	flex: 1 0 auto;
}

:where(.vula) img,
:where(.vula) svg {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(.vula) a {
	color: var(--vula-orange-deep);
	text-underline-offset: 0.15em;
}

:where(.vula) a:hover {
	color: var(--vula-navy);
}

.vula :focus-visible {
	outline: 3px solid var(--vula-focus);
	outline-offset: 2px;
}

:where(.vula) :where(h1, h2, h3, h4) {
	margin: 0;
	line-height: var(--vula-lh-heading);
	font-weight: 700;
	text-wrap: balance;
}

:where(.vula) p {
	margin: 0 0 var(--vula-s-4);
}

:where(.vula) p:last-child {
	margin-bottom: 0;
}

:where(.vula) :where(ul, ol) {
	margin: 0 0 var(--vula-s-4);
	padding-left: 1.25rem;
}

.vula-wrap {
	width: 100%;
	max-width: var(--vula-wrap);
	margin-inline: auto;
	padding-inline: var(--vula-gutter);
}

.vula-wrap--narrow {
	max-width: var(--vula-wrap-narrow);
}

.vula-skip {
	position: absolute;
	top: -100px;
	left: var(--vula-gutter);
	z-index: 100;
	padding: var(--vula-s-3) var(--vula-s-4);
	background: var(--vula-navy);
	color: var(--vula-white);
	border-radius: 0 0 var(--vula-radius-sm) var(--vula-radius-sm);
	text-decoration: none;
	font-weight: 700;
}

.vula-skip:focus {
	top: 0;
}

/* The hidden attribute wins over any display value set on a component (.vula-field is a grid,
   which used to show the RSVP "If other" boxes before Other was chosen). */
[hidden] {
	display: none !important;
}

.vula-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Type helpers ---------- */

.vula-eyebrow {
	margin: 0 0 var(--vula-s-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--vula-track-eyebrow);
	text-transform: uppercase;
	color: var(--vula-orange-deep);
}

.vula-band--navy .vula-eyebrow,
.vula-band--ink .vula-eyebrow,
.vula-pagehead .vula-eyebrow,
.vula-hero .vula-eyebrow {
	color: var(--vula-gold);
}

.vula-lead {
	font-size: var(--vula-fs-3);
	color: var(--vula-muted);
}

.vula-band--navy .vula-lead,
.vula-band--ink .vula-lead {
	color: var(--vula-on-navy-muted);
}

.vula-quiet {
	color: var(--vula-muted);
	font-size: var(--vula-fs-1);
}

/* The wordmark: an HTML lock-up, never text baked into an image. */
.vula-wordmark {
	display: inline-block;
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vula-navy);
}

.vula-wordmark__accent {
	color: var(--vula-orange-deep);
}

.vula-band--navy .vula-wordmark,
.vula-foot .vula-wordmark {
	color: var(--vula-white);
}

.vula-band--navy .vula-wordmark__accent,
.vula-foot .vula-wordmark__accent {
	color: var(--vula-orange);
}

/* ---------- Header ---------- */

.vula-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--vula-white);
	border-bottom: 1px solid var(--vula-line);
}

.vula-header__inner {
	display: flex;
	align-items: center;
	gap: var(--vula-s-3);
	min-height: 64px;
	padding-block: var(--vula-s-2);
}

.vula-header__logo {
	flex: 0 1 auto;
	display: block;
	margin-right: auto;
	min-width: 0;
	text-decoration: none;
}

.vula-header__logo img {
	height: 36px;
	width: auto;
}

.vula-header__brand {
	display: flex;
	flex-direction: column;
	margin-right: auto;
	min-width: 0;
	text-decoration: none;
	color: var(--vula-navy);
	line-height: 1;
}

.vula-header__name {
	font-size: 0.9375rem;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vula-header__name .vula-wordmark__accent,
.vula-header__name-accent {
	color: var(--vula-orange-deep);
}

.vula-header__line {
	margin-top: 3px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vula-muted);
	line-height: 1.2;
}

.vula-header .vula-header__cta {
	display: none;
}

/* Navigation: the bar (from 1024 px) and the menu (below it) render the same list. */
.vula-nav--bar {
	display: none;
}

.vula-nav__list,
.vula-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vula-menu {
	position: relative;
	flex: 0 0 auto;
	margin-left: auto;
}

.vula-menu__button {
	display: inline-flex;
	align-items: center;
	gap: var(--vula-s-2);
	min-height: var(--vula-tap);
	min-width: var(--vula-tap);
	padding: 0 var(--vula-s-3);
	border-radius: var(--vula-radius-sm);
	border: 1.5px solid var(--vula-line);
	background: var(--vula-white);
	color: var(--vula-navy);
	font-weight: 700;
	font-size: var(--vula-fs-1);
	cursor: pointer;
	list-style: none;
}

.vula-menu__button::-webkit-details-marker {
	display: none;
}

.vula-menu__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vula-menu__icon {
	position: relative;
	width: 18px;
	height: 12px;
}

.vula-menu__icon::before,
.vula-menu__icon::after,
.vula-menu__icon span {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--vula-fast) var(--vula-ease), opacity var(--vula-fast);
}

.vula-menu__icon::before {
	top: 0;
}

.vula-menu__icon span {
	top: 5px;
}

.vula-menu__icon::after {
	bottom: 0;
}

.vula-menu[open] .vula-menu__icon::before {
	transform: translateY(5px) rotate(45deg);
}

.vula-menu[open] .vula-menu__icon::after {
	transform: translateY(-5px) rotate(-45deg);
}

.vula-menu[open] .vula-menu__icon span {
	opacity: 0;
}

.vula-menu__panel {
	position: absolute;
	top: calc(100% + var(--vula-s-3));
	right: 0;
	width: min(20rem, calc(100vw - 2 * var(--vula-gutter)));
	max-height: calc(100dvh - 6rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--vula-s-2);
	background: var(--vula-navy);
	color: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow-lift);
}

.vula-menu__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--vula-s-4);
	border-radius: var(--vula-radius-sm);
	color: var(--vula-white);
	font-weight: 600;
	text-decoration: none;
}

.vula-menu__list a:hover,
.vula-menu__list a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: var(--vula-white);
}

.vula-menu__list a[aria-current="page"] {
	color: var(--vula-gold);
}

.vula-menu__list li + li {
	border-top: 1px solid var(--vula-line-dark);
}

/* ---------- Buttons ---------- */

.vula-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vula-s-2);
	min-height: var(--vula-tap);
	padding: 0.75rem 1.25rem;
	border-radius: var(--vula-radius-sm);
	border: 2px solid transparent;
	font: inherit;
	font-size: var(--vula-fs-2);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vula-fast) var(--vula-ease), color var(--vula-fast), border-color var(--vula-fast), transform var(--vula-fast) var(--vula-ease), box-shadow var(--vula-fast);
}

.vula-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--vula-shadow);
}

.vula-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.vula-btn--primary {
	background: var(--vula-orange);
	border-color: var(--vula-orange);
	color: var(--vula-navy);
}

.vula-btn--primary:hover {
	background: #EC8748;
	border-color: #EC8748;
	color: var(--vula-navy);
}

.vula-btn--gold {
	background: var(--vula-gold);
	border-color: var(--vula-gold);
	color: var(--vula-navy);
}

.vula-btn--gold:hover {
	background: #F5C070;
	border-color: #F5C070;
	color: var(--vula-navy);
}

.vula-btn--dark {
	background: var(--vula-navy);
	border-color: var(--vula-navy);
	color: var(--vula-white);
}

.vula-btn--dark:hover {
	background: var(--vula-navy-deep);
	border-color: var(--vula-navy-deep);
	color: var(--vula-white);
}

/* Ghost: outlined. Dark grounds get a white outline, light grounds a navy one. */
.vula-btn--ghost {
	background: transparent;
	border-color: var(--vula-navy);
	color: var(--vula-navy);
}

.vula-btn--ghost:hover {
	background: var(--vula-navy);
	color: var(--vula-white);
}

.vula-hero .vula-btn--ghost,
.vula-pagehead .vula-btn--ghost,
.vula-band--navy .vula-btn--ghost,
.vula-band--ink .vula-btn--ghost,
.vula-appbar .vula-btn--ghost,
.vula-foot .vula-btn--ghost {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--vula-white);
}

.vula-hero .vula-btn--ghost:hover,
.vula-pagehead .vula-btn--ghost:hover,
.vula-band--navy .vula-btn--ghost:hover,
.vula-band--ink .vula-btn--ghost:hover,
.vula-appbar .vula-btn--ghost:hover,
.vula-foot .vula-btn--ghost:hover {
	background: var(--vula-white);
	border-color: var(--vula-white);
	color: var(--vula-navy);
}

.vula-btn--small {
	padding: 0.5rem 1rem;
	font-size: var(--vula-fs-1);
}

.vula-btn--large {
	padding: 1rem 1.75rem;
	font-size: var(--vula-fs-3);
}

.vula-btn--block {
	display: flex;
	width: 100%;
}

.vula-btn[disabled],
.vula-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* A row of buttons: stacked on phones, inline from 480 px. */
.vula-actions {
	display: flex;
	flex-direction: column;
	gap: var(--vula-s-3);
}

.vula-actions .vula-btn {
	width: 100%;
}

/* ---------- Bands and sections ---------- */

.vula-band {
	padding-block: var(--vula-s-7);
	background: var(--vula-paper);
	color: var(--vula-ink);
}

.vula-band--white {
	background: var(--vula-white);
}

.vula-band--navy {
	background: var(--vula-navy);
	color: var(--vula-white);
}

.vula-band--ink {
	background: var(--vula-navy-deep);
	color: var(--vula-white);
}

.vula-band--navy a:not(.vula-btn),
.vula-band--ink a:not(.vula-btn),
.vula-pagehead a:not(.vula-btn) {
	color: var(--vula-gold);
}

.vula-section__head {
	margin-bottom: var(--vula-s-5);
}

.vula-section__title {
	font-size: var(--vula-fs-5);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.vula-section__lead {
	margin-top: var(--vula-s-3);
	font-size: var(--vula-fs-3);
	color: var(--vula-muted);
}

.vula-band--navy .vula-section__lead,
.vula-band--ink .vula-section__lead {
	color: var(--vula-on-navy-muted);
}

.vula-section__more {
	margin-top: var(--vula-s-5);
}

/* Page head: the compact navy header used by inner pages (RSVP, About, and so on). */
.vula-pagehead {
	background: var(--vula-navy);
	color: var(--vula-white);
	padding-block: var(--vula-s-6) var(--vula-s-6);
	background-image: linear-gradient(135deg, rgba(56, 77, 130, 0.45), transparent 60%);
}

.vula-pagehead__title {
	font-size: var(--vula-fs-6);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-transform: uppercase;
}

.vula-pagehead__lead {
	margin-top: var(--vula-s-3);
	font-size: var(--vula-fs-3);
	color: var(--vula-on-navy-muted);
	max-width: 40rem;
}

/* ---------- Red corner brackets ---------- */

.vula-brackets {
	position: relative;
	padding: var(--vula-s-4);
}

.vula-brackets::before,
.vula-brackets::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	border: var(--vula-bracket) solid var(--vula-red);
	pointer-events: none;
}

.vula-brackets::before {
	top: 0;
	left: 0;
	border-right: 0;
	border-bottom: 0;
}

.vula-brackets::after {
	right: 0;
	bottom: 0;
	border-left: 0;
	border-top: 0;
}

/* ---------- Hero ---------- */

.vula-hero {
	position: relative;
	overflow: hidden;
	background: var(--vula-navy);
	color: var(--vula-white);
}

.vula-hero__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: min(34rem, 78vh);
	z-index: 0;
}

.vula-hero__media {
	overflow: hidden;
}

/* The skyline sits on the media div as a decorative background on the home hero only.
   The div is empty and aria-hidden in the template; inner-page heroes stay plain navy. */
.vula-hero--home .vula-hero__media {
	background-color: var(--vula-navy-deep);
	background-image: image-set(
		url("../img/hero/hero-portrait-480.webp") 1x,
		url("../img/hero/hero-portrait-720.webp") 2x);
	background-image: -webkit-image-set(
		url("../img/hero/hero-portrait-480.webp") 1x,
		url("../img/hero/hero-portrait-720.webp") 2x);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

/* Two classes so this outranks the generic .vula img sizing. */
.vula-hero .vula-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.vula-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(56, 77, 130, 0.3) 0%, rgba(15, 27, 51, 0.5) 45%, var(--vula-navy) 100%);
}

.vula-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--vula-s-7) var(--vula-s-6);
	display: grid;
	gap: var(--vula-s-5);
}

.vula-hero__text {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--vula-s-4);
}

.vula-hero__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--vula-track-eyebrow);
	text-transform: uppercase;
	color: var(--vula-on-navy-muted);
}

.vula-hero__title {
	font-size: var(--vula-fs-7);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: var(--vula-track-display);
	text-transform: uppercase;
}

.vula-hero__title-accent {
	display: block;
	color: var(--vula-orange);
}

.vula-hero__tagline {
	margin: 0;
	font-size: var(--vula-fs-1);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vula-white);
}

.vula-hero__lead {
	margin: 0;
	font-size: var(--vula-fs-3);
	color: rgba(255, 255, 255, 0.86);
	max-width: 34rem;
}

.vula-hero__main,
.vula-hero__side {
	display: grid;
	gap: var(--vula-s-4);
}

.vula-hero__side {
	gap: var(--vula-s-5);
}

.vula-hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--vula-s-3);
}

.vula-hero__actions .vula-btn {
	width: 100%;
}

/* The date lock-up, as on the banner: huge orange day, month, green rule, venue in orange. */
.vula-datemark {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--vula-s-3);
	align-items: end;
}

.vula-datemark__day {
	grid-row: 1 / 3;
	font-size: clamp(4.5rem, 24vw, 6.5rem);
	font-weight: 900;
	line-height: 0.82;
	letter-spacing: -0.04em;
	color: var(--vula-orange);
}

.vula-datemark__time {
	align-self: end;
	font-size: var(--vula-fs-1);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vula-on-navy-muted);
}

.vula-datemark__month {
	font-size: var(--vula-fs-4);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

.vula-datemark__month small {
	display: block;
	margin-top: 2px;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--vula-on-navy-muted);
}

.vula-datemark__rule {
	grid-column: 1 / -1;
	height: 3px;
	margin: var(--vula-s-3) 0 var(--vula-s-3);
	background: var(--vula-green-bright);
}

.vula-datemark__venue {
	grid-column: 1 / -1;
	font-size: var(--vula-fs-3);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vula-orange);
}

.vula-datemark__address {
	grid-column: 1 / -1;
	margin: var(--vula-s-1) 0 0;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	color: var(--vula-white);
}

/* ---------- Countdown ---------- */

.vula-countdown {
	display: grid;
	gap: var(--vula-s-3);
}

.vula-countdown__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--vula-track-eyebrow);
	text-transform: uppercase;
	color: var(--vula-on-navy-muted);
}

.vula-countdown__units {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--vula-s-2);
}

.vula-countdown--dhm .vula-countdown__units {
	grid-template-columns: repeat(3, 1fr);
}

.vula-countdown__unit {
	padding: var(--vula-s-3) var(--vula-s-1);
	border: 1px solid var(--vula-line-dark);
	border-radius: var(--vula-radius-sm);
	background: rgba(255, 255, 255, 0.06);
	text-align: center;
}

.vula-countdown__n {
	display: block;
	font-size: clamp(1.75rem, 8.5vw, 2.5rem);
	font-weight: 900;
	line-height: 1;
	color: var(--vula-gold);
	font-variant-numeric: tabular-nums;
}

.vula-countdown__l {
	display: block;
	margin-top: var(--vula-s-1);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vula-on-navy-muted);
}

.vula-countdown--compact .vula-countdown__units {
	grid-template-columns: 1fr;
}

.vula-countdown__live {
	padding: var(--vula-s-3) var(--vula-s-4);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-green);
	color: var(--vula-white);
	font-weight: 700;
}

.vula-countdown__live p {
	margin: 0;
}

/* ---------- Grid and cards ---------- */

.vula-grid {
	display: grid;
	gap: var(--vula-s-5);
	grid-template-columns: 1fr;
}

.vula-card {
	display: flex;
	flex-direction: column;
	gap: var(--vula-s-2);
	padding: var(--vula-s-4);
	background: var(--vula-white);
	color: var(--vula-ink);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow);
}

.vula-card--link {
	text-decoration: none;
	transition: transform var(--vula-fast) var(--vula-ease), box-shadow var(--vula-fast);
}

.vula-card--link:hover {
	transform: translateY(-2px);
	box-shadow: var(--vula-shadow-lift);
	color: var(--vula-ink);
}

.vula-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vula-s-3);
}

.vula-card__logo {
	display: flex;
	align-items: center;
	height: 56px;
	margin-bottom: var(--vula-s-2);
}

.vula-card__logo img {
	max-height: 56px;
	width: auto;
	max-width: 160px;
}

.vula-card__title {
	font-size: var(--vula-fs-3);
	font-weight: 700;
	line-height: 1.25;
}

.vula-card__tag {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: var(--vula-radius-pill);
	background: var(--vula-paper);
	color: var(--vula-muted);
	font-size: var(--vula-fs-0);
	font-weight: 600;
	white-space: nowrap;
}

.vula-card__body {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-card__list li {
	padding-left: 1rem;
	position: relative;
}

.vula-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vula-orange);
}

.vula-card__actions {
	margin-top: auto;
	padding-top: var(--vula-s-2);
}

.vula-card__more {
	display: inline-flex;
	align-items: center;
	min-height: var(--vula-tap);
	font-weight: 700;
	text-decoration: none;
}

.vula-card__more:hover {
	text-decoration: underline;
}

/* Zone colour on the top border: work orange, money gold, civic green. */



/* ---------- Chips ---------- */

.vula-chips {
	display: flex;
	gap: var(--vula-s-2);
	overflow-x: auto;
	padding-bottom: var(--vula-s-1);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.vula-chips::-webkit-scrollbar {
	display: none;
}

/* A chip row that wraps instead of scrolling, so every chip stays in view at every width
   (the status filter on the applicant list, 0.10.1 D8). The space below keeps the next button
   apart from a second line of chips. */
.vula-chips--wrap {
	flex-wrap: wrap;
	overflow: visible;
	padding-bottom: 0;
	margin-bottom: var(--vula-s-4);
}

.vula-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: var(--vula-tap);
	padding: 0.5rem 1rem;
	border-radius: var(--vula-radius-pill);
	border: 1.5px solid var(--vula-line);
	background: var(--vula-white);
	color: var(--vula-ink);
	font: inherit;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.vula-chip:hover {
	border-color: var(--vula-navy);
	color: var(--vula-navy);
}

.vula-chip.is-active,
.vula-chip[aria-pressed="true"] {
	background: var(--vula-navy);
	border-color: var(--vula-navy);
	color: var(--vula-white);
}

/* ---------- Facts (label and value pairs) ---------- */

.vula-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vula-s-3);
	margin: 0;
}

.vula-facts > div {
	display: grid;
	gap: 2px;
}

.vula-facts dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vula-muted);
}

.vula-facts dd {
	margin: 0;
	font-weight: 600;
}

.vula-band--navy .vula-facts dt,
.vula-foot .vula-facts dt {
	color: var(--vula-on-navy-muted);
}

/* ---------- Ladder: Learn, Connect, Grow, Succeed ---------- */

.vula-ladder {
	padding-block: var(--vula-s-7);
	background: var(--vula-navy-deep);
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px),
		radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px),
		radial-gradient(circle at 45% 85%, rgba(255, 255, 255, 0.04) 1px, transparent 1.5px),
		linear-gradient(112deg, transparent 0 62%, rgba(241, 176, 82, 0.55) 62.1%, rgba(241, 176, 82, 0.55) 62.3%, transparent 62.4%);
	background-size: 90px 90px, 130px 130px, 110px 110px, 100% 100%;
	color: var(--vula-white);
	text-align: center;
}

.vula-ladder__list {
	display: grid;
	gap: var(--vula-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-ladder__word {
	font-size: clamp(2rem, 11vw, 3.75rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.vula-ladder__word--learn {
	color: var(--vula-white);
}

.vula-ladder__word--connect {
	color: var(--vula-green-bright);
}

.vula-ladder__word--grow {
	color: var(--vula-red);
}

.vula-ladder__word--succeed {
	color: var(--vula-gold);
}

.vula-ladder__note {
	margin: var(--vula-s-5) 0 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-on-navy-muted);
}

/* ---------- Agencies strip: logos on white, as on the banner's own partner strip ---------- */

.vula-agencies {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--vula-s-3);
	margin: 0;
	padding: var(--vula-s-4);
	list-style: none;
	background: var(--vula-white);
	border-radius: var(--vula-radius);
}

.vula-agencies li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: var(--vula-s-2);
}

.vula-agencies a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.vula-agencies img {
	max-height: 48px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* ---------- Forms ---------- */

.vula-form {
	display: grid;
	gap: var(--vula-s-5);
}

.vula-form__note {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-form__status {
	padding: var(--vula-s-4);
	border-left: 4px solid var(--vula-red);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-error-bg);
	color: var(--vula-ink);
}

.vula-form__status--ok {
	border-left-color: var(--vula-green);
	background: var(--vula-ok-bg);
}

.vula-form__status-title {
	margin: 0 0 var(--vula-s-2);
	font-weight: 700;
}

.vula-form__status ul {
	margin: 0;
	padding-left: 1.1rem;
}

.vula-form__actions {
	display: grid;
	gap: var(--vula-s-3);
}

.vula-form__actions .vula-btn {
	width: 100%;
}

.vula-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vula-fieldset > legend {
	padding: 0;
	margin-bottom: var(--vula-s-3);
	font-size: var(--vula-fs-4);
	font-weight: 800;
	line-height: 1.2;
}

.vula-fieldset__hint {
	margin: calc(-1 * var(--vula-s-2)) 0 var(--vula-s-4);
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-field {
	display: grid;
	gap: var(--vula-s-2);
}

/* Fields placed directly inside a fieldset (portal steps) need their own spacing;
   inside .vula-form the grid gap already handles it. */
.vula-fieldset > .vula-field + .vula-field {
	margin-top: var(--vula-s-4);
}

.vula-field > label,
.vula-field__legend {
	font-weight: 700;
	line-height: 1.3;
}

.vula-field__help {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-field input[type="text"],
.vula-field input[type="email"],
.vula-field input[type="tel"],
.vula-field input[type="password"],
.vula-field input[type="number"],
.vula-field input[type="search"],
.vula-field input[type="url"],
.vula-field input[type="date"],
.vula-field input[type="month"],
.vula-field select,
.vula-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	border: 1.5px solid #B9C2D0;
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
	color: var(--vula-ink);
	font: inherit;
	font-size: var(--vula-fs-2); /* never below 16 px: stops phone zoom */
	line-height: 1.4;
	transition: border-color var(--vula-fast), box-shadow var(--vula-fast);
}

.vula-field textarea {
	min-height: 6rem;
	resize: vertical;
}

.vula-field select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2317233A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
}

.vula-field input:focus,
.vula-field select:focus,
.vula-field textarea:focus {
	border-color: var(--vula-navy);
	outline: 3px solid var(--vula-focus);
	outline-offset: 1px;
}

.vula-field input::placeholder,
.vula-field textarea::placeholder {
	color: #7A8496;
}

.vula-field.has-error input,
.vula-field.has-error select,
.vula-field.has-error textarea {
	border-color: var(--vula-red);
}

.vula-field__error {
	margin: 0;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	color: var(--vula-red);
}

.vula-req {
	color: var(--vula-red);
	font-weight: 700;
}

/* Choice groups: each option is at least a 44 px row.
   Two markups are supported: the mockups' .vula-choices with label.vula-radio, and
   field.php's fieldset.vula-radios with div.vula-radio (input + <label>). */
.vula-choices,
.vula-radios {
	display: grid;
	gap: var(--vula-s-2);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Short options pack two or three across; long ones take the full width on their own. */
.vula-radios {
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.vula-choices--inline {
	grid-template-columns: repeat(2, 1fr);
}

.vula-radios > legend {
	grid-column: 1 / -1;
	padding: 0;
	margin-bottom: var(--vula-s-1);
	font-weight: 700;
	line-height: 1.3;
}

.vula-radios > .vula-field__help {
	grid-column: 1 / -1;
	margin-top: calc(-1 * var(--vula-s-1));
}

.vula-radio,
.vula-check {
	display: flex;
	align-items: flex-start;
	gap: var(--vula-s-3);
	min-height: var(--vula-tap);
	padding: 0.625rem 0.875rem;
	border: 1.5px solid var(--vula-line);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
	cursor: pointer;
	transition: border-color var(--vula-fast), background-color var(--vula-fast);
}

.vula-radio:hover,
.vula-check:hover {
	border-color: var(--vula-navy);
}

.vula-radio input,
.vula-check input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--vula-orange-deep);
	cursor: pointer;
}

.vula-radio span,
.vula-radio > label,
.vula-check span,
.vula-check > label {
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

/* Keep the required mark with the last word: no line holding only "*" (consent boxes at 360 px). */
.vula-check > label,
.vula-radio > label,
.vula-check > span,
.vula-radio > span,
.vula-field > label,
.vula-field__legend {
	text-wrap: pretty;
}

/* Choice rows are one <label> wrapping the input and its text, so the whole row (44 px and more)
   is the tap target; the box itself stays 22 px. */
label.vula-check,
label.vula-radio {
	font-weight: 500;
	line-height: 1.4;
}

.vula-radio:has(input:checked),
.vula-check:has(input:checked) {
	border-color: var(--vula-navy);
	background: #F1F4FA;
}

.vula-radio:has(input:focus-visible),
.vula-check:has(input:focus-visible) {
	outline: 3px solid var(--vula-focus);
	outline-offset: 1px;
}

.vula-field--consent .vula-check {
	align-items: flex-start;
}

.vula-field__privacy {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

/* A follow-up text input revealed by "Other". */
.vula-field--other {
	margin-top: calc(-1 * var(--vula-s-2));
}

/* Honeypot: off screen, never display none (bots check). */
.vula-hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Notices ---------- */

.vula-notice {
	padding: var(--vula-s-4);
	border-left: 4px solid var(--vula-navy);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
	color: var(--vula-ink);
}

.vula-notice--ok {
	border-left-color: var(--vula-green);
	background: var(--vula-ok-bg);
}

.vula-notice--warn {
	border-left-color: var(--vula-gold);
	background: var(--vula-warn-bg);
}

.vula-notice--error {
	border-left-color: var(--vula-red);
	background: var(--vula-error-bg);
}

/* ---------- Thank-you ---------- */

.vula-thanks {
	display: grid;
	gap: var(--vula-s-5);
}

.vula-thanks__card {
	gap: var(--vula-s-4);
}

.vula-thanks__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--vula-green);
	color: var(--vula-white);
	font-size: 1.5rem;
	font-weight: 900;
}

/* ---------- Footer ---------- */

.vula-foot {
	background: var(--vula-navy);
	color: var(--vula-white);
	padding-block: var(--vula-s-7) var(--vula-s-5);
}

.vula-foot a:not(.vula-btn) {
	color: var(--vula-white);
}

.vula-foot a:not(.vula-btn):hover {
	color: var(--vula-gold);
}

.vula-foot__inner {
	display: grid;
	gap: var(--vula-s-6);
}

.vula-foot__brand {
	display: grid;
	gap: var(--vula-s-3);
}

.vula-foot__brand .vula-wordmark {
	font-size: var(--vula-fs-5);
}

.vula-foot__partner {
	display: flex;
	align-items: center;
	gap: var(--vula-s-3);
	margin: 0;
	font-size: var(--vula-fs-0);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vula-on-navy-muted);
}

.vula-foot__partner img {
	flex: 0 0 auto;
	height: 56px;
	width: auto;
	padding: 4px 6px;
	background: var(--vula-white);
	border-radius: 6px;
}

.vula-foot__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vula-s-5);
}

.vula-foot__label {
	margin: 0 0 var(--vula-s-3);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vula-on-navy-muted);
}

.vula-foot__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.vula-foot__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	text-decoration: none;
	font-weight: 500;
}

.vula-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 var(--vula-s-3);
	border: 1.5px solid var(--vula-line-dark);
	border-radius: var(--vula-radius-pill);
	font-size: var(--vula-fs-1);
	font-weight: 600;
	text-decoration: none;
}

.vula-social a:hover {
	border-color: var(--vula-gold);
}

.vula-foot__agencies {
	display: grid;
	gap: var(--vula-s-3);
}

.vula-foot__copy {
	margin: 0;
	padding-top: var(--vula-s-4);
	border-top: 1px solid var(--vula-line-dark);
	font-size: var(--vula-fs-0);
	color: var(--vula-on-navy-muted);
}

/* ---------- Search and filter tools ---------- */

.vula-band--tools {
	padding-block: var(--vula-s-4);
	border-bottom: 1px solid var(--vula-line);
}

.vula-search {
	display: flex;
	gap: var(--vula-s-2);
	margin-bottom: var(--vula-s-3);
}

.vula-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	border: 1.5px solid #B9C2D0;
	border-radius: var(--vula-radius-sm);
	font: inherit;
	font-size: var(--vula-fs-2);
	color: var(--vula-ink);
	background: var(--vula-white);
}

.vula-search__input:focus {
	border-color: var(--vula-navy);
	outline: 3px solid var(--vula-focus);
	outline-offset: 1px;
}

.vula-search__btn {
	flex: 0 0 auto;
}

.vula-search__empty {
	margin-top: var(--vula-s-3);
}

/* ---------- Zones page ---------- */

.vula-zones {
	display: grid;
	gap: var(--vula-s-7);
}

.vula-zone__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vula-s-3);
	padding-bottom: var(--vula-s-2);
	border-bottom: 3px solid var(--vula-orange);
	margin-bottom: var(--vula-s-3);
}

.vula-zone--get-funded .vula-zone__head,
.vula-zone--smart-money-moves .vula-zone__head,
.vula-zone--supplier-hook-ups .vula-zone__head,
.vula-zone--hustlers-corner .vula-zone__head,
.vula-zone--e-waste-marketplace .vula-zone__head {
	border-bottom-color: var(--vula-zone-money);
}

.vula-zone--gauteng-citizen-central .vula-zone__head,
.vula-zone--national-departments .vula-zone__head,
.vula-zone--social-impact-hub .vula-zone__head,
.vula-zone--tech-central .vula-zone__head {
	border-bottom-color: var(--vula-zone-civic);
}

.vula-zone__title {
	font-size: var(--vula-fs-5);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.vula-zone__count {
	flex: 0 0 auto;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	color: var(--vula-muted);
}

.vula-zone__offerings {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
	margin: 0 0 var(--vula-s-4);
	padding: 0;
	list-style: none;
}

.vula-zone__offerings li {
	padding: 0.25rem 0.75rem;
	border-radius: var(--vula-radius-pill);
	background: var(--vula-white);
	border: 1px solid var(--vula-line);
	font-size: var(--vula-fs-0);
	font-weight: 600;
	color: var(--vula-muted);
}

/* Exhibitor cards: two per row on phones, three from 760 px, four from 1024 px. */
.vula-zone .vula-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vula-s-3);
}

.vula-card--exhibitor {
	padding: var(--vula-s-3);
	gap: var(--vula-s-1);
}

.vula-card--exhibitor .vula-card__logo {
	height: 64px;
	margin-bottom: var(--vula-s-1);
	justify-content: flex-start;
}

.vula-card--exhibitor .vula-card__logo img {
	max-height: 52px;
	max-width: 100%;
	object-fit: contain;
}

.vula-card--exhibitor .vula-card__title {
	font-size: var(--vula-fs-1);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.vula-card--exhibitor .vula-card__actions {
	padding-top: 0;
}

.vula-card--exhibitor .vula-card__tag {
	align-self: flex-start;
}

.vula-zone.is-hidden,
.vula-card.is-hidden {
	display: none;
}

/* ---------- Agenda ---------- */

.vula-agenda {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--vula-s-4);
}

.vula-agenda__item {
	position: relative;
	display: grid;
	gap: var(--vula-s-2);
	padding: var(--vula-s-4);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow);
}

.vula-agenda__time {
	font-size: var(--vula-fs-0);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vula-orange-deep);
	font-variant-numeric: tabular-nums;
}

.vula-agenda__title {
	font-size: var(--vula-fs-4);
	font-weight: 800;
	line-height: 1.2;
}

.vula-agenda__list {
	margin: var(--vula-s-2) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
}

.vula-agenda__list li {
	padding: 0.25rem 0.75rem;
	border-radius: var(--vula-radius-pill);
	background: var(--vula-paper);
	font-size: var(--vula-fs-1);
	font-weight: 500;
	color: var(--vula-muted);
}

/* ---------- Prose pages (about, legal) ---------- */

.vula-prose {
	max-width: var(--vula-wrap);
}

.vula-prose h2 {
	margin: var(--vula-s-6) 0 var(--vula-s-3);
	font-size: var(--vula-fs-4);
	font-weight: 800;
}

.vula-prose h2:first-child {
	margin-top: 0;
}

.vula-prose p {
	max-width: 42rem;
}

.vula-prose__cards {
	margin-block: var(--vula-s-6);
}

.vula-quote {
	margin: var(--vula-s-6) 0 0;
	padding: var(--vula-s-5) var(--vula-s-5);
	max-width: 42rem;
	font-size: var(--vula-fs-3);
	font-weight: 500;
	line-height: 1.5;
	color: var(--vula-navy);
}

.vula-quote p {
	max-width: none;
}

.vula-quote footer {
	margin-top: var(--vula-s-3);
	font-size: var(--vula-fs-0);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vula-muted);
}

.vula-toc {
	margin-bottom: var(--vula-s-6);
	padding: var(--vula-s-4);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
}

.vula-toc ol {
	margin: 0;
	padding-left: 1.25rem;
	font-size: var(--vula-fs-1);
	line-height: 2;
}

/* ---------- Contact ---------- */

.vula-contact {
	display: grid;
	gap: var(--vula-s-6);
}

.vula-contact__details {
	display: grid;
	gap: var(--vula-s-5);
	align-content: start;
}

.vula-contact__form {
	padding: var(--vula-s-5) var(--vula-s-4);
}

.vula-social--light a {
	border-color: var(--vula-line);
	color: var(--vula-navy);
}

/* ---------- Jobs ---------- */

.vula-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	border-radius: var(--vula-radius-pill);
	background: var(--vula-warn-bg);
	color: var(--vula-ink);
	font-size: var(--vula-fs-0);
	font-weight: 600;
	white-space: nowrap;
}

.vula-badge--ok {
	background: var(--vula-ok-bg);
	color: var(--vula-green);
}

.vula-card--job .vula-card__title a {
	color: var(--vula-navy);
	text-decoration: none;
}

.vula-card--job .vula-card__title a:hover {
	text-decoration: underline;
}

.vula-card__employer {
	margin: 0;
	font-weight: 600;
	color: var(--vula-muted);
}

.vula-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vula-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-meta li + li::before {
	content: "\00B7";
	margin-right: var(--vula-s-3);
	color: var(--vula-orange);
	font-weight: 900;
}

.vula-empty {
	padding: var(--vula-s-6) var(--vula-s-4);
	text-align: center;
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	border: 1.5px dashed var(--vula-line);
	color: var(--vula-muted);
}

.vula-empty__title {
	margin-bottom: var(--vula-s-2);
	font-size: var(--vula-fs-4);
	font-weight: 800;
	color: var(--vula-navy);
}

/* ---------- Standalone link hit areas (44 px) ----------
   Loose links that are not part of a running sentence: footer facts (Directions,
   Enquiries), the "on this page" lists, form help links (Forgotten your password,
   What employers see), auth alternatives, the app-bar wordmark, and anything marked
   .vula-taplink. Links inside .vula-prose or .vula-field__privacy paragraphs are exempt. */
.vula-toc a,
.vula-auth__alt a,
.vula-auth__hint a,
.vula-taplink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.vula-appbar__brand {
	min-height: 44px;
}

/* Links that sit inside a sentence (footer Directions, Forgotten your password?, What employers see):
   the 44 px hit area comes from an invisible layer, so the line keeps its normal height and the
   sentence does not open up a gap around the link. */
.vula-facts dd a,
.vula-field__help a {
	position: relative;
}

.vula-facts dd a::after,
.vula-field__help a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 44px);
	height: 44px;
	transform: translate(-50%, -50%);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.vula *,
	.vula *::before,
	.vula *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 480 px and up ---------- */

@media (min-width: 480px) {
	.vula-header .vula-header__cta {
		display: inline-flex;
	}

	.vula-menu__label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}

	.vula-header__logo img {
		height: 40px;
	}

	.vula-header__name {
		font-size: 1rem;
	}

	.vula-header__line {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
	}

	.vula-hero__tagline {
		letter-spacing: 0.28em;
	}

	.vula-actions,
	.vula-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.vula-actions .vula-btn,
	.vula-hero__actions .vula-btn {
		width: auto;
	}

	.vula-form__actions {
		grid-template-columns: max-content;
	}

	.vula-form__actions .vula-btn {
		width: auto;
	}

	.vula-grid--2,
	.vula-grid--3,
	.vula-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.vula-facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.vula-agencies {
		grid-template-columns: repeat(3, 1fr);
	}

	.vula-ladder__list {
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		column-gap: var(--vula-s-6);
	}
}

/* ---------- Landscape phones (740 x 360): keep the hero short ---------- */

@media (max-height: 420px) and (orientation: landscape) {
	.vula-hero__inner {
		padding-block: var(--vula-s-5);
	}

	.vula-hero__title {
		font-size: 2.75rem;
	}

	.vula-datemark__day {
		font-size: 4rem;
	}

	.vula-header {
		position: static;
	}
}

/* ---------- 760 px and up ---------- */

@media (min-width: 760px) {
	:root {
		--vula-gutter: 1.5rem;
	}

	.vula-band {
		padding-block: var(--vula-s-8);
	}

	.vula-section__title {
		font-size: 2.25rem;
	}

	.vula-pagehead__title {
		font-size: 3rem;
	}

	.vula-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.vula-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.vula-agencies {
		grid-template-columns: repeat(4, 1fr);
	}

	.vula-ladder__list {
		grid-template-columns: repeat(4, auto);
	}

	.vula-ladder__word {
		font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	}

	.vula-foot__inner {
		grid-template-columns: 1.2fr 1fr;
		align-items: start;
	}

	.vula-foot__agencies,
	.vula-foot__copy {
		grid-column: 1 / -1;
	}

	/* 0.7.0: with the festival facts gone from the footer, the partner line and the link columns share
	   the first row; the agencies strip and the legal line each take the full width below. */
	.vula-foot__inner > .vula-foot__label,
	.vula-foot__inner > .vula-plates,
	.vula-foot__inner > .vula-foot__legal {
		grid-column: 1 / -1;
	}

	.vula-header__logo img {
		height: 48px;
	}

	.vula-header__name {
		font-size: 1.125rem;
	}

	.vula-choices--inline {
		grid-template-columns: repeat(3, 1fr);
	}

	.vula-agenda__item {
		grid-template-columns: 9rem 1fr;
		gap: var(--vula-s-4);
		padding: var(--vula-s-5);
	}

	.vula-agenda__time {
		padding-top: 0.35rem;
	}

	.vula-contact {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.vula-zone .vula-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--vula-s-4);
	}

	.vula-card--exhibitor {
		padding: var(--vula-s-4);
	}
}

/* ---------- 900 px and up: hero in two columns as on the banner (lock-up left, bracketed panel right),
   the skyline full-bleed on the right half fading into navy. No framed image card. ---------- */

@media (min-width: 900px) {
	.vula-hero__media {
		top: 0;
		bottom: 0;
		left: auto;
		right: 0;
		width: 62%;
		height: auto;
	}

	.vula-hero__media::after {
		background:
			linear-gradient(90deg, var(--vula-navy) 0%, rgba(15, 27, 51, 0.55) 45%, rgba(15, 27, 51, 0.35) 100%),
			linear-gradient(180deg, rgba(56, 77, 130, 0.2) 0%, rgba(15, 27, 51, 0.6) 100%);
	}

	.vula-hero .vula-hero__img {
		object-position: center 30%;
	}

	.vula-hero--home .vula-hero__media {
		background-position: center 30%;
	}

	.vula-hero__inner {
		padding-block: var(--vula-s-9);
	}

	.vula-hero__text {
		grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
		gap: var(--vula-s-8);
		align-items: center;
	}

	.vula-hero__title {
		font-size: clamp(4rem, 7vw, 6rem);
	}

	.vula-hero__side {
		position: relative;
		padding: var(--vula-s-6) var(--vula-s-5);
		background: rgba(10, 16, 32, 0.55);
		border-radius: var(--vula-radius);
		backdrop-filter: blur(2px);
	}

	.vula-hero__side::before,
	.vula-hero__side::after {
		content: "";
		position: absolute;
		width: 44px;
		height: 44px;
		border: var(--vula-bracket) solid var(--vula-red);
		pointer-events: none;
	}

	.vula-hero__side::before {
		top: -10px;
		left: -10px;
		border-right: 0;
		border-bottom: 0;
	}

	.vula-hero__side::after {
		right: -10px;
		bottom: -10px;
		border-left: 0;
		border-top: 0;
	}

	.vula-hero__side .vula-hero__actions {
		flex-direction: column;
	}

	.vula-hero__side .vula-hero__actions .vula-btn {
		width: 100%;
	}

	.vula-agencies {
		grid-template-columns: repeat(8, 1fr);
	}

	.vula-agencies li {
		min-height: 72px;
	}
}

/* ---------- 1024 px and up: inline navigation ---------- */

@media (min-width: 1024px) {
	.vula-menu {
		display: none;
	}

	.vula-nav--bar {
		display: block;
		margin-inline: auto var(--vula-s-3);
	}

	.vula-nav__list {
		display: flex;
		gap: var(--vula-s-1);
	}

	.vula-nav__list a {
		display: inline-flex;
		align-items: center;
		min-height: var(--vula-tap);
		padding: 0 var(--vula-s-3);
		border-radius: var(--vula-radius-sm);
		color: var(--vula-navy);
		font-size: var(--vula-fs-1);
		font-weight: 600;
		text-decoration: none;
	}

	.vula-nav__list a:hover,
	.vula-nav__list a:focus-visible {
		background: var(--vula-paper);
		color: var(--vula-navy);
	}

	.vula-nav__list a[aria-current="page"] {
		box-shadow: inset 0 -3px 0 var(--vula-orange);
	}

	.vula-header__brand {
		margin-right: 0;
	}

	.vula-header__inner {
		min-height: 72px;
	}

	.vula-zone .vula-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ============================================================
   Portal (the app): sign in, register, seeker and employer.
   A lighter shell than the public site: a slim app bar, a centred
   card for signed-out screens, a two-column work area when signed in.
   ============================================================ */

/* ---------- App bar ---------- */

.vula-appbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--vula-navy);
	color: var(--vula-white);
}

.vula-appbar__inner {
	display: flex;
	align-items: center;
	gap: var(--vula-s-3);
	min-height: 56px;
	padding-block: var(--vula-s-2);
}

.vula-appbar__brand {
	display: inline-flex;
	align-items: baseline;
	gap: var(--vula-s-2);
	margin-right: auto;
	text-decoration: none;
	color: var(--vula-white);
}

.vula-appbar__brand .vula-wordmark {
	color: var(--vula-white);
	font-size: 1.0625rem;
}

.vula-appbar__brand .vula-wordmark__accent {
	color: var(--vula-orange);
}

.vula-appbar__role {
	display: none;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vula-on-navy-muted);
}

/* Section nav for signed-in users. On phones it is a scrollable pill row on its own
   line under the brand and account button; from 760 px it sits inline in the bar. */
.vula-appbar__inner {
	flex-wrap: wrap;
	row-gap: var(--vula-s-2);
}

.vula-appbar__nav {
	order: 5;
	flex-basis: 100%;
}

.vula-appbar__links {
	display: flex;
	gap: var(--vula-s-1);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.vula-appbar__links::-webkit-scrollbar {
	display: none;
}

.vula-appbar__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--vula-s-3);
	border-radius: var(--vula-radius-sm);
	color: var(--vula-on-navy-muted);
	font-size: var(--vula-fs-1);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.vula-appbar__links a:hover,
.vula-appbar__links a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: var(--vula-white);
}

.vula-appbar__links a[aria-current="page"] {
	color: var(--vula-white);
	box-shadow: inset 0 -3px 0 var(--vula-orange);
}

.vula-appbar__user {
	display: inline-flex;
	align-items: center;
	gap: var(--vula-s-2);
	min-height: var(--vula-tap);
	padding: 0 var(--vula-s-2) 0 var(--vula-s-3);
	border-radius: var(--vula-radius-pill);
	border: 1.5px solid var(--vula-line-dark);
	color: var(--vula-white);
	font-size: var(--vula-fs-1);
	font-weight: 600;
	text-decoration: none;
	background: none;
	cursor: pointer;
}

.vula-appbar__user:hover {
	border-color: var(--vula-gold);
	color: var(--vula-white);
}

.vula-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--vula-orange);
	color: var(--vula-navy);
	font-size: var(--vula-fs-0);
	font-weight: 800;
}

/* ---------- Signed-out auth card ---------- */

.vula-auth {
	min-height: calc(100vh - 56px);
	display: grid;
	align-content: start;
	padding-block: var(--vula-s-6) var(--vula-s-8);
	background:
		radial-gradient(circle at 15% 0%, rgba(56, 77, 130, 0.5), transparent 45%),
		var(--vula-navy);
}

.vula-auth__inner {
	width: 100%;
	max-width: 27rem;
	margin-inline: auto;
	padding-inline: var(--vula-gutter);
}

.vula-auth__card {
	padding: var(--vula-s-6) var(--vula-s-5);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow-lift);
}

.vula-auth__title {
	font-size: var(--vula-fs-5);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: var(--vula-s-2);
}

.vula-auth__lead {
	margin-bottom: var(--vula-s-5);
	color: var(--vula-muted);
}

.vula-auth__alt {
	margin-top: var(--vula-s-5);
	padding-top: var(--vula-s-4);
	border-top: 1px solid var(--vula-line);
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
	text-align: center;
}

.vula-auth__hint {
	margin-top: var(--vula-s-5);
	text-align: center;
	color: var(--vula-on-navy-muted);
	font-size: var(--vula-fs-1);
}

.vula-auth__hint a {
	color: var(--vula-gold);
}

/* ---------- Role chooser ---------- */

.vula-roles {
	display: grid;
	gap: var(--vula-s-4);
	margin-top: var(--vula-s-5);
}

.vula-role {
	display: grid;
	gap: var(--vula-s-2);
	padding: var(--vula-s-5);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	border: 2px solid var(--vula-line);
	text-decoration: none;
	color: var(--vula-ink);
	transition: transform var(--vula-fast) var(--vula-ease), box-shadow var(--vula-fast), border-color var(--vula-fast);
}

.vula-role:hover {
	transform: translateY(-2px);
	box-shadow: var(--vula-shadow-lift);
	border-color: var(--vula-navy);
	color: var(--vula-ink);
}

.vula-role__title {
	font-size: var(--vula-fs-4);
	font-weight: 800;
}

.vula-role__desc {
	margin: 0;
	color: var(--vula-muted);
	font-size: var(--vula-fs-1);
}

.vula-role__go {
	margin-top: var(--vula-s-2);
	font-weight: 700;
	color: var(--vula-orange-deep);
}

/* ---------- Signed-in work area ---------- */

.vula-app {
	padding-block: var(--vula-s-5) var(--vula-s-8);
	background: var(--vula-paper);
	min-height: calc(100vh - 56px);
}

.vula-app__head {
	margin-bottom: var(--vula-s-5);
}

.vula-app__title {
	font-size: var(--vula-fs-6);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.vula-app__lead {
	margin-top: var(--vula-s-2);
	color: var(--vula-muted);
}

.vula-app__grid {
	display: grid;
	gap: var(--vula-s-5);
	grid-template-columns: minmax(0, 1fr);
}

/* Grid children must be allowed to shrink below their content width, or a nowrap
   child (the steps bar, the skills tags) stretches the whole column past the phone. */
.vula-app__grid > * {
	min-width: 0;
}

/* ---------- Stepper ---------- */

.vula-steps {
	display: flex;
	gap: var(--vula-s-1);
	margin-bottom: var(--vula-s-5);
	padding: 0;
	list-style: none;
	counter-reset: step;
	overflow-x: auto;
	scrollbar-width: none;
}

.vula-steps::-webkit-scrollbar {
	display: none;
}

.vula-steps__item {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	gap: var(--vula-s-2);
	padding: var(--vula-s-2) var(--vula-s-3);
	border-radius: var(--vula-radius-pill);
	background: var(--vula-white);
	border: 1.5px solid var(--vula-line);
	font-size: var(--vula-fs-1);
	font-weight: 600;
	color: var(--vula-muted);
	white-space: nowrap;
}

.vula-steps__item::before {
	counter-increment: step;
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vula-paper);
	color: var(--vula-muted);
	font-size: var(--vula-fs-0);
	font-weight: 800;
}

.vula-steps__item.is-current {
	border-color: var(--vula-navy);
	background: var(--vula-navy);
	color: var(--vula-white);
}

/* Step labels became links (a signed-in seeker can jump steps): inherit the pill's
   colour and drop the body-link underline. */
.vula-steps__item a {
	color: inherit;
	text-decoration: none;
}

.vula-steps__item a:hover,
.vula-steps__item a:focus-visible {
	text-decoration: underline;
	color: inherit;
}

.vula-steps__item.is-current::before {
	background: var(--vula-orange);
	color: var(--vula-navy);
}

.vula-steps__item.is-done {
	border-color: var(--vula-green);
	color: var(--vula-green);
}

.vula-steps__item.is-done::before {
	content: "\2713";
	background: var(--vula-green);
	color: var(--vula-white);
}

/* ---------- Completeness meter ---------- */

.vula-meter {
	display: grid;
	gap: var(--vula-s-2);
}

.vula-meter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vula-s-3);
}

.vula-meter__pct {
	font-size: var(--vula-fs-4);
	font-weight: 900;
	color: var(--vula-navy);
	font-variant-numeric: tabular-nums;
}

.vula-meter__track {
	height: 10px;
	border-radius: var(--vula-radius-pill);
	background: var(--vula-line);
	overflow: hidden;
}

.vula-meter__fill {
	height: 100%;
	border-radius: var(--vula-radius-pill);
	background: linear-gradient(90deg, var(--vula-orange), var(--vula-gold));
}

.vula-meter__note {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

/* ---------- Tag input (skills) ---------- */

.vula-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
	padding: var(--vula-s-2);
	border: 1.5px solid #B9C2D0;
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
}

.vula-tags:focus-within {
	border-color: var(--vula-navy);
	outline: 3px solid var(--vula-focus);
	outline-offset: 1px;
}

.vula-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--vula-s-1);
	min-height: 34px;
	padding: 0 var(--vula-s-2) 0 var(--vula-s-3);
	border-radius: var(--vula-radius-pill);
	background: var(--vula-navy);
	color: var(--vula-white);
	font-size: var(--vula-fs-1);
	font-weight: 600;
}

.vula-tag__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: var(--vula-white);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.vula-tags__input {
	flex: 1 1 8rem;
	min-width: 8rem;
	min-height: 34px;
	border: 0;
	font: inherit;
	font-size: var(--vula-fs-2);
	background: none;
	color: var(--vula-ink);
}

.vula-tags__input:focus {
	outline: none;
}

.vula-suggest {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
	margin-top: var(--vula-s-2);
}

.vula-suggest__btn {
	min-height: 36px;
	padding: 0 var(--vula-s-3);
	border-radius: var(--vula-radius-pill);
	border: 1.5px dashed var(--vula-line);
	background: none;
	color: var(--vula-muted);
	font: inherit;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	cursor: pointer;
}

.vula-suggest__btn:hover {
	border-style: solid;
	border-color: var(--vula-navy);
	color: var(--vula-navy);
}

/* ---------- Repeatable rows (experience, education) ---------- */

.vula-repeat {
	display: grid;
	gap: var(--vula-s-4);
}

.vula-repeat__item {
	position: relative;
	display: grid;
	gap: var(--vula-s-3);
	padding: var(--vula-s-4);
	background: var(--vula-paper);
	border-radius: var(--vula-radius-sm);
	border: 1px solid var(--vula-line);
}

.vula-repeat__remove {
	position: absolute;
	top: var(--vula-s-2);
	right: var(--vula-s-2);
	min-height: 36px;
	padding: 0 var(--vula-s-3);
	border: 0;
	border-radius: var(--vula-radius-sm);
	background: none;
	color: var(--vula-red);
	font: inherit;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	cursor: pointer;
}

.vula-repeat__add {
	justify-self: start;
}

/* ---------- CV upload dropzone ---------- */

.vula-upload {
	display: grid;
	gap: var(--vula-s-2);
	padding: var(--vula-s-5);
	text-align: center;
	background: var(--vula-paper);
	border: 1.5px dashed #B9C2D0;
	border-radius: var(--vula-radius-sm);
}

.vula-upload__icon {
	font-size: 1.75rem;
}

.vula-upload__note {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

input[type="file"] {
	font: inherit;
	font-size: var(--vula-fs-2);
	line-height: 1.4;
	color: var(--vula-ink);
	max-width: 100%;
}

.vula-upload input[type="file"] {
	display: block;
	margin: var(--vula-s-1) auto 0;
}

/* The file button itself: give it height and a 16px label. */
input[type="file"]::file-selector-button {
	min-height: 44px;
	margin-right: var(--vula-s-3);
	padding: 0.5rem 1rem;
	border: 2px solid var(--vula-navy);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
	color: var(--vula-navy);
	font: inherit;
	font-size: var(--vula-fs-2);
	font-weight: 700;
	cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
	background: var(--vula-navy);
	color: var(--vula-white);
}

.vula-upload__file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vula-s-3);
	padding: var(--vula-s-3) var(--vula-s-4);
	background: var(--vula-white);
	border: 1px solid var(--vula-line);
	border-radius: var(--vula-radius-sm);
	text-align: left;
}

.vula-upload__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* ---------- Candidate list and filters ---------- */

.vula-filters {
	display: grid;
	gap: var(--vula-s-4);
	padding: var(--vula-s-4);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow);
	align-content: start;
}

.vula-filters__title {
	font-size: var(--vula-fs-3);
	font-weight: 800;
}

.vula-candidate {
	display: grid;
	gap: var(--vula-s-3);
	padding: var(--vula-s-4);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow);
}

.vula-candidate__top {
	display: flex;
	align-items: flex-start;
	gap: var(--vula-s-3);
}

.vula-candidate .vula-avatar {
	width: 44px;
	height: 44px;
	font-size: var(--vula-fs-2);
	flex: 0 0 auto;
}

.vula-candidate__name {
	font-size: var(--vula-fs-3);
	font-weight: 800;
	line-height: 1.2;
}

.vula-candidate__headline {
	margin: 0;
	color: var(--vula-muted);
	font-weight: 600;
}

.vula-candidate__skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-candidate__skills li {
	padding: 0.2rem 0.6rem;
	border-radius: var(--vula-radius-pill);
	background: var(--vula-paper);
	font-size: var(--vula-fs-0);
	font-weight: 600;
	color: var(--vula-muted);
}

.vula-candidate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
}

.vula-candidate__contact {
	margin-top: var(--vula-s-1);
}

.vula-candidate__contact a {
	color: var(--vula-orange-deep);
	font-weight: 600;
	text-decoration: none;
}

.vula-candidate__contact a:hover {
	text-decoration: underline;
}

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

.vula-tiles {
	display: grid;
	gap: var(--vula-s-4);
	grid-template-columns: repeat(2, 1fr);
}

.vula-tile {
	padding: var(--vula-s-4);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow);
}

.vula-tile__n {
	font-size: var(--vula-fs-6);
	font-weight: 900;
	line-height: 1;
	color: var(--vula-navy);
	font-variant-numeric: tabular-nums;
}

.vula-tile__l {
	margin: var(--vula-s-1) 0 0;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	color: var(--vula-muted);
}

/* ---------- Who shortlisted you (seeker dashboard) ---------- */

.vula-reveals {
	margin: 0 0 var(--vula-s-3);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--vula-s-1);
}

.vula-reveals li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vula-s-3);
	padding: var(--vula-s-3) 0;
	border-bottom: 1px solid var(--vula-line);
}

.vula-reveals li:last-child {
	border-bottom: 0;
}

.vula-reveals__co {
	font-weight: 700;
}

.vula-reveals__when {
	flex: 0 0 auto;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

/* ---------- Findability switch ---------- */

.vula-switch {
	display: flex;
	align-items: flex-start;
	gap: var(--vula-s-3);
	padding: var(--vula-s-4);
	background: var(--vula-ok-bg);
	border-radius: var(--vula-radius-sm);
	border: 1px solid #BfE3CD;
}

.vula-switch input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--vula-green);
}

.vula-switch__text strong {
	display: block;
}

.vula-switch__text span {
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

/* ---------- Portal at 760 px and up ---------- */

@media (min-width: 760px) {
	.vula-appbar__role {
		display: inline;
	}

	.vula-appbar__brand {
		margin-right: var(--vula-s-6);
	}

	.vula-appbar__nav {
		order: 0;
		flex-basis: auto;
		margin-right: auto;
	}

	.vula-appbar__links {
		overflow: visible;
	}

	.vula-tiles {
		grid-template-columns: repeat(4, 1fr);
	}

	.vula-app__grid--profile {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}

	.vula-app__grid--profile .vula-app__aside {
		position: sticky;
		top: calc(56px + var(--vula-s-4));
		order: 2;
	}

	/* With the two choices the dashboard aside is taller than a laptop screen: sticky would hide Save. */
	.vula-app__grid--profile .vula-app__aside:has(.vula-visibility-form) {
		position: static;
	}

	.vula-app__grid--candidates {
		grid-template-columns: 17rem minmax(0, 1fr);
		align-items: start;
	}

	.vula-app__grid--candidates .vula-filters {
		position: sticky;
		top: calc(56px + var(--vula-s-4));
	}

	.vula-candidates-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vula-s-4);
	}
}

@media (min-width: 1024px) {
	.vula-candidates-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- QR code (thank-you and print handouts) ---------- */

.vula-qr {
	display: grid;
	justify-items: center;
	gap: var(--vula-s-2);
	margin: 0;
	padding: var(--vula-s-4);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	border: 1px solid var(--vula-line);
	text-align: center;
}

.vula-qr img {
	width: 160px;
	height: 160px;
}

.vula-qr__caption {
	margin: 0;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	color: var(--vula-muted);
	max-width: 20rem;
}

/* Two QR codes side by side on the thank-you page from 480 px. */
.vula-qr-row {
	display: grid;
	gap: var(--vula-s-4);
}

@media (min-width: 480px) {
	.vula-qr-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Locked contact and CV until shortlisting ---------- */

.vula-candidate__reveal {
	margin: 0 0 var(--vula-s-3);
	padding: var(--vula-s-3) var(--vula-s-4);
	background: var(--vula-warn-bg);
	border-radius: var(--vula-radius-sm);
	border-left: 4px solid var(--vula-gold);
	font-size: var(--vula-fs-1);
	color: var(--vula-ink);
}

.vula-btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.vula-locked {
	display: inline-flex;
	align-items: center;
	gap: var(--vula-s-1);
	color: var(--vula-muted);
	font-weight: 500;
	font-style: normal;
}

.vula-locked::before {
	content: "\1F512"; /* padlock */
	font-size: 0.85em;
}

/* ============================================================
   Decision 0002: bottom navigation, zone icon grid, agency plates.
   ============================================================ */

/* ---------- Bottom navigation (phones only) ---------- */

.vula-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--vula-navy);
	border-top: 1px solid var(--vula-line-dark);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.vula-bottom-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-bottom-nav__item {
	flex: 1 1 0;
	min-width: 0;
}

.vula-bottom-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 56px;
	padding: var(--vula-s-2) var(--vula-s-1) calc(var(--vula-s-1) + 2px);
	color: var(--vula-on-navy-muted);
	text-decoration: none;
	position: relative;
}

.vula-bottom-nav__icon {
	display: inline-flex;
}

.vula-bottom-nav__icon svg {
	width: 24px;
	height: 24px;
}

.vula-bottom-nav__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
}

.vula-bottom-nav__link:hover,
.vula-bottom-nav__link:focus-visible {
	color: var(--vula-white);
}

.vula-bottom-nav__item.is-current .vula-bottom-nav__link,
.vula-bottom-nav__link[aria-current="page"] {
	color: var(--vula-white);
}

.vula-bottom-nav__item.is-current .vula-bottom-nav__link::before,
.vula-bottom-nav__link[aria-current="page"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--vula-orange);
}

.vula-bottom-nav__item.is-current .vula-bottom-nav__icon,
.vula-bottom-nav__link[aria-current="page"] .vula-bottom-nav__icon {
	color: var(--vula-orange);
}

/* The page clears the bar: bottom padding on phones, plus the safe-area inset. */
@media (max-width: 759.98px) {
	.vula-body {
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 760px) {
	.vula-bottom-nav {
		display: none;
	}
}

/* ---------- Home zone grid (13 zones with icons) ---------- */

.vula-zonegrid {
	display: grid;
	gap: var(--vula-s-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-zonecard {
	display: flex;
	flex-direction: column;
	gap: var(--vula-s-2);
	padding: var(--vula-s-4);
	background: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow);
	text-decoration: none;
	color: var(--vula-ink);
	transition: transform var(--vula-fast) var(--vula-ease), box-shadow var(--vula-fast);
}

.vula-zonecard:hover {
	transform: translateY(-2px);
	box-shadow: var(--vula-shadow-lift);
	color: var(--vula-ink);
}

.vula-zonecard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--vula-radius-sm);
	background: var(--vula-paper);
	color: var(--vula-navy);
}

.vula-zonecard__icon svg {
	width: 24px;
	height: 24px;
}

.vula-zonecard__name {
	font-size: var(--vula-fs-2);
	font-weight: 700;
	line-height: 1.2;
}

.vula-zonecard__more {
	margin-top: auto;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
	line-height: 1.35;
}

@media (min-width: 560px) {
	.vula-zonegrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.vula-zonegrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Agency plates (Brought to you by, and the footer strip) ---------- */

.vula-plates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vula-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The partner strip is the secondary group: three across on a phone, so its cards are
   clearly smaller than the two organiser cards (decision 0004, PM 26 Sep). */
.vula-plates.vula-agencies {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vula-s-2);
}

/* Landscape phones and small tablets: four across, so the partner cards stay narrower
   than the two organiser cards. Desktop (1024+) keeps its eight-across strip below. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.vula-plates.vula-agencies {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Desktop: the partner strip returns to eight across. The base three-column rule above
   has higher specificity than the generic .vula-plates desktop rule, so restore it here. */
@media (min-width: 1024px) {
	.vula-plates.vula-agencies {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

.vula-plates li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 76px;
	padding: var(--vula-s-3);
	background: var(--vula-white);
	border-radius: var(--vula-radius-sm);
	box-shadow: var(--vula-shadow);
}

.vula-plates a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.vula-plates img {
	max-height: 44px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}

@media (min-width: 480px) {
	.vula-plates {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 760px) {
	.vula-plates {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vula-plates {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.vula-plates li {
		box-shadow: none;
		border: 1px solid var(--vula-line);
	}
}

/* ---------- Spacing between blocks on phones (decision 0002 item 2, 360 px review 26 Sep) ---------- */

/* Card grids built on ul or ol: no browser list indent (the home highlights sat 36 px in on the left). */
ul.vula-grid,
ol.vula-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A section without a band still needs air above and below it; two paper blocks in a row share one gap. */
.vula-section:not(.vula-band) {
	padding-block: var(--vula-s-7);
}

.vula-band--paper + .vula-section:not(.vula-band) {
	padding-top: 0;
}

.vula-section:not(.vula-band):has(+ .vula-band--paper) {
	padding-bottom: 0;
}

/* Thank-you card: every block gets the same gap (the QR card and the buttons touched). */
.vula-thanks__card > * + * {
	margin-top: var(--vula-s-4);
}

/* The footer opens with the ladder band: no empty navy strip above it, and air between it and the facts. */
.vula-foot {
	padding-top: 0;
}

.vula-foot > .vula-ladder + .vula-foot__inner {
	padding-top: var(--vula-s-7);
}

/* Ladder words: a 16 px gutter at 360 so LEARN and SUCCEED no longer touch the screen edge. */
.vula-ladder {
	padding-inline: var(--vula-s-4);
}

@media (max-width: 759px) {
	.vula-ladder__word {
		font-size: clamp(1.75rem, 9.5vw, 3.75rem);
	}
}

/* Zones search: below 400 px the Search button goes under the field so the placeholder is not cut. */
@media (max-width: 399px) {
	.vula-search {
		flex-wrap: wrap;
	}

	.vula-search__input,
	.vula-search__btn {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Home "Brought to you by": the heading has no section head wrapper, so it needs its own gap above the plates. */
.vula-section--agencies .vula-section__title {
	margin-bottom: var(--vula-s-5);
}

/* ---------- Home zone blocks in colour (decision 0003 item 3; replaces 0002's plain cards here only) ----------
   Five banner colours in a cycle of five, so on a 2, 3 or 4 column grid no two neighbours match.
   Every pairing passes 4.5:1: navy on orange 5.6, white on navy 17.1, navy on gold 9.0,
   white on green 5.3, white on dusk 8.2. Red stays for errors and brackets. */
.vula-zonegrid > li:nth-child(5n + 1) .vula-zonecard { --zc-bg: var(--vula-orange); --zc-ink: var(--vula-navy); }
.vula-zonegrid > li:nth-child(5n + 2) .vula-zonecard { --zc-bg: var(--vula-navy); --zc-ink: var(--vula-white); }
.vula-zonegrid > li:nth-child(5n + 3) .vula-zonecard { --zc-bg: var(--vula-gold); --zc-ink: var(--vula-navy); }
.vula-zonegrid > li:nth-child(5n + 4) .vula-zonecard { --zc-bg: var(--vula-green); --zc-ink: var(--vula-white); }
.vula-zonegrid > li:nth-child(5n + 5) .vula-zonecard { --zc-bg: var(--vula-dusk); --zc-ink: var(--vula-white); }

.vula-zonegrid .vula-zonecard,
.vula-zonegrid .vula-zonecard:hover {
	background: var(--zc-bg, var(--vula-white));
	color: var(--zc-ink, var(--vula-ink));
}

.vula-zonegrid .vula-zonecard__icon {
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: inherit;
}

.vula-zonegrid .vula-zonecard__more {
	margin-top: 0;
	color: inherit;
	font-weight: 500;
}

.vula-zonegrid .vula-zonecard:focus-visible {
	outline: 3px solid var(--vula-focus);
	outline-offset: 3px;
}

/* Coloured blocks make uneven heights obvious: each card fills its grid row. */
.vula-zonegrid > li {
	display: flex;
}

.vula-zonegrid .vula-zonecard {
	flex: 1 1 auto;
}

/* ---------- One header everywhere (decision 0003 items 6 and 7) ----------
   App screens open with the website's white header (partials/site-header.php). The app bar is now a
   slim navy strip under it, for signed-in users only: role, section links, sign out. It scrolls away
   with the page; the white header above it stays sticky. */
.vula-appbar {
	position: static;
}

.vula-appbar__inner {
	min-height: 0;
}

.vula-appbar .vula-appbar__user {
	margin-left: auto;
}

/* The auth screens sit under the white header now, not under a 56 px navy bar. */
.vula-auth {
	min-height: calc(100vh - 84px);
}

/* GDED logo and partner line open the footer (decision 0003 item 7). */
.vula-foot__inner > .vula-foot__partner {
	margin-bottom: var(--vula-s-6);
	line-height: 1.5;
}

/* Without the GDED image (now in the footer) the wordmark link was 31 px tall: keep it a 44 px target. */
.vula-header__logo {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Register and sign in, layout H (decision 0003 item 5) ----------
   A plain white page: title, Continue with Google, "or", the fewest fields, one button. */
.vula-join {
	padding-block: var(--vula-s-6) var(--vula-s-8);
	background: var(--vula-white);
}

.vula-join__inner {
	display: grid;
	gap: var(--vula-s-5);
	max-width: 26rem;
	margin-inline: auto;
	padding-inline: var(--vula-gutter);
}

.vula-join__title {
	margin: 0;
	font-size: clamp(2rem, 9vw, 2.5rem);
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--vula-navy);
}

.vula-join__lead {
	margin: 0;
	color: var(--vula-muted);
}

.vula-join .vula-form {
	gap: var(--vula-s-4);
}

.vula-oauth {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vula-s-3);
	min-height: 48px;
	padding: 0 var(--vula-s-4);
	border: 1.5px solid #B9C2D0;
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
	color: var(--vula-ink);
	font-weight: 700;
	text-decoration: none;
}

.vula-oauth:hover {
	border-color: var(--vula-navy);
	color: var(--vula-ink);
}

.vula-oauth:focus-visible {
	outline: 3px solid var(--vula-focus);
	outline-offset: 2px;
}

.vula-oauth__mark {
	flex: 0 0 auto;
}

.vula-or {
	display: flex;
	align-items: center;
	gap: var(--vula-s-3);
	margin: 0;
	color: var(--vula-muted);
	font-size: var(--vula-fs-1);
	font-weight: 600;
}

.vula-or::before,
.vula-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--vula-line);
}

.vula-join__who {
	display: flex;
	align-items: flex-start;
	gap: var(--vula-s-3);
	padding: var(--vula-s-3) var(--vula-s-4);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-paper);
	font-size: var(--vula-fs-1);
}

.vula-join__who .vula-oauth__mark {
	margin-top: 2px;
}

.vula-join__who p {
	display: grid;
	margin: 0;
	min-width: 0;
}

.vula-join__who strong {
	font-size: var(--vula-fs-2);
}

.vula-join__email {
	overflow-wrap: anywhere;
}

.vula-join__who a {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.vula-yesno {
	display: grid;
	gap: var(--vula-s-2);
}

/* ---------- The two visibility choices and /app/accept/ (0.8.0) ----------
   Yes and No stack full width: the public "Yes" carries the 18-or-older line. */
.vula-visibility .vula-radios {
	grid-template-columns: 1fr;
}

.vula-visibility__now {
	font-weight: 600;
	color: var(--vula-ink);
}

.vula-visibility-form__title,
.vula-accept__heading {
	margin: 0;
	font-size: var(--vula-fs-3);
	font-weight: 700;
	line-height: 1.3;
	color: var(--vula-navy);
}

.vula-accept__changes {
	display: grid;
	gap: var(--vula-s-3);
	padding: var(--vula-s-4);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-paper);
}

.vula-accept__list {
	display: grid;
	gap: var(--vula-s-2);
	margin: 0;
	padding-left: 1.25rem;
}

.vula-accept__docs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vula-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-accept__docs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.vula-accept__choices {
	display: grid;
	gap: var(--vula-s-1);
}

/* Dashboard aside: the completeness card, then the choices card. */
.vula-app__aside {
	display: grid;
	gap: var(--vula-s-4);
	align-content: start;
}

.vula-join__foot {
	margin: 0;
	text-align: center;
	color: var(--vula-muted);
	font-size: var(--vula-fs-1);
}

.vula-join__foot a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

/* The role question sits on white now: cards get a visible edge. */
.vula-join .vula-role {
	border-color: var(--vula-line);
}

/* ---------- 0.4.3: tags, home footer strip, social links (review items 9, 11 in part, 12) ---------- */

/* 9. Zone offerings and agenda session items are information, not controls: plain text with a dot
   between items, no border or pill, so they no longer look like the filter chips. */
.vula-zone__offerings,
.vula-agenda__list {
	gap: 0 var(--vula-s-2);
}

.vula-zone__offerings li,
.vula-agenda__list li {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: var(--vula-fs-1);
	font-weight: 500;
	color: var(--vula-muted);
}

.vula-zone__offerings li + li::before,
.vula-agenda__list li + li::before {
	content: "\00B7";
	margin-right: var(--vula-s-2);
	font-weight: 700;
	color: var(--vula-orange-deep);
}

/* 11. The home page already has "Brought to you by": hide the whole footer strip there. */
.vula-page-home .vula-foot .vula-organisers,
.vula-page-home .vula-foot .vula-agencies,
.vula-page-home .vula-foot .vula-foot__label:has(+ .vula-organisers),
.vula-page-home .vula-foot .vula-foot__label:has(+ .vula-agencies) {
	display: none;
}

/* 12. Social links on light pages (contact) use the same pill as the footer, in light colours. */
.vula-main .vula-social a {
	border-color: var(--vula-line);
	color: var(--vula-navy);
}

.vula-main .vula-social a:hover {
	border-color: var(--vula-navy);
	color: var(--vula-navy);
}

/* ---------- Help chat (decision 0004) ----------
   Phones: a fifth bottom-bar item opens a sheet. From 760 px (no bottom bar): a Help button at the
   bottom right opens a card. Both entry points stay hidden until help.js has loaded, so a page
   without the script never shows a dead button. */
.vula-bottom-nav__item--help,
.vula-help-open {
	display: none;
}

.vula-help-ready .vula-bottom-nav__item--help {
	display: block;
}

.vula-bottom-nav__item--help .vula-bottom-nav__link {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

@media (min-width: 760px) {
	.vula-help-ready .vula-help-open {
		position: fixed;
		right: var(--vula-s-5);
		bottom: var(--vula-s-5);
		z-index: 55;
		display: inline-flex;
		align-items: center;
		gap: var(--vula-s-2);
		min-height: 48px;
		padding: 0 var(--vula-s-4) 0 var(--vula-s-3);
		border: 0;
		border-radius: var(--vula-radius-control);
		background: var(--vula-gold);
		color: var(--vula-navy);
		font: inherit;
		font-weight: 700;
		box-shadow: 0 6px 18px rgba(10, 16, 32, 0.28);
		cursor: pointer;
	}

	.vula-help-open svg {
		width: 22px;
		height: 22px;
	}

	.vula-help-open:focus-visible {
		outline: 3px solid var(--vula-navy);
		outline-offset: 3px;
	}
}

/* The panel: a native modal dialog. Phones: a sheet from the bottom with 48 px of page above it. */
.vula-help {
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	max-width: none;
	height: calc(100dvh - 48px);
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 16px 16px 0 0;
	background: var(--vula-paper);
	color: var(--vula-ink);
	overflow: hidden;
}

.vula-help[open] {
	display: flex;
	flex-direction: column;
}

.vula-help::backdrop {
	background: rgba(10, 16, 32, 0.55);
}

.vula-help__head {
	display: flex;
	align-items: center;
	gap: var(--vula-s-3);
	padding: var(--vula-s-2) var(--vula-s-2) var(--vula-s-2) var(--vula-s-4);
	background: var(--vula-navy);
	color: var(--vula-white);
}

.vula-help__title {
	margin: 0 auto 0 0;
	font-size: var(--vula-fs-3);
	font-weight: 800;
	color: inherit;
}

.vula-help__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--vula-radius-sm);
	background: none;
	color: inherit;
	cursor: pointer;
}

.vula-help__close:focus-visible {
	outline: 3px solid var(--vula-gold);
	outline-offset: -3px;
}

.vula-help__note {
	margin: 0;
	padding: var(--vula-s-2) var(--vula-s-4);
	background: var(--vula-white);
	border-bottom: 1px solid var(--vula-line);
	font-size: var(--vula-fs-0);
	line-height: 1.45;
	color: var(--vula-muted);
}

.vula-help__log {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--vula-s-3);
	margin: 0;
	padding: var(--vula-s-4);
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vula-help__msg {
	max-width: 88%;
	padding: var(--vula-s-3) var(--vula-s-4);
	border-radius: 14px;
	line-height: 1.5;
	white-space: pre-line;
	overflow-wrap: anywhere;
	scroll-margin-top: var(--vula-s-3);
}

.vula-help__msg--bot {
	align-self: flex-start;
	background: var(--vula-white);
	border: 1px solid var(--vula-line);
	border-bottom-left-radius: 4px;
}

.vula-help__msg--me {
	align-self: flex-end;
	background: var(--vula-navy);
	color: var(--vula-white);
	border-bottom-right-radius: 4px;
}

.vula-help__msg a {
	color: var(--vula-orange-deep);
	font-weight: 600;
}

.vula-help__msg--error {
	background: #FFF4F2;
	border-color: #F2C4BF;
}

.vula-help__retry {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--vula-s-2);
	padding: 0 var(--vula-s-4);
	border: 1.5px solid var(--vula-navy);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
	color: var(--vula-navy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.vula-help__suggest {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
}

.vula-help__chip {
	min-height: 44px;
	padding: 0.5rem 0.875rem;
	border: 1.5px solid var(--vula-line);
	border-radius: var(--vula-radius-sm);
	background: var(--vula-white);
	color: var(--vula-navy);
	font: inherit;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.vula-help__chip:hover,
.vula-help__chip:focus-visible {
	border-color: var(--vula-navy);
}

.vula-help__typing {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 24px;
}

.vula-help__typing i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vula-muted);
	animation: vula-help-dot 1.2s infinite ease-in-out;
}

.vula-help__typing i:nth-child(2) {
	animation-delay: 0.15s;
}

.vula-help__typing i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes vula-help-dot {
	0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.vula-help__typing i {
		animation: none;
		opacity: 0.6;
	}
}

.vula-help__status {
	margin: 0;
	padding: var(--vula-s-2) var(--vula-s-4) 0;
	background: var(--vula-white);
	border-top: 1px solid var(--vula-line);
	font-size: var(--vula-fs-1);
	font-weight: 600;
	color: var(--vula-muted);
}

.vula-help__form {
	display: flex;
	align-items: flex-end;
	gap: var(--vula-s-2);
	padding: var(--vula-s-3) var(--vula-s-4) calc(var(--vula-s-3) + env(safe-area-inset-bottom, 0px));
	background: var(--vula-white);
	border-top: 1px solid var(--vula-line);
}

.vula-help__status:not([hidden]) + .vula-help__form {
	border-top: 0;
}

.vula-help__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	max-height: 8.5rem;
	padding: 0.75rem 0.875rem;
	border: 1.5px solid #B9C2D0;
	border-radius: var(--vula-radius-sm);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--vula-ink);
	background: var(--vula-white);
	resize: none;
}

.vula-help__input:focus {
	border-color: var(--vula-navy);
	outline: 3px solid var(--vula-focus);
	outline-offset: 1px;
}

.vula-help__input:disabled {
	background: var(--vula-paper);
}

.vula-help__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--vula-radius-sm);
	background: var(--vula-orange);
	color: var(--vula-navy);
	cursor: pointer;
}

.vula-help__send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.vula-help__send:focus-visible {
	outline: 3px solid var(--vula-navy);
	outline-offset: 2px;
}

@media (min-width: 760px) {
	.vula-help {
		inset: auto var(--vula-s-5) var(--vula-s-5) auto;
		width: 24rem;
		height: min(36rem, calc(100dvh - 3rem));
		border-radius: 16px;
		box-shadow: var(--vula-shadow-lift);
	}
}

/* ---------- RSVP page: invitation, then the form (Bokang, 26 September 2026) ---------- */

.vula-invite {
	background: var(--vula-white);
	border-bottom: 1px solid var(--vula-line);
}

.vula-invite__title {
	margin: 0 0 var(--vula-s-4);
	font-size: var(--vula-fs-4);
	font-weight: 800;
	color: var(--vula-navy);
}

.vula-taps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vula-s-3);
	margin: 0 0 var(--vula-s-4);
	padding: 0;
	list-style: none;
}

.vula-taps > li {
	display: flex;
}

.vula-tap {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--vula-s-3);
	row-gap: 2px;
	align-content: start;
	min-height: 72px;
	padding: var(--vula-s-3) var(--vula-s-4);
	border: 1.5px solid var(--vula-line);
	border-radius: var(--vula-radius);
	background: var(--vula-paper);
	color: var(--vula-ink);
	text-decoration: none;
}

.vula-tap--link {
	transition: border-color var(--vula-fast), background-color var(--vula-fast);
}

.vula-tap--link:hover,
.vula-tap--link:focus-visible {
	border-color: var(--vula-navy);
	background: var(--vula-white);
	color: var(--vula-ink);
}

.vula-tap--link:focus-visible {
	outline: 3px solid var(--vula-focus);
	outline-offset: 2px;
}

.vula-tap .vula-tap__icon {
	grid-row: 1 / span 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--vula-radius-sm);
	background: var(--vula-navy);
	color: var(--vula-gold);
}

.vula-tap__icon svg {
	width: 24px;
	height: 24px;
}

.vula-tap__label {
	font-size: var(--vula-fs-0);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vula-orange-deep);
}

.vula-tap__value {
	font-size: var(--vula-fs-2);
	font-weight: 700;
	line-height: 1.3;
	color: var(--vula-navy);
}

.vula-tap__note {
	font-size: var(--vula-fs-1);
	line-height: 1.4;
	color: var(--vula-muted);
}

.vula-tap__action {
	margin-top: 2px;
	font-size: var(--vula-fs-1);
	font-weight: 700;
	color: var(--vula-orange-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vula-invite__directions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vula-s-2);
	width: 100%;
}

.vula-invite__directions .vula-tap__icon {
	display: inline-flex;
	color: var(--vula-gold);
}

.vula-invite__directions svg {
	width: 22px;
	height: 22px;
}

.vula-rsvp-head {
	margin-bottom: var(--vula-s-4);
}

.vula-rsvp-head__title {
	margin: 0;
	font-size: var(--vula-fs-5);
	font-weight: 800;
	color: var(--vula-navy);
}

.vula-rsvp-head__lead {
	margin: var(--vula-s-2) 0 0;
	color: var(--vula-muted);
}

/* A dropdown still on its empty first option reads as a prompt, not an answer. */
.vula-field select:has(option[value=""]:checked) {
	color: #5F6B7E;
}

@media (min-width: 760px) {
	.vula-invite__directions {
		width: auto;
		display: inline-flex;
		padding-inline: var(--vula-s-6);
	}
}

/* Phones: one block per row, so no value wraps awkwardly. 480 px: two by two. 900 px: one row. */
@media (min-width: 480px) {
	.vula-taps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.vula-taps {
		grid-template-columns: 1.4fr 1fr 1.6fr 0.8fr;
	}
}

/* The account link closes the menu, set apart by a rule so Sign out is never tapped by mistake. */
.vula-menu__list .vula-nav__account {
	margin-top: var(--vula-s-2);
	padding-top: var(--vula-s-2);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.vula-menu__list .vula-nav__account a {
	color: var(--vula-gold);
}


/* ---------- Executive dashboard at /dash (decision 0005) ----------
   Its own pages (templates/dash/): navy header and tabs, number cards, CSS bars, lists that become
   tables from 760 px, an approve confirm as a bottom sheet on phones. No chart library.
   0.10.2: content up to 1280 px, 2 px corners on cards, rows and tables; the overview's grid, charts
   and print layout follow this block. */
.vula-dash { min-height: 100vh; background: var(--vula-paper); }
.dash-top { position: sticky; top: 0; z-index: 20; background: var(--vula-navy); color: #fff; }
.dash-top__row { display: flex; align-items: center; gap: 12px; max-width: 1280px; margin: 0 auto; padding: 10px 16px; }
.dash-top__brand { display: flex; flex-direction: column; justify-content: center; min-height: 44px; margin-right: auto; font-weight: 900; font-size: 1rem; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; }
.dash-top__brand span { color: var(--vula-orange); }
.dash-top__brand small { display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--vula-gold); }
.dash-top__user { font-size: 0.8125rem; color: #AAB4C9; display: none; }
.dash-top__out { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 10px; color: #fff; font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.dash-tabs { display: flex; max-width: 1280px; margin: 0 auto; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
.dash-tabs a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 9px; color: #AAB4C9; font-weight: 700; font-size: 0.9375rem; text-decoration: none; border-bottom: 3px solid transparent; }
.dash-tabs a[aria-current="page"] { color: #fff; border-bottom-color: var(--vula-orange); }
.dash-main { width: 100%; min-width: 0; max-width: 1280px; margin: 0 auto; padding: 20px 16px 48px; } /* min-width 0: a grid item must not grow to fit the chip row */
.dash-h1 { margin: 0; font-size: 1.625rem; font-weight: 800; color: var(--vula-navy); }
.dash-sub { margin: 4px 0 18px; color: var(--vula-muted); font-size: 0.9375rem; }
.dash-sample { display: inline-block; margin-bottom: 14px; padding: 4px 10px; border-radius: 6px; background: #FFF4F2; color: #9A2A22; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.dash-group { margin: 24px 0 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vula-orange-deep); }
.dash-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-card { display: block; padding: 16px; border-radius: 2px; background: #fff; border: 1px solid var(--vula-line); color: var(--vula-ink); text-decoration: none; }
a.dash-card:hover, a.dash-card:focus-visible { border-color: var(--vula-navy); }
.dash-card__label { font-size: 0.8125rem; font-weight: 700; color: var(--vula-muted); }
.dash-card__n { margin-top: 6px; font-size: 2.5rem; font-weight: 900; line-height: 1; color: var(--vula-navy); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dash-card__note { margin-top: 6px; font-size: 0.8125rem; color: var(--vula-muted); }
.dash-card--alert { background: var(--vula-navy); border-color: var(--vula-navy); color: #fff; }
.dash-card--alert .dash-card__label, .dash-card--alert .dash-card__note { color: #D6DCE8; }
.dash-card--alert .dash-card__n { color: var(--vula-gold); }
.dash-card--alert .dash-card__go { display: inline-flex; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--vula-orange); color: var(--vula-navy); font-weight: 800; font-size: 0.875rem; }
.dash-card--wide, .dash-card--full { grid-column: 1 / -1; }
.dash-bars { margin: 8px 0 0; padding: 0; list-style: none; }
.dash-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; margin-bottom: 12px; font-size: 0.9375rem; }
.dash-bars b { font-variant-numeric: tabular-nums; color: var(--vula-navy); }
.dash-bars .bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--vula-paper); overflow: hidden; }
.dash-bars .bar i { display: block; height: 100%; border-radius: 5px; background: var(--vula-orange); }
.dash-bars li:nth-child(2) .bar i { background: var(--vula-gold); } .dash-bars li:nth-child(3) .bar i { background: #1E7A4C; }
.dash-chips { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.dash-chips a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--vula-line); background: #fff; color: var(--vula-navy); font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.dash-chips a[aria-current="page"] { background: var(--vula-navy); border-color: var(--vula-navy); color: #fff; }
.dash-chips b { font-variant-numeric: tabular-nums; }
.dash-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border-radius: 2px; background: #fff; border: 1px solid var(--vula-line); color: var(--vula-ink); text-decoration: none; }
a.dash-row:hover, a.dash-row:focus-visible { border-color: var(--vula-navy); }
.dash-row__title { font-weight: 800; color: var(--vula-navy); }
.dash-row__meta { grid-column: 1 / 2; font-size: 0.875rem; color: var(--vula-muted); }
.dash-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.dash-badge--waiting { background: #FFF1DD; color: #8A4B06; }
.dash-badge--verified { background: #E3F3EA; color: #1E6A43; }
.dash-badge--rejected { background: #FBE7E5; color: #9A2A22; }
.dash-badge--open { background: #E3F3EA; color: #1E6A43; }
.dash-badge--closed { background: #EEF0F4; color: #4B5566; }
.dash-badge--yes { background: #E3F3EA; color: #1E6A43; }
.dash-badge--no { background: #EEF0F4; color: #4B5566; }
.dash-search { display: flex; gap: 8px; margin-bottom: 12px; }
.dash-search input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid #B9C2D0; border-radius: 10px; font: inherit; font-size: 16px; }
.dash-search button { min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--vula-navy); color: #fff; font: inherit; font-weight: 800; }
.dash-count { margin: 0 0 10px; font-size: 0.875rem; color: var(--vula-muted); }
.dash-pager { display: flex; justify-content: space-between; margin-top: 16px; }
.dash-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--vula-line); background: #fff; color: var(--vula-navy); font-weight: 700; text-decoration: none; }
.dash-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--vula-orange-deep); }
.dash-detail { padding: 18px 16px; border-radius: 2px; background: #fff; border: 1px solid var(--vula-line); }
.dash-detail dl { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
.dash-detail dt { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vula-muted); }
.dash-detail dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.dash-actions { position: sticky; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(247, 248, 250, 0.96); border-top: 1px solid var(--vula-line); }
.dash-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; border: 0; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; }
.dash-btn--verify { background: #1E7A4C; color: #fff; }
.dash-btn--reject { background: #fff; color: #9A2A22; border: 2px solid #C8342B; }
.dash-btn--ghost { background: #fff; color: var(--vula-navy); border: 1.5px solid var(--vula-line); }
.dash-confirm { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 16, 32, 0.55); }
.dash-confirm__box { width: 100%; max-width: 480px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; background: #fff; }
.dash-confirm__title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--vula-navy); }
.dash-confirm__body { margin: 8px 0 18px; color: var(--vula-muted); }
.dash-confirm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #E3F3EA; color: #1E6A43; font-weight: 700; }
.dash-table { display: none; }
/* Sign-in */
.dash-signin { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse 80% 60% at 20% 100%, rgba(56,77,130,0.7), transparent 70%), linear-gradient(165deg, #13224A, var(--vula-navy) 50%, var(--vula-navy-deep)); }
.dash-signin__card { width: 100%; max-width: 420px; padding: 28px 22px; border-radius: 18px; background: #fff; }
.dash-signin__brand { font-weight: 900; font-size: 1.25rem; text-transform: uppercase; color: var(--vula-navy); }
.dash-signin__brand span { color: var(--vula-orange-deep); }
.dash-signin__title { margin: 14px 0 4px; font-size: 1.625rem; font-weight: 800; color: var(--vula-navy); }
.dash-signin__lead { margin: 0 0 18px; color: var(--vula-muted); }
.dash-signin .vula-form { gap: 14px; }
.dash-signin__foot { margin: 16px 0 0; font-size: 0.8125rem; color: var(--vula-muted); }
@media (min-width: 760px) {
	.dash-top__user { display: inline; }
	.dash-tabs a { flex: 0 0 auto; padding: 0 14px; }
	.dash-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.dash-card__n { font-size: 3rem; }
	.dash-card--wide { grid-column: span 2; }
	.dash-h1 { font-size: 2rem; }
	.dash-detail dl { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
	.dash-actions { position: static; margin: 20px 0 0; padding: 0; background: none; border: 0; grid-auto-columns: auto; justify-content: start; }
	.dash-btn { padding: 0 28px; }
	.dash-confirm { align-items: center; }
	.dash-confirm__box { border-radius: 18px; }
	.dash-list--table { display: none; }
	.dash-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--vula-line); border-radius: 2px; overflow: hidden; }
	.dash-table th, .dash-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--vula-line); font-size: 0.9375rem; }
	.dash-table th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vula-muted); background: var(--vula-paper); }
	.dash-table tr:last-child td { border-bottom: 0; }
	.dash-table td a { font-weight: 800; color: var(--vula-navy); }
}

/* Approver actions beyond the main two: quiet, under the buttons, never in the sticky bar. */
.dash-quiet { margin-top: 14px; }
.dash-quiet button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--vula-orange-deep); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dash-note--warn { background: #FFF1DD; color: #8A4B06; }
.dash-note--error { background: #FBE7E5; color: #9A2A22; }
.dash-empty { padding: 24px 16px; border-radius: 2px; background: #fff; border: 1px dashed var(--vula-line); color: var(--vula-muted); text-align: center; }
.dash-actions form { display: contents; }
.dash-confirm[hidden] { display: none; }
.dash-jobs-mini { margin: 4px 0 0; padding: 0; list-style: none; }
.dash-jobs-mini li { margin-top: 0; }
.dash-jobs-mini a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--vula-orange-deep); }

/* The approver confirm is a native <dialog>: a bottom sheet on phones, centred on wider screens. */
.dash-confirm-dialog { width: 100%; max-width: 480px; margin: auto auto 0; padding: 0; border: 0; background: transparent; }
.dash-confirm-dialog::backdrop { background: rgba(10, 16, 32, 0.55); }
.dash-confirm-dialog .dash-confirm__title { font-size: 1.125rem; line-height: 1.4; margin-bottom: 18px; }
@media (min-width: 760px) {
	.dash-confirm-dialog { margin: auto; }
}

/* ---------- /dash overview, release 0.10.2 (docs/spec-0.10.2-dashboard.md) ----------
   Read from across a room: big numbers, few words, one idea per card. White cards on paper, 1 px
   rules, 2 px corners, no shadows. One column on phones, two from 768 px, twelve from 1024 px.
   Colour carries meaning: navy for totals, orange for new sign-ups and skills, a gold band for the
   festival, green only for Hired and Verified, grey for Other and Not given. Labels are HTML, so
   they keep their size (12 px and up) while the marks stretch with the card. */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.dash-head .dash-sub { margin-bottom: 0; }
.dash-print { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--vula-navy); border-radius: var(--vula-radius-control); background: #fff; color: var(--vula-navy); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; }
.dash-print:hover { background: var(--vula-navy); color: #fff; }
.dash-print[hidden] { display: none; }
.dash-print:focus-visible, .dcard__more:focus-visible, .dnums summary:focus-visible { outline: 3px solid var(--vula-focus); outline-offset: 2px; }

/* Headline numbers: Job seekers across the top on phones, then two and two; 2 and 3 from 768 px; 5 in a row from 1024 px. */
.dtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dtile { min-width: 0; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--vula-line); border-top: 4px solid var(--vula-navy); border-radius: 2px; }
.dtile:first-child { grid-column: 1 / -1; border-top-color: var(--vula-orange); }
.dtile p { margin: 0; }
.dtile__label { font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--vula-muted); }
.dtile__n { margin-top: 8px !important; font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--vula-navy); font-variant-numeric: tabular-nums; }
.dtile__note { margin-top: 8px !important; font-size: 0.8125rem; line-height: 1.35; color: var(--vula-muted); }

/* The card grid. */
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dcard { min-width: 0; padding: 18px 16px 20px; background: #fff; border: 1px solid var(--vula-line); border-radius: 2px; container-type: inline-size; }
.dcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -10px; }
.dcard__head + .dcard__desc { margin-top: -6px; }
.dcard__title { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--vula-navy); }
.dcard__desc { margin: 4px 0 18px; font-size: 0.9375rem; line-height: 1.45; color: var(--vula-muted); }
.dcard__foot { margin: 16px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--vula-muted); }
.dcard__sub { margin: 0 0 12px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vula-muted); }
.dcard__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 700; color: var(--vula-orange-deep); text-underline-offset: 3px; white-space: nowrap; }
.dcard .dash-empty { margin: 14px 0 0; }
.dcard { display: flex; flex-direction: column; }
.dcard > .dnums:last-child { margin-top: auto; padding-top: 8px; }
.dcard--profiles .dbars, .dcard--skills .dbars { flex: 1 0 auto; align-content: space-evenly; }
.dact > div { display: flex; flex-direction: column; justify-content: space-between; } /* Numbers on one line when a label wraps. */
.dcard:has(> .dash-empty) { align-self: start; }
.vula-dash :focus-visible { box-shadow: 0 0 0 2px var(--vula-navy); } /* Gold ring plus navy: visible on white and on navy (design-13). */
.dash-tabs a:focus-visible { outline-offset: -5px; box-shadow: none; }
.dnums__scroll:focus-visible { outline: 3px solid var(--vula-focus); outline-offset: 2px; }

/* "Show the numbers": a plain table under each chart. */
.dnums { margin-top: 8px; font-size: 0.875rem; }
.dnums summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.dnums[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.dnums summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--vula-orange-deep); font-weight: 700; cursor: pointer; }
.dnums__scroll { max-height: 320px; overflow: auto; margin-top: 6px; border: 1px solid var(--vula-line); }
.dnums table { width: 100%; border-collapse: collapse; }
.dnums th, .dnums td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--vula-line); font-weight: 500; }
.dnums thead th { position: sticky; top: 0; background: var(--vula-paper); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vula-muted); }
.dnums .num { text-align: right; font-variant-numeric: tabular-nums; }
.dnums tbody th { color: var(--vula-ink); }

/* Growth: the total as an area line, the new sign-ups as columns under it, one x axis. */
.dgrowth { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 190px 24px 70px 26px; }
.dgrowth__keys { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; font-size: 0.8125rem; font-weight: 600; color: var(--vula-ink); }
.dkey { display: inline-flex; align-items: center; gap: 8px; }
.dkey::before { content: ""; display: block; flex: 0 0 auto; }
.dkey--line::before { width: 18px; height: 10px; border-top: 2.5px solid var(--vula-navy); background: rgba(15, 27, 51, 0.1); }
.dkey--col::before { width: 8px; height: 12px; border-radius: 2px 2px 0 0; background: var(--vula-orange); }
.dgrowth__y { grid-column: 1; position: relative; font-size: 0.75rem; color: var(--vula-muted); font-variant-numeric: tabular-nums; }
.dgrowth__y--area { grid-row: 2; }
.dgrowth__y--cols { grid-row: 4; }
.dgrowth__y span { position: absolute; right: 8px; line-height: 1; transform: translateY(50%); white-space: nowrap; }
.dgrowth__plot { grid-column: 2; position: relative; z-index: 1; border-bottom: 1px solid #B9C2D0; }
.dgrowth__plot--area { grid-row: 2; }
.dgrowth__plot--cols { grid-row: 4; }
.dgrowth__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #E8ECF2; }
.dgrowth__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dgrowth__area { fill: rgba(15, 27, 51, 0.09); }
.dgrowth__line { fill: none; stroke: var(--vula-navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dgrowth__dot { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--vula-navy); box-shadow: 0 0 0 2px #fff; }
.dgrowth__end { position: absolute; margin-bottom: 10px; padding: 0 2px; transform: translateX(-100%); background: rgba(255, 255, 255, 0.9); font-size: 1rem; font-weight: 800; line-height: 1.2; color: var(--vula-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dgrowth__cols { position: absolute; inset: 0; display: flex; }
.dgrowth__cols span { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.dgrowth__cols i { display: block; width: 66%; max-width: 22px; border-radius: 2px 2px 0 0; background: var(--vula-orange); }
.dgrowth__fest { position: absolute; top: 0; bottom: 0; min-width: 3px; background: rgba(241, 176, 82, 0.5); border-left: 2px solid var(--vula-orange-deep); } /* Visible on a projector (review design-12). */
.dgrowth__fest span { position: absolute; top: 2px; left: 100%; margin-left: 6px; font-size: 0.75rem; font-weight: 700; line-height: 1.2; color: var(--vula-ink); white-space: nowrap; }
.dgrowth__hits { position: absolute; grid-column: 2; grid-row: 2 / 5; inset: 0; z-index: 2; display: flex; }
.dgrowth__hits span { flex: 1 1 0; min-width: 0; }
.dgrowth__hits span:hover { background: rgba(15, 27, 51, 0.06); }
.dgrowth__x { grid-column: 2; grid-row: 5; position: relative; font-size: 0.75rem; color: var(--vula-muted); }
.dgrowth__tick { position: absolute; top: 7px; line-height: 1; transform: translateX(-50%); white-space: nowrap; }
.dgrowth__tick.is-first { transform: translateX(-4px); }
.dgrowth__tick.is-last { transform: translateX(calc(-100% + 4px)); }
@container (max-width: 519px) {
	.dgrowth__tick.is-minor { display: none; }
}
@container (min-width: 600px) {
	.dgrowth { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto 230px 28px 88px 28px; }
	.dgrowth__y, .dgrowth__x, .dgrowth__fest span { font-size: 0.8125rem; }
}

/* Horizontal bars: label and number on one line, the bar under them; one row each from 440 px. */
.dbars { display: grid; gap: 12px; }
.dbars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 12px; font-size: 0.9375rem; line-height: 1.3; }
.dbars__label { min-width: 0; font-weight: 600; color: var(--vula-ink); overflow-wrap: anywhere; }
.dbars__n { font-weight: 800; color: var(--vula-navy); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dbars__n small { margin-left: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--vula-muted); }
.dbars__bar { grid-column: 1 / -1; display: block; height: 12px; }
.dbars__bar i { display: block; height: 100%; min-width: 2px; border-radius: 0 2px 2px 0; background: var(--vula-navy); }
.dbars--orange .dbars__bar i { background: var(--vula-orange); }
.dbars--track .dbars__bar { background: #EDF0F5; }
.dbars__row.is-muted .dbars__label { font-weight: 500; color: var(--vula-muted); }
.dbars__row.is-muted .dbars__n { color: var(--vula-muted); }
.dbars__row.is-muted .dbars__bar i { background: #A9B1BE; }
@container (min-width: 440px) {
	.dbars__row { grid-template-columns: minmax(8rem, 36%) minmax(0, 1fr) 4rem; align-items: center; }
	.dbars--track .dbars__row { grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr) 6.5rem; }
	.dbars__bar { grid-column: 2; grid-row: 1; height: 14px; }
	.dbars__n { grid-column: 3; }
}

/* Applications: one bar split by status, a legend of counts, and the outcome beside it. */
.dseg__bar { display: flex; gap: 2px; height: 32px; }
.dseg__bar i { flex: 1 1 0; min-width: 4px; }
.dseg__bar i:first-child { border-radius: 2px 0 0 2px; }
.dseg__bar i:last-child { border-radius: 0 2px 2px 0; }
/* Review design-07: every status at least 3:1 on white; the pipeline a navy ramp, the two end states apart from it
   (Not successful a solid grey, Withdrawn a grey hatch). */
.dseg--new { background: #7D8DB4; }
.dseg--viewed { background: #62749F; }
.dseg--shortlisted { background: #4A5D8E; }
.dseg--interviewing { background: #34477A; }
.dseg--offered { background: var(--vula-navy); }
.dseg--hired { background: var(--vula-green); }
.dseg--unsuccessful { background: #8A8F99; }
.dseg--withdrawn { background: repeating-linear-gradient(135deg, #8A8F99 0 2px, #fff 2px 5px); box-shadow: inset 0 0 0 1px #8A8F99; }
.dlegend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.dlegend li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dlegend i { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 2px; }
.dlegend span { min-width: 0; color: var(--vula-ink); }
.dlegend b { margin-left: auto; font-weight: 800; color: var(--vula-navy); font-variant-numeric: tabular-nums; }
.dapps { display: grid; gap: 20px; }
.dapps__facts { display: grid; gap: 8px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--vula-line); list-style: none; font-size: 0.9375rem; color: var(--vula-ink); }
.dapps__hired { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 700; }
.dapps__hired i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 2px; background: var(--vula-green); }
.dapps__hired b { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--vula-green); font-variant-numeric: tabular-nums; }
@container (min-width: 560px) {
	.dlegend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 760px) {
	.dapps { grid-template-columns: minmax(0, 1fr) 15rem; gap: 40px; align-items: start; }
	.dapps__facts { padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--vula-line); }
}

/* Where job seekers live: provinces and towns side by side when the card is wide enough. */
.dwhere { display: grid; gap: 24px; }
.dwhere > div { min-width: 0; container-type: inline-size; }
@container (min-width: 300px) {
	.dwhere .dbars__row { grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr) 3rem; align-items: center; }
	.dwhere .dbars__bar { grid-column: 2; grid-row: 1; height: 14px; }
	.dwhere .dbars__n { grid-column: 3; }
}
@container (min-width: 600px) {
	.dwhere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}

/* Open jobs: a short table; the company moves under the job when the card is narrow. */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.dtable th, .dtable td { padding: 11px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vula-line); }
.dtable th:first-child, .dtable td:first-child { padding-left: 0; }
.dtable th:last-child, .dtable td:last-child { padding-right: 0; }
.dtable thead th { padding-top: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vula-muted); }
.dtable tbody th { font-weight: 700; color: var(--vula-navy); }
.dtable tbody tr:last-child > * { border-bottom: 0; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable td.num { font-weight: 700; color: var(--vula-navy); }
.dtable__sub { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 500; color: var(--vula-muted); }
.dtable__company { display: none; color: var(--vula-ink); }
@container (max-width: 439px) {
	.dtable thead th { font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
}
@container (min-width: 560px) {
	.dtable__company { display: table-cell; }
	.dtable__sub { display: none; }
}

/* Employers: the navy Review now card when any wait, then the five figures. */
.dalert.dash-card--alert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 14px 0 6px; padding: 14px 16px; border-radius: 2px; }
.dalert .dash-card__label { flex: 1 0 100%; color: #D6DCE8; }
.dalert .dash-card__n { margin: 0; font-size: 2.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dalert .dash-card__go { margin: 0 0 0 auto; }
.dfigs { display: grid; margin: 6px 0 0; }
.dfigs__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--vula-line); }
.dfigs__row:last-child { border-bottom: 0; padding-bottom: 0; }
.dfigs dt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--vula-ink); }
.dfigs dd { margin: 0; font-size: 1.375rem; font-weight: 800; line-height: 1; color: var(--vula-navy); font-variant-numeric: tabular-nums; }
.dfigs__row.is-good dt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vula-green); }
.dfigs--big { margin: 0; }
.dfigs--big .dfigs__row:first-child { padding-top: 0; }
.dfigs--big dd { font-size: 2rem; }

/* Activity: a quiet row of small figures, no card. */
.dcard--activity { padding: 20px 0 0; background: none; border: 0; border-top: 1px solid var(--vula-line); border-radius: 0; }
.dcard--activity .dcard__title { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vula-muted); }
.dact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 12px 0 0; }
.dact > div { min-width: 0; }
.dact dt { font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--vula-muted); }
.dact dd { margin: 6px 0 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--vula-navy); font-variant-numeric: tabular-nums; }
.dact small { margin-left: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--vula-muted); }
@container (min-width: 720px) {
	.dact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The festival: last, after a rule, under a muted heading. */
.dfest { margin-top: 36px; padding-top: 24px; border-top: 2px solid #C9D0DB; }
.dfest__title { margin: 0 0 16px; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--vula-muted); }
.dfest .dcard__title { font-size: 1rem; }
.dtiles--fest .dtile, .dtiles--fest .dtile:first-child { border-top-color: #9AA3B2; }
.dtiles--fest .dtile__n { font-size: 2rem; }

/* Jobs and Employers tabs: the counts, and paused or closed jobs muted. */
.dash-row__counts { grid-column: 1 / -1; font-size: 0.875rem; font-weight: 700; color: var(--vula-navy); font-variant-numeric: tabular-nums; }
.dash-badge--paused { background: #FFF1DD; color: #8A4B06; }
.is-muted .dash-row__title a, .is-muted .dash-row__title { color: var(--vula-muted); }
.dash-row__title a { color: inherit; text-decoration: none; }
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-table tr.is-muted td, .dash-table tr.is-muted td a { color: var(--vula-muted); }
.dash-table tr.is-muted td a { font-weight: 700; }
@media (min-width: 760px) and (max-width: 1023px) {
	.dash-table--jobs .col-wide { display: none; } /* 8 columns do not fit: Type and Town go first (review design-01). */
}

@media (min-width: 768px) {
	.dash-main { padding: 28px 24px 56px; }
	.dash-top__row { padding: 10px 24px; }
	.dash-tabs { padding: 0 16px; }
	.dtiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	.dtile { grid-column: span 2; padding: 16px 20px 18px; }
	.dtile:nth-child(-n+2) { grid-column: span 3; }
	.dtile__n { font-size: 2.75rem; }
	.dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.dgrid > * { grid-column: 1 / -1; }
	.dcard--where, .dcard--skills, .dcard--jobs, .dcard--employers { grid-column: auto; }
	.dtiles--fest .dtile, .dtiles--fest .dtile:nth-child(-n+2) { grid-column: span 2; }
	.dtiles--fest .dtile__n { font-size: 2.25rem; }
	.dcard { padding: 20px 22px 22px; }
	.dcard--activity { padding: 20px 0 0; }
	.dash-h1 { font-size: 2.125rem; }
}
@media (min-width: 1024px) {
	.dash-main { padding: 32px 32px 64px; }
	.dash-top__row { padding: 10px 32px; }
	.dash-tabs { padding: 0 24px; }
	.dtiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 20px; }
	.dtile, .dtile:nth-child(-n+2) { grid-column: auto; }
	.dtile__n { font-size: 3rem; }
	.dtiles.dtiles--fest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dtiles--fest .dtile, .dtiles--fest .dtile:nth-child(-n+2) { grid-column: auto; }
	.dgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.dcard--growth { grid-column: span 8; }
	.dcard--profiles { grid-column: span 4; }
	.dcard--apps, .dcard--activity { grid-column: 1 / -1; }
	.dcard--where, .dcard--jobs { grid-column: span 7; }
	.dcard--skills, .dcard--employers { grid-column: span 5; }
	.dcard { padding: 22px 24px 24px; }
	.dcard--activity { padding: 22px 0 0; }
	.dcard__title { font-size: 1.1875rem; }
	.dcard--profiles .dbars { gap: 22px; }
	.dcard--profiles .dbars__row { font-size: 1rem; }
	.dcard--profiles .dbars__bar { height: 18px; }
}

/* ---------- /dash job seekers, a profile and a job (release 0.10.2, spec section 10) ----------
   The list is one card per person on phones and a row per person with a header from 1024 px. Initials
   sit on a quiet navy tint; the photo, where there is one, is the employer's 96 px copy. */
a.dtile { display: block; color: inherit; text-decoration: none; }
a.dtile:hover { border-color: var(--vula-navy); border-top-color: var(--vula-orange); }
a.dtile .dtile__label { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dtable tbody th a, .dash-row__title a { color: var(--vula-navy); text-underline-offset: 3px; }
.dtable tbody th a:hover { color: var(--vula-orange-deep); }

/* Filters: one column on phones, a row of controls from 768 px. */
.dfilter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 16px; background: #fff; border: 1px solid var(--vula-line); border-radius: 2px; }
.dfilter > div { display: grid; gap: 4px; min-width: 0; }
.dfilter .dfilter__q, .dfilter .dfilter__check, .dfilter .dfilter__go { grid-column: 1 / -1; }
.dfilter label { font-size: 0.8125rem; font-weight: 700; color: var(--vula-muted); }
.dfilter input[type="search"], .dfilter select { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid #B9C2D0; border-radius: 2px; background: #fff; color: var(--vula-ink); font: inherit; font-size: 16px; }
.dfilter .dfilter__check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.dfilter__check input { width: 22px; height: 22px; margin: 0; accent-color: var(--vula-navy); }
.dfilter__check label { font-size: 0.9375rem; color: var(--vula-ink); }
.dfilter .dfilter__go { display: flex; align-items: center; gap: 16px; }
.dfilter__go button { min-height: 44px; padding: 0 24px; border: 0; border-radius: var(--vula-radius-control); background: var(--vula-navy); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.dfilter__go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--vula-orange-deep); text-underline-offset: 3px; }

/* The list. */
.dsk { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dsk__head { display: none; }
.dsk__row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--vula-line); border-radius: 2px; }
.dsk__row:hover { border-color: var(--vula-navy); }
.dsk__row:focus-within { border-color: var(--vula-navy); }
.dsk__row > :not(.dsk__avatar):not(.dsk__who) { grid-column: 2; }
.vula .dsk__avatar, .vula .dprof__avatar { width: 44px; height: 44px; background: #E4E9F2; color: var(--vula-navy); font-size: 0.9375rem; }
.vula .dsk__avatar.vula-avatar--photo, .vula .dprof__avatar.vula-avatar--photo { background: var(--vula-line); }
.dsk__who { display: grid; gap: 2px; min-width: 0; }
.dsk__name { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; color: var(--vula-navy); text-decoration: none; }
.dsk__name::after { content: ""; position: absolute; inset: 0; } /* The whole card opens the profile. */
.dsk__name:hover, .dsk__name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.dsk__headline { font-weight: 600; color: var(--vula-ink); overflow-wrap: anywhere; }
.dsk__place { font-size: 0.875rem; color: var(--vula-muted); }
.dsk__skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dsk__skills li, .dchips li { padding: 3px 10px; border-radius: 999px; background: #EEF1F6; color: var(--vula-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.dsk__meter { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--vula-ink); }
.dmeter { display: inline-block; flex: 0 0 auto; width: 72px; height: 8px; border-radius: 2px; background: #E4E9F2; overflow: hidden; vertical-align: middle; }
.dmeter i { display: block; height: 100%; background: var(--vula-navy); }
.dsk__cv, .dsk__when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.875rem; color: var(--vula-ink); }
.dsk__when { color: var(--vula-muted); }
.dsk__tag { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid #B9C2D0; border-radius: 2px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--vula-muted); }
.dsk__tag.is-yes { border-color: var(--vula-navy); color: var(--vula-navy); }
.dash-pager { align-items: center; gap: 12px; }
.dash-pager__at { font-size: 0.875rem; color: var(--vula-muted); }

/* A profile. */
.dprof__head { display: flex; align-items: center; gap: 18px; margin: 4px 0 6px; }
.vula .dprof__avatar { width: 72px; height: 72px; font-size: 1.5rem; }
.dprof__head .dash-sub { margin: 4px 0 0; }
.dprof__headline { margin: 4px 0 0; font-size: 1.125rem; font-weight: 700; color: var(--vula-ink); }
.dprof__note { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--vula-navy); background: #fff; font-size: 0.875rem; color: var(--vula-muted); }
.dprof__grid { display: grid; gap: 16px; align-items: start; }
.dprof__main { display: grid; gap: 16px; min-width: 0; }
.dprof__text { margin: 10px 0 0; line-height: 1.55; color: var(--vula-ink); }
.dcard__title + .dtable { margin-top: 16px; }
.dprof__pair { display: grid; gap: 20px; }
.dchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.dchips li { font-size: 0.875rem; padding: 4px 12px; }
.dhist { display: grid; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.dhist li { padding-top: 14px; border-top: 1px solid var(--vula-line); }
.dhist li:first-child { padding-top: 0; border-top: 0; }
.dhist strong { display: block; font-weight: 800; color: var(--vula-navy); }
.dhist span { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--vula-muted); }
.dhist p { margin: 6px 0 0; color: var(--vula-ink); }
.dfigs--facts { margin: 0; }
.dfigs--facts .dfigs__row:first-child { padding-top: 0; }
.dfigs--facts dd { font-size: 0.9375rem; font-weight: 700; text-align: right; }
.dfigs--facts dd a { color: var(--vula-orange-deep); text-underline-offset: 3px; }
.dfigs__row--meter dd { display: flex; align-items: center; gap: 10px; }
.dstatus { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dstatus i { width: 10px; height: 10px; border-radius: 2px; }
.djob__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dash-badge--paused { background: #FFF1DD; color: #8A4B06; }
@container (min-width: 520px) {
	.dprof__pair { grid-template-columns: 2fr 1fr; gap: 32px; }
}
@media (min-width: 600px) {
	.vula .dprof__avatar { width: 96px; height: 96px; font-size: 2rem; }
}
@media (min-width: 768px) {
	.dfilter { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; padding: 18px 20px; }
	.dfilter .dfilter__q { grid-column: span 6; }
	.dfilter > div { grid-column: span 2; }
	.dfilter .dfilter__check, .dfilter .dfilter__go { grid-column: span 3; }
	.dfilter .dfilter__go { justify-content: flex-end; }
}
@media (max-width: 599px) {
	/* Five tabs: two rows on a phone, and the header scrolls away instead of covering the page. */
	.dash-top { position: static; }
	.dash-tabs { flex-wrap: wrap; overflow: visible; }
	.dash-tabs a { min-height: 44px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.dsk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	/* The list as rows with a header, and the filters in one row, once the six columns fit (1200 px). */
	.dfilter { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.dfilter .dfilter__q { grid-column: span 2; }
	.dfilter > div { grid-column: span 1; }
	.dfilter .dfilter__check { grid-column: span 4; }
	.dfilter .dfilter__go { grid-column: span 3; justify-content: flex-end; }
	.dsk { gap: 0; background: #fff; border: 1px solid var(--vula-line); border-radius: 2px; }
	.dsk__head, .dsk__row { grid-template-columns: 44px minmax(13rem, 2.2fr) minmax(0, 2fr) 10.5rem 11rem 8.5rem; gap: 0 18px; align-items: center; }
	.dsk__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.dsk__meter .dmeter { width: 52px; }
	.dsk__head { display: grid; padding: 10px 20px; background: var(--vula-paper); border-bottom: 1px solid var(--vula-line); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vula-muted); }
	.dsk__row { padding: 12px 20px; border: 0; border-bottom: 1px solid var(--vula-line); border-radius: 0; }
	.dsk__row:last-child { border-bottom: 0; }
	.dsk__row:hover, .dsk__row:focus-within { background: #FAFBFD; }
	.dsk__row > :not(.dsk__avatar):not(.dsk__who) { grid-column: auto; }
	.dsk__cv, .dsk__when { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (min-width: 1024px) {
	.dprof__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.dprof__facts { grid-column: 2; grid-row: 1; position: sticky; top: 132px; }
	.dprof__main { grid-column: 1; grid-row: 1; }
}

@media (min-width: 1024px) {
	.dtile { container-type: inline-size; }
	.dtile__n { font-size: clamp(1.75rem, 24cqi, 3rem); }
}
@media (min-width: 1600px) {
	/* A big screen or projector: wider content and every rem-sized word and number about 12 per cent larger. */
	html:has(body.vula-page-dash) { font-size: 112.5%; }
	.vula-page-dash .dash-top__row, .vula-page-dash .dash-tabs, .vula-page-dash .dash-main { max-width: 1520px; }
	.dgrowth { grid-template-rows: auto 290px 30px 104px 30px; }
}

/* Print or save as PDF: A4 landscape, colours kept, no tabs, buttons or disclosures, no card split.
   Only on /dash (review of 15 Oct: vula.css loads on every page, so every rule is scoped to the dash body
   class and the page size is a named page; public and portal pages print as before). */
@page dash { size: A4 landscape; margin: 10mm; }
@media print {
	body.vula-page-dash { min-height: 0; background: #fff; }
	body.vula-page-dash .vula-dash { page: dash; min-height: 0; background: #fff; zoom: 0.78; } /* A row of cards to a page; small text about 8 pt. */
	body.vula-page-dash, body.vula-page-dash * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.vula-page-dash .vula-skip, .vula-page-dash .dash-tabs, .vula-page-dash .dash-top__out, .vula-page-dash .dash-top__user, .vula-page-dash .dash-print, .vula-page-dash .dnums, .vula-page-dash .dcard__more, .vula-page-dash .dash-card__go, .vula-page-dash .dgrowth__hits, .vula-page-dash .dash-at__note, .vula-page-dash .dfilter, .vula-page-dash .dash-pager, .vula-page-dash .dash-back { display: none !important; }
	.vula-page-dash .dash-top { position: static; }
	.vula-page-dash .dash-top__row { max-width: none; padding: 8px 14px; }
	.vula-page-dash .dash-main { max-width: none; padding: 14px 0 0; }
	.vula-page-dash .dash-head { margin-bottom: 12px; }
	.vula-page-dash .dcard__head { margin-top: 0; }
	.vula-page-dash .dcard__head + .dcard__desc { margin-top: 4px; }
	.vula-page-dash .dash-h1 { font-size: 1.75rem; }
	.vula-page-dash .dtiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
	.vula-page-dash .dtile, .vula-page-dash .dtile:nth-child(-n+2) { grid-column: auto; }
	.vula-page-dash .dtile__n { font-size: 2.5rem; }
	.vula-page-dash .dtiles.dtiles--fest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vula-page-dash .dtiles--fest .dtile, .vula-page-dash .dtiles--fest .dtile:nth-child(-n+2) { grid-column: auto; }
	.vula-page-dash .dgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
	.vula-page-dash .dcard--growth { grid-column: span 8; }
	.vula-page-dash .dcard--profiles { grid-column: span 4; }
	.vula-page-dash .dcard--apps, .vula-page-dash .dcard--activity { grid-column: 1 / -1; }
	.vula-page-dash .dcard--where, .vula-page-dash .dcard--jobs { grid-column: span 7; }
	.vula-page-dash .dcard--skills, .vula-page-dash .dcard--employers { grid-column: span 5; }
	.vula-page-dash .dash-head, .vula-page-dash .dtiles, .vula-page-dash .dtile, .vula-page-dash .dcard, .vula-page-dash .dfest, .vula-page-dash .dash-table tr, .vula-page-dash .dash-row, .vula-page-dash .dsk__row { break-inside: avoid; page-break-inside: avoid; }
	.vula-page-dash .dfest { break-before: auto; margin-top: 16px; padding-top: 12px; }
	.vula-page-dash .dash-list--table { display: none; }
	.vula-page-dash .dash-table { display: table; width: 100%; border-collapse: collapse; }
}

/* ---------- Square controls (Bokang, 26 September 2026) ----------
   Every button and every link styled as a button has square corners, set by one token. Cards, inputs,
   the phone frames and the logo plates keep their radius. The active item in the desktop menu gets a
   straight underline with flat ends, because its box is no longer rounded. */
.vula-btn,
.vula-header__cta,
.vula-menu__button,
.vula-menu__list a,
.vula-nav__list a,
.vula-social a,
.vula-chip,
.vula-oauth,
.vula-search__btn,
.vula-appbar__links a,
.vula-appbar__user,
.vula-suggest__btn,
.vula-tag,
.vula-help-open,
.vula-help__send,
.vula-help__retry,
.vula-help__chip,
.vula-help__close,
.dash-btn,
.dash-top__out,
.dash-chips a,
.dash-pager a,
.dash-search button,
.dash-card--alert .dash-card__go,
input[type="file"]::file-selector-button {
	border-radius: var(--vula-radius-control);
}

/* The Help icon sits on the label's centre line in the pill and in the bottom bar. */
.vula-help-open svg,
.vula-bottom-nav__item--help svg {
	display: block;
	flex: 0 0 auto;
}

/* ---------- Home: the showcase video (Bokang, 26 September 2026) ----------
   Under "About the festival". Nothing plays or downloads until someone taps: preload="none", no autoplay.
   Two players: the 9:16 portrait cut on phones held upright, the 16:9 video from 760 px and on any
   screen wider than it is tall. The portrait player is capped at 70 per cent of the screen height, so
   the heading and the next section stay in reach, and nothing is cropped: the words sit at the top and
   bottom of the frame. The posters carry the play button. */
.vula-section--intro + .vula-section--video {
	padding-top: 0;
}

.vula-video {
	max-width: 960px;
	margin: 0 auto;
}

.vula-video__player {
	display: block;
	height: auto;
	border-radius: var(--vula-radius);
	background: var(--vula-navy-deep);
	box-shadow: var(--vula-shadow);
}

.vula-video__player--tall {
	width: min(100%, calc(70vh * 9 / 16));
	width: min(100%, calc(70svh * 9 / 16));
	margin-inline: auto;
	aspect-ratio: 9 / 16;
}

.vula-video__player--wide {
	display: none;
	width: 100%;
	aspect-ratio: 16 / 9;
}

@media (min-width: 760px), (min-aspect-ratio: 1 / 1) {
	.vula-video__player--tall {
		display: none;
	}

	.vula-video__player--wide {
		display: block;
	}
}

/* A player in full screen stays shown when the phone turns and the media query above would hide it. */
.vula-video__player:fullscreen {
	display: block;
}

/* Job card heading link: a 44 px target without moving the layout. The padding makes the box 44 px
   tall; the equal negative margin keeps the title where it was. The "View job" button stays below. */
.vula-card__title a {
	display: inline-block;
	padding-block: 11px;
	margin-block: -11px;
}

/* ---------- Organiser and partner logo strip (decision 0004) ---------- */

/* GDED and GEP: two larger plates, always side by side, one row at 360 px. */
.vula-plates.vula-organisers {
	/* GDED's logo is wide (2.8:1) and GEP's is square, so GDED gets the wider plate;
	   both then render about 1.5x the partner logos' height, still one row at 360 px. */
	grid-template-columns: 3fr 2fr;
	max-width: 34rem;
	margin-inline: 0;
}

.vula-organisers li {
	height: 104px;
	padding: var(--vula-s-3) var(--vula-s-1);
}

.vula-organisers img {
	max-height: 72px;
}

/* The section's own sub-headings on the home page (the footer uses vula-foot__label). */
.vula-strip__label {
	margin: 0 0 var(--vula-s-3);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vula-muted);
}

.vula-strip__label--partners {
	margin-top: var(--vula-s-6);
}

/* In the footer, the partners heading needs the same clear gap above it. */
.vula-foot .vula-strip__label--partners {
	margin-top: var(--vula-s-5);
}

/* 0.7.0 (tester D2): thumb-sized targets on the seeker screens, visuals unchanged where possible. */
.vula-steps__item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.vula-suggest__btn {
	min-height: 44px;
}

.vula-tag__x {
	position: relative;
}

.vula-tag__x::after {
	content: "";
	position: absolute;
	inset: -10px;
}

.vula-danger > summary {
	padding-block: 0.65rem;
	cursor: pointer;
}

/* ============================================================
   0.9.0 A (developer A, 8 October 2026): the two hubs, profile sections, photo,
   visibility summary and switches, the installable app. Spec 0.9.0 sections 9, 10 and 11.
   ============================================================ */

/* ---------- Anchors land below the sticky header, never under it (Bokang, 8 Oct) ---------- */
.vula-body [id] {
	scroll-margin-top: 88px;
}

/* Keyboard focus and scrolling keep clear of the sticky header and, on phones, the bottom bar. */
html:has(.vula-body) {
	scroll-padding-top: 80px;
}

@media (max-width: 759.98px) {
	html:has(.vula-bottom-nav) {
		scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* ---------- Hub header: job seeker (white, gold) and employer (navy, orange) ---------- */
.vula-hub {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--vula-white);
	color: var(--vula-navy);
	border-bottom: 1px solid var(--vula-line);
}

.vula-hub--employer {
	background: var(--vula-navy);
	color: var(--vula-white);
	border-bottom-color: var(--vula-navy-deep);
}

.vula-hub__inner {
	display: flex;
	align-items: center;
	gap: var(--vula-s-2) var(--vula-s-3);
	min-height: 60px;
	padding-block: var(--vula-s-2);
}

.vula-hub__brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.vula-hub__name {
	font-size: 0.9375rem;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vula-hub__name-accent {
	color: var(--vula-orange-deep);
}

.vula-hub--employer .vula-hub__name-accent {
	color: var(--vula-orange);
}

.vula-hub__badge {
	flex: 0 0 auto;
	margin-right: auto;
	padding: 0.25rem 0.5rem;
	background: var(--vula-gold);
	color: var(--vula-navy);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.vula-hub--employer .vula-hub__badge {
	background: var(--vula-orange);
}

/* The tabs are the bottom bar's list, shown from 760 px. */
.vula-hub__tabs {
	display: none;
}

.vula-hub__tablist,
.vula-hub__menulist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-hub__tablist a,
.vula-hub__tablist button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--vula-s-3);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--vula-fs-1);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.vula-hub__tablist a:hover,
.vula-hub__tablist button:hover {
	box-shadow: inset 0 -3px 0 var(--vula-line);
}

.vula-hub--employer .vula-hub__tablist a:hover,
.vula-hub--employer .vula-hub__tablist button:hover {
	box-shadow: inset 0 -3px 0 var(--vula-line-dark);
}

.vula-hub__tablist a[aria-current="page"] {
	font-weight: 800;
	box-shadow: inset 0 -3px 0 var(--vula-gold);
}

.vula-hub--employer .vula-hub__tablist a[aria-current="page"] {
	box-shadow: inset 0 -3px 0 var(--vula-orange);
}

/* Help items wait for the help chat script, like the bottom bar's. */
.vula-hub__help {
	display: none;
}

.vula-help-ready .vula-hub__help {
	display: block;
}

.vula-hub__menu {
	position: relative;
	flex: 0 0 auto;
}

.vula-hub__button {
	display: inline-flex;
	align-items: center;
	gap: var(--vula-s-2);
	min-height: 44px;
	padding: 0 var(--vula-s-2) 0 0.3rem;
	border: 1.5px solid var(--vula-line);
	background: transparent;
	color: inherit;
	font-size: var(--vula-fs-1);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.vula-hub__button::-webkit-details-marker {
	display: none;
}

.vula-hub--employer .vula-hub__button {
	border-color: var(--vula-line-dark);
}

.vula-hub__button:hover {
	border-color: var(--vula-gold);
}

.vula-hub--employer .vula-hub__button:hover {
	border-color: var(--vula-orange);
}

/* Small phones: the menu button is the photo or initials and the arrow; "Menu" stays for screen readers. */
@media (max-width: 419.98px) {
	.vula-hub__button-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.vula-vis .vula-vis__dot {
		display: none;
	}

	.vula-vis .vula-vis__line {
		flex-direction: column;
		align-items: flex-start;
	}
}

.vula-hub__chevron {
	transition: transform var(--vula-fast) var(--vula-ease);
}

.vula-hub__menu[open] .vula-hub__chevron {
	transform: rotate(180deg);
}

.vula-hub__panel {
	position: absolute;
	top: calc(100% + var(--vula-s-2));
	right: 0;
	z-index: 70;
	width: min(18rem, calc(100vw - 2 * var(--vula-gutter)));
	max-height: calc(100dvh - 5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--vula-s-2);
	background: var(--vula-navy);
	color: var(--vula-white);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow-lift);
}

.vula-hub--employer .vula-hub__panel {
	background: var(--vula-navy-deep);
	border: 1px solid var(--vula-line-dark);
}

.vula-hub__menulist li + li {
	border-top: 1px solid var(--vula-line-dark);
}

.vula-hub__menulist a,
.vula-hub__menulist button {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 0 var(--vula-s-4);
	border: 0;
	background: none;
	color: var(--vula-white);
	font: inherit;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.vula-hub__menulist a:hover,
.vula-hub__menulist a:focus-visible,
.vula-hub__menulist button:hover,
.vula-hub__menulist button:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: var(--vula-white);
}

.vula-hub__menulist a[aria-current="page"] {
	color: var(--vula-gold);
}

.vula-hub--employer .vula-hub__menulist a[aria-current="page"] {
	color: var(--vula-orange);
}

/* Sign out closes the list, set apart so it is never tapped by mistake. */
.vula-hub__menulist .vula-hub__signout {
	margin-top: var(--vula-s-2);
	border-top: 2px solid var(--vula-line-dark);
}

@media (min-width: 760px) {
	.vula-hub__badge {
		margin-right: 0;
	}

	.vula-hub__tabs {
		display: block;
		margin-left: auto;
	}

	.vula-hub__tablist {
		display: flex;
		gap: var(--vula-s-1);
	}
}

/* ---------- Bottom bar in the hubs: the current item takes the hub's accent ---------- */
.vula-bottom-nav--seeker .vula-bottom-nav__item.is-current .vula-bottom-nav__link::before,
.vula-bottom-nav--seeker .vula-bottom-nav__link[aria-current="page"]::before {
	background: var(--vula-gold);
}

.vula-bottom-nav--seeker .vula-bottom-nav__item.is-current .vula-bottom-nav__icon,
.vula-bottom-nav--seeker .vula-bottom-nav__link[aria-current="page"] .vula-bottom-nav__icon {
	color: var(--vula-gold);
}

/* Help as a link to the contact page while the help chat is off. */
.vula-bottom-nav__item--help-link {
	display: block;
}

/* Inside a hub the tabs carry Help from 760 px, so the floating Help button would only repeat it. */
@media (min-width: 760px) {
	.vula-in-hub .vula-help-open {
		display: none !important;
	}

	/* Elsewhere it floats bottom right: the page ends clear of it (tester D4). */
	.vula-help-ready .vula-body:not(.vula-in-hub) .vula-main {
		padding-bottom: 5rem;
	}
}

/* ---------- Avatars with photos ---------- */
.vula-avatar {
	flex: 0 0 auto;
	overflow: hidden;
}

.vula-avatar--photo {
	background: var(--vula-line);
}

.vula .vula-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
}

.vula-avatar--large {
	width: 64px;
	height: 64px;
	font-size: 1.25rem;
}

.vula-avatar--photo-edit {
	width: 80px;
	height: 80px;
	font-size: 1.5rem;
}

.vula-candidate .vula-avatar {
	width: 44px;
	height: 44px;
}

/* Employer dashboard head: the welcome and company, then Post a job; side by side from 760 px. */
.vula-app__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vula-s-4);
}

.vula-hub__menulist a,
.vula-hub__menulist button {
	padding-block: 0.5rem;
	line-height: 1.3;
}

/* ---------- Dashboards ---------- */
.vula-dash__head {
	display: flex;
	align-items: center;
	gap: var(--vula-s-4);
}

.vula-dash__head .vula-app__title {
	margin: 0;
	font-size: var(--vula-fs-5);
}

.vula-tiles--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: var(--vula-s-5);
}

.vula-tile--link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.vula-tile--link .vula-tile__n,
.vula-tile--link .vula-tile__l {
	display: block;
}

.vula-tile--link:hover {
	box-shadow: var(--vula-shadow-lift);
}

@media (min-width: 760px) {
	.vula-tiles.vula-tiles--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vula-app__grid--profile .vula-app__aside:has(.vula-visibility-card) {
		position: static;
	}

	.vula-app__grid--profile .vula-app__aside {
		top: calc(60px + var(--vula-s-4));
	}
}

.vula-employer-links {
	margin-top: var(--vula-s-5);
}

@media (min-width: 480px) {
	.vula-employer-links {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.vula-employer-links .vula-btn {
		width: auto;
	}
}

.vula-hubjobs__tools {
	display: grid;
	gap: var(--vula-s-3);
	margin-bottom: var(--vula-s-5);
}

/* ---------- Who can see your profile: one line, Change, two switches ---------- */
.vula-visibility-card {
	gap: var(--vula-s-3);
}

.vula-vis__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vula-s-1) var(--vula-s-3);
}

.vula-vis__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vula-s-1) var(--vula-s-2);
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-ink);
}

.vula-vis__line strong {
	color: var(--vula-navy);
	font-weight: 800;
}

.vula-vis__dot {
	color: var(--vula-muted);
}

.vula-vis__saved {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.5rem;
	background: var(--vula-ok-bg);
	color: var(--vula-green);
	font-size: var(--vula-fs-0);
	font-weight: 800;
}

.vula-vis__change {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	font-weight: 700;
	color: var(--vula-navy);
}

.vula-vis__form.vula-form {
	gap: var(--vula-s-3);
}

.vula-onoff__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vula-s-3);
	min-height: 44px;
	padding: var(--vula-s-3) 0;
	border-top: 1px solid var(--vula-line);
	cursor: pointer;
}

.vula-onoff__text {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.vula-onoff__label {
	font-weight: 700;
	line-height: 1.3;
}

.vula-onoff__help {
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
	line-height: 1.4;
}

.vula-onoff__control {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--vula-s-2);
	flex: 0 0 auto;
}

.vula-onoff__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vula-onoff__track {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 28px;
	border-radius: var(--vula-radius-pill);
	background: #8A94A6;
	transition: background-color var(--vula-fast);
}

.vula-onoff__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vula-white);
	box-shadow: 0 1px 2px rgba(15, 27, 51, 0.3);
	transition: transform var(--vula-fast) var(--vula-ease);
}

.vula-onoff__input:checked + .vula-onoff__track {
	background: var(--vula-green);
}

.vula-onoff__input:checked + .vula-onoff__track::after {
	transform: translateX(20px);
}

.vula-onoff__input:focus-visible + .vula-onoff__track {
	outline: 3px solid var(--vula-focus);
	outline-offset: 2px;
}

.vula-onoff__state {
	min-width: 2.25em;
	font-weight: 800;
	color: var(--vula-navy);
}

@media (min-width: 480px) {
	.vula-vis__form .vula-actions {
		flex-direction: row;
	}

	.vula-vis__form .vula-actions .vula-btn {
		width: auto;
	}
}

/* The public page's state in the profile's last section (the full card is on the dashboard). */
.vula-vis__public {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vula-s-1) var(--vula-s-2);
	margin: 0;
	padding-top: var(--vula-s-3);
	border-top: 1px solid var(--vula-line);
	font-size: var(--vula-fs-1);
	font-weight: 600;
}

.vula-vis__public a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}

/* ---------- Registration: the one line about being searchable ---------- */
.vula-join__searchable {
	margin: 0;
	padding: var(--vula-s-3) var(--vula-s-4);
	border-left: 4px solid var(--vula-green);
	background: var(--vula-ok-bg);
	font-size: var(--vula-fs-1);
	color: var(--vula-ink);
}

/* ---------- Profile: one card per section ---------- */
.vula-profile__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vula-s-4);
	min-width: 0;
}

.vula-sec > *,
.vula-photo > * {
	min-width: 0;
}

.vula-profile__main .vula-app__head {
	margin-bottom: 0;
}

.vula-sec {
	gap: var(--vula-s-4);
}

.vula-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vula-s-2);
}

.vula-sec__title {
	margin: 0;
	font-size: var(--vula-fs-4);
	font-weight: 800;
	line-height: 1.2;
	color: var(--vula-navy);
}

.vula-sec__done {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.5rem;
	background: var(--vula-ok-bg);
	color: var(--vula-green);
	font-size: var(--vula-fs-0);
	font-weight: 800;
}

.vula-sec__hint {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-sec__saved {
	margin: 0;
}

.vula-sec .vula-form {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vula-s-4);
}

.vula-pair {
	display: grid;
	gap: var(--vula-s-4) var(--vula-s-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 479.98px) {
	.vula-pair--stack {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 480px) {
	.vula-sec .vula-form__actions {
		display: flex;
		flex-wrap: wrap;
	}

	.vula-sec .vula-form__actions .vula-btn {
		width: auto;
		min-width: 9rem;
	}
}

/* Photo: the picture, then choose a file (it uploads at once with JavaScript), then Remove. */
.vula-photo {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: var(--vula-s-4);
	align-items: start;
	padding-bottom: var(--vula-s-4);
	border-bottom: 1px solid var(--vula-line);
}

.vula-photo__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vula-s-2);
}

.vula-photo .vula-field,
.vula-sec .vula-field {
	grid-template-columns: minmax(0, 1fr);
}

.vula-sec input[type="file"] {
	width: 100%;
}

.vula-photo__form.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.vula-photo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2);
}

.vula-photo__actions [hidden] + .vula-btn,
.vula-photo__actions .vula-btn {
	margin: 0;
}

.vula-btn--quiet-danger,
.vula-btn--ghost.vula-btn--quiet-danger {
	border-color: var(--vula-red);
	color: var(--vula-red);
}

.vula-btn--ghost.vula-btn--quiet-danger:hover {
	background: var(--vula-red);
	border-color: var(--vula-red);
	color: var(--vula-white);
}

/* Tag fields: chips, the input and a 44 px Add button. */
.vula-tags {
	align-items: center;
}

.vula-tags__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--vula-radius-control);
	background: var(--vula-navy);
	color: var(--vula-white);
	cursor: pointer;
}

.vula-tags__add:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.vula-tags__input {
	min-height: 44px;
}

.vula-tag {
	min-height: 44px;
}

/* Experience and education: compact entries, their fields opening in the same card. */
.vula-entries {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vula-line);
}

.vula-entries > .vula-entry {
	padding: var(--vula-s-3) 0;
	border-bottom: 1px solid var(--vula-line);
}

.vula-entry__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vula-s-2) var(--vula-s-3);
}

.vula-entry__text {
	flex: 1 1 12rem;
	min-width: 0;
}

.vula-entry__title {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.vula-entry__meta {
	margin: 0.125rem 0 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
	overflow-wrap: anywhere;
}

.vula-entry__actions {
	display: flex;
	gap: var(--vula-s-2);
}

.vula-entry__actions .vula-btn {
	min-width: 44px;
}

.vula-entry__edit {
	margin-top: var(--vula-s-3);
	padding: var(--vula-s-4);
	background: var(--vula-paper);
	border-left: 3px solid var(--vula-gold);
}

.vula-entry--new .vula-entry__edit {
	margin-top: 0;
}

.vula-entry__legend {
	margin: 0;
	font-weight: 800;
	color: var(--vula-navy);
}

.vula-entry__add {
	justify-self: start;
}

.vula-monthyear {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vula-monthyear > legend {
	padding: 0;
	margin-bottom: var(--vula-s-2);
	font-weight: 700;
}

.vula-monthyear__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--vula-s-2);
}

.vula-suggest--fill {
	margin-top: calc(-1 * var(--vula-s-2));
}

/* ---------- Install card: above the bottom bar on phones, bottom left on wider screens ---------- */
.vula-install {
	position: fixed;
	left: var(--vula-gutter);
	right: var(--vula-gutter);
	bottom: calc(56px + var(--vula-s-3) + env(safe-area-inset-bottom, 0px));
	z-index: 65;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 44px;
	align-items: start;
	gap: var(--vula-s-3);
	padding: var(--vula-s-3) var(--vula-s-2) var(--vula-s-3) var(--vula-s-3);
	background: var(--vula-white);
	color: var(--vula-ink);
	border-top: 4px solid var(--vula-gold);
	border-radius: var(--vula-radius);
	box-shadow: var(--vula-shadow-lift);
}

.vula-install[hidden] {
	display: none;
}

.vula .vula-install__icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
}

.vula-install__body {
	display: grid;
	gap: var(--vula-s-2);
}

.vula-install__title {
	margin: 0;
	font-weight: 800;
	line-height: 1.3;
	color: var(--vula-navy);
}

.vula-install__steps {
	display: grid;
	gap: var(--vula-s-1);
	margin: 0;
	padding-left: 1.25rem;
	font-size: var(--vula-fs-1);
}

.vula-install__share {
	vertical-align: -3px;
}

.vula-install__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--vula-muted);
	cursor: pointer;
}

.vula-install__close:hover {
	color: var(--vula-navy);
}

@media (min-width: 760px) {
	.vula-install {
		left: var(--vula-s-5);
		right: auto;
		bottom: var(--vula-s-5);
		width: 24rem;
	}
}

/* Tablets: the tabs take a row of their own under the name, badge and menu. */
@media (min-width: 760px) and (max-width: 1023.98px) {
	.vula-hub__inner {
		flex-wrap: wrap;
	}

	.vula-hub__badge {
		margin-right: auto;
	}

	.vula-hub__tabs {
		order: 5;
		flex-basis: 100%;
		margin-left: 0;
	}
}

/* ==========================================================================
   0.9.0 B: public profiles (developer B). The People list (/people/), a public
   profile page (/people/<name>-<id>/), the cards on the list and the home page,
   and the "Your public page" card on the dashboard. Built on the candidate card
   (.vula-candidate) so the two read as one family. Ends at the end of the file.
   ========================================================================== */

/* Cards in a list: one column on phones, two from 600 px, three from 900 px, four from 1200 px. */
.vula-pcards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vula-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-pcards > li {
	display: grid;
	min-width: 0;
}

/* Home: four cards on phones, the rest behind "See everyone". */
@media (max-width: 599px) {
	.vula-pcards--showcase > li:nth-child(n + 5) {
		display: none;
	}
}

@media (min-width: 600px) {
	.vula-pcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.vula-pcards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.vula-pcards--showcase {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* The name is the link; it covers the whole card so the card is one 44 px+ target. */
.vula-pcard {
	position: relative;
	align-content: start;
	transition: transform var(--vula-fast) var(--vula-ease), box-shadow var(--vula-fast);
}

.vula-pcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--vula-shadow-lift);
}

.vula-pcard__who {
	min-width: 0;
}

.vula-pcard__link {
	color: var(--vula-navy);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.vula-pcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--vula-radius);
}

.vula-pcard__link:focus-visible {
	outline: none;
}

.vula-pcard__link:focus-visible::after {
	outline: 3px solid var(--vula-focus);
	outline-offset: 2px;
}

.vula-pcard:hover .vula-pcard__link {
	text-decoration: underline;
}

.vula-pcard .vula-candidate__headline {
	overflow-wrap: anywhere;
}

.vula-pcard__town {
	margin: 0;
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

.vula-avatar--photo {
	display: block;
	object-fit: cover;
	background: var(--vula-paper);
}

/* ---------- The People list: search ---------- */

/* Phones: the keyword on its own row, town and province side by side, then skill and the button. */
.vula-people-search {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vula-s-3);
	align-items: end;
}

.vula-people-search > [data-vula-field="q"],
.vula-people-search > [data-vula-field="skill"],
.vula-people-search__actions {
	grid-column: 1 / -1;
}

.vula-people-search .vula-field {
	margin: 0;
}

.vula-people-search__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vula-s-3);
}

.vula-people-search__actions .vula-btn {
	min-height: var(--vula-tap);
}

.vula-people-search__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--vula-tap);
	min-width: var(--vula-tap); /* 0.10.0 (tester D3, 0.9.0): "Clear" measured 42 px wide. */
	font-weight: 600;
	color: var(--vula-navy);
}

@media (min-width: 1024px) {
	.vula-people-search {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.vula-people-search > [data-vula-field="q"],
	.vula-people-search > [data-vula-field="skill"],
	.vula-people-search__actions {
		grid-column: auto;
	}
}

.vula-people__count {
	margin: 0 0 var(--vula-s-4);
}

.vula-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--vula-s-3);
	margin-top: var(--vula-s-6);
}

.vula-pager .vula-btn {
	min-height: var(--vula-tap);
}

.vula-pager__at {
	font-size: var(--vula-fs-1);
	color: var(--vula-muted);
}

/* ---------- A public profile ---------- */

.vula-person__own {
	padding-top: var(--vula-s-4);
	background: var(--vula-paper);
}

.vula-person__own .vula-notice {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vula-s-2) var(--vula-s-4);
	margin: 0;
}

.vula-person__own a {
	display: inline-flex; /* 0.10.0 (tester D2, 0.9.0): the owner's links are 44 px tall, not 25. */
	align-items: center;
	min-height: var(--vula-tap);
	font-weight: 600;
	color: var(--vula-navy);
}

.vula-person__head {
	display: flex;
	align-items: center;
	gap: var(--vula-s-4);
}

.vula-person__photo,
.vula-person__initials {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 3px solid var(--vula-gold);
}

.vula-person__photo {
	display: block;
	object-fit: cover;
	background: var(--vula-navy-deep);
}

.vula-person .vula-person__initials {
	font-size: var(--vula-fs-5);
	line-height: 1;
}

.vula-person__who {
	min-width: 0;
}

.vula-person__name {
	font-size: var(--vula-fs-5);
	font-weight: 900;
	line-height: var(--vula-lh-heading);
	overflow-wrap: anywhere;
}

.vula-person__headline {
	margin: var(--vula-s-1) 0 0;
	font-size: var(--vula-fs-3);
	font-weight: 600;
	color: var(--vula-gold);
	overflow-wrap: anywhere;
}

.vula-person__meta {
	flex-direction: column;
	margin-top: var(--vula-s-2);
	color: var(--vula-on-navy-muted);
}

.vula-person__meta li + li::before {
	content: none;
}

.vula-person__hire {
	margin: var(--vula-s-5) 0 var(--vula-s-3);
	color: var(--vula-on-navy-muted);
}

.vula-person > .vula-wrap > .vula-actions {
	margin-top: var(--vula-s-5);
}

.vula-person__body > * + * {
	margin-top: var(--vula-s-3);
}

.vula-person__h {
	margin-top: var(--vula-s-6);
	font-size: var(--vula-fs-4);
	font-weight: 800;
	color: var(--vula-navy);
}

.vula-person__body > .vula-person__h:first-child {
	margin-top: 0;
}

/* Skills sit on the paper band here, so the chips get a white ground and a rule. */
.vula-person__body .vula-candidate__skills li {
	background: var(--vula-white);
	border: 1px solid var(--vula-line);
	color: var(--vula-ink);
}

.vula-person__summary p {
	margin: 0 0 var(--vula-s-3);
	overflow-wrap: anywhere;
}

.vula-person__list {
	display: grid;
	gap: var(--vula-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-person__list li {
	display: grid;
	gap: 0.15rem;
	padding: var(--vula-s-3) var(--vula-s-4);
	background: var(--vula-white);
	border-left: var(--vula-card-top) solid var(--vula-orange);
	border-radius: var(--vula-radius-sm);
	overflow-wrap: anywhere;
}

.vula-person__note {
	margin-top: var(--vula-s-6);
	font-size: var(--vula-fs-1);
}

@media (min-width: 760px) {
	.vula-person__photo,
	.vula-person__initials {
		width: 128px;
		height: 128px;
	}

	.vula-person__name {
		font-size: var(--vula-fs-6);
	}

	.vula-person__meta {
		flex-direction: row;
	}

	.vula-person__meta li + li::before {
		content: "\00B7";
	}

	.vula-person > .vula-wrap > .vula-actions {
		flex-direction: row;
	}

	.vula-person > .vula-wrap > .vula-actions .vula-btn {
		width: auto;
	}
}

/* ---------- Home: the showcase ---------- */

.vula-showcase__foot {
	display: grid;
	gap: var(--vula-s-3);
	margin-top: var(--vula-s-6);
}

.vula-showcase__join {
	margin: 0;
	font-size: var(--vula-fs-4);
	font-weight: 800;
	color: var(--vula-navy);
}

@media (min-width: 760px) {
	.vula-showcase__foot .vula-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.vula-showcase__foot .vula-actions .vula-btn {
		width: auto;
	}
}

/* ---------- Dashboard: "Your public page" ---------- */

.vula-pubcard__title {
	font-size: var(--vula-fs-3);
	font-weight: 800;
}

.vula-pubcard__line {
	margin: 0;
}

.vula-pubcard__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vula-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vula-pubcard__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vula-tap);
	font-weight: 600;
	color: var(--vula-navy);
}

/* End of 0.9.0 B. */

/* Chip remove buttons: a 44 px target around the small round cross. */
.vula-tag .vula-tag__x {
	width: 44px;
	height: 44px;
	margin: 0 -10px 0 -8px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 11px, transparent 12px);
}

.vula-tag .vula-tag__x::after {
	content: none;
}

/* Seeker dashboard: air between the tiles, the headings and the job cards. */
.vula-app__grid--profile .vula-section__head {
	margin-top: var(--vula-s-6);
}

.vula-app__grid--profile .vula-grid + p {
	margin-top: var(--vula-s-4);
}

/* The dashboard aside is narrow: the two settings stack, without the dot. */
.vula-app__aside .vula-vis .vula-vis__line {
	flex-direction: column;
	align-items: flex-start;
}

.vula-app__aside .vula-vis .vula-vis__dot {
	display: none;
}

/* ==========================================================================
   0.10.0: the applicant inbox, your applications and the apply step
   (tester's report of 8 October 2026, D3 and D6).
   ========================================================================== */

/* The new card lists sit flush with the heading and keep the card grid's gap (.vula-grid). */
.vula-applicant-jobs,
.vula-applicants,
.vula-applications {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vula-s-5);
	margin: 0 0 var(--vula-s-5);
	padding: 0;
	list-style: none;
}

/* Titles and names that open a job or an applicant: 44 px tall. */
.vula-applicant-jobs .vula-card__title a,
.vula-applications .vula-card__title a,
.vula-applicant .vula-candidate__name a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vula-tap);
}

.vula-applicant-jobs .vula-card__title,
.vula-applications .vula-card__title,
.vula-applicant .vula-candidate__name {
	margin: 0;
}

/* The applicant's photo or initials, as on the candidate cards. */
.vula-applicant .vula-avatar {
	width: 44px;
	height: 44px;
	font-size: var(--vula-fs-2);
}

/* The tick box for bulk "Not successful": a 44 px target without the choice-row frame. */
.vula-applicant .vula-applicant__pick {
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--vula-tap);
	min-height: var(--vula-tap);
	padding: 0;
	border: 0;
	background: none;
}

.vula-applicant .vula-applicant__pick input {
	margin: 0;
}

.vula-applicant .vula-applicant__pick:has(input:checked) {
	background: none;
}

/* The bulk "Not successful" opener: 44 px tall, the marker kept. */
.vula-bulk > summary {
	display: list-item;
	min-height: var(--vula-tap);
	padding-block: 0.625rem;
	line-height: 1.5;
	font-weight: 700;
	cursor: pointer;
}

/* The apply step's line on what the employer sees, and its links. */
.vula-apply__sees {
	margin-bottom: var(--vula-s-4);
}

.vula-apply__sees p {
	margin: 0;
}

.vula-apply__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vula-s-4);
}

/* End of 0.10.0. */

/* ---------- Cookie banner (release 0.11.0, decision 0007) ----------
   A small bar at the bottom of public pages and the app while a visitor has not chosen. analytics.js
   shows it and lifts it above the phone bottom bar. Allow and Reject are the same size and weight. */
.vula-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.vula-cookie[hidden] { display: none; }
.vula-cookie__inner { pointer-events: auto; display: grid; gap: 12px; max-width: 960px; margin: 0 auto; padding: 14px 16px; background: var(--vula-navy); color: #fff; border: 1px solid var(--vula-line-dark); border-radius: 2px; box-shadow: 0 4px 16px rgba(10, 16, 32, 0.25); }
.vula-cookie__text { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.vula-cookie__text a { color: var(--vula-gold); text-underline-offset: 3px; font-weight: 700; }
.vula-cookie__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vula-cookie__btn { min-height: 44px; padding: 0 16px; border: 2px solid #fff; border-radius: var(--vula-radius-control); background: #fff; color: var(--vula-navy); font: inherit; font-size: 0.9375rem; font-weight: 800; cursor: pointer; }
.vula-cookie__btn:hover { background: var(--vula-gold); border-color: var(--vula-gold); }
.vula-cookie__btn:focus-visible { outline: 3px solid var(--vula-focus); outline-offset: 2px; }
.vula-cookie-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vula-cookie-open[hidden] { display: none; }
.vula-app-cookie { margin: 24px 0 0; padding-bottom: 8px; font-size: 0.875rem; color: var(--vula-muted); }
.vula-app-cookie:empty { display: none; }
@media (min-width: 760px) {
	.vula-cookie__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
	.vula-cookie__buttons { grid-template-columns: repeat(2, minmax(10rem, auto)); }
}
@media print {
	.vula-cookie, .vula-cookie-open { display: none !important; }
}

/* ---------- App download (release 0.11.1) ----------
   The install card reads as an app download; "Download app" in the footer and menus; the steps on
   /about/#app-download for any browser. */
.vula-install__line { margin: 0; font-size: var(--vula-fs-1); line-height: 1.4; color: var(--vula-muted); }
.vula-install__lead { margin: 0 0 var(--vula-s-1); font-size: var(--vula-fs-1); font-weight: 700; color: var(--vula-ink); }
[data-vula-download-item][hidden] { display: none !important; }
.vula-download__lead { max-width: 42rem; margin: var(--vula-s-3) 0 var(--vula-s-4); color: var(--vula-muted); font-size: var(--vula-fs-3); }
.vula-download__ways { display: grid; gap: var(--vula-s-5); margin-top: var(--vula-s-4); }
.vula-download__ways h3 { margin: 0 0 var(--vula-s-2); font-size: var(--vula-fs-4); color: var(--vula-navy); }
.vula-download__ways ol { display: grid; gap: var(--vula-s-1); margin: 0; padding-left: 1.25rem; }
@media (min-width: 760px) {
	.vula-download__ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Person cards, redrawn (release 0.11.1, Bokang) ----------
   Equal heights in a row, content from the top, "View profile" pinned to the foot. The photo or
   initials are 64 px on navy with gold initials and a thin ring. Headlines wrap between words only and
   stop at two lines. The card is one link (the name's ::after); the focus ring is on the whole card. */
.vula-pcards > li { display: flex; }
.vula-pcard.vula-candidate {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	padding: 20px 20px 16px;
	border: 1px solid var(--vula-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05);
}
.vula-pcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 27, 51, 0.12); border-color: #C9D0DB; }
@media (prefers-reduced-motion: reduce) {
	.vula-pcard, .vula-pcard:hover { transition: none; transform: none; }
}
.vula-pcard__face { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vula .vula-pcard__avatar { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--vula-line); }
.vula .vula-pcard__avatar--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--vula-navy); color: var(--vula-gold); font-size: 1.375rem; font-weight: 800; letter-spacing: 0.02em; }
.vula-pcard__badge { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; white-space: nowrap; border-radius: 999px; background: var(--vula-ok-bg); color: var(--vula-green); font-size: 0.75rem; font-weight: 700; line-height: 1.3; text-align: center; }
.vula-pcard .vula-pcard__name { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.vula-pcard .vula-pcard__link { overflow-wrap: normal; word-break: normal; }
.vula-pcard__link::after { border-radius: 14px; }
.vula-pcard .vula-pcard__headline {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 4px 0 0;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vula-ink);
}
.vula-pcard .vula-pcard__town { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.875rem; color: var(--vula-muted); }
.vula-pcard__pin { flex: 0 0 auto; color: var(--vula-orange-deep); }
.vula-pcard .vula-pcard__skills { gap: 6px; margin-top: 14px; }
.vula-pcard .vula-pcard__skills li { padding: 3px 10px; background: #EEF1F6; color: var(--vula-ink); font-size: 0.8125rem; line-height: 1.4; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vula-pcard .vula-pcard__more-skills { background: transparent; border: 1px solid var(--vula-line); color: var(--vula-muted); }
.vula-pcard__foot { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding-top: 16px; font-size: 0.875rem; font-weight: 700; color: var(--vula-orange-deep); }
.vula-pcard__foot::before { content: ""; position: absolute; left: 20px; right: 20px; height: 1px; margin-top: -10px; background: var(--vula-line); align-self: flex-start; }
.vula-pcard__arrow { transition: transform var(--vula-fast) var(--vula-ease); }
.vula-pcard:hover .vula-pcard__arrow { transform: translateX(3px); }
.vula-pcard:hover .vula-pcard__link { text-decoration: none; }
.vula-pcard:focus-within { border-color: var(--vula-navy); }
/* Home: four roomy cards a row from 1200 px (eight shown; everyone is on /people/), not five crowded ones. */
@media (min-width: 1200px) {
	.vula-pcards--showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vula-pcards--showcase > li:nth-child(n + 9) { display: none; }
}