/**
 * TeachVic Jobs — front end.
 * Everything is scoped under .tvj so the host theme keeps control of the page shell.
 * Tokens are exposed as custom properties; a theme can retune the board by
 * redeclaring them without touching this file.
 */

.tvj {
	/* Ink — Victorian school blazer navy, used for text and primary actions. */
	--tvj-ink: #17293a;
	--tvj-ink-soft: #4a5b6b;
	--tvj-ink-faint: #7a8794;

	/* Surfaces */
	--tvj-paper: #ffffff;
	--tvj-surface: #f4f6f8;
	--tvj-line: #dde3e8;
	--tvj-neutral: #f1f3f1;

	/* Eucalypt — interactive colour, links and focus. */
	--tvj-accent: #0f6f62;
	--tvj-accent-dark: #0b5348;
	--tvj-accent-wash: #e6f2f0;

	/* Marigold — reserved strictly for closing-date urgency. */
	--tvj-urgent: #a8620a;
	--tvj-urgent-wash: #fdf1e0;

	/* One scale, applied everywhere. From the job board design handoff:
	   4 inputs and buttons, 9 logo tiles and compact rows, 12 cards,
	   16 panels, 100 pills. */
	--tvj-radius-input: 4px;
	--tvj-radius-tile: 9px;
	--tvj-radius: 12px;
	--tvj-radius-panel: 16px;
	--tvj-radius-pill: 100px;
	/* Retained so older rules keep working; both now resolve to the scale. */
	--tvj-radius-sm: 4px;

	--tvj-gap: 20px;
	--tvj-gap-lg: 32px;

	--tvj-font: inherit;
	--tvj-font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

	/* Elevation is expressed with 1px borders, never shadows — the design
	   handoff is explicit about this and it is what keeps the interface calm.
	   Defined as none so any remaining reference is harmless. */
	--tvj-shadow: none;

	color: var(--tvj-ink);
	font-family: var(--tvj-font);
	line-height: 1.55;
}

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

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

.tvj-h1 {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 var(--tvj-gap);
	font-weight: 700;
}

.tvj-h2 {
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: var(--tvj-gap-lg) 0 12px;
	font-weight: 650;
}

.tvj-label {
	display: block;
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tvj-ink-faint);
	margin-bottom: 5px;
}

.tvj-muted { color: var(--tvj-ink-faint); font-size: .875rem; }
.tvj-hint { color: var(--tvj-ink-faint); font-size: .84rem; margin: 6px 0 0; }

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

.tvj-link {
	color: var(--tvj-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.tvj-link:hover { border-bottom-color: currentColor; }

.tvj-link--button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	color: var(--tvj-accent);
}

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

.tvj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: var(--tvj-radius-sm);
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tvj-btn--primary {
	background: var(--tvj-ink);
	color: #fff;
}
.tvj-btn--primary:hover { background: #0e1c28; color: #fff; }

.tvj-btn--ghost {
	background: transparent;
	border-color: var(--tvj-line);
	color: var(--tvj-ink);
}
.tvj-btn--ghost:hover { border-color: var(--tvj-ink-soft); }

.tvj :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--tvj-accent);
	outline-offset: 2px;
	border-radius: var(--tvj-radius-input);
}

/* --- Search bar ------------------------------------------------------- */

.tvj-searchbar {
	display: grid;
	grid-template-columns: 2fr 1.4fr auto auto;
	gap: 12px;
	align-items: end;
	padding: 16px;
	background: var(--tvj-paper);
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
	border-color: var(--tvj-line);
	margin-bottom: var(--tvj-gap-lg);
}

.tvj-searchbar__field { position: relative; min-width: 0; }

.tvj-searchbar input,
.tvj-searchbar select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	background: var(--tvj-paper);
	font: inherit;
	color: var(--tvj-ink);
}

.tvj-searchbar__submit { height: 44px; }

/* Autocomplete */
.tvj-suggest {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0; right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--tvj-paper);
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	border-color: var(--tvj-line);
	max-height: 280px;
	overflow-y: auto;
}

.tvj-suggest li { margin: 0; }

.tvj-suggest button {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	background: none;
	border: 0;
	border-radius: var(--tvj-radius-input);
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: var(--tvj-ink);
}
.tvj-suggest button:hover,
.tvj-suggest button[aria-selected="true"] { background: var(--tvj-accent-wash); }

.tvj-suggest__type {
	font-size: .74rem;
	color: var(--tvj-ink-faint);
	text-transform: uppercase;
	letter-spacing: .06em;
	flex-shrink: 0;
}

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

.tvj-hero__heading {
	font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem);
	line-height: 1.1;
	letter-spacing: -.025em;
	max-width: 18ch;
	margin: 0 0 var(--tvj-gap);
	font-weight: 700;
}

.tvj-hero__popular { margin-top: calc(var(--tvj-gap-lg) * -.4); }
.tvj-hero__popular .tvj-label { margin-bottom: 10px; }

/* --- Layout ----------------------------------------------------------- */

.tvj-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--tvj-gap-lg);
	align-items: start;
}

/* --- Filter rail ------------------------------------------------------ */

.tvj-filters {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 4px;
}

.tvj-filters__toggle { display: none; }

.tvj-facet {
	border: 0;
	border-top: 1px solid var(--tvj-line);
	margin: 0;
	padding: 18px 0;
}
.tvj-facet:first-of-type { border-top: 0; padding-top: 0; }

.tvj-facet__legend {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tvj-ink-faint);
	padding: 0;
	margin-bottom: 10px;
}

.tvj-facet__options { display: flex; flex-direction: column; gap: 2px; }

.tvj-facet__row { display: flex; gap: 8px; }
.tvj-facet__row input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	font: inherit;
}
.tvj-facet__period {
	width: 100%;
	margin-top: 8px;
	padding: 9px 10px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	font: inherit;
	background: var(--tvj-paper);
}

.tvj-check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 6px;
	margin: 0 -6px;
	border-radius: var(--tvj-radius-sm);
	cursor: pointer;
	font-size: .93rem;
}
.tvj-check:hover { background: var(--tvj-surface); }
.tvj-check input { margin: 0; accent-color: var(--tvj-accent); flex-shrink: 0; }
.tvj-check__label { flex: 1; min-width: 0; }

/* Facet counts sit in tabular figures so the column reads as a column. */
.tvj-check__count {
	font-family: var(--tvj-font-num);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: var(--tvj-ink-faint);
}

.tvj-filters__clear { width: 100%; margin-top: 14px; }

/* --- Result bar ------------------------------------------------------- */

.tvj-resultbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-resultbar__count { margin: 0; font-weight: 650; }

.tvj-resultbar__actions { display: flex; gap: 10px; align-items: center; }

.tvj-sort select {
	padding: 9px 11px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	background: var(--tvj-paper);
	font: inherit;
	color: var(--tvj-ink);
}

/* --- Cards ------------------------------------------------------------ */

.tvj-results { display: flex; flex-direction: column; gap: 14px; }

.tvj-card {
	position: relative;
	padding: 18px 20px 16px;
	background: var(--tvj-paper);
	border: 1px solid var(--tvj-line);
	border-left: 3px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
	transition: border-color .15s ease;
}

.tvj-card:hover {
	border-color: var(--tvj-ink-faint);
	border-left-color: var(--tvj-accent);
	border-color: var(--tvj-line);
}

.tvj-card--featured { border-left-color: var(--tvj-accent); background: linear-gradient(var(--tvj-accent-wash), var(--tvj-paper) 90px); }

.tvj-card__flag {
	margin: 0 0 8px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tvj-accent-dark);
}

.tvj-card__head { display: flex; gap: 14px; align-items: flex-start; }

.tvj-card__logo {
	flex-shrink: 0;
	width: 46px; height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	background: var(--tvj-surface);
	overflow: hidden;
}
.tvj-card__logo--lg { width: 64px; height: 64px; }
.tvj-card__logo img { width: 100%; height: 100%; object-fit: contain; }

.tvj-card__monogram {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tvj-ink-soft);
}

.tvj-card__headings { flex: 1; min-width: 0; }

.tvj-card__title { margin: 0; font-size: 1.08rem; line-height: 1.3; font-weight: 650; }
.tvj-card__title a { color: var(--tvj-ink); text-decoration: none; }
.tvj-card__title a:hover { color: var(--tvj-accent-dark); }

