/* /Components/ChipRow.razor.rz.scp.css */
/* SmartHR ChipRow — the ChipRow function in RecruitChrome.jsx. */
.shr-chip-row[b-yalh9m6ztk] {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none; /* the row is swiped, not scrollbar-dragged */
}

.shr-chip-row[b-yalh9m6ztk]::-webkit-scrollbar {
  display: none;
}

.shr-chip[b-yalh9m6ztk] {
  flex-shrink: 0;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-regular);
  cursor: pointer;
  white-space: nowrap;
}

.shr-chip--on[b-yalh9m6ztk] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--shr-white);
  font-weight: var(--fw-bold);
}

.shr-chip:focus-visible[b-yalh9m6ztk] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
/* /Components/SectionTitle.razor.rz.scp.css */
/* SmartHR SectionTitle — see RecruitChrome.jsx.
   Title and action share a baseline so the action reads as a caption. */
.shr-section-title[b-rkq3nrjsov] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-family: var(--font-sans);
}

.shr-section-title__text[b-rkq3nrjsov] {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}

/* The shared .shr-rule (brand.css) is 56x4 for full-width surfaces; the mobile
   section heading uses the narrower 36x3 of the prototype. */
.shr-rule[b-rkq3nrjsov] {
  width: 36px;
  height: 3px;
  margin: 6px 0 0;
}
/* /Components/Sheet.razor.rz.scp.css */
/* SmartHR Sheet — geometry from the Sheet function in RecruitChrome.jsx.
   The shrFade/shrUp keyframes live in the prototype's index.html; they are scoped
   here so the sheet carries its own motion instead of leaning on a global stylesheet. */
.shr-sheet-backdrop[b-tt8m6xjdwd] {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 43, 63, 0.42); /* --shr-blue-navy at 42% */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--font-sans);
  animation: shrFade-b-tt8m6xjdwd var(--dur-base) var(--ease-out);
}

.shr-sheet[b-tt8m6xjdwd] {
  background: var(--surface-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* 22px top corners */
  max-height: 86%;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -18px 48px rgba(0, 43, 63, 0.22);
  animation: shrUp-b-tt8m6xjdwd var(--dur-slow) var(--ease-out);
}

/* The panel is autofocused on open so the caret leaves whatever opened the sheet and Escape has a
   target. Same reasoning as the h1 rule in app.css: nobody reached for the panel, and the panel is
   not interactive, so painting a ring around the whole sheet would report an affordance that is not
   there. The controls inside it keep their rings. */
.shr-sheet:focus[b-tt8m6xjdwd],
.shr-sheet:focus-visible[b-tt8m6xjdwd] {
  outline: none;
}

/* Grab handle */
.shr-sheet__grip[b-tt8m6xjdwd] {
  padding: 10px 0 0;
  display: grid;
  place-items: center;
}

.shr-sheet__grip span[b-tt8m6xjdwd] {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--shr-grey-300);
}

.shr-sheet__head[b-tt8m6xjdwd] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
}

.shr-sheet__title[b-tt8m6xjdwd] {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}

.shr-sheet__close[b-tt8m6xjdwd] {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--shr-grey-50);
  color: var(--text-body);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.shr-sheet__close:focus-visible[b-tt8m6xjdwd] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.shr-sheet__body[b-tt8m6xjdwd] {
  overflow-y: auto;
  padding: 4px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shr-sheet__footer[b-tt8m6xjdwd] {
  padding: 12px 16px 6px;
  border-top: 1px solid var(--border-subtle);
}

@keyframes shrFade-b-tt8m6xjdwd {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shrUp-b-tt8m6xjdwd {
  from { transform: translateY(18px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .shr-sheet-backdrop[b-tt8m6xjdwd],
  .shr-sheet[b-tt8m6xjdwd] {
    animation: none;
  }
}
/* /Components/ShrAvatar.razor.rz.scp.css */
/* SmartHR Avatar — see project/components/data-display/Avatar.jsx.
   Tinted circle, brand-blue initials, hairline border. Size and type come
   from the component as inline styles. */
.shr-avatar[b-d6ocob0fr9] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: 1;
  user-select: none;
}
/* /Components/ShrBadge.razor.rz.scp.css */
/* SmartHR Badge — see project/components/data-display/Badge.jsx.
   Pill-shaped status chip: 12px bold label on a soft tint. */
.shr-badge[b-x8f9ebxi2y] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-pill);
}

.shr-badge--neutral[b-x8f9ebxi2y] {
  background: var(--shr-grey-100);
  color: var(--shr-grey-700);
}

.shr-badge--blue[b-x8f9ebxi2y] {
  background: var(--surface-tint);
  color: var(--color-primary);
}

.shr-badge--success[b-x8f9ebxi2y] {
  background: var(--shr-success-tint);
  /* deep green from Badge.jsx — the tint is too pale to carry the label itself */
  color: #2C7A2A;
}

.shr-badge--warning[b-x8f9ebxi2y] {
  background: var(--shr-warning-tint);
  color: #9A6400;
}

.shr-badge--danger[b-x8f9ebxi2y] {
  background: var(--shr-danger-tint);
  color: #B23232;
}

/* The brand accent. Badge.jsx pairs the warm tint with the deep orange. */
.shr-badge--orange[b-x8f9ebxi2y] {
  background: var(--shr-warning-tint);
  color: var(--color-accent-hover);
}
/* /Components/ShrButton.razor.rz.scp.css */
/* SmartHR Button — see project/components/buttons/Button.jsx.
   Pill shape, bold Ubuntu label, calm hover/press feedback. */
.shr-btn[b-crm2qvl4qr] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: 0 var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-standard),
	            color var(--dur-fast) var(--ease-standard),
	            transform var(--dur-fast) var(--ease-standard);
}

.shr-btn:focus-visible[b-crm2qvl4qr] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

.shr-btn:not(:disabled):active[b-crm2qvl4qr] {
	transform: scale(0.97);
}

.shr-btn:disabled[b-crm2qvl4qr] {
	opacity: 0.45;
	cursor: not-allowed;
}

.shr-btn--full[b-crm2qvl4qr] {
	width: 100%;
}

/* ---- Primary: the orange accent CTA — one per surface ---- */
.shr-btn--primary[b-crm2qvl4qr] {
	background: var(--color-accent);
	color: var(--shr-white);
	box-shadow: var(--shadow-accent);
}
.shr-btn--primary:not(:disabled):hover[b-crm2qvl4qr] {
	background: var(--color-accent-hover);
}

/* ---- Brand: the navy filled CTA — the variant Button.jsx calls `primary`.
   Same pill as the accent, and the one the prototype reaches for whenever the call to
   action is "carry on" rather than "this is the thing to do on this screen". ---- */
.shr-btn--brand[b-crm2qvl4qr] {
	background: var(--color-primary);
	color: var(--shr-white);
	box-shadow: var(--shadow-sm);
}
.shr-btn--brand:not(:disabled):hover[b-crm2qvl4qr] {
	background: var(--color-primary-hover);
}

/* ---- Secondary: blue outline on a card/page surface ---- */
.shr-btn--secondary[b-crm2qvl4qr] {
	background: var(--surface-card);
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.shr-btn--secondary:not(:disabled):hover[b-crm2qvl4qr] {
	background: var(--surface-tint);
}

/* ---- Ghost: text only ---- */
.shr-btn--ghost[b-crm2qvl4qr] {
	background: transparent;
	color: var(--color-primary);
}
.shr-btn--ghost:not(:disabled):hover[b-crm2qvl4qr] {
	background: var(--surface-tint);
}

@media (prefers-reduced-motion: reduce) {
	.shr-btn[b-crm2qvl4qr] {
		transition: none;
	}
	.shr-btn:not(:disabled):active[b-crm2qvl4qr] {
		transform: none;
	}
}
/* /Components/ShrCard.razor.rz.scp.css */
/* SmartHR Card — see the MCard surface in RecruitChrome.jsx and
   project/components/surfaces/Card.jsx. Padding comes from the component. */
.shr-card[b-48ze7x0w42] {
  background: var(--surface-card);
  border-radius: var(--radius-card); /* 16px */
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
}

.shr-card--clickable[b-48ze7x0w42] {
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.shr-card--clickable:hover[b-48ze7x0w42] {
  box-shadow: var(--shadow-md);
}

.shr-card--clickable:active[b-48ze7x0w42] {
  transform: scale(0.99);
}

.shr-card--clickable:focus-visible[b-48ze7x0w42] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .shr-card--clickable[b-48ze7x0w42] {
    transition: none;
  }
  .shr-card--clickable:active[b-48ze7x0w42] {
    transform: none;
  }
}
/* /Components/ShrCheckbox.razor.rz.scp.css */
/* SmartHR Checkbox — see project/components/forms/Checkbox.jsx.
   22px rounded square; checked fills brand blue and reveals the check mark.
   The native input stays in the DOM but is visually hidden. */
.shr-check[b-0zep3uxird] {
  display: block;
  font-family: var(--font-sans);
  cursor: pointer;
}

.shr-check__row[b-0zep3uxird] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* keeps the tap target comfortable even next to a single short label */
  min-height: 44px;
  padding: var(--space-2) 0;
}

/* Visually hidden, still focusable and still the real control. */
.shr-check__input[b-0zep3uxird] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.shr-check__box[b-0zep3uxird] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-card);
  /* the check inherits currentColor from ShrIcon — transparent until checked */
  color: transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.shr-check--on .shr-check__box[b-0zep3uxird] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--shr-white);
}

.shr-check__input:focus-visible + .shr-check__box[b-0zep3uxird] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.shr-check__label[b-0zep3uxird] {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
  text-wrap: pretty;
}

.shr-field__error[b-0zep3uxird] {
  display: block;
  margin-top: calc(var(--space-1) * -1);
  padding-bottom: var(--space-2);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--shr-danger);
}

.shr-field--invalid .shr-check__box[b-0zep3uxird] {
  border-color: var(--shr-danger);
}

.shr-check--disabled[b-0zep3uxird] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .shr-check__box[b-0zep3uxird] {
    transition: none;
  }
}
/* /Components/ShrIconButton.razor.rz.scp.css */
/* SmartHR IconButton — see project/components/buttons/IconButton.jsx.
   Circular, subtly tinted, sized for a comfortable touch target. */
.shr-icon-btn[b-q3wip9uqb8] {
	display: grid;
	place-items: center;
	flex: none;
	padding: 0;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--shr-grey-50);
	color: var(--color-primary);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-standard),
	            transform var(--dur-fast) var(--ease-standard);
}

.shr-icon-btn:hover[b-q3wip9uqb8] {
	background: var(--shr-grey-100);
}

.shr-icon-btn:active[b-q3wip9uqb8] {
	transform: scale(0.94);
}

