/* ÍSA Agency — supporting layout & interaction CSS.
   Design system: ink navy / signal orange / cool paper, Work Sans (direction B,
   chosen 7 Sep 2026). Flat surfaces, bordered cards, no gradients, no blur.
   Colour hex values live in theme.json; this file maps them to the design
   system's semantic aliases and to non-colour tokens. */

/* ---- Design system tokens ---- */
:root {
	/* Surfaces */
	--surface-page: var(--wp--preset--color--canvas);   /* white now */
	--surface-card: var(--wp--preset--color--base);
	--surface-sunken: var(--wp--preset--color--surface);
	--surface-tint: var(--wp--preset--color--tint);          /* hero stage, feature panels */
	--surface-brand: var(--wp--preset--color--brand-deep);   /* the one solid block */
	/* Text */
	--text-primary: var(--wp--preset--color--contrast);
	--text-secondary: var(--wp--preset--color--secondary);
	--text-muted: var(--wp--preset--color--muted);
	--text-on-brand: #fff;
	--text-on-brand-muted: var(--wp--preset--color--on-brand-muted);
	--text-brand: var(--wp--preset--color--primary);
	--text-accent: var(--wp--preset--color--accent-text);    /* the only lavender used as text */
	/* Brand */
	--brand: var(--wp--preset--color--primary);
	--brand-hover: var(--wp--preset--color--primary-hover);
	--brand-active: var(--wp--preset--color--primary-active);
	--brand-soft: var(--wp--preset--color--primary-soft);
	/* Accent — lavender. Unlike the previous orange this MAY carry text and be a
	   button: --text-primary on --accent measures 9.3:1. --accent-strong is for
	   bars, markers, progress and the active-nav underline. */
	--accent: var(--wp--preset--color--accent);
	--accent-hover: var(--wp--preset--color--accent-hover);
	--accent-strong: var(--wp--preset--color--accent-strong);
	--accent-soft: var(--wp--preset--color--accent-soft);
	/* Borders */
	--border-subtle: var(--wp--preset--color--border);       /* dividers only now */
	--border-card: var(--wp--preset--color--card-edge);      /* card and panel edges */
	--border-strong: var(--wp--preset--color--border-strong);
	--focus-ring: var(--wp--preset--color--accent-text);
	/* Semantic */
	--success: var(--wp--preset--color--success);
	--success-soft: var(--wp--preset--color--success-soft);
	--warning: var(--wp--preset--color--warning);
	--warning-soft: var(--wp--preset--color--warning-soft);
	--error: var(--wp--preset--color--error);
	--error-soft: var(--wp--preset--color--error-soft);
	--info: var(--wp--preset--color--info);
	--info-soft: var(--wp--preset--color--info-soft);
	--pending: var(--wp--preset--color--warning);
	--pending-soft: var(--wp--preset--color--warning-soft);
	--overlay: rgba(18, 32, 44, 0.55);

	/* Type scale — mobile defaults; desktop values below at 768px.
	   Body never drops below 16px in the job-seeker area. */
	--text-display-size: 2rem;      --text-display-lh: 2.5rem;
	--text-h1-size: 1.75rem;        --text-h1-lh: 2.25rem;
	--text-h2-size: 1.375rem;       --text-h2-lh: 1.875rem;
	--text-h3-size: 1.125rem;       --text-h3-lh: 1.625rem;
	--measure: 36rem;

	/* Shape */
	--radius-sm: 0.375rem;  /* checkboxes, tags */
	--radius-md: 0.625rem;  /* inputs, buttons */
	--radius-lg: 1rem;      /* cards */
	--radius-xl: 1.5rem;    /* panels, mockups, the stage */
	--radius-full: 9999px;  /* pills, chips, eyebrow, nav items */
	--border-w: 1px;
	--border-w-strong: 2px;

	/* Elevation — the page is flat and cards in flow are bordered. --shadow-float
	   is only for cards that float over a stage or mockup. */
	--shadow-float: 0 1px 2px rgba(18, 32, 44, 0.05), 0 12px 32px -8px rgba(18, 32, 44, 0.14);
	--shadow-1: 0 1px 2px rgba(18, 32, 44, 0.08), 0 4px 12px rgba(18, 32, 44, 0.10);
	--shadow-2: 0 8px 32px rgba(18, 32, 44, 0.18);

	/* Spacing scale. The WP presets (--wp--preset--spacing--NN) cover block
	   layout; these are the design system's own steps, which the components
	   ported from the UI kit reference directly. Steps 1-4 sit inside
	   components, 5-7 between them, 8-10 are page rhythm. */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;
	--content-max: 72rem;
	--content-max-form: 36rem;

	/* Controls */
	--tap-min: 2.75rem;         /* 44px minimum tap target */
	--control-h: 3rem;          /* 48px job-seeker area */
	--control-h-dense: 2.25rem; /* 36px admin and employer tables */

	/* Motion */
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 320ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 768px) {
	:root {
		--text-display-size: 2.75rem; --text-display-lh: 3.25rem;
		--text-h1-size: 2.25rem;      --text-h1-lh: 2.75rem;
		--text-h2-size: 1.75rem;      --text-h2-lh: 2.25rem;
		--text-h3-size: 1.25rem;      --text-h3-lh: 1.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}

/* Form controls are content-box by default and this theme has no reset (Modern
   Normalize is off), so `width: 100%` plus 24px of padding and a 2px border made
   every full-width input 26px wider than its container — enough to scroll the
   page sideways on a 375px phone. Scoped to controls rather than a global reset,
   which would shift the block layout the rest of the theme is built on. */
input, select, textarea, button {
	box-sizing: border-box;
}

/* ---- Motion & focus baseline ---- */
a,
.wp-element-button,
.wp-block-button__link,
input,
select,
textarea {
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.wp-element-button,
.wp-block-button__link {
	cursor: pointer;
}

/* Focus is always visible: 2px ring, 2px offset. */
a:focus-visible,
.wp-element-button:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: var(--border-w-strong) solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

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

/* ---- Buttons ---- */
/* Hover shifts background one step, press two. No transform, no scale. */
.wp-block-button__link {
	min-height: var(--control-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* "On brand" = white button, for use on the deep ink footer and admin sidebar. */
.wp-block-button.is-style-on-brand .wp-block-button__link {
	background-color: var(--surface-card);
	color: var(--brand);
}
.wp-block-button.is-style-on-brand .wp-block-button__link:hover {
	background-color: var(--surface-sunken);
	color: var(--brand-active);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--surface-card);
	border: var(--border-w) solid var(--border-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--surface-sunken);
}

/* Full-width primary action, the mobile default in the job-seeker flow. */
.wp-block-button.is-style-full-width,
.wp-block-button.is-style-full-width .wp-block-button__link {
	width: 100%;
}

/* ---- Forms ---- */
/* This platform is mostly forms, so controls are part of the system, not an
   afterthought. Input borders must clear 3:1, so they use --border-strong. */
.isa-field {
	display: block;
	margin-bottom: var(--wp--preset--spacing--50);
	max-width: var(--measure);
}
.isa-field__label {
	display: block;
	font-weight: 500;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--text-primary);
}
.isa-field__optional {
	font-weight: 400;
	color: var(--text-muted);
}
.isa-field__help {
	display: block;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--text-secondary);
	margin-bottom: var(--wp--preset--spacing--20);
}
.isa-field__error {
	display: block;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--error);
	margin-top: var(--wp--preset--spacing--20);
}
.isa-field__count {
	display: block;
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: var(--wp--preset--spacing--20);
	font-variant-numeric: tabular-nums;
}