.tvj-card__employer { margin: 3px 0 0; color: var(--tvj-ink-soft); font-size: .93rem; }

.tvj-save {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--tvj-radius-sm);
	color: var(--tvj-ink-faint);
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}
.tvj-save:hover { background: var(--tvj-surface); color: var(--tvj-ink); }
.tvj-save.is-saved { color: var(--tvj-accent); }
.tvj-save.is-saved svg path { fill: currentColor; }

.tvj-save-text.is-saved { border-color: var(--tvj-accent); color: var(--tvj-accent-dark); }

.tvj-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-size: .9rem;
	color: var(--tvj-ink-soft);
}

.tvj-card__meta-item { display: flex; align-items: center; gap: 6px; }
.tvj-card__meta-item::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--tvj-line);
}
.tvj-card__meta-item--place::before { background: var(--tvj-accent); }
.tvj-card__meta-item--pay { font-weight: 600; color: var(--tvj-ink); }

.tvj-card__excerpt {
	margin: 10px 0 0;
	color: var(--tvj-ink-soft);
	font-size: .93rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tvj-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--tvj-line);
	font-size: .84rem;
	color: var(--tvj-ink-faint);
}

/* Signature: the closing-date strip. Quiet until it matters, then it shouts once. */
.tvj-countdown {
	margin-left: auto;
	padding: 3px 9px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-surface);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tvj-ink-soft);
}
.tvj-countdown--urgent {
	background: var(--tvj-urgent-wash);
	color: var(--tvj-urgent);
}

/* --- Tags ------------------------------------------------------------- */

.tvj-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.tvj-tag {
	padding: 4px 10px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-pill);
	font-size: .82rem;
	color: var(--tvj-ink-soft);
}
.tvj-tag a { color: inherit; text-decoration: none; display: inline-flex; gap: 6px; }
.tvj-tag:hover { border-color: var(--tvj-accent); color: var(--tvj-accent-dark); }
.tvj-tag__count { font-family: var(--tvj-font-num); font-size: .74rem; color: var(--tvj-ink-faint); }

/* --- Single role ------------------------------------------------------ */

.tvj-single__header {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: var(--tvj-gap);
	margin-bottom: var(--tvj-gap-lg);
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-single__employer { margin: 0; font-size: 1.05rem; font-weight: 650; }
.tvj-single__employer a { color: var(--tvj-ink); text-decoration: none; }
.tvj-single__posted { margin: 2px 0 0; color: var(--tvj-ink-faint); font-size: .88rem; }

.tvj-single__actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.tvj-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--tvj-gap-lg);
	align-items: start;
}

.tvj-single__aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }

.tvj-panel {
	padding: 18px;
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
}

.tvj-panel__title {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tvj-ink-faint);
}

.tvj-panel__row { margin-top: 16px; }
.tvj-panel__label {
	margin: 0;
	font-size: .78rem;
	font-weight: 650;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tvj-ink-faint);
}

.tvj-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: .92rem; }
.tvj-dl dt { color: var(--tvj-ink-faint); }
.tvj-dl dd { margin: 0; font-weight: 550; }

.tvj-reqs { padding-left: 1.1em; color: var(--tvj-ink-soft); }

.tvj-apply {
	margin-top: var(--tvj-gap-lg);
	padding: var(--tvj-gap);
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
}

.tvj-similar { margin-top: calc(var(--tvj-gap-lg) * 1.5); }

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

.tvj-form--narrow { max-width: 480px; }

.tvj-form__section {
	padding: var(--tvj-gap);
	margin-bottom: var(--tvj-gap);
	background: var(--tvj-paper);
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
}

.tvj-form__legend {
	margin: 0 0 var(--tvj-gap);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tvj-ink-faint);
}

.tvj-field { margin-bottom: 16px; }
.tvj-field:last-child { margin-bottom: 0; }

.tvj-field label,
.tvj-field__label {
	display: block;
	margin-bottom: 5px;
	font-size: .9rem;
	font-weight: 600;
}

.tvj-field input:not([type="checkbox"]):not([type="radio"]),
.tvj-field select,
.tvj-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	background: var(--tvj-paper);
	font: inherit;
	color: var(--tvj-ink);
}

.tvj-field textarea { resize: vertical; }

.tvj-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

.tvj-form__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: var(--tvj-gap); }
.tvj-form__message { margin: 0; font-size: .9rem; }
.tvj-form__message.is-error { color: #a3231d; }
.tvj-form__message.is-success { color: var(--tvj-accent-dark); }

.tvj-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tvj-chip { position: relative; }
.tvj-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tvj-chip span {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-pill);
	font-size: .88rem;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}
.tvj-chip input:checked + span {
	background: var(--tvj-accent-wash);
	border-color: var(--tvj-accent);
	color: var(--tvj-accent-dark);
	font-weight: 600;
}
.tvj-chip input:focus-visible + span { outline: 2px solid var(--tvj-accent); outline-offset: 2px; }

.tvj-segmented { display: flex; gap: 8px; flex-wrap: wrap; }
.tvj-segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.tvj-segmented__option span {
	display: inline-block;
	padding: 11px 16px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	cursor: pointer;
	font-weight: 550;
}
.tvj-segmented__option input:checked + span {
	border-color: var(--tvj-ink);
	background: var(--tvj-ink);
	color: #fff;
}

.tvj-inline-form { display: inline; }

/* --- Notices, empties, pills ------------------------------------------ */

.tvj-notice {
	padding: 12px 16px;
	margin-bottom: var(--tvj-gap);
	border-radius: var(--tvj-radius-sm);
	border-left: 3px solid var(--tvj-line);
	background: var(--tvj-surface);
	font-size: .93rem;
}
.tvj-notice--success { border-left-color: var(--tvj-accent); background: var(--tvj-accent-wash); }
.tvj-notice--error { border-left-color: #a3231d; background: #fdeceb; }
.tvj-notice--muted { color: var(--tvj-ink-faint); }

.tvj-empty {
	padding: 44px 24px;
	text-align: center;
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
}
.tvj-empty p { margin: 0 0 8px; font-weight: 600; }
.tvj-empty__hint { font-weight: 400 !important; color: var(--tvj-ink-faint); }
.tvj-empty .tvj-btn { margin-top: 10px; }

.tvj-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--tvj-radius-pill);
	font-size: .8rem;
	font-weight: 600;
	background: var(--tvj-surface);
	color: var(--tvj-ink-soft);
}
.tvj-pill--publish,
.tvj-pill--shortlisted { background: var(--tvj-accent-wash); color: var(--tvj-accent-dark); }
.tvj-pill--pending { background: var(--tvj-urgent-wash); color: var(--tvj-urgent); }

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

.tvj-dashboard__head {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
}
.tvj-dashboard__head .tvj-h1 { margin: 0; }

.tvj-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
	margin: var(--tvj-gap) 0 var(--tvj-gap-lg);
}

.tvj-stat {
	padding: 16px 18px;
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
}
.tvj-stat__value {
	margin: 0;
	font-family: var(--tvj-font-num);
	font-size: 1.7rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	font-weight: 600;
}
.tvj-stat__label { margin: 6px 0 0; font-size: .82rem; color: var(--tvj-ink-faint); }

.tvj-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tvj-table th {
	text-align: left;
	padding: 10px 12px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tvj-ink-faint);
	border-bottom: 1px solid var(--tvj-line);
}
.tvj-table td { padding: 14px 12px; border-bottom: 1px solid var(--tvj-line); vertical-align: top; }
.tvj-table__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.tvj-cover { margin-top: 8px; font-size: .88rem; }
.tvj-cover summary { cursor: pointer; color: var(--tvj-accent); }

.tvj-applicants__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }

.tvj-tabs__list {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--tvj-line);
	margin-bottom: var(--tvj-gap);
}

.tvj-tabs__tab {
	padding: 11px 15px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font: inherit;
	font-weight: 600;
	color: var(--tvj-ink-faint);
	cursor: pointer;
}
.tvj-tabs__tab.is-active { color: var(--tvj-ink); border-bottom-color: var(--tvj-accent); }
.tvj-tabs__count {
	font-family: var(--tvj-font-num);
	font-size: .74rem;
	padding: 1px 6px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-surface);
}