.shr-icon-btn:focus-visible[b-q3wip9uqb8] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.shr-icon-btn[b-q3wip9uqb8] {
		transition: none;
	}
	.shr-icon-btn:active[b-q3wip9uqb8] {
		transform: none;
	}
}
/* /Components/ShrInput.razor.rz.scp.css */
/* SmartHR Input — see project/components/forms/Input.jsx.
   Quiet label, hairline field row on white, blue focus ring, one line of
   helper or error copy underneath. */
.shr-field[b-t2es5g7w1x] {
  display: block;
  font-family: var(--font-sans);
}

/* Input.jsx:31 verbatim — 14px, weight 500, --shr-grey-700. A quiet label: the value is what
   the eye should land on, not the word above it. */
.shr-field__label[b-t2es5g7w1x] {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--shr-grey-700);
}

.shr-field__control[b-t2es5g7w1x] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.shr-field__control:focus-within[b-t2es5g7w1x] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shr-field__leading[b-t2es5g7w1x],
.shr-field__trailing[b-t2es5g7w1x] {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--text-muted);
}

.shr-field__input[b-t2es5g7w1x] {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-heading);
}

.shr-field__input[b-t2es5g7w1x]::placeholder {
  color: var(--text-muted);
}

.shr-field__hint[b-t2es5g7w1x],
.shr-field__error[b-t2es5g7w1x] {
  display: block;
  margin-top: var(--space-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.shr-field__hint[b-t2es5g7w1x] {
  color: var(--text-muted);
}

.shr-field__error[b-t2es5g7w1x] {
  color: var(--shr-danger);
}

/* ---- Invalid: the row picks up the danger hairline ---- */
.shr-field--invalid .shr-field__control[b-t2es5g7w1x] {
  border-color: var(--shr-danger);
}

.shr-field--invalid .shr-field__control:focus-within[b-t2es5g7w1x] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shr-danger) 35%, transparent);
}

/* ---- Disabled ---- */
.shr-field--disabled .shr-field__control[b-t2es5g7w1x] {
  background: var(--shr-grey-50);
  cursor: not-allowed;
}

.shr-field--disabled .shr-field__label[b-t2es5g7w1x],
.shr-field--disabled .shr-field__input[b-t2es5g7w1x] {
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .shr-field__control[b-t2es5g7w1x] {
    transition: none;
  }
}
/* /Components/ShrSelect.razor.rz.scp.css */
/* SmartHR Select — see project/components/forms/Select.jsx.
   Same field row as ShrInput; the platform arrow is replaced by a chevD ShrIcon
   so the control reads identically across browsers. */
.shr-field[b-6vmta2adeg] {
  display: block;
  font-family: var(--font-sans);
}

/* The same quiet label as ShrInput — Input.jsx:31: 14px, weight 500, --shr-grey-700. */
.shr-field__label[b-6vmta2adeg] {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--shr-grey-700);
}

.shr-field__control[b-6vmta2adeg] {
  display: flex;
  align-items: center;
  min-height: 48px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.shr-field__control--select[b-6vmta2adeg] {
  position: relative;
}

.shr-field__control:focus-within[b-6vmta2adeg] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shr-field__select[b-6vmta2adeg] {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  /* room on the right for the chevron overlay */
  padding: 0 44px 0 var(--space-4);
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-heading);
  cursor: pointer;
}

.shr-field__chevron[b-6vmta2adeg] {
  position: absolute;
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  pointer-events: none;
}

.shr-field__hint[b-6vmta2adeg],
.shr-field__error[b-6vmta2adeg] {
  display: block;
  margin-top: var(--space-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.shr-field__hint[b-6vmta2adeg] {
  color: var(--text-muted);
}

.shr-field__error[b-6vmta2adeg] {
  color: var(--shr-danger);
}

/* ---- Invalid ---- */
.shr-field--invalid .shr-field__control[b-6vmta2adeg] {
  border-color: var(--shr-danger);
}

.shr-field--invalid .shr-field__control:focus-within[b-6vmta2adeg] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shr-danger) 35%, transparent);
}

/* ---- Disabled ---- */
.shr-field--disabled .shr-field__control[b-6vmta2adeg] {
  background: var(--shr-grey-50);
}

.shr-field--disabled .shr-field__label[b-6vmta2adeg],
.shr-field--disabled .shr-field__select[b-6vmta2adeg] {
  color: var(--text-muted);
}

.shr-field--disabled .shr-field__select[b-6vmta2adeg] {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .shr-field__control[b-6vmta2adeg] {
    transition: none;
  }
}
/* /Components/ShrSwitch.razor.rz.scp.css */
/* SmartHR Switch — see project/components/forms/Switch.jsx.
   46x28 pill, 22px thumb inset 3px, on = brand blue. */
.shr-switch[b-0g8nhgf51n] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
}

.shr-switch__track[b-0g8nhgf51n] {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--shr-grey-300);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
}

/* Grows the tap target to 44px without changing the pill's look. */
.shr-switch__track[b-0g8nhgf51n]::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.shr-switch__track:focus-visible[b-0g8nhgf51n] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.shr-switch__thumb[b-0g8nhgf51n] {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--shr-white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out);
}

/* 46 - 22 - 3 - 3 = 18 */
.shr-switch--on .shr-switch__track[b-0g8nhgf51n] {
  background: var(--color-primary);
}

.shr-switch--on .shr-switch__thumb[b-0g8nhgf51n] {
  transform: translateX(18px);
}

.shr-switch__label[b-0g8nhgf51n] {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-body);
  text-wrap: pretty;
}

.shr-switch--disabled[b-0g8nhgf51n] {
  opacity: 0.5;
}

.shr-switch--disabled .shr-switch__track[b-0g8nhgf51n] {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .shr-switch__track[b-0g8nhgf51n],
  .shr-switch__thumb[b-0g8nhgf51n] {
    transition: none;
  }
}
/* /Components/ShrTag.razor.rz.scp.css */
/* SmartHR Tag — see project/components/data-display/Tag.jsx.
   A calmer sibling of the Badge: 13px medium label, roomier pill. */
.shr-tag[b-26c9ol3o4n] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-pill);
}

.shr-tag--blue[b-26c9ol3o4n] {
  background: var(--surface-tint);
  color: var(--color-primary);
}

.shr-tag--neutral[b-26c9ol3o4n] {
  background: var(--shr-grey-100);
  color: var(--shr-grey-700);
}

/* The brand accent. Tag.jsx pairs the warm tint with the deep orange. */
.shr-tag--orange[b-26c9ol3o4n] {
  background: var(--shr-warning-tint);
  color: var(--color-accent-hover);
}

/* Tag.jsx stops at blue/neutral/orange; the status tones below mirror
   Badge.jsx so a tag can carry the same meaning as its badge. */
.shr-tag--success[b-26c9ol3o4n] {
  background: var(--shr-success-tint);
  color: #2C7A2A;
}

.shr-tag--warning[b-26c9ol3o4n] {
  background: var(--shr-warning-tint);
  color: #9A6400;
}

.shr-tag--danger[b-26c9ol3o4n] {
  background: var(--shr-danger-tint);
  color: #B23232;
}
/* /Components/StageTrack.razor.rz.scp.css */
/* SmartHR StageTrack — the StageTrack function in RecruitChrome.jsx.
   Each stage owns an equal slice of the row; the connector fills the slack
   between its dot and the next one. */
.shr-stage-track[b-aw2m4ai8dl] {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-sans);
}

.shr-stage[b-aw2m4ai8dl] {
  flex: 1;
  min-width: 0;
}

.shr-stage__row[b-aw2m4ai8dl] {
  display: flex;
  align-items: center;
}

.shr-stage__dot[b-aw2m4ai8dl] {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--shr-grey-300);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--shr-white);
}

.shr-stage__dot.shr-stage--done[b-aw2m4ai8dl] {
  background: var(--color-primary);
}

.shr-stage__dot.shr-stage--now[b-aw2m4ai8dl] {
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(245, 123, 0, 0.18); /* --shr-orange halo */
}

.shr-stage__line[b-aw2m4ai8dl] {
  flex: 1;
  height: 2px;
  background: var(--shr-grey-200);
}

.shr-stage__line--done[b-aw2m4ai8dl] {
  background: var(--color-primary);
}

.shr-stage__label[b-aw2m4ai8dl] {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: var(--fw-regular);
  color: var(--shr-grey-400);
}

.shr-stage__label--done[b-aw2m4ai8dl] {
  color: var(--color-primary);
}

.shr-stage__label--now[b-aw2m4ai8dl] {
  font-weight: var(--fw-bold);
  color: var(--color-accent-hover);
}

.shr-stage-track--compact .shr-stage__label[b-aw2m4ai8dl] {
  font-size: 10.5px;
}
/* /Features/Apply/AppliedDonePage.razor.rz.scp.css */
/* Application sent — geometry from the AppliedDone function in ApplyFlow.jsx, the gallery
   frame "Application sent". The panel is centred in the column: this is the one screen with
   nothing to scroll past, so the confirmation sits in the middle rather than at the top. */

.applied-done[b-kda2i5vwwf] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 22px;
	background: var(--surface-page);
	font-family: var(--font-sans);
}

.applied-done__panel[b-kda2i5vwwf] {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* The blue seal, not an orange one: the accent on this screen belongs to Track application. */
.applied-done__seal[b-kda2i5vwwf] {
	width: 78px;
	height: 78px;
	border-radius: var(--radius-pill);
	background: var(--shr-blue-tint);
	color: var(--color-primary);
	display: grid;
	place-items: center;
}

.applied-done__title[b-kda2i5vwwf] {
	margin: 16px 0 0;
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--text-heading);
}

.applied-done__copy[b-kda2i5vwwf] {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}

.applied-done__card[b-kda2i5vwwf] {
	width: 100%;
	margin-top: 26px;
	text-align: left;
}

/* ---- Who and what ------------------------------------------------------
   ApplyFlow.jsx:138-143 — the employer mark beside the role, heading the card above the
   reference line. */
.applied-done__job[b-kda2i5vwwf] {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.applied-done__job-text[b-kda2i5vwwf] {
	min-width: 0;
}

.applied-done__job-title[b-kda2i5vwwf] {
	font-size: 14.5px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	color: var(--text-heading);
	text-wrap: pretty;
}

/* ---- The reference ------------------------------------------------------ */
.applied-done__reference[b-kda2i5vwwf] {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.applied-done__reference-label[b-kda2i5vwwf] {
	font-size: 12.5px;
	color: var(--text-muted);
}

.applied-done__reference-value[b-kda2i5vwwf] {
	font-size: 15px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	color: var(--text-heading);
}

.applied-done__reference-meta[b-kda2i5vwwf] {
	font-size: 12.5px;
	color: var(--text-muted);
}

/* ---- What happens next -------------------------------------------------- */
.applied-done__steps[b-kda2i5vwwf] {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-subtle);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.applied-done__step[b-kda2i5vwwf] {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--text-body);
}

.applied-done__step-number[b-kda2i5vwwf] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: var(--radius-pill);
	background: var(--shr-grey-50);
	color: var(--color-primary);
	font-size: 11px;
	font-weight: var(--fw-bold);
	display: grid;
	place-items: center;
}