.isa-field input[type="text"],
.isa-field input[type="email"],
.isa-field input[type="tel"],
.isa-field input[type="date"],
.isa-field input[type="number"],
.isa-field select,
.isa-field textarea {
	width: 100%;
	min-height: var(--control-h);
	padding: 0.6875rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--text-primary);
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-md);
}
.isa-field textarea {
	min-height: 7rem;
	resize: vertical;
}
.isa-field input::placeholder,
.isa-field textarea::placeholder {
	color: var(--text-muted);
}
.isa-field [aria-invalid="true"],
.isa-field .is-invalid {
	border-width: var(--border-w-strong);
	border-color: var(--error);
}
.isa-field :disabled {
	background: var(--surface-sunken);
	color: var(--text-muted);
	cursor: not-allowed;
}
.isa-field [readonly] {
	background: var(--surface-sunken);
}

/* Checkbox and radio: 44px tap row, not a 16px square. */
.isa-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--tap-min);
	padding: var(--wp--preset--spacing--20) 0;
}
.isa-choice input {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15rem;
	flex: 0 0 auto;
	accent-color: var(--brand);
}

/* Dense controls: admin and employer tables only. */
.isa-dense .isa-field input,
.isa-dense .isa-field select,
.isa-dense .wp-block-button__link {
	min-height: var(--control-h-dense);
	font-size: 0.875rem;
}

/* ---- Header ---- */
/* Solid, bordered, no blur and no transparency. */
.isa-header {
	background: var(--surface-card);
	border-bottom: var(--border-w) solid var(--border-subtle);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Typographic wordmark: "ÍSA" 600 + "Agency" 400. No symbol. 20px floor. */
.isa-wordmark {
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--text-primary);
	text-decoration: none;
	white-space: nowrap;
}
.isa-wordmark strong {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.isa-header__search {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: 0 0.75rem;
	min-height: var(--control-h-dense);
	min-width: 200px;
	max-width: 280px;
	color: var(--text-muted);
}
.isa-header__search input {
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.875rem;
	width: 100%;
	color: var(--text-primary);
	/* Fill the wrapper so the whole 36px bar is the click target, not just the
	   19px text line — otherwise clicking the padding does not focus it. */
	align-self: stretch;
	min-height: var(--control-h-dense);
	padding: 0;
}
.isa-header__search input:focus { outline: none; }
/* The header search is the least essential item in the bar and there is no
   room for it beside the nav and the auth actions until 1200px; the hero
   search covers the need below that. */
@media (max-width: 1199px) { .isa-header__search { display: none; } }

/* ---- Hero ---- */
/* Solid canvas. No gradient wash, no photography in a critical path. */
.isa-hero {
	background: var(--surface-page);
}

/* ---- Search (marketplace pattern: the search field is the primary action) ---- */
.isa-search {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	max-width: 720px;
	margin-inline: auto;
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-lg);
	padding: var(--wp--preset--spacing--20);
	align-items: center;
}
.isa-search input[type="search"],
.isa-search input[type="text"] {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	min-height: var(--control-h);
	padding: 0 0.5rem;
	color: var(--text-primary);
	min-width: 0;
}
.isa-search input::placeholder { color: var(--text-muted); }
.isa-search input:focus { outline: none; }
.isa-search .wp-block-button__link { white-space: nowrap; }
@media (max-width: 600px) {
	.isa-search { flex-direction: column; align-items: stretch; }
	.isa-search .wp-block-button,
	.isa-search .wp-block-button__link { width: 100%; }
}

/* ---- Bands ---- */
/* Trust / social proof band. Sunken paper, not a colour wash. */
.isa-band {
	background: var(--surface-sunken);
	border-block: var(--border-w) solid var(--border-subtle);
}
/* Brand band: the one place the ink navy is used as a solid block. */
.isa-band-brand {
	background: var(--surface-brand);
	color: var(--text-on-brand);
}
.isa-band-brand a { color: var(--text-on-brand); }

