/**
 * WP Career Board — Same-family UI primitives.
 *
 * Single CSS source for the design-system vocabulary every plugin-rendered
 * customer page uses. Loaded right after `wcb-frontend-tokens` so every rule
 * resolves against the same variables in both light and dark mode, and so
 * page-specific stylesheets can rely on the primitives existing.
 *
 * Vocabulary:
 *   .wcb-page              — outer shell. Variants: --list (default), --dashboard, --single, --form.
 *   .wcb-page-header       — page title row. .wcb-page-title (h1) inside.
 *   .wcb-page-body         — scrolling content area.
 *   .wcb-card              — section container. Head + body + foot.
 *   .wcb-card-head         — title + optional eyebrow + right-aligned actions.
 *   .wcb-card-title        — section heading inside a card.
 *   .wcb-card-eyebrow      — uppercase muted label above the title.
 *   .wcb-card-body         — padded inner content.
 *   .wcb-card-foot         — action footer with right-aligned buttons.
 *   .wcb-btn               — button (40px default). Variants primary|secondary|outline|ghost|danger × sm|md|lg.
 *   .wcb-input             — input/select/textarea (44px), see "Forms" below.
 *   .wcb-avatar            — initials/image tile. Variants --round, --logo, --sm|lg|xl.
 *   .wcb-badge             — pill chip. Variants success|warning|danger|info|neutral|outlined.
 *   .wcb-empty-state       — centered icon + title + description + optional CTA.
 *   .wcb-stack             — vertical flow utility, gap presets --xs, --sm, --md, --lg, --xl.
 *   .wcb-row               — horizontal flex utility with wrap + gap presets.
 *
 * `.wcb-btn` is the only button ladder; Rule 10 in bin/coding-rules-check.sh
 * blocks the retired legacy button class.
 *
 * @package WP_Career_Board
 * @since 1.2.0
 */

/* ── Page shell ───────────────────────────────────────────────────────────── */

/* `.wcb-page` is intentionally NOT defined here. Free's `Plugin::body_class()`
 * adds `wcb-page` to the BODY element on every WCB-controlled page as a
 * theme-integration marker. Defining a layout rule on `.wcb-page` collided
 * with the body, overriding the theme's body `font-family` (specificity
 * 0,1,0 vs 0,0,1) and rendering every dashboard / archive page in the
 * browser default serif on Astra. Templates use the canonical
 * `.wcb-archive-shell` wrapper from `frontend-components.css` instead;
 * no plugin-side body-targeting layout primitive is needed.
 */

.wcb-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-md);
	margin-bottom: var(--wcb-space-xl);
}

.wcb-page-title {
	margin: 0;
	font-size: var(--wcb-text-2xl);
	line-height: var(--wcb-leading-tight);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast, #0f172a);
}

/* Used as the dashboard Settings section headings (h2). The .wcb-dashboard
 * form outranks a theme's `.entry-content h2` weight. */
.wcb-page-subtitle,
.wcb-dashboard .wcb-page-subtitle {
	margin: 0;
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast, #0f172a);
}

.wcb-page-actions {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-wrap: wrap;
}