.applied-done__step-copy[b-kda2i5vwwf] {
	text-wrap: pretty;
}

/* ---- The two ways on ---------------------------------------------------- */
.applied-done__actions[b-kda2i5vwwf] {
	width: 100%;
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* /Features/Apply/ApplySheet.razor.rz.scp.css */
/* Apply sheet — geometry from the ApplySheet function in ApplyFlow.jsx. The prototype's
   half-pixel type sizes are kept verbatim: the screens are diffed against that gallery.

   The sheet body already stacks its children with a 14px gap, so this file only re-makes that
   stack inside the EditForm and then styles the blocks. */

.apply-sheet[b-6ipsj24cbc] {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---- The step bar ------------------------------------------------------- */
/* Three equal segments rather than numbered dots: the prototype's own progress read. */
.apply-sheet__steps[b-6ipsj24cbc] {
	display: flex;
	gap: 6px;
}

.apply-sheet__step[b-6ipsj24cbc] {
	flex: 1;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--shr-grey-200);
}

.apply-sheet__step--on[b-6ipsj24cbc] {
	background: var(--color-primary);
}

/* ---- The vacancy strip -------------------------------------------------- */
/* A quiet reminder of what is being applied for; the sheet's title carries the step. */
.apply-sheet__job[b-6ipsj24cbc] {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-lg);
	background: var(--shr-grey-50);
}

.apply-sheet__job-text[b-6ipsj24cbc] {
	min-width: 0;
}

.apply-sheet__job-title[b-6ipsj24cbc] {
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.apply-sheet__job-meta[b-6ipsj24cbc] {
	font-size: 12px;
	color: var(--text-muted);
}

/* ---- Groups ------------------------------------------------------------- */
.apply-sheet__group[b-6ipsj24cbc],
.apply-sheet__questions[b-6ipsj24cbc],
.apply-sheet__consents[b-6ipsj24cbc] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.apply-sheet__questions[b-6ipsj24cbc] {
	gap: 14px;
}

.apply-sheet__consents[b-6ipsj24cbc] {
	gap: 10px;
	padding: 12px;
	border-radius: var(--radius-lg);
	background: var(--surface-tint);
}

.apply-sheet__group-title[b-6ipsj24cbc] {
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.apply-sheet__picks[b-6ipsj24cbc] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.apply-sheet__note[b-6ipsj24cbc] {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-muted);
}

.apply-sheet__error[b-6ipsj24cbc] {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--shr-danger);
}

/* The way out of the flow and back into the vault. Ghost, so the footer keeps the one orange. */
.apply-sheet__upload[b-6ipsj24cbc] {
	margin-top: 2px;
}

/* ---- Pick rows ---------------------------------------------------------- */
/* The prototype's PickRow, built round a real input: the input is visually hidden and the
   label is the hit area, so the choice stays a radio group / checkbox list underneath. */
.apply-pick[b-6ipsj24cbc] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	cursor: pointer;
}

.apply-pick--on[b-6ipsj24cbc] {
	border-color: var(--color-primary);
	background: var(--shr-blue-tint);
}

.apply-pick--disabled[b-6ipsj24cbc] {
	cursor: not-allowed;
	opacity: 0.62;
}

.apply-pick__input[b-6ipsj24cbc] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.apply-pick__input:focus-visible + .apply-pick__mark[b-6ipsj24cbc] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* The tick / dot well: a square for an attachment, a circle for the one CV that is sent. */
.apply-pick__mark[b-6ipsj24cbc] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 2px solid var(--shr-grey-300);
	border-radius: 6px;
	display: grid;
	place-items: center;
	color: var(--shr-white);
}

.apply-pick__mark--radio[b-6ipsj24cbc] {
	border-radius: var(--radius-pill);
}

/* Nothing shows in an unticked box: the check and the dot are painted only when chosen.
   The tick is drawn by ShrIcon, whose svg carries its own scope — ::deep is what reaches it. */
.apply-pick__mark[b-6ipsj24cbc]  svg {
	visibility: hidden;
}

.apply-pick__dot[b-6ipsj24cbc] {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	visibility: hidden;
}

.apply-pick--on .apply-pick__mark[b-6ipsj24cbc] {
	border-color: var(--color-primary);
}

.apply-pick--on .apply-pick__mark:not(.apply-pick__mark--radio)[b-6ipsj24cbc] {
	background: var(--color-primary);
}

.apply-pick--on .apply-pick__mark[b-6ipsj24cbc]  svg,
.apply-pick--on .apply-pick__dot[b-6ipsj24cbc] {
	visibility: visible;
}

.apply-pick__body[b-6ipsj24cbc] {
	flex: 1;
	min-width: 0;
}

.apply-pick__title[b-6ipsj24cbc] {
	display: block;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apply-pick__meta[b-6ipsj24cbc] {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}

/* ---- The review read-back ---------------------------------------------- */
.apply-sheet__review[b-6ipsj24cbc] {
	display: flex;
	flex-direction: column;
}

.apply-review__row[b-6ipsj24cbc] {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--border-subtle);
}

.apply-review__row:first-child[b-6ipsj24cbc] {
	border-top: 0;
}

.apply-review__key[b-6ipsj24cbc] {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--text-muted);
}

.apply-review__value[b-6ipsj24cbc] {
	min-width: 0;
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- The footer --------------------------------------------------------- */
/* Ghost first, then the sheet's one orange button filling the rest of the row. */
.apply-sheet__actions[b-6ipsj24cbc] {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* /Features/Apply/SavedPage.razor.rz.scp.css */
/* Saved roles and alerts — geometry from the SavedScreen function in ApplyFlow.jsx, the gallery
   frame "Saved & alerts". Screen bg="var(--surface-app)", Body pad={16}: a scrolling 16px column
   over the app canvas, with the bar pinned above it. */

.saved[b-8haf4v91dr] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.saved__body[b-8haf4v91dr] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- Nothing saved ------------------------------------------------------ */
.saved__empty[b-8haf4v91dr] {
	text-align: center;
}

.saved__empty-title[b-8haf4v91dr] {
	font-size: 14px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.saved__empty-copy[b-8haf4v91dr] {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- Job alerts ---------------------------------------------------------
   The card is padded to 4px and each row carries its own 12px/10px, so the hairlines between
   rows run the full width of the card — the prototype's list-inside-a-card. */
.saved__alert[b-8haf4v91dr] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 10px;
}

.saved__alert + .saved__alert[b-8haf4v91dr] {
	border-top: 1px solid var(--border-subtle);
}

.saved__alert-text[b-8haf4v91dr] {
	flex: 1;
	min-width: 0;
}

.saved__alert-name[b-8haf4v91dr] {
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	text-wrap: pretty;
}

.saved__alert-meta[b-8haf4v91dr] {
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}

/* ShrSwitch shows its Label beside the pill; here the row has already printed that name, and the
   Label is carrying the switch's accessible name. Hiding the duplicate costs nothing to assistive
   tech — the component marks that copy aria-hidden. ::deep is what reaches into the child. */
.saved__alert[b-8haf4v91dr]  .shr-switch__label {
	display: none;
}

/* ---- The footnote ------------------------------------------------------- */
.saved__note[b-8haf4v91dr] {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}
/* /Features/Auth/LogInPage.razor.rz.scp.css */
/* Log in — AuthScreens.jsx, FormHead + LogIn (lines 58-66, 92-119).
   The head, form and text-link rules mirror SignUpPage.razor.css: scoped CSS is per
   component, so the two screens each carry their own copy of the shared shape. */

.auth-screen[b-ihv4juvftw] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-page);
}

/* ---- Tinted form head --------------------------------------------------- */
.auth-head[b-ihv4juvftw] {
	flex-shrink: 0;
	padding: 14px 20px 18px;
	background: var(--surface-tint);
}

.auth-head__eyebrow[b-ihv4juvftw] {
	font-size: 11.5px;
}

.auth-head__title[b-ihv4juvftw] {
	margin: 6px 0 0;
	font-size: 23px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	color: var(--text-heading);
}

.auth-head__body[b-ihv4juvftw] {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-body);
}

/* ---- The form itself ----------------------------------------------------
   EditForm renders the <form> itself, so it never carries this component's
   scope attribute — ::deep is what reaches it. The form is the scrolling
   body of the screen. */
.auth-screen[b-ihv4juvftw]  .auth-form {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--surface-page);
}

/* ---- "Keep me signed in" and "Forgot password?" share a row ---------------
   AuthScreens.jsx:103 — a space-between flex row, the checkbox on the left and the link
   pushed to the right edge of the form. */
.login__remember[b-ihv4juvftw] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.login__forgot[b-ihv4juvftw] {
	flex-shrink: 0;
	font-size: 13px;
}

/* Hairline "or" divider between the personal and work account routes. */
.login__or[b-ihv4juvftw] {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.login__or span[b-ihv4juvftw] {
	flex: 1;
	height: 1px;
	background: var(--border-subtle);
}

.auth-failure[b-ihv4juvftw] {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--shr-danger-tint);
	color: var(--shr-danger);
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.auth-alt[b-ihv4juvftw] {
	margin: 2px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
}

.auth-textlink[b-ihv4juvftw] {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: var(--fw-medium);
	color: var(--text-link);
	cursor: pointer;
}

.auth-textlink:hover[b-ihv4juvftw] {
	text-decoration: underline;
}

.auth-textlink:focus-visible[b-ihv4juvftw] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
/* /Features/Auth/OnboardingPage.razor.rz.scp.css */
/* Welcome screen — AuthScreens.jsx, Onboarding (lines 7-56). */

.onboarding[b-cm1d9bmt9s] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-page);
}

/* ---- Blue brand band ---------------------------------------------------- */
.onboarding__brand[b-cm1d9bmt9s] {
	flex-shrink: 0;
	position: relative;
	background: var(--surface-brand);
	padding-top: 14px;
	overflow: hidden;
}

.onboarding__logo[b-cm1d9bmt9s] {
	display: block;
	height: 26px;
	margin-left: 22px;
}

.onboarding__photo-well[b-cm1d9bmt9s] {
	display: grid;
	place-items: center;
	padding: 26px 0 34px;
}

/* The offset shape peeking out behind the frame. Steel blue rather than the
   orange of the shared .shr-photo-offset: on this surface orange belongs to
   the single call to action, and steel is what the prototype uses on blue. */
.onboarding__photo-offset[b-cm1d9bmt9s] {
	position: relative;
	display: inline-block;
}

.onboarding__photo-offset[b-cm1d9bmt9s]::before {
	content: "";
	position: absolute;
	left: -22px;
	bottom: -20px;
	width: 208px;
	height: 208px;
	border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%;
	background: var(--shr-blue-steel);
	opacity: 0.55;
	z-index: 0;
}