/* ---- Footer ---- */
/* Carries the trust content: company, address, reg. no., contact, terms. */
.isa-footer {
	background: var(--surface-brand);
	color: var(--text-on-brand);
	border-top: 0;
}
.isa-footer a {
	color: var(--text-on-brand);
}
.isa-footer .isa-footer__fine {
	color: var(--text-on-brand-muted);
	font-size: 0.875rem;
}

/* ---- Cards ---- */
/* Bordered, never shadowed. */
.isa-card {
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-lg);
	padding: var(--wp--preset--spacing--50);
}
/* Equal height only where cards sit side by side in a row. Applying
   `height: 100%` to every card broke any card that is a direct child of a
   section band: the band is a grid, so the percentage resolved against the
   whole container and the card overflowed its row onto the content below. */
.isa-grid-2 > .isa-card,
.isa-grid-3 > .isa-card,
.isa-price > .isa-card {
	height: 100%;
}
.isa-card.is-selected {
	border-width: var(--border-w-strong);
	border-color: var(--brand);
}
.isa-card.is-placeholder {
	border-style: dashed;
	color: var(--text-muted);
	background: var(--surface-page);
}

/* Accent marker: a 3px bar is the only structural use of the orange. */
.isa-card.has-accent-marker {
	border-left: 3px solid var(--accent-strong);
}

/* ---- Status pills ---- */
/* Status text says what happens next and when: "In review · about 1 working day". */
.isa-status {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.625rem;
	border-radius: var(--radius-full);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
}
.isa-status--pending   { background: var(--pending-soft); color: var(--pending); }
.isa-status--published { background: var(--success-soft); color: var(--success); }
.isa-status--rejected  { background: var(--error-soft);   color: var(--error); }
.isa-status--closed    { background: var(--surface-sunken); color: var(--text-secondary); }
.isa-status--info      { background: var(--info-soft);    color: var(--info); }
.isa-status--brand     { background: var(--brand-soft);   color: var(--text-brand); }

/* ---- Withheld block ---- */
/* Employers see an anonymised profile. The hidden part must read as present
   and deliberately withheld, not simply absent. */
.isa-withheld {
	background: var(--surface-sunken);
	border: var(--border-w) dashed var(--border-strong);
	border-radius: var(--radius-md);
	padding: var(--wp--preset--spacing--40);
	color: var(--text-secondary);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* ---- Lists ---- */
.wp-block-list.is-style-no-bullet {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-block-list.is-style-no-bullet li { margin: 0.35rem 0; }

/* ---- Prose measure ---- */
/* Short lines for a second-language reader: ~65 characters. */
.isa-prose > p,
.isa-prose > ul,
.isa-prose > ol {
	max-width: var(--measure);
}

/* Tabular figures for data, price and metric regions. */
.isa-data,
.isa-card .wp-block-table table {
	font-variant-numeric: tabular-nums;
}

/* ---- Portal shell: sidebar + content ---- */
.isa-portal {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
@media (max-width: 781px) { .isa-portal { grid-template-columns: 1fr; } }

.isa-portal__sidebar {
	position: sticky;
	top: 5.5rem;
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-lg);
	padding: var(--wp--preset--spacing--40);
}

.isa-portal__sidebar .wp-block-navigation,
.isa-portal__sidebar ul {
	flex-direction: column;
	gap: 0.25rem;
}
.isa-portal__sidebar .wp-block-navigation-item { display: block; width: 100%; }
.isa-portal__sidebar .wp-block-navigation-item__content {
	display: block;
	padding: 0.625rem 0.75rem;
	min-height: var(--tap-min);
	border-radius: var(--radius-full);
	color: var(--text-primary);
}
.isa-portal__sidebar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	background: var(--brand-soft);
	color: var(--text-brand);
	font-weight: 500;
}
.isa-portal__sidebar .wp-block-navigation-item__content:hover {
	background: var(--surface-sunken);
	color: var(--text-brand);
}

/* ---- Header bar height & mobile nav ---- */
/* The system specifies a 56px bar on mobile and 64px on desktop. */
.isa-header__bar {
	min-height: 3.5rem;
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 900px) {
	.isa-header__bar { min-height: 4rem; }
}

/* The wordmark holds its 24px size and never wraps; 20px is the floor. */
.isa-header .isa-wordmark {
	font-size: 1.5rem;
	flex: 0 0 auto;
}
@media (max-width: 400px) {
	.isa-header .isa-wordmark { font-size: 1.25rem; }
}

/* Nav toggle: the primary mobile control, so it gets a full 44px target. */
.isa-header .wp-block-navigation__responsive-container-open,
.isa-header .wp-block-navigation__responsive-container-close {
	min-width: var(--tap-min);
	min-height: var(--tap-min);
	align-items: center;
	justify-content: center;
}

/* Full-width overlay menu: 44px rows, not 19px text links. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	width: 100%;
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: var(--border-w) solid var(--border-subtle);
}

/* Header "Log in" text link also needs a real target next to the button. */
.isa-header__bar p a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
}

/* ---- Stacked search affordance ---- */
/* Borderless fields read as one field in the desktop row, but stacked on mobile
   they lose all affordance, so they get a divider and their own label space. */
@media (max-width: 600px) {
	.isa-search input[type="search"],
	.isa-search input[type="text"] {
		border-bottom: var(--border-w) solid var(--border-subtle);
		border-radius: 0;
		padding-inline: 0.75rem;
	}
	.isa-search input:last-of-type {
		border-bottom: 0;
	}
}

/* ---- Footer link targets ---- */
/* Stacked link lists in the footer are tap targets too. */
@media (max-width: 781px) {
	.isa-footer .wp-block-list.is-style-no-bullet a {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-min);
	}
}

