/*
 * FFJ Core front-end components (Batch 05).
 * Built on the Batch 03 "Clock In" tokens published by the Elementor kit as CSS
 * custom properties; every var() carries the approved literal as a fallback.
 * Scoped to .ffj-ui so FFJ markup looks the same with or without Elementor V4
 * class CSS on the page. Flat by default; one tinted hover shadow on clickable cards.
 */

.ffj-ui {
	--ffj-ink: var(--text-primary, #0F2A2E);
	--ffj-ink-2: var(--text-secondary, #4A5F63);
	--ffj-muted: var(--text-muted, #586D71);
	--ffj-teal: var(--brand-primary, #0B6E69);
	--ffj-teal-hover: var(--brand-primary-hover, #085854);
	--ffj-teal-deep: var(--brand-primary-deep, #0A3F3D);
	--ffj-teal-tint: var(--brand-primary-tint, #E2F2F0);
	--ffj-sun: var(--brand-accent, #FFC533);
	--ffj-sun-hover: var(--brand-accent-hover, #F2B01E);
	--ffj-sun-tint: var(--brand-accent-tint, #FFF6DA);
	--ffj-surface: var(--surface, #FFFFFF);
	--ffj-surface-alt: var(--surface-alt, #F3F7F6);
	--ffj-sunken: var(--surface-sunken, #E7EFEE);
	--ffj-border: var(--border, #D3DFDD);
	--ffj-border-strong: var(--border-strong, #6B8185);
	--ffj-r-control: var(--radius-control, 10px);
	--ffj-r-card: var(--radius-card, 16px);
	--ffj-r-pill: var(--radius-pill, 999px);
	--ffj-fast: var(--duration-fast, 150ms);
	color: var(--ffj-ink);
}
.ffj-ui *, .ffj-ui *::before, .ffj-ui *::after { box-sizing: border-box; }
.ffj-ui [hidden] { display: none !important; }
.ffj-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ffj-ui .ffj-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.ffj-ui .ffj-icon-sm { width: 1rem; height: 1rem; }
.ffj-ui p { margin: 0 0 0.75rem; }
.ffj-ui a { color: var(--ffj-teal); }
.ffj-ui a:hover { color: var(--ffj-teal-hover); }
.ffj-ui :is(p, li, dd) > a:not(.ffj-btn):not(.ffj-filter-chip):not(.ffj-page-link):not(.ffj-category-link):not(.ffj-tab) {
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.ffj-ui .ffj-overline {
	margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ffj-ink-2);
}
.ffj-ui .ffj-help { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ffj-ink-2); }

/* Buttons (kit styles every <button>; these rules keep FFJ variants intact in every state). */
.ffj-ui .ffj-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: var(--control-height, 3rem); padding: 0.625rem 1.25rem;
	border: 2px solid transparent; border-radius: var(--ffj-r-control);
	font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.005em;
	text-decoration: none; text-align: center; cursor: pointer;
	transition: background-color var(--ffj-fast) ease, color var(--ffj-fast) ease, border-color var(--ffj-fast) ease;
}
.ffj-ui .ffj-btn-primary, .ffj-ui .ffj-btn-primary:focus { background: var(--ffj-sun); color: var(--ffj-ink); border-color: var(--ffj-ink); }
.ffj-ui .ffj-btn-primary:hover { background: var(--ffj-sun-hover); color: var(--ffj-ink); border-color: var(--ffj-ink); }
.ffj-ui .ffj-btn-secondary, .ffj-ui .ffj-btn-secondary:focus { background: var(--ffj-surface); color: var(--ffj-teal); border-color: var(--ffj-teal); }
.ffj-ui .ffj-btn-secondary:hover { background: var(--ffj-teal-tint); color: var(--ffj-teal-hover); border-color: var(--ffj-teal-hover); }
.ffj-ui .ffj-btn-tertiary, .ffj-ui .ffj-btn-tertiary:hover, .ffj-ui .ffj-btn-tertiary:focus {
	background: transparent; border-color: transparent; color: var(--ffj-teal);
	text-decoration: underline; text-underline-offset: 0.18em;
}
.ffj-ui .ffj-btn-sm { min-height: var(--control-height-sm, 2.5rem); padding: 0.375rem 0.875rem; font-size: 0.9375rem; }
.ffj-ui .ffj-btn-lg { min-height: var(--control-height-lg, 3.5rem); padding: 0.75rem 1.5rem; font-size: 1.0625rem; }
.ffj-ui .ffj-btn-block { width: 100%; }
.ffj-ui .ffj-icon-btn, .ffj-ui .ffj-icon-btn:hover, .ffj-ui .ffj-icon-btn:focus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--ffj-r-control);
	background: transparent; color: var(--ffj-ink); cursor: pointer;
}
.ffj-ui .ffj-icon-btn:hover { background: var(--ffj-sunken); }
.ffj-ui .ffj-count-badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem;
	padding: 0 0.375rem; border-radius: var(--ffj-r-pill); background: var(--ffj-teal-deep); color: #FFFFFF;
	font-size: 0.8125rem;
}

/* Form controls */
.ffj-ui .ffj-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.ffj-ui .ffj-label { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--ffj-ink); }
.ffj-ui .ffj-input {
	width: 100%; min-height: var(--control-height, 3rem); padding: 0.625rem 0.875rem;
	border: 1px solid var(--ffj-border-strong); border-radius: var(--ffj-r-control);
	background-color: var(--ffj-surface); color: var(--ffj-ink); font: inherit; font-size: 1rem; line-height: 1.4;
}
.ffj-ui select.ffj-input { padding-right: 2.25rem; }
.ffj-ui .ffj-input--short { max-width: 8rem; }
.ffj-ui .ffj-input[aria-invalid="true"] { border: 2px solid var(--error, #B42318); }
.ffj-ui .ffj-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ffj-ui .ffj-fieldset > legend { margin: 0 0 0.25rem; padding: 0; }
.ffj-ui .ffj-choice { display: flex; align-items: flex-start; gap: 0.625rem; min-height: 2.75rem; padding: 0.5rem 0; cursor: pointer; font-size: 1rem; line-height: 1.4; }
.ffj-ui .ffj-choice input { width: 1.5rem; height: 1.5rem; margin: -0.05rem 0 0; flex: none; accent-color: var(--ffj-teal); }

/* Search bar */
.ffj-ui.ffj-search-bar, .ffj-ui .ffj-search-bar {
	display: grid; gap: 1rem; padding: var(--space-card, 1.25rem);
	background: var(--ffj-surface); border: 1px solid var(--ffj-border); border-radius: var(--ffj-r-card);
}
.ffj-ui .ffj-search-bar__submit { display: flex; align-items: flex-start; }
.ffj-ui .ffj-search-bar__submit .ffj-btn { width: 100%; }
@media (min-width: 768px) {
	.ffj-ui.ffj-search-bar--compact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: start; }
	.ffj-ui .ffj-search-bar--page { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
	.ffj-ui.ffj-search-bar--compact .ffj-search-bar__submit, .ffj-ui .ffj-search-bar--page .ffj-search-bar__submit { padding-top: 1.72rem; }
}
@media (min-width: 1025px) {
	.ffj-ui .ffj-search-bar--page { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; }
}
@media (max-width: 767px) {
	.ffj-ui.ffj-search-bar, .ffj-ui .ffj-search-bar { padding: 1rem; gap: 0.875rem; }
	.ffj-ui .ffj-search-bar__radius .ffj-help { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (min-width: 360px) and (max-width: 767px) {
	.ffj-ui .ffj-search-bar--page { grid-template-columns: minmax(0, 1fr) 8.75rem; }
	.ffj-ui .ffj-search-bar--page .ffj-search-bar__keyword, .ffj-ui .ffj-search-bar--page .ffj-search-bar__submit { grid-column: 1 / -1; }
}
.ffj-ui.ffj-search-bar__browse { margin: 0.75rem 0 0; font-weight: 600; }

/* Search page layout */
.ffj-ui.ffj-jobsearch { display: block; }
.ffj-ui .ffj-jobsearch__layout { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 1025px) {
	.ffj-ui .ffj-jobsearch__layout { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
	.ffj-ui .ffj-filters { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ffj-header-offset, 0px) + 1rem); }
}
.ffj-ui .ffj-filters__panel {
	display: grid; gap: 1.25rem; padding: var(--space-card, 1.25rem);
	background: var(--ffj-surface); border: 1px solid var(--ffj-border); border-radius: var(--ffj-r-card);
}
.ffj-ui .ffj-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ffj-ui .ffj-filters__title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.ffj-ui .ffj-filters__actions { display: grid; gap: 0.5rem; }

/* Filters as a dialog on small screens (JavaScript enhancement only). */
.ffj-filters-dialog {
	width: min(26rem, 100%); max-width: 100%; height: 100%; max-height: 100%;
	margin: 0 0 0 auto; padding: 0; border: 0; background: var(--surface, #FFFFFF); color: var(--text-primary, #0F2A2E);
}
.ffj-filters-dialog::backdrop { background: rgba(15, 42, 46, 0.55); }
.ffj-filters-dialog .ffj-filters__panel { min-height: 100%; border: 0; border-radius: 0; align-content: start; }
.ffj-filters-dialog .ffj-filters__actions { position: sticky; bottom: 0; padding: 0.75rem 0 1rem; background: var(--surface, #FFFFFF); }
@media (prefers-reduced-motion: no-preference) {
	.ffj-filters-dialog[open] { animation: ffj-drawer 180ms ease-out; }
	@keyframes ffj-drawer { from { transform: translateX(1.5rem); opacity: 0.6; } to { transform: none; opacity: 1; } }
}

/* Results toolbar, hints, active filters */
.ffj-ui .ffj-results { min-width: 0; }
.ffj-ui .ffj-results__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.ffj-ui .ffj-results__count { margin: 0 auto 0 0; font-size: var(--type-h3, 1.5rem); font-weight: 700; line-height: 1.2; }
.ffj-ui .ffj-sort { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ffj-ui .ffj-sort .ffj-input { width: auto; min-height: var(--control-height-sm, 2.5rem); padding-top: 0.375rem; padding-bottom: 0.375rem; }
.ffj-ui .ffj-results__hint { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--ffj-ink-2); }
.ffj-ui .ffj-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1.25rem; }
.ffj-ui .ffj-active-filters__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ffj-ui a.ffj-filter-chip {
	display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.75rem 0.375rem 1rem;
	border-radius: var(--ffj-r-pill); background: var(--ffj-teal-deep); color: #FFFFFF;
	font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-decoration: none; max-width: 100%; overflow-wrap: anywhere;
}
.ffj-ui a.ffj-filter-chip:hover { background: var(--ffj-teal); color: #FFFFFF; }
.ffj-ui .ffj-active-filters__clear { font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }

/* Notices: icon + bold word + color */
.ffj-ui .ffj-notice {
	display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 1rem; padding: 0.875rem 1rem;
	border: 1px solid; border-left-width: 4px; border-radius: var(--ffj-r-control); color: var(--ffj-ink);
}
.ffj-ui .ffj-notice .ffj-icon { margin-top: 0.1rem; }
.ffj-ui .ffj-notice-text { margin: 0; line-height: 1.5; }
.ffj-ui .ffj-notice-info { background: var(--info-bg, #E8F0FA); border-color: var(--info, #1D4E89); }
.ffj-ui .ffj-notice-info .ffj-icon { color: var(--info, #1D4E89); }
.ffj-ui .ffj-notice-warning { background: var(--warning-bg, #FFF1DB); border-color: var(--warning, #8A4600); }
.ffj-ui .ffj-notice-warning .ffj-icon { color: var(--warning, #8A4600); }
.ffj-ui .ffj-notice-success { background: var(--success-bg, #E6F4EA); border-color: var(--success, #1B6B3A); }
.ffj-ui .ffj-notice-error { background: var(--error-bg, #FDECEA); border-color: var(--error, #B42318); }

/* Cards */
.ffj-ui .ffj-results__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ffj-ui.ffj-card, .ffj-ui .ffj-card {
	position: relative; background: var(--ffj-surface); border: 1px solid var(--ffj-border);
	border-radius: var(--ffj-r-card); padding: var(--space-card, 1.25rem);
}
.ffj-ui .ffj-job-card { display: grid; gap: 0.625rem; transition: box-shadow var(--ffj-fast) ease, border-color var(--ffj-fast) ease; }
.ffj-ui .ffj-job-card:hover { border-color: var(--ffj-teal); box-shadow: 0 8px 24px rgba(11, 110, 105, 0.14); }
.ffj-ui .ffj-job-card:has(.ffj-job-card__link:focus-visible) { border-color: var(--ffj-ink); }
.ffj-ui .ffj-job-card__title { margin: 0; font-size: var(--type-h4, 1.25rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ffj-ui .ffj-job-card__link { color: var(--ffj-ink); text-decoration: none; }
.ffj-ui .ffj-job-card__link:hover { color: var(--ffj-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.ffj-ui .ffj-job-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ffj-r-card); }
.ffj-ui .ffj-job-card__org { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin: 0; color: var(--ffj-ink-2); font-weight: 600; overflow-wrap: anywhere; }
.ffj-ui .ffj-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--ffj-ink-2); font-size: 0.9375rem; }
.ffj-ui .ffj-meta li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ffj-ui .ffj-pay { color: var(--ffj-ink); font-weight: 700; }
.ffj-ui .ffj-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ffj-ui .ffj-chip {
	display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.75rem; padding: 0.25rem 0.75rem;
	border: 1px solid transparent; border-radius: var(--ffj-r-pill); background: var(--ffj-sunken); color: var(--ffj-ink);
	font-size: 0.875rem; font-weight: 600; line-height: 1.25;
}
.ffj-ui .ffj-chip-verified { background: var(--ffj-teal-tint); color: var(--ffj-teal-deep); }
.ffj-ui .ffj-chip-positive { background: var(--ffj-sun-tint); color: var(--ffj-ink); border-color: #E9D48F; }
.ffj-ui .ffj-chip-neutral { background: var(--ffj-surface); color: var(--ffj-ink); border-color: var(--ffj-border-strong); }
.ffj-ui .ffj-chip-skill { background: var(--ffj-teal-tint); color: var(--ffj-teal-deep); }
.ffj-ui .ffj-job-card__skills { margin: 0; font-size: 0.9375rem; color: var(--ffj-ink-2); }
.ffj-ui .ffj-job-card__skills-label { font-weight: 700; color: var(--ffj-ink); }
.ffj-ui .ffj-job-card__footer { margin: 0; font-size: 0.875rem; color: var(--ffj-muted); }

/* Empty state */
.ffj-ui .ffj-empty-state { padding: 1.5rem; background: var(--ffj-surface-alt); border-radius: var(--ffj-r-card); }
.ffj-ui .ffj-empty-state__title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 700; }
.ffj-ui .ffj-empty-state__tips { margin: 0; padding-left: 1.25rem; }
.ffj-ui .ffj-empty-state__tips li { margin: 0.375rem 0; }
.ffj-ui .ffj-empty-state__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0 0; }
.ffj-ui .ffj-empty-state__note { margin: 1.25rem 0 0; }

/* Pagination (44px targets) */
.ffj-ui .ffj-pagination { margin-top: 2rem; text-align: center; }
.ffj-ui .ffj-pagination__status { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--ffj-ink-2); }
.ffj-ui .ffj-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ffj-ui .ffj-page-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 2.75rem; min-height: 2.75rem;
	padding: 0 0.75rem; border: 1px solid var(--ffj-border-strong); border-radius: var(--ffj-r-control);
	background: var(--ffj-surface); color: var(--ffj-teal); font-weight: 600; text-decoration: none;
}
.ffj-ui .ffj-page-link:hover { background: var(--ffj-teal-tint); color: var(--ffj-teal-hover); }
.ffj-ui .ffj-page-current, .ffj-ui .ffj-page-current:hover { background: var(--ffj-teal-deep); border-color: var(--ffj-teal-deep); color: #FFFFFF; }
.ffj-ui .ffj-page-gap { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem; color: var(--ffj-ink-2); }

/* Category links */
.ffj-ui.ffj-category-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.ffj-ui .ffj-category-link {
	display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 3.5rem; padding: 0.75rem 1rem;
	background: var(--ffj-surface); border: 1px solid var(--ffj-border); border-radius: var(--ffj-r-card);
	color: var(--ffj-ink); font-weight: 700; text-decoration: none;
	transition: border-color var(--ffj-fast) ease, box-shadow var(--ffj-fast) ease;
}
.ffj-ui .ffj-category-link:hover { color: var(--ffj-ink); border-color: var(--ffj-teal); box-shadow: 0 8px 24px rgba(11, 110, 105, 0.14); }
.ffj-ui .ffj-category-link .ffj-icon { color: var(--ffj-teal); }
/* Phones (closeout 2026-10-02): every category stays visible, in a compact two-column grid
   instead of a 13-row list. Tiles keep a 48px target; the decorative chevron gives way to text. */
@media (max-width: 639px) {
	.ffj-ui.ffj-category-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
	.ffj-ui .ffj-category-link { min-height: 3rem; padding: 0.5rem 0.75rem; border-radius: var(--ffj-r-control); font-size: 0.9375rem; line-height: 1.25; overflow-wrap: break-word; }
	.ffj-ui .ffj-category-link .ffj-icon { display: none; }
}

/* Homepage recent jobs (closeout 2026-10-02): shared job cards in a grid, three on phones. */
.ffj-ui.ffj-recent-jobs { display: grid; gap: 1.25rem; }
.ffj-ui.ffj-recent-jobs .ffj-results__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.ffj-ui.ffj-recent-jobs .ffj-results__item { display: flex; }
.ffj-ui.ffj-recent-jobs .ffj-results__item > .ffj-job-card { flex: 1; align-content: start; }
.ffj-ui .ffj-recent-jobs__all { margin: 0; }
@media (max-width: 639px) {
	.ffj-ui.ffj-recent-jobs .ffj-results__item:nth-child(n+4) { display: none; }
	.ffj-ui .ffj-recent-jobs__all .ffj-btn { width: 100%; }
}

/* Job page */
.ffj-ui.ffj-job-header { display: grid; gap: 0.75rem; }
.ffj-ui .ffj-job-header__title { margin: 0; font-size: var(--type-h1, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ffj-ui .ffj-job-header__org { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }
.ffj-ui .ffj-job-header__posted { margin: 0; font-size: 0.875rem; color: var(--ffj-muted); }
.ffj-ui .ffj-facts { display: grid; gap: 0.75rem; margin: 0.25rem 0 0; padding: 1rem; background: var(--ffj-surface-alt); border-radius: var(--ffj-r-card); }
@media (min-width: 640px) { .ffj-ui .ffj-facts { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.ffj-ui .ffj-facts__item dt { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--ffj-ink-2); }
.ffj-ui .ffj-facts__item dd { margin: 0.125rem 0 0; font-size: 1rem; overflow-wrap: anywhere; }
.ffj-ui .ffj-similar { margin-top: 1.5rem; }
.ffj-ui .ffj-similar h2 { font-size: var(--type-h3, 1.5rem); }

.ffj-ui.ffj-apply { display: grid; gap: 0.75rem; padding: var(--space-card, 1.25rem); background: var(--ffj-surface); border: 2px solid var(--ffj-ink); border-radius: var(--ffj-r-card); }
.ffj-ui .ffj-apply__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.ffj-ui .ffj-apply__detail, .ffj-ui .ffj-apply__deadline { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.ffj-ui .ffj-apply__ext { flex: none; } /* 0.19.1: the new-tab arrow on Apply on employer website never shrinks when the label wraps. */
.ffj-ui .ffj-apply__deadline { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.ffj-ui .ffj-apply__confirmed { margin: 0; font-size: 0.875rem; color: var(--ffj-ink-2); overflow-wrap: anywhere; }
.ffj-ui .ffj-apply__safety { display: flex; gap: 0.5rem; margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--ffj-border); font-size: 0.875rem; color: var(--ffj-ink-2); }
.ffj-ui .ffj-apply__safety .ffj-icon { margin-top: 0.15rem; color: var(--info, #1D4E89); }
.ffj-ui .ffj-apply__safety a, .ffj-ui .ffj-help a { text-decoration: underline; text-underline-offset: 0.18em; }

.ffj-ui.ffj-job-details { display: grid; gap: 2rem; max-width: var(--width-reading, 42rem); }
/* Section headings are styled by class, never by tag: previews shift the tags (h3/h4) to nest under their host page. */
.ffj-ui .ffj-job-section__title { margin: 0 0 0.75rem; font-size: var(--type-h3, 1.5rem); font-weight: 700; line-height: 1.2; }
.ffj-ui .ffj-job-section__subtitle { margin: 1rem 0 0.5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.ffj-ui .ffj-job-section p, .ffj-ui .ffj-job-section li { font-size: 1.0625rem; line-height: 1.7; }
.ffj-ui .ffj-list { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.ffj-ui .ffj-list li { margin: 0.25rem 0; }
.ffj-ui .ffj-callout { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--ffj-sun-tint); border-radius: var(--ffj-r-control); font-weight: 600; }
.ffj-ui .ffj-callout .ffj-icon { margin-top: 0.3rem; }
.ffj-ui .ffj-dl { display: grid; gap: 0.5rem; margin: 0; }
.ffj-ui .ffj-dl > div { display: grid; gap: 0.125rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ffj-border); }
@media (min-width: 640px) { .ffj-ui .ffj-dl > div { grid-template-columns: 10rem 1fr; } }
.ffj-ui .ffj-dl dt { font-weight: 600; }
.ffj-ui .ffj-dl dd { margin: 0; }
.ffj-ui .ffj-job-details__ref { font-size: 0.875rem; color: var(--ffj-muted); }

.ffj-ui.ffj-employer-card { display: grid; gap: 0.75rem; }
.ffj-ui .ffj-employer-card__heading { margin: 0; font-size: 1.125rem; font-weight: 700; }
.ffj-ui .ffj-employer-card__id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ffj-ui .ffj-employer-card__id > div { flex: 1 1 10rem; min-width: 0; }
/* Employer logos keep their own shape (0.17.1): the image is scaled down proportionally inside each
 * location's maximum box; it is never cropped, stretched, masked or forced square or round. The light
 * frame is padding around the image (padding >= corner radius, so no artwork is clipped) and hugs the
 * logo's real outline box, so transparent round or irregular logos stay round or irregular. */
.ffj-ui img.ffj-logo { box-sizing: border-box; display: block; flex: none; width: auto; height: auto; max-width: 100%; padding: 0.5rem; border: 1px solid var(--ffj-border); border-radius: 0.5rem; background: var(--ffj-surface); object-fit: contain; }
.ffj-ui img.ffj-logo--card { max-width: min(7rem, 100%); max-height: 3rem; padding: 0.25rem; border-radius: 0.25rem; }
.ffj-ui img.ffj-logo--job { max-width: min(10rem, 100%); max-height: 4.5rem; }
.ffj-ui img.ffj-logo--profile { max-width: min(14rem, 100%); max-height: 6.5rem; }
.ffj-ui img.ffj-logo--editor { max-width: min(20rem, 100%); max-height: 11rem; }
/* Private bar for an organization's own members on its public profile and live jobs (0.17.1). */
.ffj-ui.ffj-owner-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin: 0 0 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--ffj-teal); border-left-width: 4px; border-radius: var(--ffj-r-control); background: var(--ffj-teal-tint); color: var(--ffj-ink); }
.ffj-ui .ffj-owner-bar__text { flex: 1 1 15rem; min-width: 0; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.ffj-ui .ffj-owner-bar__note { display: block; margin-top: 0.125rem; font-size: 0.875rem; color: var(--ffj-ink-2); }
.ffj-ui .ffj-owner-bar__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ffj-ui .ffj-owner-bar__actions li { margin: 0; }
.ffj-ui .ffj-owner-bar .ffj-btn-tertiary { background: var(--ffj-surface); border-color: var(--ffj-border-strong); }
.ffj-ui .ffj-owner-bar .ffj-btn-tertiary:hover { background: var(--ffj-surface-alt); }
@media (max-width: 30rem) {
	.ffj-ui .ffj-owner-bar__actions { width: 100%; }
	.ffj-ui .ffj-owner-bar__actions li { flex: 1 1 auto; }
	.ffj-ui .ffj-owner-bar__actions .ffj-btn { width: 100%; }
}
.ffj-ui .ffj-employer-card__name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ffj-ui .ffj-employer-card__type { margin: 0; font-size: 0.875rem; color: var(--ffj-ink-2); }
.ffj-ui .ffj-employer-card__part-of { margin: 0; font-size: 0.875rem; color: var(--ffj-ink-2); overflow-wrap: anywhere; }
.ffj-ui .ffj-employer-card__verified { margin: 0; }
.ffj-ui .ffj-employer-card__link { font-weight: 600; }

.ffj-ui.ffj-org-profile { display: grid; gap: 1rem; }
/* Job previews (employer review step and preview screen, moderator review). Post-QA polish 2026-10-02:
 * the job title is h2 or h3 and its sections one level lower, so every rule here keys on classes and
 * out-ranks the portal's and wp-admin's tag rules. Same look as the job page, one step smaller. */
.ffj-ui .ffj-preview-frame .ffj-job-header__title, .ffj-mod-preview .ffj-job-header__title { margin: 0; font-size: var(--type-h2, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ffj-ui .ffj-preview-frame .ffj-job-section__title, .ffj-mod-preview .ffj-job-section__title { margin: 0 0 0.75rem; font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.ffj-ui .ffj-preview-frame .ffj-job-section__subtitle, .ffj-mod-preview .ffj-job-section__subtitle { margin: 1rem 0 0.5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.ffj-ui .ffj-preview-frame .ffj-apply__title, .ffj-ui .ffj-preview-frame .ffj-employer-card__heading, .ffj-mod-preview .ffj-apply__title, .ffj-mod-preview .ffj-employer-card__heading { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.ffj-mod-preview .ffj-ui.ffj-job-details { gap: 1.5rem; margin-top: 1rem; }
.ffj-mod-preview .ffj-ui.ffj-employer-card { margin-top: 1rem; }

.ffj-ui .ffj-org-profile__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.ffj-ui .ffj-org-profile__id { flex: 1 1 14rem; min-width: 0; }
.ffj-ui .ffj-org-profile__name { margin: 0 0 0.5rem; font-size: var(--type-h1, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ffj-ui .ffj-org-profile__part-of { margin: 0 0 0.5rem; font-size: 1rem; color: var(--ffj-ink-2); overflow-wrap: anywhere; }
.ffj-ui .ffj-org-profile__verified { display: flex; gap: 0.5rem; }
.ffj-ui .ffj-org-profile__verified .ffj-icon { margin-top: 0.15rem; color: var(--info, #1D4E89); }
.ffj-ui.ffj-org-jobs h2 { margin: 0 0 1rem; font-size: var(--type-h2, 2rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.ffj-ui.ffj-editor-note { padding: 1rem; border: 1px dashed var(--ffj-border-strong); border-radius: var(--ffj-r-control); color: var(--ffj-ink-2); }

@media (prefers-reduced-motion: reduce) {
	.ffj-ui *, .ffj-filters-dialog { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
	.ffj-ui .ffj-chip, .ffj-ui .ffj-filter-chip, .ffj-ui .ffj-page-current, .ffj-ui .ffj-count-badge { border: 1px solid CanvasText; }
}
/* ------------------------------------------------------------------
 * Batch 09: youth-employment guidance and Save controls (job pages, search results).
 * ------------------------------------------------------------------ */
.ffj-ui.ffj-youth, .ffj-ui .ffj-youth { display: grid; gap: 0.75rem; margin: 1.25rem 0 0; padding: var(--space-card, 1.25rem); background: var(--ffj-teal-tint); border-radius: var(--ffj-r-card); min-width: 0; }
.ffj-ui .ffj-youth__title { margin: 0; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ffj-ui .ffj-youth__intro, .ffj-ui .ffj-youth__hint { margin: 0; color: var(--ffj-ink-2); line-height: 1.5; }
.ffj-ui .ffj-youth__list { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.25rem; line-height: 1.5; }
.ffj-ui .ffj-youth__details summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--ffj-teal); }
.ffj-ui .ffj-youth__details[open] summary { margin-bottom: 0.5rem; }
.ffj-ui .ffj-youth__review { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; font-size: 0.9375rem; }
.ffj-ui .ffj-youth__review .ffj-icon { margin-top: 0.2rem; }
.ffj-ui .ffj-youth__links-intro { margin: 0; font-weight: 600; }
.ffj-ui .ffj-youth__links { margin: 0; padding-left: 1.25rem; }
.ffj-ui .ffj-youth__more { margin: 0; }
.ffj-ui .ffj-save { margin: 0.75rem 0 0; }
.ffj-ui .ffj-save .ffj-btn, .ffj-ui .ffj-save__link { min-height: 44px; }
.ffj-ui .ffj-save button[aria-pressed="true"] { background: var(--ffj-teal-tint); }
.ffj-ui .ffj-job-card__actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
@media (forced-colors: active) {
	.ffj-ui .ffj-save button[aria-pressed="true"] { border: 3px solid CanvasText; }
}

/* Launch growth foundation (2026-10-02): "Save this search" above results and in the empty state. */
.ffj-ui .ffj-save-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1.25rem; }
.ffj-ui .ffj-save-search .ffj-btn { min-height: 44px; }
.ffj-ui .ffj-empty-state .ffj-save-search { margin: 1.25rem 0 0; }