/* Organic frame — never a hard square, never a perfect circle. */
.onboarding__photo[b-cm1d9bmt9s] {
	position: relative;
	z-index: 1;
	width: 208px;
	height: 208px;
	display: grid;
	place-items: center;
	border-radius: 42% 58% 62% 38% / 52% 40% 60% 48%;
	overflow: hidden;
	/* Striped stand-in for the photograph; #d6e7f1 is the prototype's second stripe. */
	background: repeating-linear-gradient(135deg, var(--shr-blue-tint) 0 9px, #d6e7f1 9px 18px);
}

/* The cool brand-tinted treatment every framed photo carries. */
.onboarding__photo-overlay[b-cm1d9bmt9s] {
	position: absolute;
	inset: 0;
	background: var(--shr-watermark);
	mix-blend-mode: multiply;
	opacity: 0.5;
}

.onboarding__photo-caption[b-cm1d9bmt9s] {
	position: relative;
	z-index: 2;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--shr-blue-deep);
	text-align: center;
	line-height: 1.5;
	padding: 0 26px;
}

.onboarding__halftone[b-cm1d9bmt9s] {
	position: absolute;
	top: -20px;
	right: -46px;
	width: 190px;
	height: 190px;
	pointer-events: none;
}

/* One wave per surface, bled a pixel past the edge so no seam shows. */
.onboarding__wave[b-cm1d9bmt9s] {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	line-height: 0;
}

/* ---- Copy and actions --------------------------------------------------- */
.onboarding__body[b-cm1d9bmt9s] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-5);
	padding: 18px 22px 26px;
	overflow-y: auto;
}

.onboarding__eyebrow[b-cm1d9bmt9s] {
	font-size: 12px;
}

.onboarding__headline[b-cm1d9bmt9s] {
	margin: 8px 0 0;
	font-size: 27px;
	line-height: 1.18;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
	text-wrap: pretty;
}

.onboarding__lede[b-cm1d9bmt9s] {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}

.onboarding__actions[b-cm1d9bmt9s] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.onboarding__footnote[b-cm1d9bmt9s] {
	margin: 4px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-muted);
	text-align: center;
}
/* /Features/Auth/SignUpPage.razor.rz.scp.css */
/* Sign up — AuthScreens.jsx, FormHead + SignUp (lines 58-90). */

.auth-screen[b-zm0t0bw4b0] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-page);
}

/* ---- Tinted form head --------------------------------------------------- */
.auth-head[b-zm0t0bw4b0] {
	flex-shrink: 0;
	padding: 14px 20px 18px;
	background: var(--surface-tint);
}

.auth-head__eyebrow[b-zm0t0bw4b0] {
	font-size: 11.5px;
}

.auth-head__title[b-zm0t0bw4b0] {
	margin: 6px 0 0;
	font-size: 23px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	color: var(--text-heading);
}

.auth-head__body[b-zm0t0bw4b0] {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-body);
}

/* ---- The form itself ----------------------------------------------------
   EditForm renders the <form> itself, so it never carries this component's
   scope attribute — ::deep is what reaches it. The form is the scrolling
   body of the screen. */
.auth-screen[b-zm0t0bw4b0]  .auth-form {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--surface-page);
}

.auth-failure[b-zm0t0bw4b0] {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--shr-danger-tint);
	color: var(--shr-danger);
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.auth-alt[b-zm0t0bw4b0] {
	margin: 2px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
}

.auth-textlink[b-zm0t0bw4b0] {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: var(--fw-medium);
	color: var(--text-link);
	cursor: pointer;
}

.auth-textlink:hover[b-zm0t0bw4b0] {
	text-decoration: underline;
}

.auth-textlink:focus-visible[b-zm0t0bw4b0] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
/* /Features/Documents/CvReviewPage.razor.rz.scp.css */
/* The CV read-back — geometry from the CVReviewScreen function in DocScreens.jsx, the gallery frame
   "CV read back". Screen bg="var(--surface-app)", Body pad={16}, with the two actions pinned in a
   white bar under the scrolling column. */

.cv-review[b-s6xxfjnk7m] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.cv-review__body[b-s6xxfjnk7m] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- What we read ------------------------------------------------------- */
.cv-review__file[b-s6xxfjnk7m] {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cv-review__file-icon[b-s6xxfjnk7m] {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--shr-blue-tint);
	color: var(--color-primary);
}

.cv-review__file-text[b-s6xxfjnk7m] {
	flex: 1;
	min-width: 0;
}

.cv-review__file-name[b-s6xxfjnk7m] {
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cv-review__file-meta[b-s6xxfjnk7m] {
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}

.cv-review__lede[b-s6xxfjnk7m] {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- One parsed field ---------------------------------------------------
   The card is padded to 4px and each row carries its own 12px/10px, so the hairlines run the full
   width of the card — the prototype's list-inside-a-card. */
.cv-field[b-s6xxfjnk7m] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 10px;
}

.cv-field + .cv-field[b-s6xxfjnk7m] {
	border-top: 1px solid var(--border-subtle);
}

.cv-field__text[b-s6xxfjnk7m] {
	flex: 1;
	min-width: 0;
}

.cv-field__label[b-s6xxfjnk7m] {
	font-size: 11.5px;
	color: var(--text-muted);
}

.cv-field__value[b-s6xxfjnk7m] {
	margin-top: 2px;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	text-wrap: pretty;
}

/* An editable row swaps the value for an input; the field row is already inside a padded card,
   so the input loses the component's own top gap. */
.cv-field__text[b-s6xxfjnk7m]  .shr-field {
	margin-top: 4px;
}

/* What we are unsure of: a warm tint behind the row and the reason spelled out under the value. */
.cv-field--flagged[b-s6xxfjnk7m] {
	background: var(--shr-warning-tint);
	border-radius: 12px;
}

.cv-field__flag[b-s6xxfjnk7m] {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-size: 12px;
	font-weight: var(--fw-medium);
	color: var(--color-accent-hover);
}

.cv-field__action[b-s6xxfjnk7m] {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--shr-grey-400);
	cursor: pointer;
}

.cv-field__action:focus-visible[b-s6xxfjnk7m] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* On a flagged row the button is the confirm, so it carries the warm colour the flag does. */
.cv-field--flagged .cv-field__action[b-s6xxfjnk7m] {
	background: var(--surface-card);
	color: var(--color-accent-hover);
}

/* ---- Skills ------------------------------------------------------------- */
.cv-review__skills[b-s6xxfjnk7m] {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* ---- The pinned actions ------------------------------------------------- */
.cv-review__actions[b-s6xxfjnk7m] {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 16px;
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
}
/* /Features/Documents/DocumentsPage.razor.rz.scp.css */
/* The document locker — geometry from the DocumentsScreen function in DocScreens.jsx, the gallery
   frame "Document locker". Screen bg="var(--surface-app)", Body pad={16}: a scrolling 16px column
   over the app canvas with the bar pinned above it. */

.documents[b-vhyj0d4tei] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.documents__body[b-vhyj0d4tei] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- How full the locker is --------------------------------------------- */
.documents__progress-head[b-vhyj0d4tei] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.documents__progress-title[b-vhyj0d4tei] {
	font-size: 14px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
	text-wrap: pretty;
}

.documents__progress-count[b-vhyj0d4tei] {
	font-size: 13px;
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	white-space: nowrap;
}

.documents__bar[b-vhyj0d4tei] {
	height: 8px;
	margin-top: 10px;
	border-radius: var(--radius-pill);
	background: var(--shr-grey-100);
	overflow: hidden;
}

.documents__bar-fill[b-vhyj0d4tei] {
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	transition: width var(--dur-base) var(--ease-standard);
}

.documents__progress-copy[b-vhyj0d4tei] {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- One document ------------------------------------------------------- */
.doc-row[b-vhyj0d4tei] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 13px 10px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.doc-row + .doc-row[b-vhyj0d4tei] {
	border-top: 1px solid var(--border-subtle);
}

.doc-row:focus-visible[b-vhyj0d4tei] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: 12px;
}

.doc-row__icon[b-vhyj0d4tei] {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--shr-blue-tint);
	color: var(--color-primary);
}

/* The slot for what is not there yet: dashed, grey, and holding a plus rather than a file. */
.doc-row--missing .doc-row__icon[b-vhyj0d4tei] {
	background: var(--shr-grey-50);
	border: 1px dashed var(--border-strong);
	color: var(--shr-grey-400);
}

.doc-row__text[b-vhyj0d4tei] {
	flex: 1;
	min-width: 0;
}

.doc-row__name[b-vhyj0d4tei] {
	display: block;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.doc-row__meta[b-vhyj0d4tei] {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}

/* The CV is the one row that goes somewhere other than the upload sheet, so it says so. */
.doc-row__review[b-vhyj0d4tei] {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-size: 12px;
	font-weight: var(--fw-medium);
	color: var(--color-primary);
}

.doc-row__chev[b-vhyj0d4tei] {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--shr-grey-400);
}

/* ---- The dashed upload panel -------------------------------------------- */
.documents__upload[b-vhyj0d4tei] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 20px 16px;
	border: 1.5px dashed var(--border-strong);
	border-radius: var(--radius-card);
	background: var(--surface-card);
	font-family: var(--font-sans);
	color: var(--color-primary);
	cursor: pointer;
}

.documents__upload:focus-visible[b-vhyj0d4tei] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.documents__upload-title[b-vhyj0d4tei] {
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.documents__upload-hint[b-vhyj0d4tei] {
	font-size: 12px;
	color: var(--text-muted);
}

/* ---- Where the documents live ------------------------------------------- */
.documents__privacy[b-vhyj0d4tei] {
	display: flex;
	gap: 10px;
	padding: 13px;
	border-radius: var(--radius-lg);
	background: var(--surface-tint);
	color: var(--color-primary);
}

/* The shield is drawn by ShrIcon, whose svg carries its own scope — ::deep is what reaches it. */
.documents__privacy[b-vhyj0d4tei]  > svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.documents__privacy-copy[b-vhyj0d4tei] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}
/* /Features/Documents/UploadSheet.razor.rz.scp.css */
/* Adding a document — geometry from the UploadSheet function in DocScreens.jsx. The Sheet supplies
   the panel, the grip, the heading and the footer rule; this is the body inside it. */

.upload-sheet[b-av151g80gl] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--font-sans);
}

/* ---- Where the document comes from -------------------------------------- */
.upload-sheet__source[b-av151g80gl] {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 44px;
	padding: 14px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.upload-sheet__source:hover[b-av151g80gl] {
	border-color: var(--border-strong);
}

.upload-sheet__source:focus-visible[b-av151g80gl] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.upload-sheet__source-icon[b-av151g80gl] {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--shr-blue-tint);
	color: var(--color-primary);
}

.upload-sheet__source-text[b-av151g80gl] {
	flex: 1;
	min-width: 0;
}

.upload-sheet__source-title[b-av151g80gl] {
	display: block;
	font-size: 14px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.upload-sheet__source-sub[b-av151g80gl] {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--text-muted);
}