/* Below 900px the bar is wordmark + toggle only: the auth actions are 218px
   wide and would wrap the bar to two rows, so they move into the overlay menu
   (.isa-nav-auth) and hide again once the bar has room for them. */
/* WP core switches the nav from overlay to inline at 600px, but the bar has no
   room for the wordmark plus four links plus the auth actions until 900px — in
   between it wrapped to two or three rows. So the overlay is held until 900px,
   the same point the header search appears. */
@media (max-width: 899px) {
	.isa-header .isa-header__auth { display: none; }
	.isa-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.isa-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
@media (min-width: 900px) {
	.isa-header .wp-block-navigation-item.isa-nav-auth { display: none; }
}

/* The wordmark is a link home, so it gets a real tap target too. */
.isa-header .isa-wordmark {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
}

/* Desktop nav links: 19px of text is under WCAG 2.2 2.5.8's 24x24 minimum, and
   the 64px bar has room for a full 44px row, so take it rather than lean on the
   spacing exception. */
@media (min-width: 900px) {
	.isa-header .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-min);
	}
}

/* Footer links are standalone list links, so they need WCAG 2.2 2.5.8's 24px
   minimum at every width, not just on mobile. */
.isa-footer .wp-block-list.is-style-no-bullet a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
}

/* The footer wordmark is a span, not a link, so it needs no tap target. */
.isa-footer .isa-wordmark {
	min-height: 0;
	font-size: 1.25rem;
	color: var(--text-on-brand);
}

/* ---- Refresh additions (7 Sep 2026) ---- */

/* Accent button: lavender fill with ink text. This is new — the previous signal
   orange could not carry text at all (4.04:1), whereas --text-primary on
   --accent measures 9.3:1, so the accent is now a real button variant. */
.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--accent);
	color: var(--text-primary);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background-color: var(--accent-hover);
	color: var(--text-primary);
}
.wp-block-button.is-style-accent .wp-block-button__link:active {
	background-color: var(--accent-strong);
}

/* Eyebrow chip: sits above a display headline. Pill, accent-soft fill, and the
   only lavender that may be text. Sentence case — never all-caps. */
.isa-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--text-accent);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

/* Float: the only shadow allowed on a card, and only when it floats over a
   stage or a mockup (hero, pricing card, receipt). Cards in flow stay bordered. */
.isa-float {
	box-shadow: var(--shadow-float);
	border-color: transparent;
}

/* Stage: the rounded tint panel the hero mockup and feature panels sit on. */
.isa-stage,
.isa-panel {
	background: var(--surface-tint);
	border-radius: var(--radius-xl);
}

/* Deep block: footer, trust section and admin sidebar all share one solid ink
   surface. Secondary text on it uses --text-on-brand-muted (10.4:1). */
.isa-block-deep {
	background: var(--surface-brand);
	color: var(--text-on-brand);
	border-radius: var(--radius-xl);
}
.isa-block-deep a { color: var(--text-on-brand); }
.isa-block-deep .isa-muted { color: var(--text-on-brand-muted); }

/* Active nav underline uses --accent-strong (3.1:1 against white — a UI
   boundary, not text). */
.isa-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	box-shadow: inset 0 -2px 0 var(--accent-strong);
}

/* ================================================================
   Hero pattern (public pages) — 7 Sep refresh
   Eyebrow chip, display headline, one accent button plus one
   secondary, then a framed product mockup with floating cards over
   a rounded tint stage. Ported from ui_kits/isaagency/Home.jsx.
   ================================================================ */

.isa-hero {
	display: grid;
	gap: var(--space-5);
	justify-items: center;
	text-align: center;
}

/* The hero headline deliberately runs larger than the display token:
   36px at 360 up to 64px at 1440, per the artboard. */
.isa-hero__display {
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	max-width: 51.25rem;
	margin: 0;
}
.isa-hero__lede {
	max-width: 35rem;
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-lh);
	color: var(--text-muted);
	margin: 0;
}
.isa-hero .wp-block-buttons { justify-content: center; }

/* ---- Stage + mockup ---- */
.isa-stage-wrap {
	position: relative;
	width: 100%;
	margin-top: var(--space-4);
	text-align: left;
}
.isa-stage-wrap__stage {
	position: absolute;
	background: var(--surface-tint);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.isa-mock {
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-float);
	overflow: hidden;
}
.isa-mock__bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	height: 48px;
	padding: 0 var(--space-4);
	border-bottom: var(--border-w) solid var(--border-subtle);
}
.isa-mock__body {
	padding: var(--space-4);
	display: grid;
	gap: var(--space-3);
}
.isa-mock__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
}

/* Small wordmark inside the mockup chrome. */
.isa-mark {
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--text-primary);
}
.isa-mark b { font-weight: 600; letter-spacing: 0.02em; }
.isa-mark span { font-weight: 400; }

.isa-avatar {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-full);
	background: var(--brand-soft);
	color: var(--text-brand);
	font-size: 0.8125rem;
	font-weight: 600;
	flex: none;
}

.isa-caption {
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-lh);
	color: var(--text-muted);
}
.isa-small { font-size: var(--text-small-size); line-height: var(--text-small-lh); }

/* Dense job card, as used inside the mockup. */
.isa-jobcard {
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	display: grid;
	gap: var(--space-2);
	background: var(--surface-card);
}
.isa-jobcard__role { font-weight: 500; }

/* MatchLevel: three bars, no percentages — the indicator must not imply
   more precision than the matching logic has. */
.isa-match { display: flex; align-items: center; gap: var(--space-2); }
.isa-match__bars { display: flex; gap: 3px; }
.isa-match__bars i {
	display: block;
	width: 14px;
	height: 4px;
	border-radius: 2px;
	background: var(--accent-soft);
}
.isa-match--possible .isa-match__bars i:nth-child(1),
.isa-match--good .isa-match__bars i:nth-child(-n+2),
.isa-match--strong .isa-match__bars i { background: var(--accent-strong); }