.tvj-alerts { list-style: none; margin: 0; padding: 0; }
.tvj-alerts__item {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--tvj-line);
}
.tvj-alerts__label { margin: 0; font-weight: 600; }

/* --- Pagination ------------------------------------------------------- */

.tvj-pagination { margin-top: var(--tvj-gap-lg); }
.tvj-pagination .page-numbers {
	display: inline-block;
	padding: 8px 13px;
	margin-right: 4px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	text-decoration: none;
	color: var(--tvj-ink);
	font-size: .92rem;
}
.tvj-pagination .page-numbers.current { background: var(--tvj-ink); border-color: var(--tvj-ink); color: #fff; }

/* --- Loading ---------------------------------------------------------- */

.tvj-results.is-loading { opacity: .45; transition: opacity .15s ease; pointer-events: none; }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 960px) {
	.tvj-searchbar { grid-template-columns: 1fr 1fr; }
	.tvj-searchbar__submit { grid-column: 1 / -1; }
	.tvj-single__grid { grid-template-columns: 1fr; }
	.tvj-single__aside { position: static; }
}

@media (max-width: 820px) {
	.tvj-layout { grid-template-columns: 1fr; gap: var(--tvj-gap); }

	.tvj-filters { position: static; max-height: none; overflow: visible; }
	.tvj-filters__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 12px 16px;
		background: var(--tvj-paper);
		border: 1px solid var(--tvj-line);
		border-radius: var(--tvj-radius-sm);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}
	.tvj-filters__body { display: none; padding-top: var(--tvj-gap); }
	.tvj-filters.is-open .tvj-filters__body { display: block; }
	.tvj-filters__count {
		margin-left: auto;
		font-family: var(--tvj-font-num);
		font-size: .78rem;
		padding: 2px 8px;
		border-radius: var(--tvj-radius-pill);
		background: var(--tvj-accent-wash);
		color: var(--tvj-accent-dark);
	}
	.tvj-filters__count:empty { display: none; }

	.tvj-searchbar { grid-template-columns: 1fr; }
	.tvj-resultbar { align-items: flex-start; flex-direction: column; }
	.tvj-single__actions { margin-left: 0; width: 100%; }

	.tvj-table thead { display: none; }
	.tvj-table, .tvj-table tbody, .tvj-table tr, .tvj-table td { display: block; width: 100%; }
	.tvj-table tr { padding: 14px 0; border-bottom: 1px solid var(--tvj-line); }
	.tvj-table td { border: 0; padding: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tvj *, .tvj *::before, .tvj *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* --- Landing pages ------------------------------------------------------
 * Specialism x region pages. Stats-led intro, role list, sibling links.
 * ---------------------------------------------------------------------- */

.tvj-landing {
	max-width: 900px;
	margin-inline: auto;
}

.tvj-landing__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .84rem;
	color: var(--tvj-ink-faint);
	margin-bottom: 14px;
}

.tvj-landing__crumbs a {
	color: var(--tvj-ink-faint);
	text-decoration: none;
}

.tvj-landing__crumbs a:hover {
	color: var(--tvj-accent);
}

.tvj-landing__intro {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--tvj-ink-soft);
	max-width: 62ch;
}

.tvj-landing__freshness {
	font-size: .86rem;
	color: var(--tvj-ink-faint);
	margin-top: 6px;
}

.tvj-landing__types {
	margin-bottom: var(--tvj-gap);
}

.tvj-landing__more {
	margin-top: var(--tvj-gap);
	text-align: center;
}

.tvj-landing__about,
.tvj-landing__siblings,
.tvj-landing__cta {
	margin-top: var(--tvj-gap-lg);
	padding-top: var(--tvj-gap);
	border-top: 1px solid var(--tvj-line);
}

.tvj-landing__schools {
	columns: 2;
	column-gap: var(--tvj-gap-lg);
	color: var(--tvj-ink-soft);
	font-size: .95rem;
}

.tvj-landing__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 8px;
}

.tvj-landing__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-sm);
	text-decoration: none;
	color: var(--tvj-ink);
	font-size: .92rem;
	transition: border-color .15s ease;
}

.tvj-landing__links a:hover {
	border-color: var(--tvj-accent);
	color: var(--tvj-accent-dark);
}

.tvj-landing__count {
	margin-left: auto;
	font-family: var(--tvj-font-num);
	font-size: .78rem;
	color: var(--tvj-ink-faint);
}

.tvj-landing__cta {
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
	border-top: 0;
	padding: var(--tvj-gap);
}

.tvj-landing__cta .tvj-btn {
	margin-right: 8px;
	margin-top: 8px;
}

@media (max-width: 600px) {
	.tvj-landing__schools { columns: 1; }
}

/* --- Application flow ---------------------------------------------------
 * One question group per screen. Large targets, generous spacing, no
 * two-column layouts below 640px — most of these are completed on a phone,
 * often on a slow connection from overseas.
 * ---------------------------------------------------------------------- */

.tvj-apply {
	max-width: 620px;
	margin-inline: auto;
}

.tvj-apply__context {
	padding: 12px 16px;
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius-sm);
	font-size: .93rem;
	margin-bottom: var(--tvj-gap);
}

.tvj-apply__progress {
	margin-bottom: var(--tvj-gap-lg);
}

.tvj-apply__bar {
	height: 4px;
	background: var(--tvj-line);
	border-radius: var(--tvj-radius-pill);
	overflow: hidden;
}

.tvj-apply__bar span {
	display: block;
	height: 100%;
	background: var(--tvj-accent);
	border-radius: var(--tvj-radius-pill);
	transition: width .3s ease;
}

.tvj-apply__count {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 0;
	font-size: .84rem;
	color: var(--tvj-ink-faint);
}

.tvj-apply__count [data-tvj-step-label] {
	font-weight: 600;
	color: var(--tvj-ink);
}

.tvj-step {
	display: none;
}

.tvj-step.is-active {
	display: block;
	animation: tvj-step-in .25s ease;
}

@keyframes tvj-step-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.tvj-step__title {
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 8px;
}

.tvj-step__lead {
	color: var(--tvj-ink-soft);
	margin: 0 0 var(--tvj-gap);
}

/* Choice cards — the whole card is the target, not just the radio. */

.tvj-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: var(--tvj-gap);
}

.tvj-choices--inline {
	flex-direction: row;
	flex-wrap: wrap;
}

.tvj-choices--inline .tvj-choice {
	flex: 1 1 160px;
}

.tvj-choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.tvj-choice:hover {
	border-color: var(--tvj-ink-faint);
}

.tvj-choice input {
	margin: 2px 0 0;
	accent-color: var(--tvj-accent);
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.tvj-choice:has(input:checked) {
	border-color: var(--tvj-accent);
	background: var(--tvj-accent-wash);
}

.tvj-choice__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tvj-choice__label {
	font-weight: 600;
}

.tvj-choice__note {
	font-size: .86rem;
	color: var(--tvj-ink-faint);
}

.tvj-conditional[hidden] {
	display: none;
}

.tvj-conditional {
	padding: var(--tvj-gap) 0 0;
}

.tvj-callout {
	padding: 14px 16px;
	background: var(--tvj-accent-wash);
	border-left: 3px solid var(--tvj-accent);
	border-radius: 0 var(--tvj-radius-sm) var(--tvj-radius-sm) 0;
	font-size: .93rem;
	margin: 0;
}

.tvj-bands .tvj-field {
	min-width: 0;
}

/* Documents */

.tvj-doc {
	padding: 16px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
	margin-bottom: 12px;
	transition: border-color .15s ease;
}

.tvj-doc.is-done {
	border-color: var(--tvj-accent);
	background: var(--tvj-accent-wash);
}

.tvj-doc__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.tvj-doc__label {
	font-weight: 600;
}

.tvj-doc__tick {
	margin-left: auto;
	font-size: .78rem;
	font-weight: 600;
	color: var(--tvj-accent-dark);
}

.tvj-doc__why {
	margin: 4px 0 10px;
	font-size: .88rem;
	color: var(--tvj-ink-faint);
}

.tvj-doc__helper {
	margin: 8px 0 0;
	font-size: .84rem;
}

.tvj-doc input[type="file"] {
	width: 100%;
	font-size: .9rem;
}

/* Review */

.tvj-review {
	border-top: 1px solid var(--tvj-line);
	margin-bottom: var(--tvj-gap);
}

.tvj-review__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--tvj-line);
	font-size: .93rem;
}