.upload-sheet__source-chev[b-av151g80gl] {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--shr-grey-400);
}

/* ---- What would be sent -------------------------------------------------
   The prototype animates a progress bar here. Nothing is uploading yet, so the row states what
   has been chosen instead of pretending to move. */
.upload-sheet__file[b-av151g80gl] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
}

.upload-sheet__file-icon[b-av151g80gl] {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--shr-blue-tint);
	color: var(--color-primary);
}

.upload-sheet__file-text[b-av151g80gl] {
	flex: 1;
	min-width: 0;
}

.upload-sheet__file-name[b-av151g80gl] {
	display: block;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upload-sheet__file-meta[b-av151g80gl] {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-muted);
	text-wrap: pretty;
}

.upload-sheet__change[b-av151g80gl] {
	flex-shrink: 0;
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--color-primary);
	cursor: pointer;
}

.upload-sheet__change:focus-visible[b-av151g80gl] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-md);
}

/* ---- The footnote ------------------------------------------------------- */
.upload-sheet__note[b-av151g80gl] {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}
/* /Features/Jobs/FilterSheet.razor.rz.scp.css */
/* Vacancy filter sheet — the FilterSheet function in JobScreens.jsx (lines 174-220).
   The sheet body's own column gap lands on the EditForm rather than the fields, so the
   stack is re-made here inside the form. */

.filter-sheet[b-coj1dqr3sk] {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The chip rows scroll sideways inside their group rather than widening the sheet. */
.filter-sheet__group[b-coj1dqr3sk] {
	min-width: 0;
}

.filter-sheet__label[b-coj1dqr3sk] {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

/* The switch closes the sheet's list of facets, so it gets the hairline above it. */
.filter-sheet__internal[b-coj1dqr3sk] {
	padding-top: 10px;
	border-top: 1px solid var(--border-subtle);
}

.filter-sheet__note[b-coj1dqr3sk] {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--text-muted);
}

/* Ghost first, then the sheet's one orange button filling the rest of the row. */
.filter-sheet__actions[b-coj1dqr3sk] {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* /Features/Jobs/JobDetailPage.razor.rz.scp.css */
/* Vacancy detail — geometry from the JobDetail function in JobScreens.jsx (lines 239-301).
   The prototype's half-pixel type sizes are kept verbatim: the screens are diffed against
   that gallery. */

.job-detail[b-qn4o84gv99] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
}

/* ---- The blue header ---------------------------------------------------- */
/* Same blue as the app bar above it, with no rule between: one brand panel, not two blocks. */
.job-detail__header[b-qn4o84gv99] {
	flex-shrink: 0;
	background: var(--shr-blue);
	padding: 2px 18px 20px;
}

.job-detail__identity[b-qn4o84gv99] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.job-detail__headings[b-qn4o84gv99] {
	flex: 1;
	min-width: 0;
}

.job-detail__title[b-qn4o84gv99] {
	margin: 0;
	font-size: 21px;
	font-weight: var(--fw-bold);
	line-height: 1.22;
	color: var(--shr-white);
	text-wrap: pretty;
}

.job-detail__employer[b-qn4o84gv99] {
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--shr-blue-100);
}

.job-detail__flags[b-qn4o84gv99] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
}

/* The bookmark, saved: the accent, filled — the SaveButton treatment from JobScreens.jsx,
   matching the card's. Unsaved it stays the app bar's own white on translucent white. */
.job-detail__save[b-qn4o84gv99] {
	display: inline-flex;
	flex-shrink: 0;
}

.job-detail__save--on[b-qn4o84gv99]  .bar-action {
	color: var(--color-accent);
}

.job-detail__save--on[b-qn4o84gv99]  .bar-action svg {
	fill: var(--color-accent);
}

/* ---- The scrolling body ------------------------------------------------- */
/* No bottom padding: the sticky apply bar is the last thing in the column and closes it off. */
.job-detail__body[b-qn4o84gv99] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- Facts grid --------------------------------------------------------- */
.job-detail__facts[b-qn4o84gv99] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.job-detail__fact-label[b-qn4o84gv99] {
	font-size: 11.5px;
	color: var(--text-muted);
}

.job-detail__fact-value[b-qn4o84gv99] {
	margin-top: 2px;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

/* ---- Long-form copy ----------------------------------------------------- */
.job-detail__summary[b-qn4o84gv99] {
	margin: 4px 0 2px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}

.job-detail__list[b-qn4o84gv99] {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.job-detail__list-item[b-qn4o84gv99] {
	display: flex;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* A dot rather than a marker, so the wrapped lines align under the first word. */
.job-detail__bullet[b-qn4o84gv99] {
	flex-shrink: 0;
	margin-top: 6px;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
}

.job-detail__benefits[b-qn4o84gv99] {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* ---- The privacy note --------------------------------------------------- */
/* Tinted and flat: a note about the vacancy, not another card of vacancy detail. */
.job-detail__privacy[b-qn4o84gv99]  .shr-card {
	background: var(--surface-tint);
	box-shadow: none;
}

.job-detail__privacy-row[b-qn4o84gv99] {
	display: flex;
	gap: 10px;
}

.job-detail__privacy-row svg[b-qn4o84gv99] {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--color-primary);
}

.job-detail__privacy-copy[b-qn4o84gv99] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- The sticky apply bar ----------------------------------------------- */
/* Sticky inside the scrolling body, not fixed under it: the copy runs behind the bar and the
   last line still scrolls clear of it. The negative side margins take it full-bleed again.

   The auto top margin is what keeps a short listing honest: v3-v6 carry no long-form copy, so
   there is nothing to scroll and a plain sticky bar would strand itself halfway up the screen.
   Auto eats the spare height and puts the bar on the bottom edge; when the copy does overflow
   there is no spare height, auto resolves to nothing and sticky takes over. */
.job-detail__apply-bar[b-qn4o84gv99] {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin: auto -16px 0;
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	background: var(--surface-card);
	border-top: var(--border-hairline);
	box-shadow: 0 -8px 20px rgba(0, 43, 63, 0.07);
}
/* /Features/Jobs/JobsPage.razor.rz.scp.css */
/* Vacancy board — the hero variant of JobsScreen in JobScreens.jsx (lines 46-114).
   The panel does not scroll; the list under it does, with the chip row pinned to its top. */

.jobs[b-289g4ww33y] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
}

/* ---- Hero panel --------------------------------------------------------- */
.jobs-hero__top[b-289g4ww33y] {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

/* The ring the prototype puts around the avatar on blue. */
.jobs-hero__avatar[b-289g4ww33y] {
	display: inline-flex;
	border-radius: var(--radius-pill);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.jobs-hero__who[b-289g4ww33y] {
	flex: 1;
	min-width: 0;
}

.jobs-hero__eyebrow[b-289g4ww33y] {
	font-size: 11.5px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--shr-blue-100);
}

.jobs-hero__greeting[b-289g4ww33y] {
	margin: 1px 0 0;
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--shr-white);
}

.jobs-hero__summary[b-289g4ww33y] {
	margin: 0 0 14px;
	max-width: 290px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--shr-white);
	opacity: 0.92;
}

/* ---- Search field (a button: tapping it opens the search screen) -------- */
.jobs-search[b-289g4ww33y] {
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--text-muted);
	font-family: var(--font-sans);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 43, 63, 0.16);
}

.jobs-search svg[b-289g4ww33y] {
	color: var(--color-primary);
	flex-shrink: 0;
}

.jobs-search__label[b-289g4ww33y] {
	flex: 1;
}

.jobs-search:focus-visible[b-289g4ww33y] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---- List --------------------------------------------------------------- */
.jobs__body[b-289g4ww33y] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Pinned so the filters stay reachable while the list runs past them. */
.jobs__chips[b-289g4ww33y] {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 12px 16px 10px;
	background: var(--surface-app);
}

.jobs__list[b-289g4ww33y] {
	padding: 0 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jobs__end[b-289g4ww33y] {
	margin: 2px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--text-muted);
}
/* /Features/Jobs/SearchPage.razor.rz.scp.css */
/* Vacancy search — the SearchScreen function in JobScreens.jsx (lines 118-172).
   The head (bar, field, chips) is a fixed white block over the app canvas, exactly as the
   prototype draws it; only the results below it scroll. */

.search[b-1nqn7zilma] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
}

/* ---- The head ----------------------------------------------------------- */
.search__head[b-1nqn7zilma] {
	flex-shrink: 0;
	background: var(--surface-card);
	border-bottom: 1px solid var(--border-subtle);
	padding-bottom: 12px;
}

/* ---- The field ---------------------------------------------------------- */
.search__field[b-1nqn7zilma] {
	position: relative;
	margin: 0 16px;
}

.search__field-icon[b-1nqn7zilma] {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	display: inline-flex;
	color: var(--color-primary);
	pointer-events: none;
}

.search__input[b-1nqn7zilma] {
	width: 100%;
	min-height: 46px;
	padding: 0 14px 0 40px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text-heading);
	appearance: none;
}

.search__input[b-1nqn7zilma]::placeholder {
	color: var(--text-muted);
}

.search__input:focus-visible[b-1nqn7zilma] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* The platform's own clear affordance would sit under our pill's right edge. */
.search__input[b-1nqn7zilma]::-webkit-search-cancel-button {
	display: none;
}

/* ---- Active filter chips ------------------------------------------------ */
/* The prototype shows these as blue Tags. ShrTag is display-only by design, so the removable
   chip is its own button here, dressed in the same blue tint. It scrolls sideways rather than
   wrapping, so the field never jumps down the screen as facets are added. */
.search__chips[b-1nqn7zilma] {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	padding: 0 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.search__chips[b-1nqn7zilma]::-webkit-scrollbar {
	display: none;
}

.search__chip[b-1nqn7zilma] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 6px 10px 6px 12px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-tint);
	color: var(--color-primary);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	line-height: 1;
	cursor: pointer;
}

.search__chip svg[b-1nqn7zilma] {
	opacity: 0.7;
}