/* ---- Floating cards ---- */
.isa-floatcard {
	position: absolute;
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
	padding: var(--space-4);
	display: grid;
	gap: var(--space-2);
}
.isa-floatcard__figure { font-size: 1.75rem; line-height: 2rem; font-weight: 600; }
.isa-bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 36px;
	margin-top: var(--space-1);
}
.isa-bars i {
	display: block;
	flex: 1;
	border-radius: 3px;
	background: var(--accent-soft);
}
.isa-bars i:last-child { background: var(--accent-strong); }

/* The locked-details chip on the candidate card. */
.isa-lockchip {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--accent-soft);
	color: var(--text-accent);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lh);
	font-weight: 500;
}
.isa-lockchip svg { flex: none; }

/* Fee box — the price is stated fully and once. */
.isa-feebox { gap: var(--space-3); }
.isa-feebox__amount { font-size: 2rem; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }

/* ---- Compact tier: below 1024px only the mock and one stat ---- */
.isa-stage-wrap { height: 25rem; }
.isa-stage-wrap__stage { inset: 3rem 0 0; border-radius: var(--radius-xl); }
.isa-mock--main {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - 2rem, 22rem);
}
.isa-floatcard--stat { left: 0; top: 15.25rem; width: 8.25rem; }
.isa-floatcard--fee,
.isa-floatcard--contact,
.isa-floatcard--review { display: none; }
.isa-mock__row--second { display: none; }

/* ---- Full tier: the five-card desktop composition ---- */
@media (min-width: 1024px) {
	.isa-hero { gap: var(--space-6); }
	/* The composition is laid out for 1440, but the hero text sits in the 1152
	   content box. Break the stage out to its designed width, centred on the
	   viewport, or the fee card clips the second job card. */
	.isa-stage-wrap {
		height: 28.75rem;
		width: min(90rem, calc(100vw - 3rem));
		max-width: none;
		justify-self: center;
	}
	.isa-stage-wrap__stage {
		inset: 7.5rem 6rem 0;
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	}
	.isa-mock--main { width: 35rem; }
	.isa-mock__row--second { display: grid; }
	.isa-floatcard--stat    { left: 1.5rem; top: 3.5rem; width: 10.5rem; }
	.isa-floatcard--fee     { left: 0; bottom: 2.5rem; width: 20rem; display: grid; }
	.isa-floatcard--contact { right: 0; top: 2.5rem; width: 15.625rem; display: grid; }
	.isa-floatcard--review  { right: 2rem; bottom: 4rem; width: 15rem; display: grid; }
}

/* Tablet band. The artboard only specifies 360 and 1440; between 600 and 1023
   a 352px mock looks adrift in ~900px of stage, so the mock grows and the
   review card joins it. */
@media (min-width: 600px) and (max-width: 1023px) {
	.isa-stage-wrap { height: 27rem; }
	.isa-mock--main { width: min(100% - 12rem, 27rem); }
	.isa-floatcard--review {
		display: grid;
		right: 0;
		bottom: 2rem;
		width: 14rem;
	}
	.isa-floatcard--stat { left: 0; top: 4rem; }
}

/* The mobile artboard uses full-width hero buttons — thumb-reachable, and it
   stops the accent CTA reading as a small chip on a 360px screen. */
@media (max-width: 599px) {
	.isa-hero .wp-block-buttons.is-layout-flex {
		display: grid;
		grid-template-columns: 1fr;   /* WP's justify-content:center otherwise
		                                 centres an auto-width track */
		gap: var(--space-2);
		width: 100%;
	}
	.isa-hero .wp-block-button,
	.isa-hero .wp-block-button__link {
		width: 100%;
	}
}

/* ================================================================
   Content-page patterns (stage 1)
   Sections, checklists, numbered tracks, key/value rows, FAQ and
   the pricing pair. Used by the marketing, guide and legal pages.
   ================================================================ */

/* Section rhythm. One class so page spacing cannot drift page to page. */
.isa-section { padding-block: var(--space-8); }
.isa-section--tight { padding-block: var(--space-7); }
.isa-section--tint { background: var(--surface-tint); }
.isa-section--sunken { background: var(--surface-sunken); }
.isa-section--deep {
	background: var(--surface-brand);
	color: var(--text-on-brand);
}
.isa-section--deep :where(h1,h2,h3,h4,p,li,strong,dt) { color: inherit; }
.isa-section--deep a { color: var(--text-on-brand); }
/* dd carries --text-secondary by default, which is 1.78:1 on the deep ink and
   fails badly. The system has a token for exactly this: on-brand-muted
   (lavender-300, 10.4:1 on ink-900). Written out rather than wrapped in
   :where() — :where() contributes no specificity, so the rule lost to
   `.isa-kv dd`. */
.isa-section--deep .isa-kv dd,
.isa-section--deep .isa-muted { color: var(--text-on-brand-muted); }
/* Divider lines are near-white on this ground, so soften them. */
.isa-section--deep .isa-kv > div { border-color: rgba(255,255,255,.14); }

/* Page header: eyebrow, title, standfirst, held to a readable measure. */
.isa-page-head { max-width: 44rem; }
.isa-page-head > * + * { margin-top: var(--space-4); }
.isa-lede {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-lh);
	color: var(--text-secondary);
	max-width: var(--measure);
}

/* Checklist — a tick per line. Used for what a fee covers and what is
   never charged, so the tick has to read as affirmation, not decoration. */
.isa-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.isa-checklist li {
	position: relative;
	padding-left: 2rem;
	color: var(--text-secondary);
}
/* Circle. */
.isa-checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: .15rem;
	width: 1.25rem; height: 1.25rem;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
}
/* Tick, drawn as two borders on a rotated box so no icon font is needed.
   Kept on ::after so it paints above the circle rather than under it. */