.tvj-review__row span {
	color: var(--tvj-ink-faint);
}

.tvj-apply__consent {
	align-items: flex-start;
	padding: 14px 16px;
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius-sm);
	margin: 0;
}

.tvj-apply__save {
	margin-top: var(--tvj-gap);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.tvj-apply__save-msg {
	font-size: .86rem;
	color: var(--tvj-accent-dark);
}

.tvj-apply__nav {
	display: flex;
	gap: 12px;
	margin-top: var(--tvj-gap-lg);
	padding-top: var(--tvj-gap);
	border-top: 1px solid var(--tvj-line);
}

.tvj-apply__nav .tvj-btn--primary {
	margin-left: auto;
	min-width: 160px;
}

/* 1.46.2 (Ben, 28 Sep): tvj-apply.js hides Back on the first step, and
   Continue / Send application by step, with the hidden attribute — but
   .tvj-btn's display: inline-flex outranks the browser's [hidden] rule, so
   all three showed on every step. */
.tvj-apply__nav .tvj-btn[hidden] {
	display: none;
}

/* 1.47.0: the portal button beside Browse more roles on the confirmation. */
.tvj-apply__done-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.tvj-apply__done-actions .tvj-btn[hidden] {
	display: none;
}

.tvj-apply__error {
	margin: 12px 0 0;
	color: #a3231d;
	font-size: .9rem;
}

.tvj-apply__error:empty {
	display: none;
}

.tvj-field input.is-invalid,
.tvj-field select.is-invalid {
	border-color: #a3231d;
}

.tvj-apply__done {
	text-align: center;
	padding: var(--tvj-gap-lg) var(--tvj-gap);
	background: var(--tvj-accent-wash);
	border-radius: var(--tvj-radius);
}

@media (max-width: 640px) {
	.tvj-apply__nav .tvj-btn { flex: 1; }
	.tvj-apply__nav .tvj-btn--primary { min-width: 0; }
	.tvj-bands { grid-template-columns: 1fr 1fr; }
}

/* Informational callout on the English screen — explains the exemption
   before the candidate has to choose whether they qualify for it. */
.tvj-callout--info {
	display: block;
	margin-bottom: var(--tvj-gap);
	background: var(--tvj-surface);
	border-left-color: var(--tvj-ink-faint);
}

.tvj-callout--info strong {
	display: block;
	margin-bottom: 4px;
	color: var(--tvj-ink);
}

/* Application flow on a role page. */
/* Full width beneath the description and the role details panel, so the page
 * reads role first, form second. scroll-margin keeps the heading clear of the
 * sticky header when the Apply button jumps here. */
.tvj-apply-wrap {
	margin-top: var(--tvj-gap-lg);
	padding: var(--tvj-gap-lg) var(--tvj-gap);
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
	border-top: 3px solid var(--tvj-accent);
	scroll-margin-top: 110px;
}

.tvj-apply-wrap > .tvj-h2 {
	margin-top: 0;
	text-align: center;
}

.tvj-apply-wrap .tvj-apply {
	max-width: none;
}

.tvj-apply-wrap .tvj-apply__context {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Candidate portal — Workstream K                                     */
/* ------------------------------------------------------------------ */

.tvj-profile-header {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: var(--tvj-gap);
}

.tvj-profile-header__photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tvj-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tvj-profile-header__photo img { width: 100%; height: 100%; object-fit: cover; }

.tvj-profile-header__monogram {
	font-family: var(--tvj-heading-font, inherit);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--tvj-ink-faint);
}

.tvj-profile-header__text .tvj-h1 { margin: 0; }
.tvj-profile-header__headline { margin: 2px 0 0; color: var(--tvj-ink-soft); }
.tvj-profile-header__location { margin: 2px 0 0; color: var(--tvj-ink-faint); font-size: .875rem; }

.tvj-photo-preview {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Quick links */

.tvj-quicklinks {
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
	padding: 16px 18px;
	margin-bottom: var(--tvj-gap);
}

.tvj-quicklinks__title {
	margin: 0 0 10px;
	font-family: var(--tvj-interface-font, inherit);
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--tvj-ink-faint);
}

.tvj-quicklinks__row { display: flex; gap: 12px; flex-wrap: wrap; }

.tvj-quicklinks__panel {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--tvj-line);
}

.tvj-form--inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tvj-form--inline .tvj-field { margin-bottom: 0; min-width: 200px; flex: 1; }

.tvj-recommendations { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tvj-recommendations__item { padding: 10px 0; border-top: 1px solid var(--tvj-line); }
.tvj-recommendations__item strong { margin-right: 8px; }

/* Preferences */

.tvj-checkgroup { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.tvj-checkgroup__option { display: flex; align-items: center; gap: 6px; font-size: .92rem; }

.tvj-divider { border: none; border-top: 1px solid var(--tvj-line); margin: var(--tvj-gap-lg) 0; }

.tvj-field-row--four { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Repeatable rows (education / previous roles) */

.tvj-repeat-row {
	padding: 14px;
	margin-bottom: 12px;
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius-sm);
}

.tvj-repeat-row [data-tvj-remove-row] { margin-top: 4px; }

/* Applied roles — status bar */

.tvj-applied-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }

.tvj-applied-list__item {
	padding: 16px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
}

.tvj-applied-list__role { font-weight: 600; color: var(--tvj-ink); }
.tvj-applied-list__note { margin: 8px 0 0; font-size: .84rem; color: var(--tvj-ink-faint); }

.tvj-statusbar {
	display: flex;
	align-items: center;
	margin-top: 14px;
}

.tvj-statusbar__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
	font-size: .74rem;
	color: var(--tvj-ink-faint);
	text-align: center;
}

.tvj-statusbar__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 55%;
	width: 90%;
	height: 2px;
	background: var(--tvj-line);
	z-index: 0;
}

.tvj-statusbar__step.is-complete:not(:last-child)::after { background: var(--tvj-accent); }

.tvj-statusbar__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tvj-paper);
	border: 2px solid var(--tvj-line);
	margin-bottom: 6px;
	z-index: 1;
}

.tvj-statusbar__step.is-complete .tvj-statusbar__dot { background: var(--tvj-accent); border-color: var(--tvj-accent); }
.tvj-statusbar__step.is-complete .tvj-statusbar__label { color: var(--tvj-ink); font-weight: 600; }

.tvj-statusbar--closed .tvj-statusbar__step.is-complete .tvj-statusbar__dot,
.tvj-statusbar--closed .tvj-statusbar__step.is-complete:not(:last-child)::after {
	background: var(--tvj-ink-faint);
	border-color: var(--tvj-ink-faint);
}

.tvj-results--compact { flex-direction: row; flex-wrap: wrap; }
.tvj-results--compact .tvj-card { flex: 1 1 280px; }

@media (max-width: 640px) {
	.tvj-profile-header { flex-direction: column; align-items: flex-start; }
	.tvj-statusbar__label { display: none; }
}

/* Documents */

.tvj-h3 {
	font-family: var(--tvj-heading-font, inherit);
	font-size: 1.05rem;
	margin: var(--tvj-gap) 0 6px;
}

.tvj-btn--small { padding: 6px 16px; font-size: .82rem; }

/* Visually hides the file input while keeping it clickable/focusable inside
   its label, so "Upload" / "Replace" reads as a normal button rather than
   the browser's default file-chooser control. Same technique as .tvj-sr,
   kept separate because this one must stay part of the label's click target. */
.tvj-sr-file {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tvj-doc-slots { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--tvj-gap); }

.tvj-doc-slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px;
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius-sm);
}

.tvj-doc-slot__info { display: flex; flex-direction: column; gap: 2px; }
.tvj-doc-slot__label { font-weight: 600; }

.tvj-doc-slot__file {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: .82rem;
	color: var(--tvj-accent-dark);
}

.tvj-doc-slot__action { flex-shrink: 0; position: relative; }

.tvj-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.tvj-doc-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--tvj-line);
}