.search__chip:focus-visible[b-1nqn7zilma] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---- Results ------------------------------------------------------------ */
.search__body[b-1nqn7zilma] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.search__count[b-1nqn7zilma] {
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

.search__empty[b-1nqn7zilma] {
	text-align: center;
}

.search__empty-title[b-1nqn7zilma] {
	font-size: 14.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.search__empty-copy[b-1nqn7zilma] {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}
/* /Features/Jobs/VacancyCard.razor.rz.scp.css */
/* Vacancy card — geometry from the VacancyCard function in JobScreens.jsx (lines 16-42).
   The prototype's half-pixel type sizes are kept verbatim: the screens are diffed against
   that gallery. */

.vacancy-card__head[b-172eeoqcj7] {
	display: flex;
	gap: 12px;
}

.vacancy-card__headings[b-172eeoqcj7] {
	flex: 1;
	min-width: 0;
}

.vacancy-card__title[b-172eeoqcj7] {
	font-size: 15.5px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	color: var(--text-heading);
}

.vacancy-card__employer[b-172eeoqcj7] {
	margin-top: 2px;
	font-size: 13px;
	color: var(--text-body);
}

/* The bookmark: transparent inside the card (the card is already a surface), grey until it
   is saved and then the accent, filled — exactly the SaveButton treatment in JobScreens.jsx. */
.vacancy-card__save[b-172eeoqcj7] {
	display: inline-flex;
	flex-shrink: 0;
}

.vacancy-card__save[b-172eeoqcj7]  .shr-icon-btn {
	background: transparent;
	color: var(--shr-grey-400);
}

.vacancy-card__save[b-172eeoqcj7]  .shr-icon-btn:hover {
	background: var(--shr-grey-50);
}

.vacancy-card__save--on[b-172eeoqcj7]  .shr-icon-btn {
	color: var(--color-accent);
}

.vacancy-card__save--on[b-172eeoqcj7]  .shr-icon-btn svg {
	fill: var(--color-accent);
}

.vacancy-card__body[b-172eeoqcj7] {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vacancy-card__facts[b-172eeoqcj7] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.vacancy-card__salary[b-172eeoqcj7] {
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

/* The match score — plain muted text at 12px, exactly as JobScreens.jsx:33 draws it. A pill
   here would compete with the orange Internal badge beside it. */
.vacancy-card__match[b-172eeoqcj7] {
	font-size: 12px;
	color: var(--text-muted);
}

.vacancy-card__flags[b-172eeoqcj7] {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* Posted / closes, under a hairline. */
.vacancy-card__dates[b-172eeoqcj7] {
	margin-top: 10px;
	padding-top: 9px;
	border-top: var(--border-hairline);
	display: flex;
	justify-content: space-between;
	font-size: 11.5px;
	color: var(--text-muted);
}
/* /Features/Messages/MessagesPage.razor.rz.scp.css */
/* The inbox — geometry from the MessagesScreen function in TrackScreens.jsx, the gallery frame
   "Messages". Screen bg="var(--surface-app)", Body pad={16}: a scrolling 16px column over the app
   canvas with the bar pinned above it. */

.messages[b-nhmq4xrvlj] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.messages__body[b-nhmq4xrvlj] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- One thread ---------------------------------------------------------
   The card is padded to 4px and each row carries its own 13px/10px, so the hairlines between rows
   run the full width of the card. */
.thread-row[b-nhmq4xrvlj] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 13px 10px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.thread-row + .thread-row[b-nhmq4xrvlj] {
	border-top: 1px solid var(--border-subtle);
}

.thread-row:focus-visible[b-nhmq4xrvlj] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: 12px;
}

/* min-width: 0 is what lets the preview's ellipsis happen inside a flex row. */
.thread-row__text[b-nhmq4xrvlj] {
	flex: 1;
	min-width: 0;
}

/* Name and time share a baseline; the time never wraps or shrinks. */
.thread-row__head[b-nhmq4xrvlj] {
	display: flex;
	gap: 8px;
	align-items: baseline;
}

.thread-row__from[b-nhmq4xrvlj] {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

/* What is new is what is bold — the prototype's `fontWeight: t.unread ? 700 : 500`. */
.thread-row--unread .thread-row__from[b-nhmq4xrvlj] {
	font-weight: var(--fw-bold);
}

.thread-row__when[b-nhmq4xrvlj] {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--text-muted);
}

/* Who they are and what they do, in the brand blue the prototype gives this line. */
.thread-row__org[b-nhmq4xrvlj] {
	display: block;
	margin-top: 1px;
	font-size: 11.5px;
	color: var(--color-primary);
}

/* Two lines, cut with an ellipsis — the prototype's clamp (TrackScreens.jsx:211-213), and the
   same -webkit-box technique it uses. Two lines is enough of the last message to know whether it
   needs answering; the third would be the one that turns the list into a wall of grey. */
.thread-row__preview[b-nhmq4xrvlj] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin-top: 4px;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--text-muted);
}

.thread-row--unread .thread-row__preview[b-nhmq4xrvlj] {
	color: var(--text-body);
}

/* ---- The unread pill ----------------------------------------------------
   The one warm note on this surface. A pill rather than a dot, because the number is the point. */
.thread-row__unread[b-nhmq4xrvlj] {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--shr-white);
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 1;
}

/* A number in an orange circle says nothing on its own, so it carries the words with it — off
   screen, but read out. */
.thread-row__unread-label[b-nhmq4xrvlj] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* ---- Nothing here yet --------------------------------------------------- */
.messages__empty[b-nhmq4xrvlj] {
	text-align: center;
}

.messages__empty-title[b-nhmq4xrvlj] {
	font-size: 14px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.messages__empty-copy[b-nhmq4xrvlj] {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}
/* /Features/Messages/ThreadPage.razor.rz.scp.css */
/* One conversation — geometry from the ChatScreen function in TrackScreens.jsx, the gallery frame
   "Thread". Screen bg="var(--surface-app)", Body pad={16} gap={14} justified to the end: the
   conversation sits on the bottom of the screen with the composer closing it off. */

.chat[b-appyn8b4kj] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.chat__body[b-appyn8b4kj] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The prototype justifies the body to flex-end. Pushing the first row down instead does the same
   thing to the eye while leaving a long conversation scrollable from its top — justify-content on a
   scroll container strands whatever overflows the start edge. */
.chat__row:first-child[b-appyn8b4kj] {
	margin-top: auto;
}

/* ---- One message --------------------------------------------------------
   Mine on the right, theirs on the left; the row is what does the sorting, so the bubble only has
   to be a bubble. */
.chat__row[b-appyn8b4kj] {
	display: flex;
	justify-content: flex-start;
}

.chat__row--me[b-appyn8b4kj] {
	justify-content: flex-end;
}

.chat__slot[b-appyn8b4kj] {
	max-width: 82%;
}

/* Position and colour are what say who is speaking, and neither is announced — so the name goes in
   too, off screen but read out. */
.chat__who[b-appyn8b4kj] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* A tail on the corner nearest the speaker: 4px where the other three are 16px. */
.chat__bubble[b-appyn8b4kj] {
	padding: 11px 14px;
	border-radius: 16px 16px 16px 4px;
	background: var(--surface-card);
	box-shadow: var(--shadow-xs);
	color: var(--text-body);
	font-size: 13.5px;
	line-height: 1.5;
	text-wrap: pretty;
}

.chat__bubble--me[b-appyn8b4kj] {
	border-radius: 16px 16px 4px 16px;
	background: var(--color-primary);
	box-shadow: none;
	color: var(--shr-white);
}

.chat__when[b-appyn8b4kj] {
	margin-top: 4px;
	font-size: 10.5px;
	color: var(--text-muted);
}

.chat__row--me .chat__when[b-appyn8b4kj] {
	text-align: right;
}

/* ---- The composer -------------------------------------------------------
   Pinned under the conversation, on card white so it reads as a surface rather than more canvas.
   No safe-area inset here, unlike the prototype: the tab bar sits below this row and already holds
   the inset open. */
.chat__composer[b-appyn8b4kj] {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
}

/* A ShrInput row without the component: same 48px height, radius and focus ring, no label, no
   validation — see the page for why the component itself is the wrong tool for a composer. */
.chat__input[b-appyn8b4kj] {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 var(--space-4);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	outline: none;
	font-family: inherit;
	font-size: var(--fs-sm);
	color: var(--text-heading);
	transition: border-color var(--dur-fast) var(--ease-standard),
	            box-shadow var(--dur-fast) var(--ease-standard);
}

.chat__input[b-appyn8b4kj]::placeholder {
	color: var(--text-muted);
}

.chat__input:focus[b-appyn8b4kj] {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

/* The round send button, navy as TrackScreens.jsx:257-260 paints it — the composer is a
   fixture of the screen rather than the one decision on it, so it takes the brand blue and
   leaves the orange to the unread pill on the inbox. ShrIconButton is quiet grey by default,
   so the fill is painted on from here — ::deep is what reaches into its own scope. */
.chat__send[b-appyn8b4kj] {
	display: inline-flex;
	flex-shrink: 0;
}

.chat__send[b-appyn8b4kj]  .shr-icon-btn {
	background: var(--color-primary);
	color: var(--shr-white);
}

.chat__send[b-appyn8b4kj]  .shr-icon-btn:hover {
	background: var(--color-primary-hover);
}

@media (prefers-reduced-motion: reduce) {
	.chat__input[b-appyn8b4kj] {
		transition: none;
	}
}
/* /Features/Profile/ProfilePage.razor.rz.scp.css */
/* The candidate profile — geometry from the ProfileScreen function in ProfileScreens.jsx, the
   gallery frame "Profile". Screen bg="var(--surface-app)", Body pad={16}: a scrolling 16px column
   over the app canvas with the bar pinned above it. */

.profile[b-055930y5b8] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.profile__body[b-055930y5b8] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- Who the candidate is ----------------------------------------------- */
.profile__head[b-055930y5b8] {
	display: flex;
	align-items: center;
	gap: 14px;
}

.profile__identity[b-055930y5b8] {
	flex: 1;
	min-width: 0;
}

.profile__name[b-055930y5b8] {
	font-size: 17px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.profile__headline[b-055930y5b8] {
	margin-top: 2px;
	font-size: 13px;
	color: var(--text-body);
	text-wrap: pretty;
}

.profile__location[b-055930y5b8] {
	margin-top: 3px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--text-muted);
}

/* ---- How complete it is -------------------------------------------------
   The locker's meter is 8px because it is the whole point of that card; here the bar sits inside
   the identity block, so it is thinner and quieter — a reading, not a headline. */
.profile__meter[b-055930y5b8] {
	margin-top: 13px;
}

.profile__meter-label[b-055930y5b8] {
	font-size: 12.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

.profile__meter-track[b-055930y5b8] {
	height: 6px;
	margin-top: 6px;
	border-radius: var(--radius-pill);
	background: var(--shr-grey-200);
	overflow: hidden;
}

.profile__meter-fill[b-055930y5b8] {
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
}

/* ---- The staff flag -----------------------------------------------------
   Sits under a hairline, as the prototype has it: the badge belongs to the candidate, not to the
   headline above it. */
.profile__staff[b-055930y5b8] {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px solid var(--border-subtle);
}

.profile__staff-copy[b-055930y5b8] {
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- The header pair ----------------------------------------------------
   Two buttons sharing the width, as the prototype pairs them. ShrButton carries one size, and the
   prototype asks for its small one here — the card is already dense, so the pill is brought down to
   40px through the scope rather than by adding a variant nothing else needs. */
.profile__actions[b-055930y5b8] {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.profile__actions[b-055930y5b8]  .shr-btn {
	min-height: 40px;
	padding: 0 var(--space-4);
	font-size: var(--fs-sm);
}

/* ---- The "Add" action on the work heading ------------------------------- */
.profile__add[b-055930y5b8] {
	border: 0;
	padding: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--text-link);
	cursor: pointer;
}

.profile__add:focus-visible[b-055930y5b8] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---- Work history and education ----------------------------------------
   One row shape for both lists: the icon disc is the only thing that differs. The card is padded to
   4px and each row carries its own 13px/10px, so the hairlines run the full width of the card. */
.profile-entry[b-055930y5b8] {
	display: flex;
	gap: 12px;
	padding: 13px 10px;
}

.profile-entry--education[b-055930y5b8] {
	align-items: center;
}

.profile-entry + .profile-entry[b-055930y5b8] {
	border-top: 1px solid var(--border-subtle);
}

.profile-entry__icon[b-055930y5b8] {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--shr-grey-50);
	color: var(--color-primary);
}

.profile-entry__text[b-055930y5b8] {
	flex: 1;
	min-width: 0;
}

.profile-entry__title[b-055930y5b8] {
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
	text-wrap: pretty;
}

/* A qualification is a fact, not a job title, so it carries the lighter weight the prototype
   gives it. */
.profile-entry--education .profile-entry__title[b-055930y5b8] {
	font-weight: var(--fw-medium);
}

.profile-entry__meta[b-055930y5b8] {
	margin-top: 1px;
	font-size: 12.5px;
	color: var(--text-body);
}

.profile-entry--education .profile-entry__meta[b-055930y5b8] {
	color: var(--text-muted);
}

.profile-entry__note[b-055930y5b8] {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* The pencil beside a position: a 36px round tap area, quiet until it is reached for. */
.profile-entry__edit[b-055930y5b8] {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--shr-grey-400);
	cursor: pointer;
}

.profile-entry__edit:hover[b-055930y5b8] {
	color: var(--color-primary);
}

.profile-entry__edit:focus-visible[b-055930y5b8] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

/* ---- Skills ------------------------------------------------------------- */
.profile__skills[b-055930y5b8] {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* ---- The quick links ----------------------------------------------------
   52px rows, comfortably past the 44px floor, with the leading disc tinted blue — or red for the
   one row that ends the session. */
.profile-link[b-055930y5b8] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 10px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.profile-link + .profile-link[b-055930y5b8] {
	border-top: 1px solid var(--border-subtle);
}

.profile-link:focus-visible[b-055930y5b8] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: 12px;
}

.profile-link__icon[b-055930y5b8] {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--surface-tint);
	color: var(--color-primary);
}

.profile-link--danger .profile-link__icon[b-055930y5b8] {
	background: var(--shr-danger-tint);
	color: var(--shr-danger);
}

.profile-link__text[b-055930y5b8] {
	flex: 1;
	min-width: 0;
}

.profile-link__label[b-055930y5b8] {
	display: block;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

.profile-link--danger .profile-link__label[b-055930y5b8] {
	color: var(--shr-danger);
}

.profile-link__meta[b-055930y5b8] {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: var(--text-muted);
}

.profile-link__chev[b-055930y5b8] {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--shr-grey-400);
}

/* ---- The footnote ------------------------------------------------------- */
.profile__version[b-055930y5b8] {
	margin: 0;
	text-align: center;
	font-size: 11.5px;
	color: var(--text-muted);
}
/* /Features/Profile/SettingsPage.razor.rz.scp.css */
/* Settings — geometry from the SettingsScreen function in ProfileScreens.jsx, the gallery frame
   "Settings". Screen bg="var(--surface-app)", Body pad={16}: a scrolling 16px column over the app
   canvas with the bar pinned above it. */

.settings[b-lanviav22c] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.settings__body[b-lanviav22c] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- Account ------------------------------------------------------------
   Readouts, not controls: the row shape follows the prototype's link rows so the card sits with the
   rest of the screen, minus the chevron nothing would follow. */
.settings-row[b-lanviav22c] {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 12px 10px;
}

.settings-row + .settings-row[b-lanviav22c] {
	border-top: 1px solid var(--border-subtle);
}

.settings-row__icon[b-lanviav22c] {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--surface-tint);
	color: var(--color-primary);
}

.settings-row__text[b-lanviav22c] {
	flex: 1;
	min-width: 0;
}

.settings-row__label[b-lanviav22c] {
	display: block;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

.settings-row__value[b-lanviav22c] {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: var(--text-muted);
	overflow-wrap: anywhere;
}

/* ---- Notifications ------------------------------------------------------
   A 14px stack, as the prototype stacks them; each switch keeps its own 44px tap target. */
.settings__notifications[b-lanviav22c] {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---- Privacy ------------------------------------------------------------ */
.settings__privacy-copy[b-lanviav22c] {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* The POPIA request: a quiet row under the copy, ruled off so it reads as a separate act rather
   than part of the sentence above it. */
.settings__download[b-lanviav22c] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin-top: 10px;
	padding: 10px 0 0;
	border: 0;
	border-top: 1px solid var(--border-subtle);
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.settings__download:focus-visible[b-lanviav22c] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 12px;
}

.settings__download-icon[b-lanviav22c] {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--surface-tint);
	color: var(--color-primary);
}

.settings__download-label[b-lanviav22c] {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-link);
}

.settings__download-chev[b-lanviav22c] {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--shr-grey-400);
}

.settings__download-note[b-lanviav22c] {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- Preferences --------------------------------------------------------
   ShrSelect brings its own field geometry; the wrapper is here so the screen can address the
   control without reaching for a bare element selector. */
.settings__preferences[b-lanviav22c] {
	display: block;
}

/* ---- The legal rows and log out -----------------------------------------
   One card, the same row shape as the profile's quick links. */
.settings-link[b-lanviav22c] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 10px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.settings-link:focus-visible[b-lanviav22c] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: 12px;
}

.settings-link + .settings-link[b-lanviav22c] {
	border-top: 1px solid var(--border-subtle);
}

.settings-link__icon[b-lanviav22c] {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--surface-tint);
	color: var(--color-primary);
}