.isa-checklist li::after {
	content: "";
	position: absolute;
	left: .39rem; top: .49rem;
	width: .29rem; height: .5rem;
	border-right: 2px solid var(--text-accent);
	border-bottom: 2px solid var(--text-accent);
	transform: rotate(45deg);
}
.isa-checklist--plain li::before { background: var(--surface-sunken); }
.isa-checklist--plain li::after { border-color: var(--text-secondary); }

/* Numbered track — a real sequence, so the number carries information. */
.isa-track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.isa-track > li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: var(--space-4);
	align-items: start;
}
.isa-track > li::before {
	content: counter(step);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--text-accent);
}
.isa-track strong { display: block; font-weight: 600; }
.isa-track p { margin-top: var(--space-1); color: var(--text-secondary); }

/* Key/value rows — company facts, payment facts, permit requirements. */
.isa-kv { display: grid; gap: 0; margin: 0; }
.isa-kv > div {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) 1fr;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-top: var(--border-w) solid var(--border-subtle);
	align-items: baseline;
}
.isa-kv > div:last-child { border-bottom: var(--border-w) solid var(--border-subtle); }
.isa-kv dt { font-weight: 500; }
.isa-kv dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 599px) {
	.isa-kv > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Grids for card rows. Content sets the height; no stretching. */
.isa-grid-2, .isa-grid-3 { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 768px) {
	.isa-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.isa-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* FAQ — native details/summary, so it works without JS. */
.isa-faq { display: grid; gap: 0; }
.isa-faq details {
	border-top: var(--border-w) solid var(--border-subtle);
}
.isa-faq details:last-of-type { border-bottom: var(--border-w) solid var(--border-subtle); }
.isa-faq summary {
	cursor: pointer;
	list-style: none;
	padding: var(--space-4) 2.5rem var(--space-4) 0;
	font-weight: 500;
	position: relative;
	min-height: var(--tap-min);
}
.isa-faq summary::-webkit-details-marker { display: none; }
.isa-faq summary::after {
	content: "";
	position: absolute; right: .5rem; top: 1.5rem;
	width: .55rem; height: .55rem;
	border-right: 2px solid var(--text-accent);
	border-bottom: 2px solid var(--text-accent);
	transform: rotate(45deg);
	transition: transform var(--duration-fast) var(--ease-standard);
}
.isa-faq details[open] summary::after { transform: rotate(225deg); top: 1.7rem; }
.isa-faq details > p { margin: 0 0 var(--space-4); color: var(--text-secondary); max-width: var(--measure); }

/* Price pair — two cards, the seeker one carrying the accent. */
.isa-price { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 768px) { .isa-price { grid-template-columns: repeat(2, 1fr); } }
.isa-price__amount {
	font-size: 2.25rem; line-height: 1.1; font-weight: 600;
	letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.isa-price__unit { color: var(--text-muted); font-size: var(--text-small-size); }
.isa-card.is-featured { border-color: var(--accent-strong); border-width: var(--border-w-strong); }

/* Permit group pill row */
.isa-pill {
	display: inline-flex; align-items: center;
	padding: 2px .625rem; border-radius: var(--radius-full);
	font-size: var(--text-small-size); font-weight: 500;
}
.isa-pill--ok { background: var(--success-soft); color: var(--success); }
.isa-pill--info { background: var(--info-soft); color: var(--info); }
.isa-pill--pending { background: var(--pending-soft); color: var(--pending); }

/* Legal pages: numbered sections at a readable measure. */
.isa-legal { max-width: var(--measure); }
.isa-legal ol { list-style: none; margin: 0; padding: 0; counter-reset: sec; display: grid; gap: var(--space-5); }
.isa-legal ol > li { counter-increment: sec; }
.isa-legal ol > li h3 { margin: 0; display: flex; gap: var(--space-3); }
.isa-legal ol > li h3::before {
	content: counter(sec) ".";
	font-family: var(--font-mono);
	font-weight: 400;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.isa-legal ol > li p { margin-top: var(--space-2); color: var(--text-secondary); }
.isa-muted { color: var(--text-muted); }

/* Section bands are alignfull, so the inner column is constrained by WP's own
   content width. The page head sits at the top of the first band. */
.isa-section > :where(.isa-page-head) { margin-top: 0; }
.isa-section + .isa-section { border-top: 0; }
/* Adjacent bands of the same tone would read as one block, so collapse the
   doubled padding between them. */
.isa-section--sunken + .isa-section--sunken,
.isa-section--tint + .isa-section--tint { padding-top: 0; }

/* Section bands lay out their own centred column with grid, rather than relying
   on WP's constrained layout. WP centres a band's content by giving every
   unaligned child `margin-left: auto !important` — which also centres any child
   that sets its own max-width, so the page head and the ledes drifted to the
   middle. Cancelling that margin alone loses the column with it, because the
   one declaration was doing both jobs. Grid separates them: the band centres
   one column, and children sit left inside it. */
.wp-block-group.isa-section {
	display: grid;
	grid-template-columns: minmax(0, var(--content-max));
	justify-content: center;
	padding-inline: var(--page-gutter);
}
.wp-block-group.isa-section > * {
	/* !important is the only thing that beats WP's !important. */
	margin-inline: 0 !important;
}
/* Deliberate exception: content that really should centre inside a band. */
.wp-block-group.isa-section > .has-text-align-center {
	justify-self: center;
}

/* ================================================================
   Jobs (stage 2) — filter bar, listing, job detail
   ================================================================ */

/* Filter bar. Plain GET form: no JS, which matters on a mid-range phone
   with limited data. */
.isa-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: end;
	padding: var(--space-4);
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-lg);
	margin-block: var(--space-5) var(--space-4);
}
.isa-filter { display: grid; gap: var(--space-2); flex: 1 1 12rem; min-width: 0; }
.isa-filter__label { font-size: var(--text-small-size); font-weight: 500; }
.isa-filters select {
	width: 100%;
	min-height: var(--control-h);
	padding: 0 2rem 0 .75rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--text-primary);
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-md);
	appearance: none;
	/* chevron */
	background-image: linear-gradient(45deg, transparent 49%, var(--text-secondary) 50%), linear-gradient(-45deg, transparent 49%, var(--text-secondary) 50%);
	background-size: .4rem .4rem, .4rem .4rem;
	background-position: right 1.15rem center, right .78rem center;
	background-repeat: no-repeat;
}
.isa-filters__go { flex: 0 0 auto; min-height: var(--control-h); }
.isa-filters__clear {
	flex: 0 0 auto;
	align-self: center;
	min-height: var(--tap-min);
	display: inline-flex;
	align-items: center;
	font-size: var(--text-small-size);
}
.isa-jobcount {
	margin: 0 0 var(--space-4);
	color: var(--text-muted);
	font-size: var(--text-small-size);
}
@media (max-width: 599px) {
	.isa-filters { flex-direction: column; align-items: stretch; }
	.isa-filters__go { width: 100%; }
	.isa-filters__clear { justify-content: center; }
}

