/* Nasi Employer styles.
 *
 * The gold was recorded as #F4B400 in an audit on 10 Aug 2026 and that was
 * wrong: the child theme uses #F4B000 exclusively, and it wins 169 to 56 across
 * our own plugins. Both values were live in this file at once, so a focus ring
 * and the button under it were different yellows. Settled on #F4B000, 2 Sep 2026.
 *
 * Values live in the token block below. Reach for a token; if none fits, add one
 * rather than typing a new hex, or this file grows a 77th colour. */

/* ---------------------------------------------------------------------------
 * Tokens.
 *
 * Not invented: these are the values already carrying the file, promoted to
 * names. An audit on 1 Sep 2026 found 76 distinct colours in 655 lines and no
 * tokens at all, which is how the gold split in two without anybody noticing.
 *
 * Spacing is a 2px scale that emerged by instinct long before it was written
 * down; the values below are simply the ones already in use.
 *
 * Semantic colour is separate from the accent. Green means verified, complete
 * or passed and nothing else: it is NOT a brand colour and never decoration.
 * ------------------------------------------------------------------------- */
:root {
	/* Brand */
	--nasi-gold:       #F4B000;
	--nasi-gold-dark:  #E0A600;   /* hover and active on gold */
	--nasi-on-gold:    #231700;   /* the only text colour that sits on gold */
	--nasi-gold-wash:  #FDF3D6;   /* pale ground for notices and pending states */
	--nasi-gold-edge:  #F0DCA8;   /* border to match the wash */

	/* Ink and neutrals, warm rather than grey, so they sit with the gold */
	--nasi-ink:        #282828;
	--nasi-muted:      #7A6F60;
	--nasi-rule:       #E6E0D5;
	--nasi-surface:    #FFFFFF;
	--nasi-page:       #F6F9F9;

	/* Semantic state */
	--nasi-bad:        #BE0426;
	--nasi-good:       #1E7A35;

	/* Spacing, 2px scale */
	--nasi-s1: 4px;
	--nasi-s2: 8px;
	--nasi-s3: 12px;
	--nasi-s4: 16px;
	--nasi-s5: 24px;
	--nasi-s6: 32px;

	/* Radius. Three, and only three. */
	--nasi-r-sm:   3px;   /* inputs, cards, notices */
	--nasi-r-md:   8px;   /* panels */
	--nasi-r-pill: 999px;

	/* Type. The half pixel sizes are gone. */
	--nasi-t-xs:  11px;
	--nasi-t-sm:  13px;
	--nasi-t-md:  14px;
	--nasi-t-lg:  16px;
	--nasi-t-xl:  20px;
	--nasi-t-2xl: 28px;

	--nasi-shadow: 0 1px 2px rgba(35,23,0,.05), 0 8px 24px rgba(35,23,0,.06);
}

/* ---------------------------------------------------------------------------
 * What the parent theme does to us, in one place.
 *
 * Foxiz styles bare elements sitewide and outranks these rules, so each of the
 * lines below is a specific battle, not laziness. They were scattered across
 * the file: eight separate list-style resets and four marker hides all saying
 * the same thing, which is why the double bullet bug came back three times in
 * one day. New markup inside .nasi-emp-wrap is covered from the start now.
 *
 * Add to this block rather than fixing the same thing locally again.
 * ------------------------------------------------------------------------- */

/* The theme paints a marker on every li. Ours are laid out by hand. */
.nasi-emp-wrap ul,
.nasi-emp-wrap ol {
	list-style: none !important;
}
.nasi-emp-wrap li {
	list-style: none !important;
}
.nasi-emp-wrap li::marker {
	content: none;
}

/* A list that genuinely wants markers asks for them back, explicitly. The
   undertaking list is the only one: it reads as a set of promises and the
   bullets are doing work. Its padding-left was quietly depending on the theme
   drawing them, which is exactly the kind of borrowed styling this block ends. */
.nasi-emp-wrap ul.nasi-emp-terms {
	list-style: disc outside !important;
}
.nasi-emp-wrap ul.nasi-emp-terms li {
	list-style: disc outside !important;
}

/* Firefox and Safari each draw their own disclosure triangle. Every <details>
   here supplies its own marker, so remove both. */
.nasi-emp-wrap summary {
	list-style: none;
	cursor: pointer;
}
.nasi-emp-wrap summary::-webkit-details-marker {
	display: none;
}

/* The theme sets img { height: auto }, which drops the crop out of any avatar
   given explicit dimensions. */
.nasi-emp-wrap img.nasi-emp-face,
.nasi-emp-wrap .nasi-emp-photo img,
.nasi-emp-wrap .nasi-emp-vprofile__pic img {
	object-fit: cover;
}