.settings-link--danger .settings-link__icon[b-lanviav22c] {
	background: var(--shr-danger-tint);
	color: var(--shr-danger);
}

.settings-link__label[b-lanviav22c] {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

.settings-link--danger .settings-link__label[b-lanviav22c] {
	color: var(--shr-danger);
}

.settings-link__chev[b-lanviav22c] {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--shr-grey-400);
}

/* ---- Delete my account --------------------------------------------------
   The prototype's small underlined text button, kept off the cards so it reads as the last thing on
   the screen rather than another row. Muted, exactly as the prototype paints it: the underline and
   the wording carry the weight, and shouting in red at the foot of a settings screen would pull the
   eye to the one thing nobody came here for. */
.settings__delete[b-lanviav22c] {
	align-self: center;
	padding: 4px 0 8px;
	border: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: 12.5px;
	text-decoration: underline;
	cursor: pointer;
}

.settings__delete--muted[b-lanviav22c] {
	color: var(--text-muted);
}

.settings__delete:focus-visible[b-lanviav22c] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---- The footnote ------------------------------------------------------- */
.settings__note[b-lanviav22c] {
	margin: 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}
/* /Features/Tracking/ApplicationCard.razor.rz.scp.css */
/* Application card — geometry from the AppCard function in TrackScreens.jsx (lines 6-28).
   The prototype's half-pixel type sizes are kept verbatim: the screens are diffed against
   that gallery. */

.application-card__head[b-7w6xfxvzt3] {
	display: flex;
	gap: 12px;
}

.application-card__headings[b-7w6xfxvzt3] {
	flex: 1;
	min-width: 0;
}

.application-card__title[b-7w6xfxvzt3] {
	font-size: 15px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	color: var(--text-heading);
}

.application-card__employer[b-7w6xfxvzt3] {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--text-body);
}

/* The affordance that says the card opens: grey, and nudged down onto the title's line. */
.application-card__chev[b-7w6xfxvzt3] {
	flex-shrink: 0;
	margin-top: 4px;
	display: inline-flex;
	color: var(--shr-grey-400);
}

/* Where it has got to, under a hairline. */
.application-card__progress[b-7w6xfxvzt3] {
	margin-top: 12px;
	padding-top: 12px;
	border-top: var(--border-hairline);
}

/* A closed application shows the outcome in words rather than an unlit track. */
.application-card__closed[b-7w6xfxvzt3] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--shr-danger);
}

.application-card__foot[b-7w6xfxvzt3] {
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.application-card__flags[b-7w6xfxvzt3] {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.application-card__updated[b-7w6xfxvzt3] {
	flex-shrink: 0;
	font-size: 11.5px;
	color: var(--text-muted);
}
/* /Features/Tracking/ApplicationDetailPage.razor.rz.scp.css */
/* Application detail — geometry from the ApplicationDetail function in TrackScreens.jsx
   (lines 75-152). The prototype's half-pixel type sizes are kept verbatim: the screens are
   diffed against that gallery. */

.application-detail[b-db367wd0tx] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
}

.application-detail__body[b-db367wd0tx] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---- Who and what ------------------------------------------------------- */
.application-detail__identity[b-db367wd0tx] {
	display: flex;
	gap: 12px;
}

.application-detail__headings[b-db367wd0tx] {
	flex: 1;
	min-width: 0;
}

.application-detail__title[b-db367wd0tx] {
	margin: 0;
	font-size: 16px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	color: var(--text-heading);
	text-wrap: pretty;
}

.application-detail__employer[b-db367wd0tx] {
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--text-body);
}

.application-detail__flags[b-db367wd0tx] {
	margin-top: 9px;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* Where it has got to, under a hairline. */
.application-detail__progress[b-db367wd0tx] {
	margin-top: 16px;
	padding-top: 14px;
	border-top: var(--border-hairline);
}

.application-detail__closed[b-db367wd0tx] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--shr-danger);
}

/* ---- What happens next -------------------------------------------------- */
/* A tinted panel rather than another white card: it is a note about the future, not a record.
   Closed applications grey out — the panel is still there, it just has nothing ahead of it. */
.application-detail__next[b-db367wd0tx]  .shr-card {
	background: var(--surface-tint);
	box-shadow: none;
}

.application-detail__next--closed[b-db367wd0tx]  .shr-card {
	background: var(--shr-grey-100);
}