/* Listing. One card per posting; the whole card is the link. */
.isa-joblist { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .isa-joblist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .isa-joblist { grid-template-columns: repeat(3, 1fr); } }

.isa-job {
	display: grid;
	gap: var(--space-2);
	align-content: start;
	padding: var(--space-4);
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	min-height: var(--tap-min);
}
.isa-job:hover { background: var(--surface-sunken); border-color: var(--border-strong); }
.isa-job__role { font-weight: 600; color: var(--text-primary); }
.isa-job__meta { color: var(--text-secondary); font-size: var(--text-small-size); }
.isa-job__posted { color: var(--text-muted); font-size: var(--text-caption-size); }

/* Empty state — honest, and it offers the next useful thing. */
.isa-empty {
	padding: var(--space-6) var(--space-5);
	background: var(--surface-sunken);
	border: var(--border-w) dashed var(--border-strong);
	border-radius: var(--radius-lg);
	max-width: var(--measure);
}
.isa-empty__title { font-weight: 600; margin: 0; }
.isa-empty p { color: var(--text-secondary); }

/* Pagination */
.wp-block-query-pagination,
.isa-section .navigation.pagination { margin-top: var(--space-5); }
.isa-section .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.isa-section .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--tap-min); min-height: var(--tap-min);
	padding: 0 .6rem;
	border: var(--border-w) solid var(--border-card);
	border-radius: var(--radius-md);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.isa-section .page-numbers.current { background: var(--brand); color: var(--text-on-brand); border-color: var(--brand); }
.isa-section .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Job detail ---- */
.isa-jobgrid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) {
	.isa-jobgrid { grid-template-columns: minmax(0, 1fr) 20rem; }
	.isa-jobgrid__side { position: sticky; top: 5.5rem; }
}
.isa-jobgrid__main > * + * { margin-top: var(--space-5); }
.isa-jobhead > * { margin: 0; }
.isa-jobhead > * + * { margin-top: var(--space-3); }
.isa-jobhead__role { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: -.01em; }
.isa-jobhead__meta { color: var(--text-secondary); font-size: var(--text-body-lg-size); }
.isa-checked { margin-top: var(--space-4); }
.isa-jobfacts { margin-block: var(--space-5); }
.isa-jobgrid__main h2 {
	font-size: var(--text-h3-size);
	line-height: var(--text-h3-lh);
	margin-bottom: var(--space-3);
}

/* Apply panel */
.isa-apply { display: grid; gap: var(--space-3); }
.isa-apply__title { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); margin: 0; }
.isa-apply p { margin: 0; color: var(--text-secondary); }
.isa-apply__fee { padding-block: var(--space-2); }
.isa-apply__fee strong { font-size: 1.75rem; font-weight: 600; color: var(--text-primary); letter-spacing: -.01em; }
.isa-apply .wp-element-button { width: 100%; }
.isa-apply__note { font-size: var(--text-caption-size); color: var(--text-muted) !important; }
/* The accent button, for use outside a core button block. */
.isa-btn-accent { background-color: var(--accent) !important; color: var(--text-primary) !important; }
.isa-btn-accent:hover { background-color: var(--accent-hover) !important; }

/* ================================================================
   Account forms (stage 3)
   ================================================================ */

.isa-form { max-width: var(--content-max-form); display: grid; gap: var(--space-5); }
.isa-form .isa-field { margin-bottom: 0; max-width: none; }
.isa-form button[type="submit"] { justify-self: start; min-width: 12rem; }
.isa-form__alt, .isa-form__note { max-width: var(--content-max-form); }
.isa-form__alt { margin-top: var(--space-5); }
.isa-form__note {
	margin-top: var(--space-4);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lh);
	color: var(--text-muted);
}

/* Inputs that live outside .isa-field in a generated form still need styling. */
.isa-form input[type="text"],
.isa-form input[type="email"],
.isa-form input[type="tel"],
.isa-form input[type="password"],
.isa-form input[type="date"],
.isa-form select,
.isa-form textarea {
	width: 100%;
	min-height: var(--control-h);
	padding: 0.6875rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--text-primary);
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-md);
}
.isa-form input[type="file"] {
	width: 100%;
	padding: var(--space-3);
	font-family: inherit;
	font-size: var(--text-small-size);
	background: var(--surface-sunken);
	border: var(--border-w) dashed var(--border-strong);
	border-radius: var(--radius-md);
	min-height: var(--control-h);
}
.isa-form select {
	appearance: none;
	padding-right: 2rem;
	background-image: linear-gradient(45deg, transparent 49%, var(--text-secondary) 50%), linear-gradient(-45deg, transparent 49%, var(--text-secondary) 50%);
	background-size: .4rem .4rem, .4rem .4rem;
	background-position: right 1.15rem center, right .78rem center;
	background-repeat: no-repeat;
}
.isa-field.has-error input,
.isa-field.has-error select {
	border-width: var(--border-w-strong);
	border-color: var(--error);
}
.isa-field__optional { font-weight: 400; color: var(--text-muted); }
.isa-field__label abbr { color: var(--error); text-decoration: none; border: 0; }