.nasi-emp-wrap { font-family: EncodeSansCondensed, "Encode Sans Condensed", sans-serif; color: var(--nasi-ink); max-width: 860px; margin: 0 auto; }
.nasi-emp-header h1 { font-size: 40px; font-weight: 700; margin: 0 0 4px; }
.nasi-emp-sub { color: #777; margin: 0 0 10px; }
.nasi-emp-company-chip { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }

.nasi-emp-card { background: var(--nasi-surface); border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.06); padding: 22px; margin-bottom: 18px; }
.nasi-emp-center { text-align: center; }
.nasi-emp-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nasi-emp-grow { flex: 1; min-width: 200px; }
.nasi-emp-inline { display: inline; }
.nasi-emp-meta { color: #777; font-size: 14px; }
.nasi-emp-link { color: #b98800; font-weight: 700; text-decoration: underline; }

.nasi-emp-btn { display: inline-block; background: var(--nasi-gold); color: var(--nasi-on-gold) !important; border: 0; border-radius: 5px; font-weight: 800; font-size: 15px; padding: 12px 22px; cursor: pointer; text-decoration: none; box-shadow: 4px 5px 12px rgba(0,0,0,.17); }
.nasi-emp-btn:hover { background: var(--nasi-gold-dark); }
.nasi-emp-btn--small { padding: 8px 14px; font-size: 13px; box-shadow: none; }
.nasi-emp-btn--outline { background: var(--nasi-surface); border: 1.5px solid #ddd; color: var(--nasi-ink) !important; }
.nasi-emp-btn--outline:hover { background: #f6f6f2; }

.nasi-emp-tabs { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.nasi-emp-tab { background: #fde9b6; color: var(--nasi-on-gold); border-radius: 999px; padding: 12px 26px; font-weight: 800; text-decoration: none; font-size: 15px; }
.nasi-emp-tab.is-active { background: var(--nasi-gold); }

.nasi-emp-badge { display: inline-block; border-radius: 5px; font-size: 11px; font-weight: 800; padding: 3px 8px; text-transform: uppercase; }
.nasi-emp-badge--verified { background: #e7f5ea; color: var(--nasi-good); }
.nasi-emp-badge--pending { background: #fff3d6; color: #9a6b00; }
.nasi-emp-badge--muted { background: #eee; color: #666; }

.nasi-emp-notice { background: #fff8e1; border: 1px solid var(--nasi-gold); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }
.nasi-emp-ok { color: var(--nasi-good); font-weight: 700; }

.nasi-emp-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.nasi-emp-form input, .nasi-emp-form select, .nasi-emp-form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font: inherit; font-weight: 400; background: var(--nasi-surface); box-sizing: border-box; }
.nasi-emp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .nasi-emp-grid2 { grid-template-columns: 1fr; } }

.nasi-emp-applicant { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid #eee; flex-wrap: wrap; }
.nasi-emp-applicant select { padding: 8px 10px; border-radius: 6px; border: 1px solid #ddd; font: inherit; font-weight: 700; }

.nasi-emp-applybox { background: #fff8e1; border: 1.5px solid var(--nasi-gold); border-radius: 14px; padding: 20px; margin-top: 26px; font-family: EncodeSansCondensed, "Encode Sans Condensed", sans-serif; }
.nasi-emp-applybox__head { font-size: 17px; margin-bottom: 8px; }
.nasi-emp-consent { display: block; font-size: 13px; color: #555; margin: 10px 0; }

.nasi-emp-badge--featured { background: var(--nasi-gold); color: var(--nasi-on-gold); }

/*
 * A skill is content, a badge is a status. They were sharing a class, so skill
 * names were rendered at 11px in capitals, which is a label size being asked to
 * carry readable words. Statuses keep the old treatment; skills get their own.
 */
.nasi-emp-skill {
  display: inline-block;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  padding: 4px 10px;
  background: #f4efe5;
  color: #4a423a;
}
.nasi-emp-statrow { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.nasi-emp-stat { flex: 1; min-width: 110px; background: var(--nasi-page); border-radius: 10px; padding: 14px; text-align: center; }
.nasi-emp-stat strong { display: block; font-size: 26px; color: #b98800; }
.nasi-emp-stat span { font-size: 12px; color: #777; font-weight: 700; }

.nasi-emp-cvview { margin-top: 10px; width: 100%; }
.nasi-emp-cvview summary { cursor: pointer; font-weight: 800; color: #b98800; }
.nasi-emp-cvview__body { background: var(--nasi-page); border-radius: 10px; padding: 16px; margin-top: 8px; max-height: 480px; overflow-y: auto; }

/* W3: candidate search + unlock */
.nasi-emp-unlocked { background: #FDF6E3; border: 1.5px solid var(--nasi-gold); border-radius: 5px; padding: 12px 14px; margin: 10px 0; line-height: 1.6; }
.nasi-emp-unlocked a { color: var(--nasi-ink); text-decoration: underline; }
.nasi-emp-unlockform { margin-top: 12px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.nasi-emp-unlockform label { flex: 1 1 220px; }
.nasi-emp-unlockform button[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.nasi-emp-terms { margin: 0 0 14px; padding-left: 20px; }
.nasi-emp-terms li { margin-bottom: 7px; line-height: 1.5; }
.nasi-emp-check { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 14px; font-weight: 600; }
/* ID number entry on the verification card. Wide, monospaced digits, big enough
   to read back on a phone before submitting. */
.nasi-emp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-weight: 600; }
.nasi-emp-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #ddd1bb; border-radius: 8px; font: 600 17px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.06em; background: var(--nasi-surface); color: var(--nasi-on-gold); }
.nasi-emp-field input:focus-visible { outline: 2px solid var(--nasi-gold); outline-offset: 1px; border-color: var(--nasi-gold); }
/* The employer photo. Round, modest, clearly a person rather than a document. */
.nasi-emp-photo { margin: 0 0 10px; }
.nasi-emp-photo img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--nasi-gold); display: block; }
.nasi-emp-field input[type="file"] { font: inherit; letter-spacing: normal; padding: 10px 12px; background: var(--nasi-surface); }
/* Foxiz sets label{display:block} and stretches bare inputs to full width, which
   turned every consent checkbox into a 776px bar floating above its own words.
   Scoped !important because the theme rule is the more specific one. */
.nasi-emp-check { display: flex !important; align-items: flex-start; gap: 9px; }
.nasi-emp-check input[type="checkbox"] { width: 18px !important; height: 18px !important; min-width: 18px; flex: 0 0 auto; margin: 2px 0 0 !important; accent-color: var(--nasi-gold); }
.nasi-emp-field { display: flex !important; flex-direction: column; }
/* The four names in the ID step. Big targets: this is read and tapped on a
   phone, and a mis-tap here sends somebody to a human review they did not need. */
.nasi-emp-choices { display: grid; gap: 8px; margin: 10px 0 4px; }
.nasi-emp-choices button { display: block; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid #ddd1bb; border-radius: 10px; background: var(--nasi-surface) !important; color: var(--nasi-on-gold) !important; font: 600 15px/1.3 inherit; cursor: pointer; }
.nasi-emp-choices button:hover:not(:disabled) { border-color: var(--nasi-gold); background: #fffdf6 !important; }
.nasi-emp-choices button:focus-visible { outline: 2px solid var(--nasi-gold); outline-offset: 2px; }
.nasi-emp-choices button:disabled { opacity: .55; cursor: default; }
.nasi-emp-choices button.is-picked { border-color: var(--nasi-gold); box-shadow: 0 0 0 2px rgba(244,176,0,.25); }
.nasi-emp-verify { border-top: 1.5px solid #eee; margin-top: 14px; padding-top: 12px; }
.nasi-emp-verify-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f2f2f2; flex-wrap: wrap; }
.nasi-emp-verify-row:last-child { border-bottom: 0; }

/* Onboarding gate, 2026-08-18. Required-field marker on the company profile. */
.nasi-emp-req { color: #c0392b; font-weight: 700; }
.nasi-emp-promote-hint { align-self: center; font-style: italic; }

/* Result count, pager and the waiting-for-applicants actions (2026-08-19). */
.nasi-emp-resultcount { margin: 0 0 12px; font-size: 14px; }
.nasi-emp-pager { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; }
.nasi-emp-emptyactions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }

/* ---------------------------------------------------------------------------
   Candidate cards (rebuilt 29 Aug 2026, mobile first).

   Most of this hub is read on a phone, so the card is designed at 360px and
   allowed to relax on a desktop, not the other way round. The !important flags
   are not laziness: the theme sets `img { height: auto }` sitewide, which turned
   every round photo into an oval, and it paints every <button> gold, which put
   the heart in a gold box.
   --------------------------------------------------------------------------- */

.nasi-emp-cand {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	grid-template-areas:
		"face name act"
		"body body body";
	gap: 4px 12px;
	align-items: start;
}

.nasi-emp-cand__face { grid-area: face; }
.nasi-emp-cand__id   { grid-area: name; min-width: 0; }
.nasi-emp-cand__act  { grid-area: act; }
.nasi-emp-cand__body { grid-area: body; }

/* The face. Square box, cropped fill, circle mask: an oval means one of the
   three has been overridden, which is exactly what was happening. */
.nasi-emp-face {
	display: block;
	width: 76px !important;
	height: 76px !important;
	min-width: 76px;
	aspect-ratio: 1 / 1;
	border-radius: 50% !important;
	object-fit: cover !important;
	/* Portraits, not landscapes: faces sit in the upper third, so the crop is
	   pulled up from centre without pinning to the very top, which was slicing
	   chins off. */
	object-position: center 25%;
	background: #f2efe9;
	border: 2px solid var(--nasi-surface);
	box-shadow: 0 0 0 1px #eae3d6, 0 2px 6px rgba(0,0,0,.08);
	margin: 0 !important;
	max-width: none !important;
}
.nasi-emp-face--none {
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 28px; line-height: 1;
	color: #9a6b00; background: #fdf0cd; border-color: #f6e3ae;
}

.nasi-emp-cand__name {
	font-size: 17px; font-weight: 800; line-height: 1.25;
	margin: 2px 0 2px; overflow-wrap: anywhere;
}
.nasi-emp-cand__role {
	font-size: 14px; font-weight: 700; color: #444; line-height: 1.3;
	display: block; margin-bottom: 2px;
}
.nasi-emp-cand__where { font-size: 13px; color: #7a7a7a; line-height: 1.4; display: block; }
.nasi-emp-cand__tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* The heart. A quiet outline until it is pressed, then it is the only red on
   the page: it marks a person, so it does not wear the brand gold. */
.nasi-emp-favform { margin: 0 !important; }
.nasi-emp-fav {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 40px; padding: 0 14px !important;
	background: var(--nasi-surface) !important;
	border: 1px solid var(--nasi-rule) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: #b9b2a6 !important;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nasi-emp-fav svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.nasi-emp-fav__label { font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; }
.nasi-emp-fav:hover { color: #d64545 !important; border-color: #f0c9c9 !important; background: #fff6f6 !important; }
.nasi-emp-fav.is-on { color: #d64545 !important; border-color: #f0c9c9 !important; background: #fff6f6 !important; }
.nasi-emp-fav:focus-visible { outline: 2px solid var(--nasi-gold); outline-offset: 2px; }

/* Skills read as quiet labels, not as things to press. */
.nasi-emp-skill {
	display: inline-block;
	background: #f6f4ef; color: #5b5b5b;
	border: 1px solid #ece7dc; border-radius: 999px;
	font-size: 12px; font-weight: 600; padding: 4px 10px;
}

.nasi-emp-cand__foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.nasi-emp-cand__note { font-size: 13px; color: #7a7a7a; line-height: 1.45; }

/* Badges sit beside the name, so they shrink to match it. */
.nasi-emp-cand .nasi-emp-badge { font-size: 10px; padding: 3px 7px; letter-spacing: .02em; }

@media (min-width: 720px) {
	.nasi-emp-cand {
		grid-template-columns: 104px 1fr auto;
		grid-template-areas: "face name act" "face body body";
		column-gap: 16px;
	}
	.nasi-emp-face { width: 104px !important; height: 104px !important; min-width: 104px; }
	.nasi-emp-face--none { font-size: 38px; }
	.nasi-emp-cand__name { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
   Hub chrome on a phone
   --------------------------------------------------------------------------- */

/* Two views of the same list.
   Same control as "My CVs / My Cover Letters" on the job seeker side: an
   underline tab bar, half each. Somebody who uses both sides of the product
   then meets one pattern rather than two. Values match profile-ui.css so the
   two cannot drift apart by eye. */
.nasi-emp-tabs--pair {
	display: flex;
	gap: 0;
	width: 100%;
	border: 0;
	border-bottom: 1px solid #e2d9c8;
	border-radius: 0;
	overflow: visible;
	margin: 4px 0 18px;
}
.nasi-emp-tabs--pair .nasi-emp-tab {
	flex: 1 1 0;
	min-width: 0;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0 !important;
	color: var(--nasi-muted);
	font-size: 15.5px;
	font-weight: 700;
	text-align: center;
	/* The theme underlines links in content, which read as a stray rule under
	   one half only. */
	text-decoration: none !important;
	box-shadow: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nasi-emp-tabs--pair .nasi-emp-tab:hover { background: none; color: #1d1b16; }
.nasi-emp-tabs--pair .nasi-emp-tab.is-active {
	background: none;
	color: #1d1b16;
	border-bottom-color: var(--nasi-gold);
}
.nasi-emp-tabs--pair .nasi-emp-tab:focus-visible { outline: 2px solid var(--nasi-gold); outline-offset: -3px; }

.nasi-emp-tabs {
	display: flex; gap: 8px; margin: 0 0 16px;
	overflow-x: auto; flex-wrap: nowrap;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
}
.nasi-emp-tabs::-webkit-scrollbar { display: none; }
.nasi-emp-tab {
	flex: 0 0 auto; scroll-snap-align: start;
	background: var(--nasi-surface); color: #4a4a4a;
	border: 1px solid var(--nasi-rule); border-radius: 999px;
	padding: 9px 16px; font-weight: 700; font-size: 14px;
	text-decoration: none; white-space: nowrap;
}
.nasi-emp-tab:hover { background: #fdf7e7; border-color: var(--nasi-gold-edge); color: var(--nasi-on-gold); }
.nasi-emp-tab.is-active {
	background: var(--nasi-gold); border-color: var(--nasi-gold); color: var(--nasi-on-gold); font-weight: 800;
}

@media (max-width: 719px) {
	.nasi-emp-card { padding: 16px 14px; border-radius: 12px; margin-bottom: 12px; }
	.nasi-emp-header h1 { font-size: 28px; }
	/* Every control clears the 44px touch target. */
	.nasi-emp-btn { padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; }
	.nasi-emp-btn--small { padding: 10px 14px; min-height: 40px; }
	.nasi-emp-form input, .nasi-emp-form select { font-size: 16px; } /* stops iOS zooming on focus */
	.nasi-emp-grid2 { display: grid; grid-template-columns: 1fr; gap: 0; }
	.nasi-emp-cand__foot .nasi-emp-btn { width: 100%; justify-content: center; }
	.nasi-emp-pager { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   Profile wizard
   --------------------------------------------------------------------------- */
.nasi-emp-wiz__progress {
	font-size: 13px; font-weight: 700; color: #9a6b00;
	background: #fdf0cd; border-radius: 999px;
	display: inline-block; padding: 4px 12px; margin: 0;
	white-space: nowrap;
}
/* Heading and step pill share a line, with the pill pushed to the end so it
   reads as a status rather than as part of the title. */
.nasi-emp-cardhead { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.nasi-emp-cardhead h3 { margin: 0; flex: 1 1 auto; }
.nasi-emp-cardhead .nasi-emp-wiz__progress { flex: 0 0 auto; }
.nasi-emp-wiz__q { font-size: 20px; font-weight: 800; margin: 0 0 4px; line-height: 1.25; }
.nasi-emp-wiz__step { border: 0; padding: 0; margin: 0; }

/* The choice on step one is the most important tap in the whole flow, so it is
   a card you hit with a thumb, not a 14px radio dot. */
.nasi-emp-pick {
	display: flex; gap: 12px; align-items: flex-start;
	border: 1.5px solid var(--nasi-rule); border-radius: 12px;
	padding: 14px; margin: 10px 0; cursor: pointer;
	font-weight: 500; background: var(--nasi-surface);
	transition: border-color .15s ease, background .15s ease;
}
.nasi-emp-pick:hover { border-color: var(--nasi-gold-edge); background: #fffdf6; }
.nasi-emp-pick input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--nasi-gold); }
.nasi-emp-pick strong { display: block; font-size: 16px; margin-bottom: 2px; }
.nasi-emp-pick .nasi-emp-meta { display: block; font-size: 13px; line-height: 1.45; }
.nasi-emp-pick:has(input:checked) { border-color: var(--nasi-gold); background: #fffbf0; }

.nasi-emp-wiz__nav { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.nasi-emp-wiz__nav .nasi-emp-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
@media (min-width: 720px) {
	.nasi-emp-wiz__nav .nasi-emp-btn { flex: 0 0 auto; }
}

/* The theme sets `label { display: block }`, which outranks the browser's own
   [hidden] rule, so a hidden field stayed on screen: an individual was still
   shown "Business name", greyed out and confusing. The attribute has to win. */
.nasi-emp-wrap [hidden] { display: none !important; }

/* The theme paints buttons on its own terms and outranked these, so "Back" came
   out gold and "Next" came out grey: the visual weight was the wrong way round
   at exactly the moment somebody is deciding whether to continue. Scoped to the
   hub, so nothing else on the site is affected. */
.nasi-emp-wrap .nasi-emp-btn {
	background: var(--nasi-gold) !important;
	color: var(--nasi-on-gold) !important;
	border: 1.5px solid var(--nasi-gold) !important;
}
.nasi-emp-wrap .nasi-emp-btn:hover { background: var(--nasi-gold-dark) !important; border-color: var(--nasi-gold-dark) !important; }
.nasi-emp-wrap .nasi-emp-btn--outline {
	background: var(--nasi-surface) !important;
	color: var(--nasi-ink) !important;
	border: 1.5px solid #ddd !important;
}
.nasi-emp-wrap .nasi-emp-btn--outline:hover { background: #f6f6f2 !important; border-color: #cfcfcf !important; }
.nasi-emp-wrap .nasi-emp-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   My Jobs
   --------------------------------------------------------------------------- */
.nasi-emp-job__title { font-size: 18px; font-weight: 800; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.nasi-emp-job__title a { color: inherit; text-decoration: none; }
.nasi-emp-job__title a:hover { text-decoration: underline; }
.nasi-emp-job__state { color: #7a7a7a; font-size: 13.5px; margin: 4px 0 12px; line-height: 1.45; }

/* The applicant count is why an employer opens this page, so it is a number you
   can read across the room rather than grey text in a sentence. */
.nasi-emp-job__stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.nasi-emp-stat {
	display: flex; flex-direction: column; gap: 1px;
	background: #faf8f3; border: 1px solid #eee7d9; border-radius: 10px;
	padding: 8px 14px; min-width: 92px;
}
.nasi-emp-stat strong { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--nasi-on-gold); }
.nasi-emp-stat span { font-size: 12px; color: #7a7a7a; }

.nasi-emp-job__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nasi-emp-job__actions .nasi-emp-inline { margin: 0; }

.nasi-emp-job__promote { margin-top: 14px; border-top: 1px solid #f0ece3; padding-top: 12px; }
.nasi-emp-job__promote summary {
	cursor: pointer; font-weight: 700; font-size: 14px; color: #b98800;
}
.nasi-emp-job__promote summary::after { content: ' ▾'; }
.nasi-emp-job__promote[open] summary::after { content: ' ▴'; }
.nasi-emp-job__promote p { margin: 8px 0 10px; }

@media (max-width: 719px) {
	/* Every action is a full width row: a wrapped grid of six small buttons is
	   how you mis-tap "Close it" when you meant "Edit". */
	.nasi-emp-job__actions { flex-direction: column; align-items: stretch; }
	.nasi-emp-job__actions .nasi-emp-btn,
	.nasi-emp-job__actions .nasi-emp-inline .nasi-emp-btn { width: 100%; justify-content: center; }
	.nasi-emp-stat { flex: 1 1 0; min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Applicants: the same card as candidate search, so an employer learns one
   layout rather than two.
   --------------------------------------------------------------------------- */
.nasi-emp-applicant.nasi-emp-cand {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	grid-template-areas: "face name act" "body body body";
	gap: 4px 12px;
	align-items: start;
	border-top: 1px solid #f0ece3;
	padding: 16px 0 4px;
	margin: 0;
}
.nasi-emp-applicant.nasi-emp-cand:first-of-type { border-top: 0; }

.nasi-emp-stageform { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.nasi-emp-stageform__label { font-size: 11px; font-weight: 700; color: #9a9a9a; text-transform: uppercase; letter-spacing: .03em; }
.nasi-emp-stageform select { min-width: 130px; padding: 8px 10px; font-size: 14px; }

.nasi-emp-note { margin-top: 12px; }
.nasi-emp-note summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #b98800; }
.nasi-emp-note textarea { width: 100%; margin: 8px 0; }

.nasi-emp-cvview { margin-top: 10px; }
.nasi-emp-cvview summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #b98800; }

@media (min-width: 720px) {
	.nasi-emp-applicant.nasi-emp-cand {
		grid-template-columns: 104px 1fr auto;
		grid-template-areas: "face name act" "face body body";
		column-gap: 16px;
	}
}
@media (max-width: 719px) {
	/* Status drops under the name rather than squeezing the name into a column
	   two words wide. */
	.nasi-emp-applicant.nasi-emp-cand {
		grid-template-columns: 60px 1fr;
		grid-template-areas: "face name" "act act" "body body";
	}
	.nasi-emp-applicant.nasi-emp-cand .nasi-emp-face { width: 60px !important; height: 60px !important; min-width: 60px; }
	.nasi-emp-stageform { flex-direction: row; align-items: center; gap: 8px; margin-top: 8px; }
	.nasi-emp-stageform select { flex: 1; }
	.nasi-emp-cand__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.nasi-emp-cand__foot .nasi-emp-btn { width: 100%; justify-content: center; }
	/* Call is the one that matters, so it gets the full width row. */
	.nasi-emp-cand__foot .nasi-emp-btn:first-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Insights
   --------------------------------------------------------------------------- */
/* The to-do card, so it does not read as another statistic. */
.nasi-emp-waiting { border-left: 4px solid var(--nasi-gold); }
.nasi-emp-waiting h3 { margin-bottom: 6px; }

.nasi-emp-spark { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.nasi-emp-spark__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.nasi-emp-spark__n { font-size: 15px; font-weight: 800; color: var(--nasi-on-gold); }
.nasi-emp-spark__bar {
	width: 100%; max-width: 56px; border-radius: 8px 8px 0 0;
	background: linear-gradient(180deg, var(--nasi-gold), #f6c94a);
	min-height: 4px;
}
.nasi-emp-spark__col:last-child .nasi-emp-spark__bar { background: linear-gradient(180deg, var(--nasi-gold-dark), var(--nasi-gold)); }
.nasi-emp-spark__lbl { font-size: 11px; color: #7a7a7a; white-space: nowrap; }

/* The search button is the whole point of that card, so it spans it. */
.nasi-emp-card form.nasi-emp-form > button[type="submit"] { width: 100%; justify-content: center; }
.nasi-emp-wrap .nasi-emp-btn--full { width: 100%; display: flex; justify-content: center; }

/* ---------------------------------------------------------------------------
   Verification prompt.

   Deliberately the only element in the hub that carries the ink background:
   everything else is a white card on a pale ground, so this reads as the one
   thing outstanding rather than as another panel to scroll past. It disappears
   the moment the employer is verified.
   --------------------------------------------------------------------------- */

.nasi-emp-settingslink { margin: 18px 0 0; text-align: center; }
.nasi-emp-settingslink a { color: var(--nasi-muted); font-size: 14.5px; font-weight: 700; text-decoration: underline; }
.nasi-emp-settingslink a:hover { color: var(--nasi-on-gold); }
.nasi-emp-settingslink__sep { color: #c9c2b6; margin: 0 8px; }

/* ---- verified profile, credits and top up (1 Sep 2026) ---------------- */

.nasi-emp-vprofile__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }

.nasi-emp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.nasi-emp-chip--verified { background: #eaf6ee; color: #1c6b3a; }
.nasi-emp-chip--credits { background: #fff3d4; color: #8a6a00; }
.nasi-emp-chip--credits strong { font-size: 15px; }
.nasi-emp-chip--credits.is-empty { background: #fbeaed; color: var(--nasi-bad); }
.nasi-emp-chip--topup { background: var(--nasi-gold); color: var(--nasi-on-gold) !important; text-decoration: none; }
.nasi-emp-chip--topup:hover, .nasi-emp-chip--topup:focus-visible { background: #ffc21f; color: var(--nasi-on-gold) !important; text-decoration: none; }

.nasi-emp-vprofile__id { display: flex; gap: 16px; align-items: flex-start; }
.nasi-emp-vprofile__pic img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--nasi-gold); display: block; }
.nasi-emp-vprofile__pic-empty { display: block; width: 96px; height: 96px; border-radius: 50%; background: #efe9dd; border: 3px solid #ddd1bb; }
.nasi-emp-vprofile__name { margin: 0 0 2px; font-size: 20px; }
.nasi-emp-vprofile__picform { margin-top: 10px; }
.nasi-emp-vprofile__picform input[type="file"] { max-width: 100%; }

.nasi-emp-vprofile__details { margin-top: 18px; border-top: 1px solid #efe9dd; padding-top: 12px; }
.nasi-emp-vprofile__details summary { cursor: pointer; font-weight: 800; padding: 4px 0; }
.nasi-emp-vprofile__dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; margin: 10px 0; }
.nasi-emp-vprofile__dl dt { color: #6f685c; font-size: 13px; }
.nasi-emp-vprofile__dl dd { margin: 0; font-weight: 600; }

.nasi-emp-credits__now { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.nasi-emp-credits__now strong { font-size: 34px; line-height: 1; font-weight: 900; }
.nasi-emp-credits__now.is-empty strong { color: var(--nasi-bad); }

.nasi-emp-topup { margin-top: 14px; }
.nasi-emp-topup__quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.nasi-emp-topup__preset { padding: 8px 16px; border: 1px solid #ddd1bb; border-radius: 999px; background: var(--nasi-surface) !important; color: var(--nasi-on-gold) !important; font-weight: 700; cursor: pointer; }
.nasi-emp-topup__preset.is-on, .nasi-emp-topup__preset:hover { border-color: var(--nasi-gold); background: #fffdf6 !important; }
.nasi-emp-topup__total { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.nasi-emp-topup__total span:first-child { font-size: 26px; font-weight: 900; }

@media (max-width: 480px) {
  .nasi-emp-vprofile__id { flex-direction: column; }
  .nasi-emp-vprofile__dl { grid-template-columns: 1fr; gap: 2px 0; }
  .nasi-emp-vprofile__dl dd { margin-bottom: 8px; }
}

/* The free-credits offer shown to employers who are not verified yet. */
.nasi-emp-offer { border: 2px solid var(--nasi-gold); background: linear-gradient(180deg, #fffdf6, var(--nasi-surface)); }
.nasi-emp-offer h3 { margin-top: 0; }
.nasi-emp-creditline { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

/* The confirmed badge on the mobile and ID steps. */
.nasi-emp-confirmed { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }

/* ---- the credit bar ---------------------------------------------------- */
.nasi-emp-creditbar {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 8px 8px 8px 12px; border-radius: 999px;
	background: var(--nasi-surface); border: 1px solid #ece5d8;
	box-shadow: 0 2px 8px rgba(0,0,0,.06); max-width: 100%;
}
.nasi-emp-creditbar__icon {
	width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
	background: #fdf0cd; color: #9a6b00;
	display: inline-flex; align-items: center; justify-content: center;
}
.nasi-emp-creditbar__icon svg { width: 18px; height: 18px; }
.nasi-emp-creditbar__figures { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nasi-emp-creditbar__count { font-size: 13px; color: #6f685c; white-space: nowrap; }
.nasi-emp-creditbar__count strong { font-size: 18px; color: #1d1811; font-weight: 900; }
.nasi-emp-creditbar__count span { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }
.nasi-emp-creditbar__rands { font-size: 13px; color: #6f685c; font-variant-numeric: tabular-nums; }
.nasi-emp-creditbar__btn {
	flex: 0 0 auto; padding: 9px 16px; border-radius: 999px;
	background: var(--nasi-gold); color: var(--nasi-on-gold) !important; font-weight: 800; font-size: 13px;
	text-decoration: none; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.nasi-emp-creditbar__btn:hover, .nasi-emp-creditbar__btn:focus-visible { background: #ffc21f; color: var(--nasi-on-gold) !important; text-decoration: none; }
.nasi-emp-creditbar.is-empty { border-color: #f0c9d0; }
.nasi-emp-creditbar.is-empty .nasi-emp-creditbar__icon { background: #fbeaed; color: var(--nasi-bad); }
.nasi-emp-creditbar.is-empty .nasi-emp-creditbar__count strong { color: var(--nasi-bad); }

/* Advanced filters, folded away under the keyword box. */
.nasi-emp-advanced { margin: 0 0 12px; }
.nasi-emp-advanced > summary {
	cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
	font-weight: 800; font-size: 14px; color: #8a6a00; padding: 6px 0;
}
.nasi-emp-advanced > summary::after { content: "+"; font-weight: 900; }
.nasi-emp-advanced[open] > summary::after { content: "\2013"; }

.nasi-emp-backlink { margin: 0 0 12px; font-weight: 700; }
.nasi-emp-backlink a { color: #8a6a00; text-decoration: none; }
.nasi-emp-backlink a:hover { text-decoration: underline; }

/* Messaging an unlocked candidate. */
.nasi-emp-msg { margin-top: 10px; }
.nasi-emp-msg__box > summary { cursor: pointer; font-weight: 800; color: #8a6a00; padding: 6px 0; }
.nasi-emp-msg__box textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ddd1bb; border-radius: 8px; font: inherit; }
.nasi-emp-unlocked { padding: 10px 12px; background: #f7f4ee; border-radius: 8px; }

/* Checks with no provider yet: one line, opened only if somebody asks. */
.nasi-emp-verify-soon { margin-top: 10px; border-top: 1px solid #efebe2; padding-top: 10px; }
.nasi-emp-verify-soon > summary { cursor: pointer; font-size: 13px; color: #6f6858; }
.nasi-emp-verify-soon > summary::before { content: "+ "; font-weight: 700; }
.nasi-emp-verify-soon[open] > summary::before { content: "\2013 "; }

/* One line per finding: this is what 12 credits bought. */
.nasi-emp-verify-result { margin: 6px 0 0 !important; padding: 0 !important; }
/* The theme paints its own marker on every li, so the row arrived with two
   bullets: ours and a hollow circle. Kill the theme's, keep ours. */
.nasi-emp-verify-result li { font-size: 13px; color: #3a3630; padding: 3px 0 3px 14px !important; position: relative; margin: 0 !important; }
.nasi-emp-verify-result li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--nasi-gold); }

/* A declined profile is the only thing the banner still says, so it says it as
   a notice rather than as a card with a progress bar that was often wrong. */
.nasi-emp-notice--warn {
	background: var(--nasi-gold-wash) !important;
	border: 1px solid var(--nasi-gold) !important;
	color: var(--nasi-on-gold) !important;
}

/* The picture step's preview. Square, so what is shown matches the square the
   cropper produced and the square an advert will display. */
.nasi-emp-photo { margin: 4px 0 10px; }
.nasi-emp-photo img {
	width: 96px; height: 96px; border-radius: 12px; object-fit: cover;
	border: 1px solid var(--nasi-rule); display: block; background: #f7f4ee;
}

/* Address suggestions. Sits under the field it belongs to, and never covers the
   Next button, because tapping through a dropdown on a phone is hard enough. */
.nasi-emp-field { position: relative; }
.nasi-emp-suggest {
	/* The theme paints a marker on every li, so the list arrived with hollow
	   circles down the side. Same leak as the screening result rows. */ margin: 2px 0 0 !important; padding: 4px 0 !important;
	position: absolute; left: 0; right: 0; z-index: 40;
	background: var(--nasi-surface); border: 1px solid #dcd6c9; border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,.10); max-height: 240px; overflow-y: auto;
}
.nasi-emp-suggest li {
	padding: 9px 12px !important; font-size: 14px; line-height: 1.35; color: #1a1a1a;
	cursor: pointer; margin: 0 !important;
}
.nasi-emp-suggest li::before { content: none !important; }
.nasi-emp-suggest li:hover, .nasi-emp-suggest li:focus { background: #fff8e6; }

/* Waiting for approval. Amber, not red: nothing is wrong, it is just not done. */
.nasi-emp-chip--pending {
	background: var(--nasi-gold-wash) !important; color: #7a5c00 !important;
	border: 1px solid var(--nasi-gold) !important;
}
.nasi-emp-pending {
	margin: 12px 0 0; padding: 11px 14px; border-radius: 8px;
	background: var(--nasi-gold-wash); border-left: 4px solid var(--nasi-gold);
	font-size: 14px; line-height: 1.5; color: var(--nasi-on-gold);
}
.nasi-emp-pending strong { display: block; margin-bottom: 2px; }