.application-detail__next-head[b-db367wd0tx] {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The prototype's status dot: the accent while something is still coming, grey when it is not. */
.application-detail__next-dot[b-db367wd0tx] {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
}

.application-detail__next--closed .application-detail__next-dot[b-db367wd0tx] {
	background: var(--shr-grey-400);
}

.application-detail__next-eyebrow[b-db367wd0tx] {
	font-size: 11.5px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em; /* the prototype's own tracking on this eyebrow */
	text-transform: uppercase;
	color: var(--text-heading);
}

.application-detail__next-label[b-db367wd0tx] {
	margin-top: 9px;
	font-size: 15px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.application-detail__next-rows[b-db367wd0tx] {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.application-detail__next-row[b-db367wd0tx] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-body);
}

.application-detail__next-row svg[b-db367wd0tx] {
	flex-shrink: 0;
	color: var(--color-primary);
}

/* ---- History ------------------------------------------------------------ */
.application-detail__event[b-db367wd0tx] {
	display: flex;
	gap: 12px;
}

.application-detail__event-rail[b-db367wd0tx] {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.application-detail__event-dot[b-db367wd0tx] {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: var(--radius-pill);
	display: grid;
	place-items: center;
	background: var(--color-primary);
	color: var(--shr-white);
}

/* The newest entry says how things stand: the accent while it is live, red when it ended. */
.application-detail__event-dot--last[b-db367wd0tx] {
	background: var(--color-accent);
}

.application-detail__event-dot--failed[b-db367wd0tx] {
	background: var(--shr-danger);
}

.application-detail__event-line[b-db367wd0tx] {
	flex: 1;
	width: 2px;
	margin: 4px 0;
	background: var(--shr-grey-200);
}

.application-detail__event-body[b-db367wd0tx] {
	min-width: 0;
}

.application-detail__event-body--spaced[b-db367wd0tx] {
	padding-bottom: 18px;
}

.application-detail__event-head[b-db367wd0tx] {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.application-detail__event-stage[b-db367wd0tx] {
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.application-detail__event-date[b-db367wd0tx] {
	font-size: 11.5px;
	color: var(--text-muted);
}

.application-detail__event-note[b-db367wd0tx] {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- The one action ----------------------------------------------------- */
.application-detail__actions[b-db367wd0tx] {
	display: flex;
	justify-content: center;
	padding: 4px 0 6px;
}
/* /Features/Tracking/ApplicationsPage.razor.rz.scp.css */
/* The tracker — the hero variant of ApplicationsScreen in TrackScreens.jsx (lines 30-73).
   The panel does not scroll; the list under it does. */

.applications[b-csl82yh89x] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
}

/* ---- Hero panel --------------------------------------------------------- */
.applications-hero__top[b-csl82yh89x] {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.applications-hero__who[b-csl82yh89x] {
	flex: 1;
	min-width: 0;
}

.applications-hero__eyebrow[b-csl82yh89x] {
	font-size: 11.5px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--shr-blue-100);
}

.applications-hero__headline[b-csl82yh89x] {
	margin: 3px 0 0;
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--shr-white);
}

/* The counts the gallery calls out: three equal tiles washed onto the blue. */
.applications-hero__counts[b-csl82yh89x] {
	display: flex;
	gap: 8px;
}

.applications-hero__count[b-csl82yh89x] {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.14);
}

.applications-hero__count-value[b-csl82yh89x] {
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--shr-white);
}

.applications-hero__count-label[b-csl82yh89x] {
	margin-top: 4px;
	font-size: 11px;
	color: var(--shr-blue-100);
}

/* ---- List --------------------------------------------------------------- */
.applications__body[b-csl82yh89x] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Pinned so the filters stay reachable while the list runs past them, as on the vacancy board. */
.applications__chips[b-csl82yh89x] {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 12px 16px 10px;
	background: var(--surface-app);
}

.applications__list[b-csl82yh89x] {
	padding: 0 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.applications__end[b-csl82yh89x] {
	margin: 2px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--text-muted);
}
/* /Features/Tracking/NotificationsPage.razor.rz.scp.css */
/* The notification feed — geometry from the NotificationsScreen function in TrackScreens.jsx, the
   gallery frame "Notifications". Screen bg="var(--surface-app)", Body pad={16}: a scrolling 16px
   column over the app canvas with the bar pinned above it. */

.notifications[b-tffeclmz3d] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
	font-family: var(--font-sans);
}

.notifications__body[b-tffeclmz3d] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- One notification ---------------------------------------------------
   The card is padded to 4px and each row carries its own 13px/10px, so the hairlines between rows
   run the full width of the card. */
.notification-row[b-tffeclmz3d] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 13px 10px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.notification-row + .notification-row[b-tffeclmz3d] {
	border-top: 1px solid var(--border-subtle);
}

.notification-row:focus-visible[b-tffeclmz3d] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: 12px;
}

/* The tone disc: a full circle, 38px, tinted by the notification's own tone. */
.notification-row__icon[b-tffeclmz3d] {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
}

.notification-row__icon--orange[b-tffeclmz3d] {
	background: var(--shr-warning-tint);
	color: var(--color-accent-hover);
}

.notification-row__icon--blue[b-tffeclmz3d] {
	background: var(--surface-tint);
	color: var(--color-primary);
}

.notification-row__text[b-tffeclmz3d] {
	flex: 1;
	min-width: 0;
}

/* Title and timestamp share a baseline; the timestamp never wraps or shrinks. */
.notification-row__head[b-tffeclmz3d] {
	display: flex;
	gap: 8px;
	align-items: baseline;
}

.notification-row__title[b-tffeclmz3d] {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	text-wrap: pretty;
}

/* What is new is what is bold — the prototype's `fontWeight: n.unread ? 700 : 500`. */
.notification-row--unread .notification-row__title[b-tffeclmz3d] {
	font-weight: var(--fw-bold);
}

.notification-row__when[b-tffeclmz3d] {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--text-muted);
}

.notification-row__body[b-tffeclmz3d] {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text-body);
	text-wrap: pretty;
}

/* The unread spot: the one warm note on this surface. Sits level with the title's cap height. */
.notification-row__dot[b-tffeclmz3d] {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	margin-top: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
}

/* Colour alone is not a state, so the spot carries the word with it — off screen, but read out. */
.notification-row__unread-label[b-tffeclmz3d] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* ---- Nothing new -------------------------------------------------------- */
.notifications__empty[b-tffeclmz3d] {
	text-align: center;
}

.notifications__empty-title[b-tffeclmz3d] {
	font-size: 14px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.notifications__empty-copy[b-tffeclmz3d] {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- The footnote ------------------------------------------------------- */
.notifications__note[b-tffeclmz3d] {
	margin: 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}
/* /Layout/AppBar.razor.rz.scp.css */
/* SmartHR app bar — geometry from the AppBar function in RecruitChrome.jsx. */
.app-bar[b-e5pkrmkeq7] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 10px;
  flex-shrink: 0;
  font-family: var(--font-sans);
}

.app-bar--light[b-e5pkrmkeq7] {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}

.app-bar--brand[b-e5pkrmkeq7] {
  background: var(--shr-blue);
  border-bottom: none;
}

/* 44px round hit target, the minimum comfortable tap size on a phone. */
.app-bar__back[b-e5pkrmkeq7] {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-primary);
}

.app-bar--brand .app-bar__back[b-e5pkrmkeq7] {
  color: var(--shr-white);
}

.app-bar__back:focus-visible[b-e5pkrmkeq7] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.app-bar__titles[b-e5pkrmkeq7] {
  flex: 1;
  min-width: 0;
}

/* Without a back button the title would otherwise sit hard against the edge. */
.app-bar__titles--inset[b-e5pkrmkeq7] {
  padding-left: 8px;
}

/* The title is usually an <h1>, so the user-agent margin and 2em font-size are overridden here
   rather than inherited: every value the browser would supply for a heading is pinned. */
.app-bar__title[b-e5pkrmkeq7] {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-heading);
}

.app-bar__sub[b-e5pkrmkeq7] {
  font-size: 12.5px;
  margin-top: 1px;
  color: var(--text-muted);
}

.app-bar--brand .app-bar__title[b-e5pkrmkeq7] {
  color: var(--shr-white);
}

.app-bar--brand .app-bar__sub[b-e5pkrmkeq7] {
  color: var(--shr-blue-100);
}
/* /Layout/AppShell.razor.rz.scp.css */
/* Signed-in shell — the Body scaffold from RecruitChrome.jsx. The column itself does not
   scroll; each screen's own .screen-body does, so app bars and hero panels stay put. */
.app-shell__content[b-i37iw4c0ae] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-shell__error[b-i37iw4c0ae] {
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px;
}

.app-shell__error-title[b-i37iw4c0ae] {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}

.app-shell__error-copy[b-i37iw4c0ae] {
  margin: 6px 0 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
/* /Layout/BarAction.razor.rz.scp.css */
/* Round app-bar action — geometry from the BarAction function in RecruitChrome.jsx. */
.bar-action[b-p0ls0pyr9f] {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.bar-action--light[b-p0ls0pyr9f] {
  background: var(--shr-grey-50);
  color: var(--color-primary);
}

.bar-action--brand[b-p0ls0pyr9f] {
  background: rgba(255, 255, 255, 0.16);
  color: var(--shr-white);
}

.bar-action:focus-visible[b-p0ls0pyr9f] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The ring matches the surface behind the button so the badge reads as lifted off it. */
.bar-action__badge[b-p0ls0pyr9f] {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--shr-white);
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--surface-card);
}

.bar-action--brand .bar-action__badge[b-p0ls0pyr9f] {
  box-shadow: 0 0 0 2px var(--shr-blue);
}
/* /Layout/HeroPanel.razor.rz.scp.css */
/* Blue hero panel — geometry from the HeroPanel function in RecruitChrome.jsx. */
.hero-panel[b-cdjrb5f6hq] {
  flex-shrink: 0;
  background: var(--shr-blue);
  position: relative;
  font-family: var(--font-sans);
}

/* Above both decorations, so text is never washed out by the halftone. */
.hero-panel__content[b-cdjrb5f6hq] {
  padding: 2px 16px 18px;
  position: relative;
  z-index: 1;
}

/* -1px so the wave overlaps the panel edge and leaves no hairline seam. */
.hero-panel__wave[b-cdjrb5f6hq] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
}

.hero-panel__halftone[b-cdjrb5f6hq] {
  position: absolute;
  top: -30px;
  right: -40px;
  width: 170px;
  height: 170px;
  pointer-events: none;
}
/* /Layout/TabBar.razor.rz.scp.css */
/* Bottom tab bar — geometry from the TabBar function in RecruitChrome.jsx.
   The safe-area padding replaces the prototype's platform-dependent inset: on a notched
   phone the home indicator sits under the bar, everywhere else the value resolves to 0. */
.tab-bar[b-g21azp84l6] {
  flex-shrink: 0;
  display: flex;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -6px 18px rgba(0, 43, 63, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: var(--font-sans);
}

.tab[b-g21azp84l6] {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 52px;
  color: var(--shr-grey-500);
}

.tab--active[b-g21azp84l6] {
  color: var(--color-primary);
}

.tab:focus-visible[b-g21azp84l6] {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

/* Pill highlight behind the active icon. */
.tab__icon[b-g21azp84l6] {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.tab--active .tab__icon[b-g21azp84l6] {
  background: var(--shr-blue-tint);
}

.tab__dot[b-g21azp84l6] {
  position: absolute;
  top: 0;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.tab__label[b-g21azp84l6] {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.tab--active .tab__label[b-g21azp84l6] {
  font-weight: 700;
}