.isa-radios { display: grid; gap: 0; }
.isa-radios .isa-choice { padding-block: var(--space-2); }

.isa-cvfile {
	display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
	margin: 0 0 var(--space-3);
	font-size: var(--text-small-size);
}

/* Alerts. Tone comes from the semantic tokens, not the accent. */
.isa-alert {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	border: var(--border-w) solid;
	max-width: var(--content-max-form);
	margin-bottom: var(--space-5);
}
.isa-alert--error   { background: var(--error-soft);   border-color: var(--error);   color: var(--error); }
.isa-alert--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.isa-alert--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.isa-alert a { color: inherit; text-decoration: underline; }

/* The fee summary on the payment step. */
.isa-feerows { max-width: var(--content-max-form); margin-block: var(--space-5); }
.isa-feerows > div {
	display: flex; justify-content: space-between; gap: var(--space-4);
	padding-block: var(--space-3);
	border-top: var(--border-w) solid var(--border-subtle);
}
.isa-feerows > div:last-child {
	border-bottom: var(--border-w-strong) solid var(--text-primary);
	font-weight: 600;
}
.isa-feerows .isa-data { font-variant-numeric: tabular-nums; }
.isa-slot {
	max-width: var(--content-max-form);
	padding: var(--space-6) var(--space-5);
	background: var(--surface-sunken);
	border: var(--border-w) dashed var(--border-strong);
	border-radius: var(--radius-lg);
	color: var(--text-secondary);
	text-align: center;
}

/* ================================================================
   Employer area and the anonymised candidate card (stage 5)
   ================================================================ */

.isa-dash { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) { .isa-dash { grid-template-columns: 1fr 1fr; align-items: start; } }
.isa-dash section { display: grid; gap: var(--space-3); align-content: start; }
.isa-dash h2 { margin: 0; font-size: var(--text-h3-size); line-height: var(--text-h3-lh); }
.isa-dash__head {
	display: flex; flex-wrap: wrap; gap: var(--space-4);
	align-items: baseline; justify-content: space-between;
	margin-bottom: var(--space-5);
}
.isa-dash__head p { margin: 0; }

/* A posting row in the dashboard: title, state, and the match count. */
.isa-joblist--stack { grid-template-columns: 1fr !important; }
.isa-job--row {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	align-items: center; justify-content: space-between;
}
.isa-job--row .isa-job__role { flex: 1 1 12rem; }
.isa-job__matches { font-size: var(--text-small-size); white-space: nowrap; }

/* ---- The anonymised candidate card ----
   The withheld half is shown as a locked block, never omitted: an employer
   should see that the details exist and are being held back. */
.isa-candlist { display: grid; gap: var(--space-4); }
.isa-cand { display: grid; gap: var(--space-4); }
.isa-cand__head {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	align-items: center; justify-content: space-between;
}
.isa-cand__ref { font-weight: 600; font-size: var(--text-h3-size); letter-spacing: .01em; }
.isa-cand__facts { margin: 0; }
.isa-cand__facts > div { padding-block: var(--space-2); }
.isa-cand__locked p { margin: 0; }
.isa-cand__locked p + p { margin-top: var(--space-1); }
.isa-cand__released { display: grid; gap: var(--space-3); }
.isa-cand__released > p { margin: 0; }

/* ---- Contact requests, on the candidate's own page ---- */
.isa-requests { display: grid; gap: var(--space-4); }
.isa-request { display: grid; gap: var(--space-3); }
.isa-request p { margin: 0; }
.isa-request__who { font-size: var(--text-body-lg-size); }
.isa-request__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.isa-request__actions .wp-element-button { flex: 0 1 auto; }

/* ---- Forms: two buttons, and fieldsets that do not inherit browser chrome ---- */
.isa-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.isa-form fieldset { border: 0; margin: 0; padding: 0; }
.isa-form legend { padding: 0; }
.isa-form textarea { min-height: 8rem; resize: vertical; }
.isa-next { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.isa-next p { margin: 0; }

/* ================================================================
   Candidate dashboard (stage 5b)
   ================================================================ */

/* The state card: what is happening, and whose turn it is. */
.isa-mecard {
	background: var(--surface-tint);
	border-color: transparent;
	display: grid;
	gap: var(--space-3);
	max-width: var(--content-max-form);
	margin-block: var(--space-5);
}
.isa-mecard__top {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	align-items: center; justify-content: space-between;
}
.isa-mecard__label { font-weight: 500; }
.isa-mecard p { margin: 0; }
.isa-mecard__summary { color: var(--text-secondary); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.isa-mecard__cv { font-size: var(--text-small-size); }
.isa-mecard .wp-element-button { width: 100%; }
@media (min-width: 600px) { .isa-mecard .wp-element-button { width: auto; justify-self: start; } }

.isa-dashsec { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.isa-dashsec__head {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	align-items: baseline; justify-content: space-between;
}
.isa-dashsec__head h2 { margin: 0; font-size: var(--text-h3-size); line-height: var(--text-h3-lh); }

/* A matched posting carries its match level, so the card is four rows not three. */
.isa-joblist--stack .isa-job .isa-match { margin-top: var(--space-1); }