.tvj-doc-list__info { display: flex; align-items: flex-start; gap: 10px; }
.tvj-doc-list__icon { color: var(--tvj-ink-faint); flex-shrink: 0; margin-top: 2px; }
.tvj-doc-list__remove { flex-shrink: 0; }

@media (max-width: 640px) {
	.tvj-doc-slot,
	.tvj-doc-list__item { flex-direction: column; align-items: flex-start; }
}

/* --- Recruiter review portal --------------------------------------------
 * Front-end equivalent of the wp-admin review screen, so recruiters never
 * need a WordPress login. Deliberately restrained — this is a working tool,
 * not a marketing page.
 * ---------------------------------------------------------------------- */

.tvj-review { max-width: 1100px; margin-inline: auto; }

.tvj-review__head {
	display: flex;
	align-items: flex-start;
	gap: var(--tvj-gap);
	flex-wrap: wrap;
	margin-bottom: var(--tvj-gap);
}

.tvj-review__head > div { flex: 1; min-width: 260px; }

.tvj-review__scope,
.tvj-review__meta {
	color: var(--tvj-ink-faint);
	font-size: .93rem;
	margin: 4px 0 0;
}

.tvj-review__note {
	font-size: .84rem;
	color: var(--tvj-ink-faint);
	background: var(--tvj-surface);
	padding: 8px 14px;
	border-radius: var(--tvj-radius-sm);
	margin: 0;
}

.tvj-review__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-bottom: 1px solid var(--tvj-line);
	margin-bottom: var(--tvj-gap);
}

.tvj-review__tab {
	padding: 10px 16px;
	text-decoration: none;
	color: var(--tvj-ink-faint);
	font-size: .93rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.tvj-review__tab.is-active {
	color: var(--tvj-ink);
	border-bottom-color: var(--tvj-urgent);
	font-weight: 600;
}

.tvj-review__count {
	font-size: .78rem;
	padding: 1px 7px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-surface);
	margin-left: 5px;
}

/* Field filter. Pills rather than a second row of tabs: the tabs above are the
   application's state, which is one thing at a time and mutually exclusive, and
   two identical tab rows stacked read as one control that has broken. This row
   only renders when the queue holds more than one field. */

.tvj-review__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--tvj-gap);
}

.tvj-review__field {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-pill);
	text-decoration: none;
	color: var(--tvj-ink-faint);
	font-size: .85rem;
	line-height: 1.4;
}

.tvj-review__field:hover {
	border-color: var(--tvj-ink-faint);
	color: var(--tvj-ink);
}

.tvj-review__field.is-active {
	background: var(--tvj-ink);
	border-color: var(--tvj-ink);
	color: #fff;
	font-weight: 600;
}

.tvj-review__field.is-active .tvj-review__count {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

/* The "no assessment runs here" note on a non-teaching application. Muted:
   it is the absence of a test, not a finding about the person. */

.tvj-review__na {
	color: var(--tvj-ink-faint);
	font-size: .93rem;
	margin: 0 0 var(--tvj-gap);
}

/* Role grouping. The heading is a rule with a label on it rather than a card,
   so a group of one does not look heavier than the applicant inside it. */

.tvj-review__group { margin-bottom: var(--tvj-gap-lg); }

.tvj-review__role {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--tvj-line);
	font-size: .82rem;
	font-weight: 650;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tvj-ink-soft);
}

.tvj-review__role-name { min-width: 0; }

.tvj-review__role-count {
	flex-shrink: 0;
	padding: 1px 8px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-surface);
	color: var(--tvj-ink-faint);
	font-size: .76rem;
	letter-spacing: .02em;
}

/* Pushed to the far end and only visible on hover or focus — useful when a
   recruiter cannot place the role, noise on every heading otherwise. */
.tvj-review__role-link {
	margin-left: auto;
	flex-shrink: 0;
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--tvj-accent);
	text-decoration: none;
	opacity: 0;
	transition: opacity .15s ease;
}

.tvj-review__group:hover .tvj-review__role-link,
.tvj-review__role-link:focus-visible { opacity: 1; }

.tvj-review__list { list-style: none; margin: 0; padding: 0; }

.tvj-review__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
	margin-bottom: 8px;
	text-decoration: none;
	color: var(--tvj-ink);
	transition: border-color .15s ease;
}

.tvj-review__link:hover { border-color: var(--tvj-accent); }

.tvj-review__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tvj-review__go { font-size: 1.4rem; color: var(--tvj-ink-faint); }

/* Back link and the queue stepper share one row, so moving to the next
   candidate is where the eye already is when the previous one is decided. */

.tvj-review__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var(--tvj-gap);
}

.tvj-review__nav .tvj-review__back { margin: 0; }

.tvj-review__seq {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-pill);
	padding: 3px 5px;
}

.tvj-review__step {
	padding: 4px 12px;
	border-radius: var(--tvj-radius-pill);
	font-size: .86rem;
	text-decoration: none;
	color: var(--tvj-ink);
	white-space: nowrap;
}

.tvj-review__step:hover { background: var(--tvj-surface); }

.tvj-review__step.is-disabled {
	color: var(--tvj-line);
	pointer-events: none;
}

.tvj-review__pos {
	padding: 0 8px;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	color: var(--tvj-ink-faint);
	white-space: nowrap;
}

.tvj-review__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--tvj-gap-lg);
	align-items: start;
}

.tvj-review__panel {
	background: var(--tvj-surface);
	border-radius: var(--tvj-radius);
	padding: var(--tvj-gap);
	position: sticky;
	top: 90px;
}

.tvj-review__panel .tvj-choice { background: #fff; margin-bottom: 8px; }

.tvj-review__decided {
	padding: 10px 12px;
	background: #fff;
	border-radius: var(--tvj-radius-sm);
	font-size: .9rem;
	margin-bottom: var(--tvj-gap);
}

.tvj-review__docs { padding-left: 18px; }
.tvj-review__gaps li { color: #8E1015; }
.tvj-review__met li { color: #0F6E56; }

.tvj-review-gate {
	max-width: 420px;
	margin-inline: auto;
	padding: var(--tvj-gap-lg) 0;
}

.tvj-review-gate__lead { color: var(--tvj-ink-faint); margin-bottom: var(--tvj-gap); }
.tvj-review-gate input[type="text"],
.tvj-review-gate input[type="password"] { width: 100%; }
.tvj-review-gate__help { margin-top: var(--tvj-gap); font-size: .9rem; }

@media (max-width: 900px) {
	.tvj-review__grid { grid-template-columns: 1fr; }
	.tvj-review__panel { position: static; }
}

@media (max-width: 640px) {
	.tvj-review__nav { flex-direction: column; align-items: stretch; }
	.tvj-review__seq { justify-content: space-between; }
	/* No hover on touch, so the role link has to be permanently visible. */
	.tvj-review__role-link { opacity: 1; }
}

.tvj-review-gate__error {
	padding: 11px 14px;
	border-left: 3px solid var(--tvj-urgent);
	background: var(--tvj-urgent-wash);
	color: #8E1015;
	font-size: .93rem;
	margin-bottom: var(--tvj-gap);
}

/* --- Candidate sign in --------------------------------------------------
 * Rendered on the account page rather than linking to wp-login.php, so a
 * teacher never sees the WordPress login screen.
 * ---------------------------------------------------------------------- */

.tvj-signin {
	margin-top: var(--tvj-gap-lg);
	padding-top: var(--tvj-gap);
	border-top: 1px solid var(--tvj-line);
	scroll-margin-top: 100px;
}

.tvj-signin input[type="text"],
.tvj-signin input[type="password"] {
	width: 100%;
}

.tvj-signin .login-remember { font-size: .9rem; }

.tvj-signin__error {
	padding: 11px 14px;
	border-left: 3px solid var(--tvj-urgent);
	background: var(--tvj-urgent-wash);
	color: #8E1015;
	font-size: .93rem;
	margin-bottom: var(--tvj-gap);
}

.tvj-signin__help { margin-top: var(--tvj-gap); font-size: .9rem; }

/* --- Sign in page ------------------------------------------------------- */

.tvj-signin-page {
	max-width: 420px;
	margin-inline: auto;
	padding-block: var(--tvj-gap-lg);
}

.tvj-signin-page__lead {
	color: var(--tvj-ink-faint);
	margin-bottom: var(--tvj-gap);
}

.tvj-signin-page input[type="text"],
.tvj-signin-page input[type="password"] { width: 100%; }

.tvj-signin-page__alt {
	margin-top: var(--tvj-gap-lg);
	padding-top: var(--tvj-gap);
	border-top: 1px solid var(--tvj-line);
	font-size: .93rem;
	color: var(--tvj-ink-faint);
}

/* Shown on the account page when a Bullhorn record was matched. */
.tvj-linked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-accent-wash);
	color: var(--tvj-accent-dark);
	font-size: .8rem;
	font-weight: 600;
}

/* Documents already held in Bullhorn — listed, not copied. */
.tvj-bhfiles {
	margin: var(--tvj-gap) 0;
	padding: var(--tvj-gap);
	background: var(--tvj-accent-wash);
	border-radius: var(--tvj-radius);
}

.tvj-bhfiles__list { list-style: none; margin: 10px 0 0; padding: 0; }

.tvj-bhfiles__link {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid transparent;
	padding: 11px 14px;
	background: #fff;
	border-radius: var(--tvj-radius-sm);
	margin-bottom: 6px;
	text-decoration: none;
	color: var(--tvj-ink);
}

.tvj-bhfiles__link:hover { border-color: var(--tvj-accent); }
.tvj-bhfiles__name { flex: 1; font-weight: 500; }
.tvj-bhfiles__date { font-size: .84rem; color: var(--tvj-ink-faint); }

/* --- Candidate portal --------------------------------------------------
 * Navy rail carrying identity and navigation, white working column, cream
 * reference column. Squared inputs — the pill radius belongs on buttons and
 * makes a text field look like a tablet.
 * ---------------------------------------------------------------------- */

.tvj-portal {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr) 240px;
	gap: 0;
	align-items: stretch;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius-tile);
	overflow: hidden;
	background: #fff;
}