.wcb-page-body {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xl);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.wcb-card {
	background: var(--wcb-base, #ffffff);
	border: 1px solid var(--wcb-border, #e2e8f0);
	/* One card shape everywhere: r12, a border and no resting shadow. */
	border-radius: var(--wcb-radius-xl);
	overflow: hidden;
}

.wcb-card--flush      { border: 0; box-shadow: none; background: transparent; }
.wcb-card--ghost      { background: var(--wcb-bg-subtle, #f8fafc); box-shadow: none; }
.wcb-card--accent     { border-color: var(--wcb-primary, #2563eb); box-shadow: 0 1px 0 var(--wcb-primary, #2563eb) inset; }

.wcb-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-md);
	padding: var(--wcb-space-lg) var(--wcb-space-xl);
	border-bottom: 1px solid var(--wcb-border, #e2e8f0);
}

.wcb-card-head--plain { border-bottom: 0; padding-bottom: 0; }

.wcb-card-eyebrow {
	display: block;
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wcb-text-secondary, #6b7280);
	margin-bottom: var(--wcb-space-xs);
}

.wcb-card-title {
	margin: 0;
	font-size: var(--wcb-text-lg);
	line-height: var(--wcb-leading-tight);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast, #0f172a);
}

.wcb-card-subtitle {
	margin: 0;
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary, #6b7280);
}

.wcb-card-actions {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-wrap: wrap;
}

.wcb-card-body {
	padding: var(--wcb-space-xl);
}

.wcb-card-body--snug   { padding: var(--wcb-space-md) var(--wcb-space-lg); }
.wcb-card-body--roomy  { padding: var(--wcb-space-2xl); }

.wcb-card-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wcb-space-sm);
	padding: var(--wcb-space-lg) var(--wcb-space-xl);
	border-top: 1px solid var(--wcb-border, #e2e8f0);
	background: var(--wcb-bg-subtle, #f8fafc);
}

.wcb-card-foot--split  { justify-content: space-between; }
.wcb-card-foot--plain  { background: transparent; border-top: 0; padding-top: 0; }

/* ── Button ladder ────────────────────────────────────────────────────────── */

.wcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wcb-space-xs);
	min-height: 40px;
	padding: 0 var(--wcb-space-lg);
	border: 1px solid transparent;
	border-radius: var(--wcb-radius-md);
	font-family: inherit;
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-semibold);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--wcb-transition-fast), color var(--wcb-transition-fast), border-color var(--wcb-transition-fast), box-shadow var(--wcb-transition-fast);
}

.wcb-btn:focus-visible {
	outline: 2px solid transparent !important;
	box-shadow: var(--wcb-shadow-focus);
}

/* Mouse press only: some block themes (TT25) draw a 2px white outline on
   :focus. Keyboard focus keeps the ring above. */
:is(.wcb-btn, .wcb-search-button, .wcb-search-hero__button, .wcb-jm-location-btn):focus:not(:focus-visible) {
	outline: none;
}

.wcb-btn[disabled],
.wcb-btn:disabled,
.wcb-btn--disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.wcb-btn:active { transform: scale(0.97); }

/* Icons inside buttons (client-swapped [data-lucide] or inline Icon::svg). */
.wcb-btn [data-lucide],
.wcb-btn .wcb-icon {
	width: var(--wcb-icon-sm);
	height: var(--wcb-icon-sm);
	flex-shrink: 0;
}

.wcb-btn--sm { min-height: 40px; padding: 0 var(--wcb-space-md); font-size: var(--wcb-text-xs); }
.wcb-btn--lg { min-height: 48px; padding: 0 var(--wcb-space-xl); font-size: var(--wcb-text-md); }
.wcb-btn--full,
.wcb-btn--block { width: 100%; }

.wcb-btn--primary {
	background: var(--wcb-primary-strong);
	color: var(--wcb-on-primary, #ffffff);
	border-color: var(--wcb-primary-strong);
}

.wcb-btn--primary:hover,
.wcb-btn--primary:focus-visible {
	background: var(--wcb-primary-dark, #1d4ed8);
	border-color: var(--wcb-primary-dark, #1d4ed8);
	color: var(--wcb-on-primary, #ffffff);
	text-decoration: none;
}

.wcb-btn--secondary {
	background: var(--wcb-base, #ffffff);
	color: var(--wcb-contrast, #0f172a);
	border-color: var(--wcb-border, #e2e8f0);
}

.wcb-btn--secondary:hover,
.wcb-btn--secondary:focus-visible {
	background: var(--wcb-bg-hover, #f1f5f9);
	border-color: var(--wcb-text-tertiary, #9ca3af);
	color: var(--wcb-contrast, #0f172a);
	text-decoration: none;
}

.wcb-btn--ghost {
	background: transparent;
	color: var(--wcb-primary-text, #2563eb);
	border-color: transparent;
}

.wcb-btn--ghost:hover,
.wcb-btn--ghost:focus-visible {
	background: var(--wcb-primary-soft, rgba(37, 99, 235, 0.08));
	color: var(--wcb-primary-dark, #1d4ed8);
	text-decoration: none;
}

.wcb-btn--danger {
	background: transparent;
	color: var(--wcb-danger-fg, #991b1b);
	border-color: var(--wcb-danger-border, #fecaca);
}

.wcb-btn--danger:hover,
.wcb-btn--danger:focus-visible {
	background: var(--wcb-danger-bg-soft, #fef2f2);
	color: var(--wcb-danger-fg, #991b1b);
	border-color: var(--wcb-danger, #dc2626);
	text-decoration: none;
}

/* Outlined primary pill that fills on hover. The card action on every archive
 * (View Job, View Profile, View Resume) and the shared Load more button. */
.wcb-btn--outline {
	background: transparent;
	color: var(--wcb-primary-text, #1d4ed8);
	border-color: var(--wcb-primary, #2563eb);
}

.wcb-btn--outline:hover,
.wcb-btn--outline:focus-visible {
	background: var(--wcb-primary-strong);
	color: var(--wcb-on-primary, #ffffff);
	border-color: var(--wcb-primary-strong);
	text-decoration: none;
}

/* Theme-hardened tiers. Inside a plugin block these chains land at (0,2,0) to
 * (0,3,1), which beats the Reign / Astra `.entry-content button|a` cascade
 * ((0,2,1)) without `!important`. `-webkit-text-fill-color` follows the
 * resolved `color` so an aggressive theme (BuddyX) cannot strand a fixed fill
 * on a same-colour background. */
[class*="wp-block-wp-career-board"] .wcb-btn--primary,
[class*="wp-block-wcb-"] .wcb-btn--primary {
	background: var(--wcb-primary-strong);
	color: var(--wcb-on-primary, #ffffff);
	border-color: var(--wcb-primary-strong);
}

[class*="wp-block-wp-career-board"] .wcb-btn--primary:hover,
[class*="wp-block-wp-career-board"] .wcb-btn--primary:focus-visible,
[class*="wp-block-wcb-"] .wcb-btn--primary:hover,
[class*="wp-block-wcb-"] .wcb-btn--primary:focus-visible {
	background: var(--wcb-primary-dark, #1d4ed8);
	border-color: var(--wcb-primary-dark, #1d4ed8);
	color: var(--wcb-on-primary, #ffffff);
	text-decoration: none;
}

[class*="wp-block-wp-career-board"] a.wcb-btn--outline:link,
[class*="wp-block-wp-career-board"] a.wcb-btn--outline:visited,
[class*="wp-block-wp-career-board"] span.wcb-btn--outline,
[class*="wp-block-wp-career-board"] button.wcb-btn--outline,
[class*="wp-block-wp-career-board"] .wcb-btn.wcb-btn--outline,
[class*="wp-block-wcb-"] a.wcb-btn--outline:link,
[class*="wp-block-wcb-"] a.wcb-btn--outline:visited,
[class*="wp-block-wcb-"] span.wcb-btn--outline,
[class*="wp-block-wcb-"] button.wcb-btn--outline,
[class*="wp-block-wcb-"] .wcb-btn.wcb-btn--outline {
	background: transparent;
	color: var(--wcb-primary-text, #1d4ed8);
	-webkit-text-fill-color: currentColor;
	border-color: var(--wcb-primary, #2563eb);
}

[class*="wp-block-wp-career-board"] a.wcb-btn--outline:hover,
[class*="wp-block-wp-career-board"] a.wcb-btn--outline:focus-visible,
[class*="wp-block-wp-career-board"] button.wcb-btn--outline:hover,
[class*="wp-block-wp-career-board"] button.wcb-btn--outline:focus-visible,
[class*="wp-block-wcb-"] a.wcb-btn--outline:hover,
[class*="wp-block-wcb-"] a.wcb-btn--outline:focus-visible,
[class*="wp-block-wcb-"] button.wcb-btn--outline:hover,
[class*="wp-block-wcb-"] button.wcb-btn--outline:focus-visible {
	background: var(--wcb-primary-strong);
	color: var(--wcb-on-primary, #ffffff);
	-webkit-text-fill-color: var(--wcb-on-primary, #ffffff);
	border-color: var(--wcb-primary-strong);
	text-decoration: none;
}

[class*="wp-block-wp-career-board"] .wcb-btn--danger,
[class*="wp-block-wcb-"] .wcb-btn--danger {
	background: transparent;
	color: var(--wcb-danger-fg, #991b1b);
	border-color: var(--wcb-danger-border, #fecaca);
}

[class*="wp-block-wp-career-board"] .wcb-btn--danger:hover,
[class*="wp-block-wp-career-board"] .wcb-btn--danger:focus-visible,
[class*="wp-block-wcb-"] .wcb-btn--danger:hover,
[class*="wp-block-wcb-"] .wcb-btn--danger:focus-visible {
	background: var(--wcb-danger-bg-soft, #fef2f2);
	color: var(--wcb-danger-fg, #991b1b);
	border-color: var(--wcb-danger, #dc2626);
	text-decoration: none;
}

/* ── Avatar ───────────────────────────────────────────────────────────────── */

/* Initials or an image in a fixed tile. One fill token (--wcb-avatar-bg, so a
 * site owner recolours every placeholder in one place), sizes from the
 * --wcb-avatar-* scale or a block's own --wcb-avatar-size. Rounded square for
 * companies, --round for people, --logo puts an uploaded logo on a plain tile
 * so a transparent logo still reads. */
.wcb-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: var(--wcb-avatar-size, var(--wcb-avatar-md, 52px));
	height: var(--wcb-avatar-size, var(--wcb-avatar-md, 52px));
	overflow: hidden;
	border-radius: var(--wcb-avatar-radius, var(--wcb-radius-lg));
	background: var(--wcb-avatar-bg, #1e293b);
	color: #ffffff;
	font-size: max(10px, calc(var(--wcb-avatar-size, var(--wcb-avatar-md, 52px)) * 0.33));
	font-weight: var(--wcb-font-bold);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.wcb-avatar--round { --wcb-avatar-radius: var(--wcb-radius-full); }

.wcb-avatar--logo {
	background: var(--wcb-surface, #ffffff);
	border: 1px solid var(--wcb-border, #e2e8f0);
}

.wcb-avatar--sm { --wcb-avatar-size: var(--wcb-avatar-sm); }
.wcb-avatar--lg { --wcb-avatar-size: var(--wcb-avatar-lg); }
.wcb-avatar--xl { --wcb-avatar-size: var(--wcb-avatar-xl); }

.wcb-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* People are photos: crop to fill instead of letterboxing. */
.wcb-avatar--round img { object-fit: cover; }

.wcb-avatar [hidden] { display: none; }

/* ── Forms: one field, one label, one rhythm ────────────────────────────────
 * Every Career Board form (settings, profiles, company profile, registration,
 * post-a-job, apply drawer, resume forms and builder) uses these; the blocks
 * set layout only. The field rule is scoped to the block roots and the
 * element, (0,2,1), so a theme's input[type="text"] (0,1,1) can't restyle it.
 * UI guideline: field 44px, radius md, 1px border; label then field 4; field
 * then field 16, set by gap on the wrapper and its container, not margins. */
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(input:not([type="radio"], [type="checkbox"]), select, textarea):is(.wcb-input, .wcb-field, .wcb-field-input, .wcb-rf-input, .wcb-rf-textarea, .wcb-rb-input, .wcb-rb-textarea, .wcb-rb-summary-textarea, .wcb-cb-input, .wcb-apply-resume-select, .wcb-alert-guest-email) {
	box-sizing: border-box;
	width: 100%;
	height: var(--wcb-control-h);
	margin: 0;
	padding: 0 var(--wcb-space-lg);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-md);
	background-color: var(--wcb-base);
	color: var(--wcb-contrast);
	font: inherit;
	font-size: var(--wcb-text-base);
	line-height: var(--wcb-leading-tight);
	box-shadow: none;
	transition: border-color var(--wcb-transition-fast), box-shadow var(--wcb-transition-fast);
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) textarea:is(.wcb-input, .wcb-field, .wcb-field-input, .wcb-rf-input, .wcb-rf-textarea, .wcb-rb-input, .wcb-rb-textarea, .wcb-rb-summary-textarea, .wcb-cb-input, .wcb-apply-resume-select, .wcb-alert-guest-email) {
	height: auto;
	min-height: 120px;
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	line-height: var(--wcb-leading-normal);
	resize: vertical;
}

/* Every single-line select in our blocks draws the plugin's caret in its own
   gutter. A list of classes left the rest (status, Move to, company filter)
   with the theme's caret painted over the label (Basecamp 10401140048).
   The second selector matches the field rule's (0,3,1) so its padding
   shorthand can't take the caret's gutter back on form selects. */
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) select:not([multiple], [size]),
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) select:not([multiple], [size]):is(.wcb-input, .wcb-field, .wcb-field-input, .wcb-rf-input, .wcb-rf-textarea, .wcb-rb-input, .wcb-rb-textarea, .wcb-rb-summary-textarea, .wcb-cb-input, .wcb-apply-resume-select, .wcb-alert-guest-email) {
	-webkit-appearance: none;
	appearance: none;
	padding-inline-end: var(--wcb-space-3xl);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wcb-space-md) center;
	background-size: 16px;
	cursor: pointer;
}

[dir="rtl"] :is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) select:not([multiple], [size]) {
	background-position: left var(--wcb-space-md) center;
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(input:not([type="radio"], [type="checkbox"]), select, textarea):is(.wcb-input, .wcb-field, .wcb-field-input, .wcb-rf-input, .wcb-rf-textarea, .wcb-rb-input, .wcb-rb-textarea, .wcb-rb-summary-textarea, .wcb-cb-input, .wcb-apply-resume-select, .wcb-alert-guest-email):hover {
	border-color: var(--wcb-text-tertiary);
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(input:not([type="radio"], [type="checkbox"]), select, textarea):is(.wcb-input, .wcb-field, .wcb-field-input, .wcb-rf-input, .wcb-rf-textarea, .wcb-rb-input, .wcb-rb-textarea, .wcb-rb-summary-textarea, .wcb-cb-input, .wcb-apply-resume-select, .wcb-alert-guest-email):focus {
	outline: 2px solid transparent;
	border-color: var(--wcb-primary);
	box-shadow: var(--wcb-shadow-focus);
}

/* Every placeholder in our blocks, search boxes included (themes set their
   own, 2.85:1 in Reign dark). Secondary text clears 4.5:1 in light and dark. */
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(input, textarea)::placeholder {
	color: var(--wcb-text-secondary);
	opacity: 1;
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(input:not([type="radio"], [type="checkbox"]), select, textarea):is(.wcb-input, .wcb-field, .wcb-field-input, .wcb-rf-input, .wcb-rf-textarea, .wcb-rb-input, .wcb-rb-textarea, .wcb-rb-summary-textarea, .wcb-cb-input, .wcb-apply-resume-select, .wcb-alert-guest-email):is([readonly], :disabled) {
	background-color: var(--wcb-bg-subtle);
	color: var(--wcb-text-secondary);
	cursor: default;
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(input:not([type="radio"], [type="checkbox"]), select, textarea):is(.wcb-input, .wcb-field, .wcb-field-input, .wcb-rf-input, .wcb-rf-textarea, .wcb-rb-input, .wcb-rb-textarea, .wcb-rb-summary-textarea, .wcb-cb-input, .wcb-apply-resume-select, .wcb-alert-guest-email)[aria-invalid="true"] {
	border-color: var(--wcb-danger);
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(.wcb-form-label, .wcb-field-label, .wcb-rf-label, .wcb-rb-label, .wcb-rb-summary-label, .wcb-cb-custom-label) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wcb-space-xs);
	margin: 0;
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-semibold);
	line-height: var(--wcb-leading-tight);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wcb-contrast);
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(.wcb-field-hint, .wcb-form-hint) {
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-normal);
	color: var(--wcb-text-secondary);
}

/* A field unit: label, control, hint, stacked 4px apart. */
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(.wcb-form-field, .wcb-field-group, .wcb-rf-field, .wcb-rb-field) {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
	min-width: 0;
	margin: 0;
}

/* A button in a form keeps its own width, left-aligned (a field unit is a
   column flexbox, which stretched Save to the full width of the form). */
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) .wcb-form-field > .wcb-btn {
	align-self: flex-start;
}

/* Field units stack 16px apart, in one column or a two-column row. */
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(.wcb-panel--form, .wcb-profile-form, .wcb-reg-form, .wcb-form-simple__section, .wcb-resume-simple__section, .wcb-rf-stack, .wcb-rb-profile-fields) {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-lg);
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) .wcb-form-step {
	gap: var(--wcb-space-lg);
}

:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(.wcb-field-row, .wcb-reg-row, .wcb-form-grid, .wcb-rf-fields) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wcb-space-lg);
}

@media (max-width: 640px) {
	:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) :is(.wcb-field-row, .wcb-reg-row, .wcb-form-grid, .wcb-rf-fields) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Detail-page section heading — shared across all detail surfaces ──────
 * Used by `wcb/job-single` (`.wcb-section-heading`),
 * `wcb/company-profile` (`.wcb-cp-section-title`), Pro resume-single
 * (`.wcb-rs-section-heading`) and Pro resume-form (`.wcb-rf-section-title`)
 * — display-style heading with optional icon and hairline divider.
 *
 * resume-single's h2 headings used to carry a distinct small-caps
 * "eyebrow" style instead of this one. Owner decision: uniform wins over
 * per-page variety here too, same as the card/hero shape (Basecamp
 * 10348287589) — no kept exceptions.
 *
 * Reign / Astra apply `.entry-content h2/h3 { margin-bottom: 0 }` at
 * specificity (0,2,1). The selectors below use `[class*="wp-block-*"]`
 * (the block wrapper class) + the heading element tag + the heading
 * class = (0,2,2). They naturally beat theme overrides without
 * reaching for `!important`. */
[class*="wp-block-wp-career-board"] h2.wcb-section-heading,
[class*="wp-block-wp-career-board"] h2.wcb-cp-section-title,
[class*="wp-block-wp-career-board"] h2.wcb-rs-section-heading,
[class*="wp-block-wp-career-board"] h2.wcb-rf-section-title,
[class*="wp-block-wcb-"] h2.wcb-section-heading,
[class*="wp-block-wcb-"] h2.wcb-cp-section-title,
[class*="wp-block-wcb-"] h2.wcb-rs-section-heading,
[class*="wp-block-wcb-"] h2.wcb-rf-section-title {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	font-family: inherit;
	font-size: var(--wcb-text-lg);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast, #0f172a);
	line-height: 1.2;
	margin: 0 0 var(--wcb-space-lg);
	padding-bottom: var(--wcb-space-md);
	border-bottom: 1px solid var(--wcb-surface, #f1f5f9);
}

/* Aside heading: one style for every detail-page sidebar card title (job
 * Job Details / Share, company side cards, resume Skills / Languages).
 * Owner decision: uniform, so the resume's uppercase eyebrow is gone. No
 * divider: the sidebar card already has a border. */
[class*="wp-block-wp-career-board"] h3.wcb-rs-aside-heading,
[class*="wp-block-wcb-"] h3.wcb-rs-aside-heading,
[class*="wp-block-wp-career-board"] .wcb-sidebar-card .wcb-card-title,
[class*="wp-block-wp-career-board"] .wcb-cp-side-card__title,
[class*="wp-block-wp-career-board"] .wcb-cp-sidebar .wcb-widget-title {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	font-family: inherit;
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-bold);
	text-transform: none;
	letter-spacing: 0;
	color: var(--wcb-contrast, #0f172a);
	line-height: 1.3;
	margin: 0 0 var(--wcb-space-lg);
	padding: 0;
	border: 0;
}

/* Sub-heading variant (sections inside sections). */
[class*="wp-block-wp-career-board"] h3.wcb-section-heading-sm,
[class*="wp-block-wcb-"] h3.wcb-section-heading-sm {
	font-family: inherit;
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast, #334155);
	line-height: 1.3;
	margin: 0 0 var(--wcb-space-md);
}

/* ── Detail-page card — shared hero + section shape across job/company/
 * resume single ("detail" pages). Owner decision: uniform density wins
 * over per-page variety (10348287589 section rhythm, 10348288572 card
 * radius/shadow) — one radius, one padding ladder, one shadow treatment
 * for every hero and section card on these three pages. Each page keeps
 * its own component class (`.wcb-job-hero`, `.wcb-rs-section`, ...) for
 * layout/print rules and adds this class alongside it for the shared
 * shape. */
/* Border only, no shadow - matches the flat listing cards (a border AND
 * a resting shadow read as two competing signals for the same edge;
 * Basecamp 10348288572). */
.wcb-detail-hero,
.wcb-detail-section {
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-xl);
}

.wcb-detail-hero {
	padding: var(--wcb-space-3xl);
}

.wcb-detail-section {
	padding: var(--wcb-space-2xl);
}

/* Detail-page rhythm is set by gap on the parents; the cards carry no block
 * margins (UI guideline: section stack 32 / 24 / 24, cards stacked in a
 * column 16 / 16 / 12). Screen only: the resume's print layout keeps its own
 * flow. The resume aside's flex is :where()-scoped so its tablet grid still
 * wins. */
@media screen {
	:is(.wcb-job-single, .wcb-company-profile, .wcb-rs) {
		display: flex;
		flex-direction: column;
		gap: var(--wcb-space-3xl);
	}

	:is(.wcb-job-single, .wcb-company-profile, .wcb-rs) :is(.wcb-job-main, .wcb-cp-main, .wcb-rs-main) {
		display: flex;
		flex-direction: column;
		gap: var(--wcb-space-lg);
	}

	:where(.wcb-rs) .wcb-rs-aside {
		display: flex;
		flex-direction: column;
	}

	:is(.wcb-job-single, .wcb-company-profile, .wcb-rs) :is(.wcb-job-sidebar, .wcb-cp-sidebar, .wcb-rs-aside) {
		gap: var(--wcb-space-lg);
	}

	:is(.wcb-job-single, .wcb-company-profile, .wcb-rs) :is(.wcb-detail-hero, .wcb-detail-section, .wcb-sidebar-card, .wcb-cp-side-card, .wcb-rs-aside-card, .wcb-job-report) {
		margin-block: 0;
	}
}

@media screen and (max-width: 1024px) {
	:is(.wcb-job-single, .wcb-company-profile, .wcb-rs) {
		gap: var(--wcb-space-2xl);
	}
}

@media screen and (max-width: 640px) {
	:is(.wcb-job-single, .wcb-company-profile, .wcb-rs) :is(.wcb-job-main, .wcb-cp-main, .wcb-rs-main, .wcb-job-sidebar, .wcb-cp-sidebar, .wcb-rs-aside) {
		gap: var(--wcb-space-md);
	}
}

/* ── Trust tick — shared paint across all archive cards ──────────────────
 * Small green checkmark rendered INLINE after the company/job name. The
 * `data-trust` attribute carries the trust level so verified / trusted /
 * premium can pick up a distinct paint without changing the markup. The
 * tooltip + aria-label on the host element supply the human label so the
 * word "Verified" no longer needs to take chip-row space. */
.wcb-ca-name-row {
	display: inline-flex;
	align-items: center;
	gap: var(--wcb-space-xs);
	/* Keep clear of the 40px save button pinned in the card's top corner, so a
	 * long name and its tick never sit under it. */
	max-width: calc(100% - 40px - var(--wcb-space-xs));
	/* nowrap + a shrinkable name keeps the tick beside a long (clamped)
	 * name instead of dropping onto its own line. */
	flex-wrap: nowrap;
}

.wcb-ca-name-row > .wcb-ca-name {
	min-width: 0;
}

.wcb-ca-trust-tick {
	display: none;
	border-radius: var(--wcb-radius-full);
	background: var(--wcb-success, #16a34a);
	color: #ffffff;
	font-size: 10px;
	font-weight: var(--wcb-font-bold);
	line-height: 1;
	cursor: help;
}

/* A text glyph in an inline pill, not an SVG: a glyph has no line-break
 * opportunity before it, so the tick always stays on the last word's line
 * (an SVG is an atomic inline, and Chromium broke before it). */
.wcb-ca-trust-tick.wcb-shown {
	display: inline;
	padding: 0.2em 0.4em;
	margin-inline-start: var(--wcb-space-xs);
	vertical-align: 0.1em;
}

.wcb-ca-trust-tick::before {
	content: "\2713";
}

/* Beside the company name the row's gap spaces it; it never shrinks. */
.wcb-ca-name-row > .wcb-ca-trust-tick {
	margin-inline-start: 0;
	flex-shrink: 0;
}

.wcb-ca-trust-tick[data-trust="trusted"] { background: var(--wcb-info, #2563eb); }
.wcb-ca-trust-tick[data-trust="premium"] { background: var(--wcb-warning, #d97706); }

/* Lucide check sized to sit inside the 16px circular tick. */

/* Inline icon + label utility — aligns a leading Lucide icon with its text
 * for success confirmations (Saved, Profile saved, Job posted, etc.). The
 * 1em svg tracks the surrounding font size. */
.wcb-icon-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wcb-space-xs);
}

.wcb-icon-label svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ── Empty state — the one "nothing here" pattern ────────────────────────
 * Renders as a real card (white background, soft border, generous padding)
 * so the message has the same visual weight as a card cell in a grid.
 * Optional icon, title and body (or plain text) stacked center-aligned.
 *   --plain    no card chrome, for use inside a panel that is already a card.
 *   --compact  tighter padding for sidebar widgets and inline list sections.
 *   --toggle   hidden until `.wcb-shown` is added by an Interactivity store. */
.wcb-empty-state {
	margin: 0; /* it is a <p> in places; a theme's p margin must not leak in */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wcb-space-md);
	padding: var(--wcb-space-4xl) var(--wcb-space-2xl);
	background: var(--wcb-base, #ffffff);
	border: 1px solid var(--wcb-border, #e2e8f0);
	border-radius: var(--wcb-radius-xl); /* matches every other card - was radius-lg */
	text-align: center;
	color: var(--wcb-text-secondary, #6b7280);
	font-size: var(--wcb-text-sm);
	line-height: 1.5;
}

/* `data-wp-bind--hidden` sets the HTML `hidden` attribute; the user-agent
 * default `[hidden] { display: none }` loses to our `display: flex` rule
 * above on specificity. Force `display: none` back when the attribute is
 * present so the empty state actually hides when there's data. */
/* (0,2,0) `.foo[hidden]` already beats the (0,1,0) `.foo { display: flex }`
 * rule above on specificity, so this works without `!important`. */
.wcb-empty-state[hidden] {
	display: none;
}

.wcb-empty-state--plain {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.wcb-empty-state--compact {
	gap: var(--wcb-space-sm);
	padding: var(--wcb-space-lg);
}

.wcb-empty-state--toggle { display: none; }
.wcb-empty-state--toggle.wcb-shown { display: flex; }

.wcb-empty-state__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wcb-space-4xl);
	height: var(--wcb-space-4xl);
	border-radius: var(--wcb-radius-full);
	background: var(--wcb-surface, #f1f5f9);
	color: var(--wcb-text-tertiary, #94a3b8);
}

.wcb-empty-state__icon svg,
.wcb-empty-state__icon [data-lucide] {
	width: var(--wcb-icon-lg);
	height: var(--wcb-icon-lg);
}

.wcb-empty-state__title {
	margin: 0;
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast, #0f172a);
	line-height: 1.3;
	font-family: inherit;
}

.wcb-empty-state__body {
	margin: 0;
	max-width: 360px;
}

/* Span the full row inside a card grid so the empty state doesn't get
 * squeezed into a single column track. */
.wcb-jobs-container.wcb-grid > .wcb-empty-state,
.wcb-ca-container.wcb-grid > .wcb-empty-state,
.wcb-ra-grid > .wcb-empty-state {
	grid-column: 1 / -1;
}

/* ── Dashboard "My Saves" list pattern — shared across both dashboards ─────
 * Used by Saved Jobs / Saved Companies / Saved Resumes views in both the
 * candidate AND employer dashboards. The classes carry the legacy
 * `.wcb-cd-*` prefix (candidate-dashboard origin) because the candidate
 * dashboard already shipped them; moving the rules here lets the employer
 * dashboard reuse the exact same markup without dragging the entire
 * candidate-dashboard stylesheet onto an employer page. */
.wcb-cd-loading {
	display: none;
	align-items: center;
	gap: var(--wcb-space-sm);
	color: var(--wcb-text-secondary, #6b7280);
	font-size: var(--wcb-text-base);
	padding: var(--wcb-space-md) 0;
}

.wcb-cd-loading.wcb-shown {
	display: flex;
}

.wcb-cd-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--wcb-border, #e5e7eb);
	border-top-color: var(--wcb-primary, #2563eb);
	border-radius: 50%;
	animation: wcb-cd-spin 0.7s linear infinite;
}

@keyframes wcb-cd-spin {
	to { transform: rotate(360deg); }
}

.wcb-cd-error {
	color: var(--wcb-danger-fg, #b91c1c);
	font-size: var(--wcb-text-base);
	margin: 0 0 var(--wcb-space-lg);
}

.wcb-cd-bookmark-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-md);
	padding: var(--wcb-space-md) var(--wcb-space-xl);
	border-bottom: 1px solid var(--wcb-surface, #f1f5f9);
	transition: background var(--wcb-transition-fast);
}

.wcb-cd-bookmark-row:last-child {
	border-bottom: none;
}

.wcb-cd-bookmark-row:hover {
	background: var(--wcb-bg-subtle, #f8fafc);
}

.wcb-cd-bookmark-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
}

/* Prefixed with `[class*="wp-block-..."]` (0,2,1) so it beats the
 * Reign/Astra `.entry-content h*` typography cascade (0,2,0) without
 * `!important`. Both Free (`wp-block-wp-career-board-*`) and Pro
 * (`wp-block-wcb-*`) block class roots are covered. */
[class*="wp-block-wp-career-board"] .wcb-cd-bookmark-title,
[class*="wp-block-wcb-"] .wcb-cd-bookmark-title {
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	font-family: inherit;
	line-height: 1.3;
	color: var(--wcb-contrast, #0f172a);
	margin: 0;
}

.wcb-cd-bookmark-title a {
	color: inherit;
	text-decoration: none;
}

.wcb-cd-bookmark-title a:hover {
	color: var(--wcb-primary-text, #2563eb);
	text-decoration: underline;
}

.wcb-cd-bookmark-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wcb-space-xs);
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary, #6b7280);
}

.wcb-cd-bookmark-actions {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-shrink: 0;
}

/* Hidden helper used by `data-wp-class--wcb-hidden` bindings on the
 * meta-separator dots so they don't render when the value next to them
 * is empty. */
.wcb-cd-bookmark-meta .wcb-hidden {
	display: none;
}

/* ── Archive card title — shared paint across the 3 archive surfaces ────────
 * Find Jobs (.wcb-card-title — <h3>), Companies (.wcb-ca-name — <h2>),
 * Find Candidates (.wcb-ra-card-name — <p>). Each block uses a different
 * tag for semantic / SEO reasons, but the visual paint must match. The
 * (0,2,1) parent-prefix selector already beats the Reign / Astra
 * `.entry-content h*` cascade at (0,2,0) without `!important`. */
[class*="wp-block-wp-career-board"] .wcb-card-title,
[class*="wp-block-wp-career-board"] .wcb-ca-name,
[class*="wp-block-wcb-"] .wcb-ra-card-name {
	font-family: inherit;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-bold);
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wcb-contrast, #0f172a);
	margin: 0 0 var(--wcb-space-xs);
}

/* Reserve the bookmark button's gutter on the three archive card titles.
 * The button is position:absolute, 40px wide, pinned to `right: --wcb-space-md`,
 * so it is out of flow and the title never knew it was there — a long name ran
 * straight under the icon ("Deputy Head Teacher" collided by 32px at 1440px).
 * Scoped to the card contexts that actually HAVE a bookmark, because
 * .wcb-card-title is overloaded: it is also the section heading inside cards
 * ("Job Details", "About the Company") where padding here would misalign it.
 * Logical property so RTL flips the gutter to the other side with the button. */
[class*="wp-block-wp-career-board"] .wcb-job-card .wcb-card-title,
[class*="wp-block-wp-career-board"] .wcb-ca-card .wcb-ca-name,
[class*="wp-block-wcb-"] .wcb-ra-card .wcb-ra-card-name {
	padding-inline-end: calc( 40px + var( --wcb-space-sm, 8px ) );
	/* At most two lines, broken between words only, so cards in a row line up. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: normal;
	word-break: normal;
}

/* Section card titles (.wcb-card-title) need more breathing room than the
 * compact archive item names above. The shared reset pins all three to
 * --wcb-space-xs (4px), which left section headings like "Job Details" / "About
 * the Company" sitting too close to the card body, and inconsistent with the
 * Share card. Lift only .wcb-card-title to a consistent --wcb-space-lg gap
 * (same 0,2,0 specificity, later in source order, so it wins for titles while
 * the archive names keep the tight 4px). */
[class*="wp-block-wp-career-board"] .wcb-card-title,
[class*="wp-block-wcb-"] .wcb-card-title {
	margin-bottom: var(--wcb-space-lg);
}

/* ...except the Find Jobs archive card's own title, which is the same kind of
 * element as .wcb-ca-name / .wcb-ra-card-name above and must keep their tight
 * 4px gap to the line below it (was 16px, the only one of the three archive
 * cards that didn't match - Basecamp 10348287993). Same specificity as the
 * lift rule, later in source, so it wins for this one context. */
[class*="wp-block-wp-career-board"] .wcb-job-card .wcb-card-title {
	margin-bottom: var(--wcb-space-xs);
}

/* ── Archive layout — sidebar filter panel + results ──────────────────────── */

/* Two-column layout used by every archive surface (`/find-jobs/`,
 * `/companies/`, `/find-candidates/`): sticky filter panel on the left,
 * result cards on the right. Stacks to a single column on mobile so the
 * filter panel sits above results. Replaces the earlier "chip row above
 * cards" pattern that broke down once filter counts grew past a single
 * line. */
.wcb-archive-layout {
	display: grid;
	grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
	gap: var(--wcb-space-2xl);
	align-items: start;
}

/* 1024, not 900 — the standard tablet breakpoint, so the filter panel
   stacks at the same width every other detail/listing page collapses at. */
@media (max-width: 1024px) {
	.wcb-archive-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Bookmark button (shared across all 3 archive cards) ──────────────────
 * One canonical paint for the save affordance on Find Jobs, Companies,
 * and Find Candidates cards. All three position the button absolutely
 * at the top-right of the card and size the SVG to 16px so the icon
 * lands at the same pixel offset regardless of the card's internal
 * markup shape (Jobs nests the button inside the card-header flex row;
 * Companies + Candidates render it as a direct child of the card).
 * `.wcb-job-card` already has `position: relative` declared in
 * blocks/job-listings/style.css; the other two get it here. */
.wcb-ca-card,
.wcb-ra-card {
	position: relative;
}

/* Selector chain prefixed with `[class*="wp-block-..."]` so the rule
 * lands at (0,3,1) which beats Reign's `.entry-content button` (0,2,1)
 * and Astra's equivalent without `!important`. Free uses
 * `wp-block-wp-career-board-*` block names, Pro uses `wp-block-wcb-*`,
 * so both prefixes are listed. */
[class*="wp-block-wp-career-board"] .wcb-job-card .wcb-bookmark-btn,
[class*="wp-block-wp-career-board"] .wcb-ca-card > .wcb-bookmark-btn,
[class*="wp-block-wcb-"] .wcb-ra-card > .wcb-bookmark-btn {
	position: absolute;
	top: var(--wcb-space-md);
	right: var(--wcb-space-md);
	z-index: 3;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wcb-text-secondary, #6b7280);
	cursor: pointer;
	border-radius: var(--wcb-radius-md);
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	transition: color var(--wcb-transition-fast), background var(--wcb-transition-fast);
}

[class*="wp-block-wp-career-board"] .wcb-job-card .wcb-bookmark-btn:hover,
[class*="wp-block-wp-career-board"] .wcb-ca-card > .wcb-bookmark-btn:hover,
[class*="wp-block-wcb-"] .wcb-ra-card > .wcb-bookmark-btn:hover,
[class*="wp-block-wp-career-board"] .wcb-job-card .wcb-bookmark-btn.wcb-bookmarked,
[class*="wp-block-wp-career-board"] .wcb-ca-card > .wcb-bookmark-btn.wcb-bookmarked,
[class*="wp-block-wcb-"] .wcb-ra-card > .wcb-bookmark-btn.wcb-bookmarked {
	color: var(--wcb-warning, #d97706);
	background: var(--wcb-warning-bg-soft, #fffbeb);
}

[class*="wp-block-wp-career-board"] .wcb-job-card .wcb-bookmark-btn svg,
[class*="wp-block-wp-career-board"] .wcb-ca-card > .wcb-bookmark-btn svg,
[class*="wp-block-wcb-"] .wcb-ra-card > .wcb-bookmark-btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	transition: fill var(--wcb-transition-fast);
}

/* FILLED icon when bookmarked - the Lucide bookmark SVG ships with
 * `stroke="currentColor" fill="none"`; toggling `fill: currentColor`
 * via CSS turns the outline into a solid amber bookmark so users can
 * tell at a glance which cards they've saved. Hover on unbookmarked
 * gives a preview fill via the same rule. */
.wcb-job-card .wcb-bookmark-btn.wcb-bookmarked svg,
.wcb-ca-card > .wcb-bookmark-btn.wcb-bookmarked svg,
.wcb-ra-card > .wcb-bookmark-btn.wcb-bookmarked svg {
	fill: currentColor;
}

/* UI-010: keyboard focus ring on toolbar icon buttons (bookmark + view
   switcher). `.wcb-chip` already had one; these were missing (WCAG 2.4.7). */
.wcb-bookmark-btn:focus-visible,
.wcb-layout-btn:focus-visible,
.wcb-view-btn:focus-visible {
	outline: 2px solid var(--wcb-primary);
	outline-offset: 2px;
}

/* radius-xl + border-only, matching every other card on the page (was
 * radius-lg with a resting shadow - Basecamp 10348288572, owner: uniform). */
.wcb-filter-panel {
	position: sticky;
	top: var(--wcb-space-2xl);
	background: var(--wcb-base, #ffffff);
	border: 1px solid var(--wcb-border, #e2e8f0);
	border-radius: var(--wcb-radius-xl);
	padding: var(--wcb-space-lg) var(--wcb-space-xl);
	/* Each long list (.wcb-filter-panel__list) caps its own height with its
	 * own internal scroll, so the panel itself never needs to scroll.
	 * Previously we stacked panel-wide `max-height + overflow-y: auto` on
	 * top of the per-list scrollbar, which produced a side-by-side double
	 * scrollbar on Find Jobs once the Job Board list landed (20+ items). */
}

/* Matches .wcb-archive-layout's own stacking breakpoint above — this
   panel is only ever static once the layout itself has already stacked
   to one column; a mismatched breakpoint here would leave it static
   while still sitting side-by-side with results. */
@media (max-width: 1024px) {
	.wcb-filter-panel {
		position: static;
	}
}

/* Visually-hidden checkbox that powers the mobile collapse toggle below.
 * Pure-CSS sibling-selector toggle - no JS needed, no per-archive store
 * changes. Native checkbox keeps full keyboard + screen reader support;
 * the `<label>` chevron acts as the trigger. */
.wcb-filter-panel__toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	padding: 0;
	margin: -1px;
	white-space: nowrap;
}

.wcb-filter-panel__toggle {
	display: none;
}

.wcb-filter-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-sm);
	padding-bottom: var(--wcb-space-md);
	border-bottom: 1px solid var(--wcb-border, #e2e8f0);
	margin-bottom: var(--wcb-space-md);
}

.wcb-filter-panel__heading {
	margin: 0;
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast, #0f172a);
}

.wcb-filter-panel__clear {
	background: transparent;
	border: 0;
	padding: 0;
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-primary-text, #2563eb);
	cursor: pointer;
	text-decoration: underline;
}

.wcb-filter-panel__group {
	padding: var(--wcb-space-md) 0;
	border-bottom: 1px solid var(--wcb-border, #e2e8f0);
}

.wcb-filter-panel__group:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.wcb-filter-panel__group-title {
	display: block;
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-text-secondary, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--wcb-space-sm);
}

.wcb-filter-panel__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
}

.wcb-filter-panel__option {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	padding: var(--wcb-space-xs) var(--wcb-space-xs);
	border-radius: var(--wcb-radius-sm);
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary, #6b7280);
	cursor: pointer;
	transition: background var(--wcb-transition-fast), color var(--wcb-transition-fast);
}

.wcb-filter-panel__list li[data-depth="1"] { padding-inline-start: var(--wcb-space-lg); }
.wcb-filter-panel__list li[data-depth="2"] { padding-inline-start: calc(var(--wcb-space-lg) * 2); }
.wcb-filter-panel__list li[data-depth="3"] { padding-inline-start: calc(var(--wcb-space-lg) * 3); }

/* "in Parent": read by screen readers always, shown while searching. */
.wcb-filter-parent {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.is-searching .wcb-filter-parent {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	font-size: var(--wcb-text-xs);
	color: var(--wcb-text-secondary, #667085);
}

.is-searching li { padding-inline-start: 0; }

.wcb-filter-empty {
	margin: 0;
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary, #667085);
}

.wcb-filter-empty:not(:empty) { padding: var(--wcb-space-sm) var(--wcb-space-xs); }

.wcb-filter-panel__search {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: var(--wcb-space-sm);
	padding: var(--wcb-space-xs) var(--wcb-space-sm);
	border: 1px solid var(--wcb-border, #e2e8f0);
	border-radius: var(--wcb-radius-sm);
	background: var(--wcb-base, #ffffff);
	color: var(--wcb-contrast, #0f172a);
	font-size: var(--wcb-text-sm);
}

.wcb-filter-panel__option:hover {
	background: var(--wcb-bg-hover, #f1f5f9);
	color: var(--wcb-contrast, #0f172a);
}

.wcb-filter-panel__option--checked {
	color: var(--wcb-contrast, #0f172a);
	font-weight: var(--wcb-font-medium);
}

.wcb-filter-panel__option input[type="checkbox"],
.wcb-filter-panel__option input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--wcb-primary, #2563eb);
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
}

/* ── Category picker (job filters bar, search hero) ─────────────────────
 * templates/parts/category-picker.php. The list reuses the filter panel's
 * option rows; the panel overlays the content below it. */
.wcb-cat-picker {
	position: relative;
	min-width: 0;
}

.wcb-cat-picker__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-sm);
	width: 100%;
	min-height: var(--wcb-control-h);
	margin: 0;
	padding-block: 0;
	padding-inline: var(--wcb-space-md);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-md);
	background: var(--wcb-base);
	color: var(--wcb-contrast);
	font-family: inherit;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-normal);
	line-height: var(--wcb-leading-tight);
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--wcb-transition-snappy);
}

.wcb-cat-picker__toggle:hover,
.wcb-cat-picker__toggle:focus,
.wcb-cat-picker__toggle[aria-expanded="true"] {
	border-color: var(--wcb-primary);
	background: var(--wcb-base);
	color: var(--wcb-contrast);
}

.wcb-cat-picker__toggle:focus-visible {
	outline: 2px solid transparent !important;
	box-shadow: var(--wcb-shadow-focus);
}

.wcb-cat-picker__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wcb-cat-picker__toggle svg {
	flex-shrink: 0;
	transition: transform var(--wcb-transition-snappy);
}

.wcb-cat-picker__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.wcb-cat-picker__panel {
	position: absolute;
	inset-block-start: calc(100% + var(--wcb-space-xs));
	inset-inline-start: 0;
	z-index: 50;
	box-sizing: border-box;
	width: max(100%, 300px);
	max-width: calc(100vw - 2 * var(--wcb-space-lg));
	padding: var(--wcb-space-md);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-md);
	background: var(--wcb-base);
	color: var(--wcb-contrast);
	box-shadow: var(--wcb-shadow-lg);
	text-align: start;
}

.wcb-cat-picker__panel[hidden] {
	display: none;
}

.wcb-cat-picker__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wcb-cat-picker .wcb-filter-panel__list {
	max-height: min(320px, 50vh);
	overscroll-behavior: contain;
}

.wcb-cat-picker .wcb-filter-panel__option {
	min-height: 36px;
	color: var(--wcb-contrast);
}

.wcb-cat-picker .wcb-filter-panel__option:has(input:focus-visible) {
	box-shadow: var(--wcb-shadow-focus);
}

.wcb-cat-picker__actions {
	display: flex;
	justify-content: space-between;
	gap: var(--wcb-space-sm);
	margin-block-start: var(--wcb-space-sm);
	padding-block-start: var(--wcb-space-sm);
	border-block-start: 1px solid var(--wcb-border);
}

@media (max-width: 640px) {
	.wcb-cat-picker__panel {
		inset-inline-end: 0;
		width: auto;
		max-width: none;
	}

	.wcb-cat-picker .wcb-filter-panel__option {
		min-height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcb-cat-picker__toggle,
	.wcb-cat-picker__toggle svg {
		transition: none;
	}
}

/* ── Tablet / mobile collapse for the filter panel ───────────────────────
 * Wherever the archive layout stacks (≤1024px, see .wcb-archive-layout) the
 * open filter panel pushed the first result ~1,800px down on an iPad.
 * Collapsed by default there - a chevron in the panel header expands it on
 * tap. The checkbox-as-state pattern keeps this purely CSS so the existing
 * Interactivity stores on the three archives don't need to learn a new
 * "filtersOpen" piece of state. */
@media (max-width: 1024px) {
	.wcb-filter-panel {
		padding: var(--wcb-space-md) var(--wcb-space-lg);
	}

	.wcb-filter-panel__header {
		padding-bottom: 0;
		border-bottom: 0;
		margin-bottom: 0;
	}

	.wcb-filter-panel__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		cursor: pointer;
		color: var(--wcb-text-secondary, #6b7280);
		border-radius: var(--wcb-radius-sm);
		transition: background var(--wcb-transition-fast), color var(--wcb-transition-fast);
		margin-inline-start: auto;
		flex-shrink: 0;
	}

	.wcb-filter-panel__toggle:hover {
		background: var(--wcb-surface, var(--wp--preset--color--wcb-surface));
		color: var(--wcb-contrast, #0f172a);
	}

	.wcb-filter-panel__toggle svg {
		width: 16px;
		height: 16px;
		transition: transform 0.2s ease;
	}

	/* Focus ring on the label when the underlying checkbox is focused. */
	.wcb-filter-panel__toggle-input:focus-visible + .wcb-filter-panel__header .wcb-filter-panel__toggle,
	.wcb-filter-panel__toggle-input:focus-visible ~ .wcb-filter-panel__header .wcb-filter-panel__toggle {
		outline: 2px solid var(--wcb-primary, #2563eb);
		outline-offset: 2px;
	}

	/* Open state: rotate chevron, expand groups, restore header divider. */
	.wcb-filter-panel__toggle-input:checked ~ .wcb-filter-panel__header .wcb-filter-panel__toggle svg {
		transform: rotate(180deg);
	}

	.wcb-filter-panel__toggle-input:checked ~ .wcb-filter-panel__header {
		padding-bottom: var(--wcb-space-md);
		border-bottom: 1px solid var(--wcb-border, #e2e8f0);
		margin-bottom: var(--wcb-space-md);
	}

	/* Collapsed state: hide every sibling group below the header. */
	.wcb-filter-panel__toggle-input:not(:checked) ~ .wcb-filter-panel__group {
		display: none;
	}

	/* Collapsed state also hides the Clear-all button - showing it next
	 * to "Filters" when no controls are visible is confusing. */
	.wcb-filter-panel__toggle-input:not(:checked) ~ .wcb-filter-panel__header .wcb-filter-panel__clear {
		display: none;
	}
}

.wcb-archive-results {
	min-width: 0;
}

/* ── Chip filter row ──────────────────────────────────────────────────────── */

/* Shared chip primitive used by every archive filter bar. The earlier
 * `.wcb-chip` / `.wcb-chip-bar` definitions lived inside
 * `blocks/job-listings/style.css`, which meant the same class behaved
 * differently on `/companies/` (no rules loaded, falls back to native
 * button) and `/find-jobs/` (styled chip). Hoisting the rules into the
 * global ui primitives stylesheet ensures every block — including the
 * new Companies chip-bar and any future archive block — renders the
 * same affordance for free. Block-local stylesheets may still override
 * locally if a block needs a different size, but no block should
 * redefine the default state of `.wcb-chip` again. */

.wcb-chip-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wcb-space-xs);
}

.wcb-chip {
	display: inline-flex;
	align-items: center;
	height: var(--wcb-space-3xl);
	padding-inline: var(--wcb-space-md);
	border: 1px solid var(--wcb-border, #e2e8f0);
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-contrast, #0f172a);
	background: var(--wcb-base, #ffffff);
	cursor: pointer;
	transition: border-color var(--wcb-transition-snappy), color var(--wcb-transition-snappy), background var(--wcb-transition-snappy);
	white-space: nowrap;
}

.wcb-chip:hover {
	border-color: var(--wcb-primary, #2563eb);
	background: var(--wcb-info-bg, #dbeafe);
	color: var(--wcb-primary-text, #1d4ed8);
}

.wcb-chip:focus-visible {
	outline: 2px solid var(--wcb-primary, #2563eb);
	outline-offset: 2px;
}

.wcb-chip.wcb-chip-active {
	border-color: var(--wcb-primary-strong);
	background: var(--wcb-primary-strong);
	color: var(--wcb-on-primary, #ffffff);
}

.wcb-chip.wcb-chip-active:hover {
	background: var(--wcb-primary-dark, #1d4ed8);
	border-color: var(--wcb-primary-dark, #1d4ed8);
	color: var(--wcb-on-primary, #ffffff);
}

/* ── Badge ────────────────────────────────────────────────────────────────── */

.wcb-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wcb-space-xs);
	padding: 2px var(--wcb-space-sm);
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	line-height: 1.4;
	white-space: nowrap;
	background: var(--wcb-surface, #f1f5f9);
	color: var(--wcb-text-secondary, #6b7280);
}

.wcb-badge--success  { background: var(--wcb-success-bg, #dcfce7); color: var(--wcb-success-fg, #166534); }
.wcb-badge--warning  { background: var(--wcb-warning-bg, #fef3c7); color: var(--wcb-warning-fg, #92400e); }
.wcb-badge--danger   { background: var(--wcb-danger-bg, #fee2e2);  color: var(--wcb-danger-fg, #991b1b); }
.wcb-badge--info     { background: var(--wcb-info-bg, #dbeafe);    color: var(--wcb-info-fg, #1d4ed8); }
.wcb-badge--neutral  { background: var(--wcb-surface, #f1f5f9);    color: var(--wcb-text-secondary, #6b7280); }
.wcb-badge--outline {
	background: transparent;
	border: 1px solid var(--wcb-border, #e2e8f0);
	color: var(--wcb-text-secondary, #6b7280);
}

/* ── Layout utilities ─────────────────────────────────────────────────────── */

.wcb-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-md);
}

.wcb-stack--xs { gap: var(--wcb-space-xs); }
.wcb-stack--sm { gap: var(--wcb-space-sm); }
.wcb-stack--lg { gap: var(--wcb-space-lg); }
.wcb-stack--xl { gap: var(--wcb-space-xl); }

.wcb-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wcb-space-md);
}

.wcb-row--between { justify-content: space-between; }
.wcb-row--end     { justify-content: flex-end; }
.wcb-row--baseline { align-items: baseline; }

.wcb-divider {
	height: 1px;
	background: var(--wcb-border, #e2e8f0);
	margin: var(--wcb-space-lg) 0;
	border: 0;
}

/* ── Dashboard stat tiles ─────────────────────────────────────────────────── */
/* One neutral number colour: colour here would carry no meaning, only noise.
   Tiles flow as columns so any count (4 without Pro alerts or credits, 5 with)
   shares one row; a hidden tile is not a grid item, so the row re-balances. */
.wcb-stats {
	container: wcb-stats / inline-size;
}

.wcb-stats-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--wcb-space-lg);
	margin-bottom: var(--wcb-space-2xl);
}

.wcb-stat-card {
	background: var(--wcb-base, #ffffff);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-xl);
	padding: var(--wcb-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
	min-width: 0;
}

.wcb-stat-value {
	font-size: var(--wcb-text-2xl);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast, #0f172a);
	line-height: 1;
}

.wcb-stat-label {
	font-size: var(--wcb-text-base);
	color: var(--wcb-text-secondary);
	font-weight: var(--wcb-font-medium);
	overflow-wrap: anywhere;
}

/* A tile that opens its list is a <button>: keep the card look, show it's
   pressable (border tint on hover, the focus ring on keyboard focus). */
.wcb-stat-card--link {
	cursor: pointer;
	width: 100%;
	font: inherit;
	text-align: start;
	color: inherit;
	transition: border-color var(--wcb-transition-fast);
}

.wcb-stat-card--link:hover {
	border-color: var(--wcb-primary);
}

.wcb-stat-card--link:focus-visible {
	outline: 2px solid var(--wcb-primary);
	outline-offset: 2px;
}

/* Narrow: six tracks so every row fills without a lone stretched tile.
   Default 2 per row (4 tiles = 2+2); 3 tiles go 3 across; 5 tiles go 3+2. */
@container wcb-stats (max-width: 720px) {
	.wcb-stats-row {
		grid-auto-flow: row;
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.wcb-stat-card {
		grid-column: span 3;
	}

	.wcb-stat-card:first-child:nth-last-child(3),
	.wcb-stat-card:first-child:nth-last-child(3) ~ .wcb-stat-card,
	.wcb-stat-card:first-child:nth-last-child(5),
	.wcb-stat-card:first-child:nth-last-child(5) ~ .wcb-stat-card:nth-child(-n+3) {
		grid-column: span 2;
	}
}

/* Phone: three across broke "Applications" mid-word, one per row pushed the
   content a screen down, so two per row; an odd last tile takes the row. */
@container wcb-stats (max-width: 480px) {
	.wcb-stats-row {
		gap: var(--wcb-space-sm);
	}

	.wcb-stat-card,
	.wcb-stat-card:first-child:nth-last-child(3),
	.wcb-stat-card:first-child:nth-last-child(3) ~ .wcb-stat-card,
	.wcb-stat-card:first-child:nth-last-child(5),
	.wcb-stat-card:first-child:nth-last-child(5) ~ .wcb-stat-card:nth-child(-n+3) {
		grid-column: span 3;
		padding: var(--wcb-space-md) var(--wcb-space-lg);
	}

	.wcb-stat-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.wcb-stat-value {
		font-size: var(--wcb-text-xl);
	}
}

/* Member-written text (a resume summary, a job description, a company about)
   can hold a long unbroken URL. Themes that don't set overflow-wrap (Twenty
   Twenty-Four / Twenty-Five) let it push the page 2000px+ wide. break-word,
   not anywhere, so ordinary labels never split mid-word in a narrow tile. */
[class*="wp-block-wp-career-board"],
[class*="wp-block-wcb-"] {
	overflow-wrap: break-word;
}

/* ── Dashboard sidebar (candidate + employer) ──────────────────────────────
   One copy for both dashboards; the two per-block sidebar.css files drifted.
   Order: who you are (links to Profile), one nav-item style, quiet sentence-
   case group labels, the main action pinned at the bottom. Nav items are
   <button role="tab">, and BuddyX paints every button with its primary using
   !important, so the transparent/hover/active surfaces need !important too. */
.wcb-sidebar {
	width: 220px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: var(--wcb-base);
	border-inline-end: 1px solid var(--wcb-border);
	padding: var(--wcb-space-xl) 0 var(--wcb-space-lg);
}

.wcb-nav-toggle {
	display: none;
}

.wcb-sidebar-identity {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
	width: calc( 100% - ( var(--wcb-space-sm) * 2 ) );
	margin: 0 var(--wcb-space-sm) var(--wcb-space-md);
	padding: var(--wcb-space-sm);
	border: 0;
	border-radius: var(--wcb-radius-md);
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
}

.wcb-dashboard .wcb-sidebar-identity {
	background: transparent !important;
	box-shadow: none;
}

.wcb-dashboard .wcb-sidebar-identity:hover {
	background: var(--wcb-bg-subtle) !important;
}

.wcb-sidebar-avatar {
	--wcb-avatar-size: 40px;
}

.wcb-sidebar-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--wcb-base);
}

.wcb-sidebar-identity__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wcb-sidebar-identity__name,
.wcb-sidebar-identity__role {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wcb-sidebar-identity__name {
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast);
	line-height: 1.3;
}

.wcb-sidebar-identity__role {
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary);
}

.wcb-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 var(--wcb-space-sm) var(--wcb-space-lg);
}

/* A labelled group of nav items (role="group"); same rhythm as the nav itself. */
.wcb-nav-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* A one-item group: a divider instead of a heading that would repeat the item. */
.wcb-nav-group--rule {
	margin-block-start: var(--wcb-space-sm);
	padding-block-start: var(--wcb-space-sm);
	border-block-start: 1px solid var(--wcb-border);
}

.wcb-nav-section-label {
	display: block;
	padding: var(--wcb-space-lg) var(--wcb-space-md) var(--wcb-space-xs);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-text-secondary);
}

.wcb-nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-sm);
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: var(--wcb-space-sm) var(--wcb-space-md);
	border: 0;
	border-radius: var(--wcb-radius-md);
	font: inherit;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-text-secondary);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--wcb-transition-fast), color var(--wcb-transition-fast);
}

.wcb-dashboard .wcb-nav-item {
	background: transparent !important;
	box-shadow: none;
}

/* (0,3,0): beats the block-scope `font: inherit` button reset (0,2,0) and
   the theme compat button colour rules (0,2,1), so a <button> tab and the
   <a> tab (Public Resume) share one colour on every theme. */
.wcb-dashboard .wcb-sidebar .wcb-nav-item {
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-text-secondary) !important;
	-webkit-text-fill-color: currentColor;
}

.wcb-dashboard .wcb-sidebar .wcb-nav-item:hover {
	background: var(--wcb-bg-subtle) !important;
	color: var(--wcb-contrast) !important;
	text-decoration: none;
}

.wcb-dashboard .wcb-sidebar .wcb-nav-item.wcb-nav-active {
	background: var(--wcb-primary-soft) !important;
	color: var(--wcb-primary-text) !important;
}

.wcb-dashboard .wcb-sidebar .wcb-nav-item--static,
.wcb-dashboard .wcb-sidebar .wcb-nav-item--static:hover {
	background: transparent !important;
	color: var(--wcb-text-secondary) !important;
	cursor: default;
}

.wcb-sidebar .wcb-nav-item:focus-visible,
.wcb-sidebar .wcb-sidebar-identity:focus-visible {
	outline: 2px solid var(--wcb-primary);
	outline-offset: -2px;
}

.wcb-nav-badge {
	display: inline-block;
	padding: 1px var(--wcb-space-sm);
	border-radius: var(--wcb-radius-full);
	background: var(--wcb-bg-hover);
	color: var(--wcb-text-secondary);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	line-height: 1.4;
}

/* The main action sits at the bottom of the sidebar; its colour, height and
   focus come from .wcb-btn--primary. */
.wcb-sidebar-cta {
	display: flex;
	width: calc( 100% - ( var(--wcb-space-lg) * 2 ) );
	margin: auto var(--wcb-space-lg) 0;
}

@media (max-width: 1024px) {
	.wcb-dashboard-shell {
		flex-direction: column;
	}

	.wcb-sidebar {
		width: 100%;
		padding: 0;
		border-inline-end: none;
		border-bottom: 1px solid var(--wcb-border);
	}

	/* Identity stays visible, compact, above the dropdown. */
	.wcb-sidebar-identity {
		order: -1;
		margin: var(--wcb-space-sm);
	}

	.wcb-sidebar-avatar {
		--wcb-avatar-size: 32px;
	}

	.wcb-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 44px;
		padding: var(--wcb-space-md) var(--wcb-space-lg);
		border: 0;
		border-top: 1px solid var(--wcb-border);
		font: inherit;
		font-size: var(--wcb-text-base);
		font-weight: var(--wcb-font-semibold);
		color: var(--wcb-contrast);
		text-align: start;
		cursor: pointer;
	}

	.wcb-dashboard .wcb-nav-toggle {
		background: var(--wcb-base) !important;
		color: var(--wcb-contrast);
		box-shadow: none;
	}

	.wcb-nav-toggle-icon::after {
		content: '\25BE';
		display: block;
		color: var(--wcb-text-tertiary);
		transition: transform var(--wcb-transition-fast);
	}

	.wcb-nav-open .wcb-nav-toggle-icon::after {
		transform: rotate(180deg);
	}

	.wcb-sidebar-nav,
	.wcb-sidebar-cta,
	.wcb-nav-section-label {
		display: none;
	}

	.wcb-sidebar.wcb-nav-open .wcb-sidebar-nav {
		display: flex;
		padding: var(--wcb-space-xs) var(--wcb-space-sm);
	}

	/* Group headings stay in the open menu: "Jobs" under Saved needs its "Saved". */
	.wcb-sidebar.wcb-nav-open .wcb-nav-section-label:not(.screen-reader-text) {
		display: block;
		padding-block-start: var(--wcb-space-sm);
	}

	.wcb-sidebar.wcb-nav-open .wcb-sidebar-cta {
		display: flex;
		width: calc( 100% - ( var(--wcb-space-md) * 2 ) );
		margin: var(--wcb-space-sm) var(--wcb-space-md) var(--wcb-space-md);
	}

	/* The dropdown label already names the tab: keep the H1 for screen
	   readers but don't print it a second time under the label. */
	.wcb-dashboard .wcb-main .wcb-page-title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.wcb-dashboard .wcb-main .wcb-page-header:has(> .wcb-page-title:only-child) {
		margin-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcb-nav-item,
	.wcb-nav-toggle-icon::after {
		transition: none;
	}
}

/* ── Dashboard shell (candidate + employer) ────────────────────────────────
   One copy for both dashboards, which carried drifting duplicates (the
   candidate shell was framed, the employer one was not; panel titles, links
   and the notification rows used different tokens). The shell is the only
   frame; tab content sits directly in it and cards are the level below. */
.wcb-dashboard {
	font-family: inherit;
	font-size: var(--wcb-text-base);
	color: var(--wcb-contrast);
}

.wcb-dashboard-shell {
	display: flex;
	min-height: 600px;
	align-items: stretch;
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-xl);
	overflow: hidden;
}

.wcb-dashboard .wcb-main {
	flex: 1;
	min-width: 0;
	padding: var(--wcb-space-3xl);
	background: var(--wcb-base);
	overflow-y: auto;
}

/* An inline-size container, so grids inside a tab respond to the width they
   actually get (a theme sidebar can leave .wcb-main ~610px on a wide screen). */
.wcb-dashboard .wcb-view-panel {
	display: none;
	container-type: inline-size;
	container-name: wcb-panel;
}

.wcb-dashboard .wcb-view-panel.wcb-view-active {
	display: block;
}

.wcb-dashboard .wcb-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-md);
	margin-bottom: var(--wcb-space-2xl);
}

/* Size, weight and colour come from the shared .wcb-page-title. */
.wcb-dashboard .wcb-page-title {
	margin: 0 0 var(--wcb-space-xs);
}

.wcb-dashboard .wcb-page-sub {
	margin: 0 0 var(--wcb-space-2xl);
	font-size: var(--wcb-text-base);
	color: var(--wcb-text-secondary);
}

.wcb-dashboard .wcb-two-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wcb-space-xl);
}

.wcb-dashboard .wcb-panel {
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-xl);
	overflow: hidden;
}

/* A panel inside the active tab drops its own frame (no box in a box), and with
   no rounded corner to clip it lets a row's '...' menu open past the last row. */
.wcb-dashboard .wcb-view-panel.wcb-view-active .wcb-panel {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	overflow: visible;
}

.wcb-dashboard .wcb-panel--form {
	padding: var(--wcb-space-xl);
}

.wcb-dashboard .wcb-panel-title {
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast);
}

/* (0,3,0): beats the block-scope link reset in frontend-components.css. */
.wcb-dashboard .wcb-main .wcb-panel-link {
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-primary-text); /* text-safe shade: raw primary missed 4.5:1 on tinted panels */
	text-decoration: none;
	cursor: pointer;
}

.wcb-dashboard .wcb-main .wcb-panel-link:hover {
	text-decoration: underline;
}

/* Account and password save feedback. */
.wcb-account-msg {
	margin: 0 0 var(--wcb-space-md);
	padding: var(--wcb-space-sm) var(--wcb-space-md);
	border-radius: var(--wcb-radius-md);
	font-size: var(--wcb-text-sm);
}
.wcb-account-msg[data-type="success"] {
	background: var(--wcb-success-bg, #f0fdf4);
	color: var(--wcb-success-fg, #166534);
}
.wcb-account-msg[data-type="error"] {
	background: var(--wcb-danger-bg-soft, #fef2f2);
	color: var(--wcb-danger-fg, #991b1b);
}

/* Notifications tab: an action bar, then divider rows. */
.wcb-notifications__bar {
	display: flex;
	justify-content: flex-end;
	gap: var(--wcb-space-sm);
	margin-bottom: var(--wcb-space-md);
}

.wcb-bell-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border: none;
	border-radius: var(--wcb-radius-sm);
	background: none;
	font-size: var(--wcb-text-sm);
	color: var(--wcb-primary-text);
	cursor: pointer;
}

.wcb-bell-action:hover {
	background: var(--wcb-surface);
}

.wcb-bell-action svg {
	width: 15px;
	height: 15px;
}

.wcb-bell-clear-all {
	color: var(--wcb-danger-fg, #991b1b);
}

.wcb-bell-list {
	overflow: hidden;
}

.wcb-bell-item {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	border-bottom: 1px solid var(--wcb-border);
}

.wcb-bell-item:last-child {
	border-bottom: none;
}

.wcb-bell-item:hover {
	background: var(--wcb-surface);
}

.wcb-bell-unread {
	background: var(--wcb-info-bg-soft);
}

.wcb-bell-item__link {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	text-decoration: none;
	color: inherit;
}

.wcb-bell-item__link[hidden] {
	display: none;
}

.wcb-bell-item__delete {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-inline-end: var(--wcb-space-sm);
	border: none;
	border-radius: var(--wcb-radius-sm);
	background: none;
	color: var(--wcb-text-secondary);
	cursor: pointer;
	transition: color var(--wcb-transition-snappy), background var(--wcb-transition-snappy);
}

.wcb-bell-item__delete:hover,
.wcb-bell-item__delete:focus-visible {
	color: var(--wcb-danger-fg, #991b1b);
	background: var(--wcb-surface);
}

.wcb-bell-item__delete svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.wcb-bell-msg {
	display: block;
	font-size: var(--wcb-text-sm);
	color: var(--wcb-contrast);
}

.wcb-bell-time {
	display: block;
	margin-top: 2px;
	font-size: var(--wcb-text-xs);
	color: var(--wcb-text-secondary);
}

.wcb-notifications__empty {
	padding: var(--wcb-space-xl);
	text-align: center;
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary);
}

@media (max-width: 1024px) {
	.wcb-dashboard .wcb-main {
		padding: var(--wcb-space-xl);
	}

	/* Stacks with the sidebar-to-dropdown collapse (same breakpoint). */
	.wcb-dashboard .wcb-two-col {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	/* The tab content is no longer inside its own padded card, so the main
	   area keeps a side gutter. */
	.wcb-dashboard .wcb-main {
		padding: var(--wcb-space-xl) var(--wcb-space-lg);
	}

	.wcb-dashboard .wcb-panel--form {
		padding: var(--wcb-space-lg);
	}
}

/* ── Touch targets ────────────────────────────────────────────────────────── */
/* The responsive contract is a 40px minimum tap target. Small controls keep their
   look on a pointer device and gain height (not size) on touch and on phones. */
@media (pointer: coarse), (max-width: 640px) {
	.wcb-btn--sm,
	.wcb-chip,
	.wcb-panel-link,
	.wcb-bell-action,
	.wcb-filter-panel__clear,
	.wcb-active-chip,
	.wcb-apps-filter-bar .wcb-filter-pill {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	/* Icon-only, not a text pill — needs both dimensions bumped. */
	.wcb-active-chip-remove {
		min-width: 40px;
		min-height: 40px;
	}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.wcb-detail-hero { padding: var(--wcb-space-2xl); }
}

@media (max-width: 640px) {
	.wcb-page-header  { gap: var(--wcb-space-sm); }
	.wcb-page-title   { font-size: var(--wcb-text-xl); }
	.wcb-card-head    { padding: var(--wcb-space-md) var(--wcb-space-lg); }
	.wcb-card-body    { padding: var(--wcb-space-lg); }
	.wcb-card-foot    { padding: var(--wcb-space-md) var(--wcb-space-lg); }

	.wcb-detail-hero    { padding: var(--wcb-space-xl); }
	.wcb-detail-section { padding: var(--wcb-space-lg); }

	/* Sidebar cards step down with the sections beside them. */
	:is(.wcb-job-single, .wcb-company-profile, .wcb-rs) :is(.wcb-sidebar-card, .wcb-cp-side-card, .wcb-rs-aside-card) {
		padding: var(--wcb-space-lg);
	}
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

/* The only `!important` declaration in this file. Honoring the user's
 * prefers-reduced-motion preference must win over every other transition
 * rule on the page, including element-style declarations a theme might
 * set inline - that's exactly the case `!important` exists for, per
 * WCAG 2.3.3. Do not refactor away. */
@media (prefers-reduced-motion: reduce) {
	.wcb-btn,
	.wcb-card,
	[class*="wcb-"] :is(input, select, textarea) {
		transition: none !important;
	}
}

/* ── Application row bits shared by both dashboards ─────────────────────────
 * Name, job line and status badge in the overview and applications lists.
 * One definition; the dashboard styles/ trees carry layout only. */
.wcb-app-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
}

.wcb-app-name {
	display: block;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

.wcb-app-job {
	font-size: var(--wcb-text-xs);
	color: var(--wcb-text-secondary);
}

.wcb-status-badge {
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	padding: 2px var(--wcb-space-sm);
	border-radius: var(--wcb-radius-full);
	background: var(--wcb-bg-hover);
	color: var(--wcb-text-secondary);
	/* No text-transform: labels arrive translated and cased ('Full-time', not 'Full-Time'). */
	white-space: nowrap;
	flex-shrink: 0;
}

/* Dashboards: hide the panels while a restored tab replaces the server
 * default (DashboardTabs::print_guard). The delayed reveal is a safety net
 * so a failed script never leaves the panels hidden. */
html[data-wcb-tab-pending] .wcb-dashboard .wcb-main {
	visibility: hidden;
	animation: wcb-tab-reveal 0s 1.5s forwards;
}

@keyframes wcb-tab-reveal {
	to {
		visibility: visible;
	}
}

/* Request-failed toast (@wcb/ui showError). */
.wcb-toast {
	position: fixed;
	inset-block-end: var(--wcb-space-xl);
	inset-inline: var(--wcb-space-lg);
	z-index: 100000;
	box-sizing: border-box;
	max-width: 32rem;
	margin-inline: auto;
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	border-radius: var(--wcb-radius-lg);
	/* White label stays; the fill is darkened (lightness capped, as
	 * --wcb-primary-strong does) so any theme's danger red keeps 4.5:1. */
	background: #b91c1c;
	background: oklch(from var(--wcb-danger) min(l, 0.5) c h);
	color: #ffffff;
	font-size: var(--wcb-text-sm);
	line-height: 1.4;
	text-align: center;
	box-shadow: var(--wcb-shadow-lg);
}

.wcb-toast[hidden] {
	display: none;
}