/* Left rail ------------------------------------------------------------- */

.tvj-portal__rail--left {
	background: var(--tvj-accent);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-bottom: 16px;
}

.tvj-portal__rail--left .tvj-card {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.tvj-portal__rail--left .tvj-card__title,
.tvj-portal__rail--left .tvj-hint {
	color: rgba(255, 255, 255, .62);
}

.tvj-idcard { padding: 0; }
.tvj-idcard__banner { display: none; }
.tvj-idcard__body {
	padding: 18px 16px 15px;
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.tvj-idcard__avatar {
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	border-radius: var(--tvj-radius-pill);
	border: 2px solid rgba(255, 255, 255, .75);
	background: rgba(255, 255, 255, .13);
	object-fit: cover;
	margin-bottom: 10px;
}

.tvj-idcard__avatar--initial {
	font-family: var(--tvj-font-ui), sans-serif;
	font-size: 2.8rem;
	color: #fff;
}

.tvj-idcard__name { font-size: 1.05rem; line-height: 1.2; margin: 0; color: #fff; }
.tvj-idcard__headline { margin: 3px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .74); }
.tvj-idcard__place { margin: 1px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .56); }

.tvj-linked {
	display: inline-block;
	margin: 10px 0 0;
	padding: 2px 9px;
	border-radius: var(--tvj-radius-input);
	background: var(--tvj-urgent);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.tvj-idcard__stats {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.tvj-idcard__stats li {
	flex: 1;
	padding: 10px 4px;
	text-align: center;
	font-size: .62rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	border-right: 1px solid rgba(255, 255, 255, .14);
}

.tvj-idcard__stats li:last-child { border-right: 0; }

.tvj-idcard__stats span {
	display: block;
	font-family: var(--tvj-font-ui), sans-serif;
	font-size: 1.1rem;
	color: #fff;
}

/* Rail navigation ------------------------------------------------------- */

.tvj-rail__nav { display: flex; flex-direction: column; padding: 12px 0; }

.tvj-rail__link {
	padding: 8px 16px;
	font-family: var(--tvj-font-ui), sans-serif;
	font-size: .82rem;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
	border-left: 3px solid transparent;
}

.tvj-rail__link:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.tvj-rail__link.is-active {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border-left-color: var(--tvj-urgent);
}

/* The recruiter area's entry, shown only to accounts that can review, with a
   hairline between it and the candidate section beneath. */
.tvj-rail__link--recruiter { font-weight: 600; color: #fff; }

.tvj-rail__divider {
	display: block;
	height: 1px;
	margin: 10px 16px;
	background: rgba(255, 255, 255, .18);
}

/* Sub-items under Update details. */
.tvj-rail__sub { display: flex; flex-direction: column; }

.tvj-rail__link--sub {
	padding-left: 30px;
	font-size: .76rem;
	color: rgba(255, 255, 255, .6);
}

.tvj-card--links {
	border-top: 1px solid rgba(255, 255, 255, .14) !important;
	padding-top: 14px;
}

.tvj-card--links .tvj-quicklinks__title { display: none; }
.tvj-card--links .tvj-quicklinks { padding: 0 16px; }
.tvj-card--links .tvj-quicklinks__row { display: flex; flex-direction: column; gap: 8px; }

.tvj-card--links .tvj-btn {
	width: 100%;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--tvj-radius-input);
	background: transparent;
	color: #fff;
	font-size: .78rem;
	padding: 8px 10px;
}

.tvj-card--links .tvj-btn:hover { background: rgba(255, 255, 255, .12); }

/* Working column -------------------------------------------------------- */

.tvj-portal__main {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.tvj-portal__main .tvj-card,
.tvj-portal__rail--right .tvj-card {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.tvj-portal__main .tvj-card__title,
.tvj-portal__rail--right .tvj-card__title {
	padding: 0 0 6px;
	border-bottom: 1px solid var(--tvj-line);
	margin-bottom: 10px;
}

.tvj-portal__main .tvj-card__body,
.tvj-portal__rail--right .tvj-card__body { padding: 0; }

details.tvj-card > summary { padding: 0 0 6px; }
details.tvj-card > summary::after { color: var(--tvj-ink-faint); }

/* Update details — the summary screen and the three editing screens ------
 * The summary is read-only: what we hold, as it stands, with the link to the
 * screen that changes it at the end of each section.
 * ---------------------------------------------------------------------- */

.tvj-details__title { font-size: 1.35rem; }
.tvj-details__intro { margin: -4px 0 4px; }
.tvj-details__back { margin: 0 0 2px; font-size: .84rem; }

.tvj-summary__list { margin: 0; }

.tvj-summary__row {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-summary__row:last-child { border-bottom: 0; }

.tvj-summary__row dt {
	margin: 0;
	font-size: .82rem;
	color: var(--tvj-ink-faint);
}

.tvj-summary__row dd { margin: 0; min-width: 0; word-wrap: break-word; }

.tvj-summary__empty { color: var(--tvj-ink-faint); font-style: italic; }

.tvj-summary__photo {
	width: 72px;
	height: 72px;
	border-radius: var(--tvj-radius-pill);
	object-fit: cover;
}

.tvj-summary__entries { list-style: none; margin: 0 0 4px; padding: 0; }

.tvj-summary__entry {
	padding: 9px 0;
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-summary__entry:last-child { border-bottom: 0; }
.tvj-summary__where { display: block; font-size: .9rem; color: var(--tvj-ink-soft); }
.tvj-summary__when { display: block; font-size: .82rem; color: var(--tvj-ink-faint); }

.tvj-summary__docs { list-style: none; margin: 0 0 4px; padding: 0; }

.tvj-summary__doc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	align-items: baseline;
	padding: 8px 0;
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-summary__doc:last-child { border-bottom: 0; }
.tvj-summary__doclabel { font-size: .9rem; }

.tvj-summary__action { margin: 16px 0 0; }

@media (max-width: 600px) {
	.tvj-summary__row { grid-template-columns: 1fr; gap: 2px; }
}

/* Reference column ------------------------------------------------------ */

.tvj-portal__rail--right {
	background: var(--tvj-surface);
	border-left: 1px solid var(--tvj-line);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Inputs — squared, not pills. Red marks focus. ------------------------- */

.tvj-portal input[type="text"],
.tvj-portal input[type="email"],
.tvj-portal input[type="tel"],
.tvj-portal input[type="url"],
.tvj-portal input[type="number"],
.tvj-portal input[type="date"],
.tvj-portal input[type="password"],
.tvj-portal select,
.tvj-portal textarea {
	border-radius: var(--tvj-radius-input);
	border: 1px solid var(--tvj-line);
	padding: 8px 10px;
	font-size: 15px;
	background: #fff;
}

.tvj-portal input:focus,
.tvj-portal select:focus,
.tvj-portal textarea:focus {
	outline: none;
	border-color: var(--tvj-accent);
	border-bottom: 2px solid var(--tvj-urgent);
	padding-bottom: 7px;
}

.tvj-portal .tvj-btn--primary {
	border-radius: var(--tvj-radius-input);
	background: var(--tvj-urgent);
	border-color: var(--tvj-urgent);
	color: #fff;
}

.tvj-portal .tvj-btn--primary:hover { background: #8E1015; border-color: #8E1015; }
.tvj-portal .tvj-btn--ghost { border-radius: var(--tvj-radius-input); }

/* The old tab strip is gone. */
.tvj-tabs, .tvj-tabs__tab { display: none; }
.tvj-tabs__panel { display: block !important; }

@media (max-width: 1100px) {
	.tvj-portal { grid-template-columns: 216px minmax(0, 1fr); }
	.tvj-portal__rail--right {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid var(--tvj-line);
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

@media (max-width: 782px) {
	.tvj-portal { grid-template-columns: 1fr; }
	.tvj-portal__rail--left { padding-bottom: 0; }
	.tvj-rail__nav { flex-direction: row; overflow-x: auto; padding: 0 8px; }
	.tvj-rail__link { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
	.tvj-rail__link.is-active { border-left: 0; border-bottom-color: var(--tvj-urgent); }
	.tvj-rail__sub { flex-direction: row; }
	.tvj-rail__link--sub { padding-left: 16px; }
	.tvj-card--links .tvj-quicklinks__row { flex-direction: row; }
}

/* The quick-link buttons inherit a light panel background from the general
   button styles, which on the navy rail leaves white text on near-white —
   unreadable in the screenshot. Override the whole treatment in the rail. */

.tvj-portal__rail--left .tvj-quicklinks,
.tvj-portal__rail--left .tvj-card--links {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0;
}

.tvj-portal__rail--left .tvj-btn,
.tvj-portal__rail--left .tvj-btn--primary,
.tvj-portal__rail--left .tvj-btn--ghost {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	color: #fff !important;
	border-radius: var(--tvj-radius-input);
	font-size: .78rem;
	padding: 8px 10px;
	width: 100%;
	justify-content: center;
	text-align: center;
}

.tvj-portal__rail--left .tvj-btn:hover {
	background: rgba(255, 255, 255, .14) !important;
	border-color: #fff !important;
}

/* Empty-state buttons sit on light panels in the working column — those keep
   the red primary treatment, so scope the rail override tightly. */
.tvj-portal__main .tvj-btn--primary,
.tvj-portal__rail--right .tvj-btn--primary {
	background: var(--tvj-urgent);
	border-color: var(--tvj-urgent);
	color: #fff;
}

/* Sign-in form, handled on the site rather than by wp-login.php. */
.tvj-signin__form .tvj-field { margin-bottom: 12px; }
.tvj-signin__form input[type="text"],
.tvj-signin__form input[type="password"] { width: 100%; }
.tvj-signin__form .tvj-check { margin: 4px 0 14px; }
.tvj-signin__form .tvj-btn { width: 100%; justify-content: center; }

.tvj-signin__notice {
	padding: 11px 14px;
	border-left: 3px solid var(--tvj-accent);
	background: var(--tvj-accent-wash);
	color: var(--tvj-accent-dark);
	font-size: .93rem;
	margin-bottom: var(--tvj-gap);
}

/* --- Job board: results and sliding detail panel ------------------------
 * Closed, results run two-up across the full width. Selecting a role pushes
 * the list narrower rather than covering it, so a candidate can compare
 * without losing their place.
 *
 * Elevation is 1px borders only — no shadows anywhere in this section.
 * ---------------------------------------------------------------------- */

.tvj-search { position: relative; }

.tvj-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	transition: grid-template-columns .22s ease;
}

/* Results go two-up when there is room and no panel open. */
.tvj-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
	transition: grid-template-columns .22s ease;
}

.tvj-layout.has-panel .tvj-results {
	grid-template-columns: minmax(0, 1fr);
}

/* Cards ----------------------------------------------------------------- */

.tvj-card {
	background: #fff;
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
	padding: 18px 20px;
	cursor: pointer;
	transition: border-color .15s ease;
}

.tvj-card:hover { border-color: var(--tvj-ink-faint); }

.tvj-card.is-selected {
	border-color: var(--tvj-accent);
	border-left: 3px solid var(--tvj-accent);
	background: var(--tvj-accent-wash);
}

.tvj-card--featured { border-left: 3px solid var(--tvj-urgent); }

.tvj-logo {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--tvj-radius-tile);
	background: var(--tvj-accent);
	color: #fff;
	font-family: var(--tvj-font-ui), sans-serif;
	font-size: .9rem;
	font-weight: 700;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* Pills ----------------------------------------------------------------- */

.tvj-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }

.tvj-tag {
	padding: 3px 10px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-neutral, #F1F3F1);
	color: var(--tvj-ink-faint);
	font-size: .74rem;
	font-weight: 600;
}

.tvj-tag--urgent { background: var(--tvj-urgent-wash); color: #8E1015; }

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

.tvj-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(560px, 46vw);
	background: #fff;
	border-left: 1px solid var(--tvj-line);
	overflow-y: auto;
	z-index: 60;
	transform: translateX(100%);
	transition: transform .22s ease;
	overscroll-behavior: contain;
}

.tvj-panel.is-open { transform: none; }

/* Push the page rather than cover it, so the list stays readable. */
.tvj-layout.has-panel { margin-right: min(560px, 46vw); }

.tvj-panel__inner { padding: 26px 28px 40px; }

.tvj-panel__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.tvj-panel__identity { display: flex; gap: 14px; flex: 1; min-width: 0; }
.tvj-panel__title { font-size: 1.35rem; line-height: 1.2; margin: 0; }
.tvj-panel__meta { margin: 3px 0 0; font-size: .93rem; color: var(--tvj-ink-faint); }

.tvj-panel__close {
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--tvj-ink-faint);
	cursor: pointer;
	padding: 0 4px;
}

.tvj-panel__close:hover { color: var(--tvj-ink); }

.tvj-panel__actions { display: flex; gap: 8px; margin: 16px 0 20px; }

.tvj-panel__body { border-top: 1px solid var(--tvj-line); padding-top: 16px; }
.tvj-panel__h3 { font-size: .95rem; font-weight: 700; margin: 0 0 8px; }
.tvj-panel__body p { font-size: .95rem; line-height: 1.7; color: var(--tvj-ink-soft); }
/* 1.38.0: the full description in the panel, laid out as on the role page. */
.tvj-panel__desc { margin: 0 0 18px; font-size: .95rem; line-height: 1.7; color: var(--tvj-ink-soft); overflow-wrap: anywhere; }
.tvj-panel__desc p { margin: 0 0 .8em; }
.tvj-panel__desc strong, .tvj-panel__desc b { color: var(--tvj-ink); font-weight: 700; }
.tvj-panel__desc ul, .tvj-panel__desc ol { margin: 0 0 .9em; padding-left: 1.3em; }
.tvj-panel__desc li { margin: 0 0 .25em; }
.tvj-panel__desc hr { border: 0; border-top: 1px solid var(--tvj-line); margin: 1em 0; }
.tvj-panel__desc h1, .tvj-panel__desc h2, .tvj-panel__desc h3, .tvj-panel__desc h4 { font-size: .95rem; font-weight: 700; color: var(--tvj-ink); margin: 1em 0 .4em; }
.tvj-panel__desc img, .tvj-panel__desc table { max-width: 100%; height: auto; }
.tvj-panel__desc > :last-child { margin-bottom: 0; }
.tvj-panel__dl { margin-top: 4px; }
.tvj-panel__urgent { color: #8E1015; font-weight: 600; }
.tvj-panel__more { margin-top: 18px; font-size: .93rem; }
.tvj-panel__loading { color: var(--tvj-ink-faint); font-size: .93rem; }

/* Below this the push has nowhere to go — the panel takes the screen. */
@media (max-width: 1100px) {
	.tvj-panel { width: 100%; border-left: 0; }
	.tvj-layout.has-panel { margin-right: 0; }
}

@media (max-width: 820px) {
	.tvj-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.tvj-panel, .tvj-layout, .tvj-results { transition: none; }
}

/* --- Card and role page, aligned to the design --------------------------
 * The card previously used tvj-card__logo and a bulleted meta list; the new
 * styles targeted tvj-logo and tvj-tags, so none of it applied. Both now use
 * the same classes and the same treatment.
 * ---------------------------------------------------------------------- */

.tvj-card__top { display: flex; align-items: flex-start; gap: 14px; }
.tvj-card__headings { flex: 1; min-width: 0; }

.tvj-card__title {
	font-size: 1.08rem;
	line-height: 1.3;
	margin: 0;
	font-weight: 700;
}

.tvj-card__title a { color: var(--tvj-ink); text-decoration: none; }
.tvj-card__title a:hover { color: var(--tvj-accent); }

.tvj-card__meta {
	margin: 3px 0 0;
	font-size: .9rem;
	color: var(--tvj-ink-faint);
}

.tvj-card__tags { margin-top: 12px; }

.tvj-card__excerpt {
	margin: 12px 0 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--tvj-ink-soft);
}

.tvj-card__posted {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--tvj-line);
	font-size: .82rem;
	color: var(--tvj-ink-faint);
}

.tvj-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

.tvj-logo--lg { width: 60px; height: 60px; font-size: 1.15rem; }

.tvj-save {
	border: 0;
	background: transparent;
	color: var(--tvj-ink-faint);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
	flex-shrink: 0;
}

.tvj-save:hover, .tvj-save.is-saved { color: var(--tvj-urgent); }

.tvj-tag--pay { background: var(--tvj-accent-wash); color: var(--tvj-accent-dark); }
.tvj-tag--featured { background: var(--tvj-accent); color: #fff; }

/* Role page ------------------------------------------------------------- */

.tvj-single__title {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	line-height: 1.15;
	margin: 0 0 18px;
}

.tvj-single__header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* The saved-search confirmation was rendering at heading size. */
.tvj-notice, .tvj-results__notice {
	font-size: .93rem;
	font-weight: 400;
	font-family: var(--tvj-font);
	padding: 9px 14px;
	border-radius: var(--tvj-radius-input);
	background: var(--tvj-accent-wash);
	color: var(--tvj-accent-dark);
	border: 1px solid var(--tvj-line);
}

/* ======================================================================
   Impact Zone, in the recruiter portal.

   Prefixed tvj-fbzone, deliberately, and not after the teacher Impact Zone.
   That subsystem owns its own prefix and its own stylesheet, and L24 asserts
   the prefix never appears in this file at all, so a rule written for one can
   never reach the other. A name that merely *contains* the other prefix is
   not a different name: an attribute selector would match both, and L24
   catches it — which is exactly what happened when this block was first
   written under the other spelling.

   Deliberately plain. A star average over four reviews is not a
   performance metric, and a dashboard treatment makes it read as one —
   so the figures sit on the page rather than in cards with shadows, and
   the count is printed under every one of them.
   ====================================================================== */

.tvj-fbzone__scores {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tvj-gap);
	margin-bottom: var(--tvj-gap-lg);
	padding-bottom: var(--tvj-gap);
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-fbzone__score { display: block; }

.tvj-fbzone__figure {
	display: block;
	font-size: 2.4rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--tvj-ink);
	font-variant-numeric: tabular-nums;
}

.tvj-fbzone__label {
	display: block;
	margin-top: 4px;
	font-size: .93rem;
	font-weight: 600;
}

.tvj-fbzone__sub {
	display: block;
	margin-top: 2px;
	font-size: .8rem;
	color: var(--tvj-ink-faint);
}

/* Traits ---------------------------------------------------------------- */

.tvj-fbzone__traits { margin-bottom: var(--tvj-gap-lg); }

.tvj-fbzone__traitlist { margin: 0; }

.tvj-fbzone__trait {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 200px;
	gap: 16px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-fbzone__trait dt {
	font-size: .93rem;
	color: var(--tvj-ink-faint);
}

.tvj-fbzone__trait dd {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .93rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tvj-fbzone__bar {
	flex: 1;
	height: 6px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-surface);
	overflow: hidden;
}

.tvj-fbzone__bar span {
	display: block;
	height: 100%;
	background: var(--tvj-ink);
}

/* Ask ------------------------------------------------------------------- */

.tvj-fbzone__ask {
	margin-bottom: var(--tvj-gap-lg);
	padding: var(--tvj-gap);
	border: 1px solid var(--tvj-line);
	border-radius: var(--tvj-radius);
	background: var(--tvj-surface);
}

.tvj-fbzone__form { margin-top: 12px; }

/* Lists ----------------------------------------------------------------- */

.tvj-fbzone__section { margin-bottom: var(--tvj-gap-lg); }

.tvj-fbzone__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tvj-fbzone__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tvj-line);
}

.tvj-fbzone__who { display: block; }

/* A review -------------------------------------------------------------- */

.tvj-fbzone__review {
	padding: 18px 0;
	border-bottom: 1px solid var(--tvj-line);
}

/* A hidden review stays legible rather than being greyed to nothing: a
   lead has to be able to read what they took down. */
.tvj-fbzone__review.is-hidden { opacity: .72; }

.tvj-fbzone__reviewhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}

.tvj-fbzone__stars {
	color: var(--tvj-accent, #F6A02A);
	font-size: 1.05rem;
	letter-spacing: .05em;
}

.tvj-fbzone__byline {
	font-size: .85rem;
	color: var(--tvj-ink-faint);
}

.tvj-fbzone__flag {
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 2px 8px;
	border-radius: var(--tvj-radius-pill);
	background: var(--tvj-surface);
	color: var(--tvj-ink-faint);
}

.tvj-fbzone__words {
	margin: 0 0 8px;
	padding: 0 0 0 16px;
	border-left: 3px solid var(--tvj-line);
	font-size: 1rem;
	line-height: 1.6;
}

.tvj-fbzone__consent {
	margin: 0;
	font-size: .78rem;
	color: var(--tvj-ink-faint);
}

.tvj-fbzone__referrals {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: var(--tvj-radius);
	background: var(--tvj-surface);
	font-size: .9rem;
}

.tvj-fbzone__referrals ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

.tvj-fbzone__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.tvj-fbzone__actions form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tvj-btn--small {
	padding: 5px 12px;
	font-size: .82rem;
}

@media (max-width: 640px) {
	.tvj-fbzone__scores { grid-template-columns: 1fr; }
	.tvj-fbzone__trait { grid-template-columns: 1fr; gap: 4px; }
	.tvj-fbzone__row { flex-direction: column; align-items: flex-start; }
}

/* --- Candidate portal, the non-teacher widening (18 Sep 2026) ------------
 * Registrations replaced a fixed VIT + WWCC pair, so the profile form now has
 * a repeater with a select in it, and the documents screen can carry a second
 * group of slots for files uploaded under a field the candidate has left.
 * ---------------------------------------------------------------------- */

/* The repeater rows are four columns like education, but the second one is
 * revealed only for "Other" and collapses to nothing the rest of the time.
 * hidden alone is enough for that; this just stops the gap being left behind
 * in the grid. */
.tvj-field[data-tvj-reg-other][hidden],
.tvj-field[data-tvj-region-other][hidden] {
	display: none;
}

/* Kept from a field you no longer use. Set apart from the live slots with a
 * rule and a lighter ground, so it does not read as something still being
 * asked for. */
.tvj-doc-slots--kept {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--tvj-line, #DCE8FA);
}

.tvj-doc-slots--kept .tvj-doc-slot {
	opacity: .85;
}

/* A registration in the details summary: type, then number, then expiry,
 * reading as one line until the screen is too narrow for it. */
.tvj-summary__entry .tvj-summary__when {
	white-space: nowrap;
}