/* /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/DatePickerSheet.razor.rz.scp.css */
.date-sheet[b-7acpc3fy7x] { display: flex; flex-direction: column; gap: 12px; }
.date-sheet__head[b-7acpc3fy7x] { display: flex; align-items: center; justify-content: space-between; }
.date-sheet__nav[b-7acpc3fy7x] { width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--shr-grey-50); color: var(--color-primary); display: grid; place-items: center; cursor: pointer; }
.date-sheet__month[b-7acpc3fy7x] { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-heading); }
.date-sheet__grid[b-7acpc3fy7x] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.date-sheet__dow[b-7acpc3fy7x] { text-align: center; font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted); padding-bottom: 4px; }
.date-sheet__day[b-7acpc3fy7x] { height: 42px; border: 0; border-radius: 10px; background: transparent; font-family: var(--font-sans); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-body); cursor: pointer; }
.date-sheet__day--on[b-7acpc3fy7x] { background: var(--color-primary); color: #fff; font-weight: var(--fw-bold); }
.date-sheet__day:disabled[b-7acpc3fy7x] { color: var(--shr-grey-300); cursor: not-allowed; }
/* /Components/EmployerMark.razor.rz.scp.css */
/* SmartHR EmployerMark — the logo branch. The tile itself is styled inline
   (size, radius and tone are parameters); only the picture needs a rule. A
   logo is shown whole, inset a little from the hairline edge, never cropped:
   a wordmark cut to a square is not the employer's mark any more. */
.shr-employer-mark--logo img[b-omqzp11g40] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  box-sizing: border-box;
}
/* /Components/FormFooter.razor.rz.scp.css */
/* SmartHR FormFooter — CVEditScreens.jsx line 37. It sits below the scrolling body rather
   than over it, with a hairline and a soft lift so the save never looks like part of the
   last field. The safe-area inset keeps it clear of the home indicator. */
.shr-form-footer[b-untdyqhw4c] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -8px 20px rgba(0, 43, 63, 0.07);
}
/* /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;
}

/* The photo covers the circle edge to edge, as Avatar.jsx draws it. */
.shr-avatar img[b-d6ocob0fr9] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* An employer's logo is shown whole on white, inset from the edge, never
   cropped to the circle. */
.shr-avatar--logo[b-d6ocob0fr9] {
  background: #fff;
}

.shr-avatar--logo img[b-d6ocob0fr9] {
  object-fit: contain;
  padding: 14%;
  box-sizing: border-box;
}
/* /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/ShrMeter.razor.rz.scp.css */
/* The Meter function in EnrichScreens.jsx: 13px label, 15px bold tabular figure in the primary blue,
   an 8px pill track on grey-100. */
.shr-meter__row[b-ofjkejyofc] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.shr-meter__label[b-ofjkejyofc] {
	font-size: 13px;
	color: var(--text-body);
}

.shr-meter__value[b-ofjkejyofc] {
	font-size: 15px;
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
}

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

.shr-meter__fill[b-ofjkejyofc] {
	height: 100%;
	min-width: 2%;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	transition: width var(--dur-slow) var(--ease-out);
}
/* /Components/ShrOptionRow.razor.rz.scp.css */
.shr-option[b-y0g4ey6ybs] { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 13px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); font-family: var(--font-sans); text-align: left; cursor: pointer; }
.shr-option--on[b-y0g4ey6ybs] { border-color: var(--color-primary); background: var(--shr-blue-tint); box-shadow: inset 0 0 0 1px var(--color-primary); }
.shr-option:disabled[b-y0g4ey6ybs] { opacity: 0.45; cursor: not-allowed; }
.shr-option__mark[b-y0g4ey6ybs] { width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); background: #fff; color: #fff; }
.shr-option--check .shr-option__mark[b-y0g4ey6ybs] { border-radius: 6px; }
.shr-option--on .shr-option__mark[b-y0g4ey6ybs] { border-color: var(--color-primary); }
.shr-option--on.shr-option--check .shr-option__mark[b-y0g4ey6ybs] { background: var(--color-primary); }
.shr-option__dot[b-y0g4ey6ybs] { width: 11px; height: 11px; border-radius: 999px; background: var(--color-primary); }
.shr-option__text[b-y0g4ey6ybs] { flex: 1; min-width: 0; }
.shr-option__label[b-y0g4ey6ybs] { display: block; font-size: 14px; color: var(--text-heading); }
.shr-option--on .shr-option__label[b-y0g4ey6ybs] { font-weight: var(--fw-bold); }
.shr-option__note[b-y0g4ey6ybs] { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* /Components/ShrProgressBar.razor.rz.scp.css */
.shr-progress[b-jv3xq847z9] { height: 6px; border-radius: var(--radius-pill); background: var(--shr-grey-100); overflow: hidden; }
.shr-progress__fill[b-jv3xq847z9] { height: 100%; min-width: 2%; border-radius: var(--radius-pill); background: var(--color-primary); transition: width var(--dur-base) var(--ease-out); }
.shr-progress--accent .shr-progress__fill[b-jv3xq847z9] { background: var(--color-accent); }
/* /Components/ShrSegmented.razor.rz.scp.css */
/* SmartHR Segmented — CVEditScreens.jsx line 314: equal pills in a grey trough, the chosen
   one filled with the brand blue and set in bold. Blue, never orange: choosing a level is
   not the one loud action on a screen. */
.shr-segmented[b-yt7pingg84] {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--shr-grey-50);
  border-radius: var(--radius-pill);
}

.shr-segmented__option[b-yt7pingg84] {
  flex: 1;
  /* TAP = 44 in the JSX: the smallest thing a thumb should have to hit. */
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: var(--fw-regular);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

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

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

@media (prefers-reduced-motion: reduce) {
  .shr-segmented__option[b-yt7pingg84] {
    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/ShrSkeleton.razor.rz.scp.css */
/* SmartHR Skeleton — the Bone. Tint from the brand grey ramp with a lighter band sweeping
   left to right once every 1.4s, ease-in-out, so every bone on a screen moves together. On the
   blue hero the ramp is white at a fifth to a third. Reduced motion keeps a flat tint and
   drops the sweep. Size comes in as inline styles; the radius from the shape unless overridden. */
.shr-skeleton[b-ik6kjbg3a3] {
  display: block;
  flex: none;
  max-width: 100%;
  background: linear-gradient(90deg, var(--shr-grey-100) 0%, #EEF2F5 50%, var(--shr-grey-100) 100%);
  background-size: 200% 100%;
  animation: shr-skeleton-sweep-b-ik6kjbg3a3 1.4s ease-in-out infinite;
}

.shr-skeleton--on-blue[b-ik6kjbg3a3] {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0.18) 100%);
  background-size: 200% 100%;
}

.shr-skeleton--line[b-ik6kjbg3a3] {
  border-radius: 6px;
}

.shr-skeleton--block[b-ik6kjbg3a3] {
  border-radius: var(--radius-lg);
}

.shr-skeleton--circle[b-ik6kjbg3a3] {
  border-radius: 50%;
}

.shr-skeleton--pill[b-ik6kjbg3a3] {
  border-radius: var(--radius-pill);
}

@keyframes shr-skeleton-sweep-b-ik6kjbg3a3 {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shr-skeleton[b-ik6kjbg3a3] {
    animation: none;
    background: var(--shr-grey-100);
  }

  .shr-skeleton--on-blue[b-ik6kjbg3a3] {
    background: rgba(255, 255, 255, 0.22);
  }
}
/* /Components/ShrSkeletonList.razor.rz.scp.css */
/* Rows on the inbox's rhythm: 13px/10px, a hairline between, the leading shape and the lines. */
.shr-skeleton-list__row[b-xjtilcwceh] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.shr-skeleton-list__row:last-child[b-xjtilcwceh] {
  border-bottom: 0;
}

.shr-skeleton-list__text[b-xjtilcwceh] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.shr-skeleton-list__head[b-xjtilcwceh] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shr-skeleton-list__trailing[b-xjtilcwceh] {
  display: flex;
  flex: none;
}
/* /Components/ShrSkeletonText.razor.rz.scp.css */
/* Lines stacked on the paragraph's own rhythm; the gap comes in as an inline style. */
.shr-skeleton-text[b-mhip2f4zoy] {
  display: flex;
  flex-direction: column;
}
/* /Components/ShrSkeletonTitle.razor.rz.scp.css */
/* SectionTitle's own rhythm: 4px above, the rule 6px under the text. */
.shr-skeleton-title[b-xg8a19wyli] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
/* /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/ShrTextarea.razor.rz.scp.css */
/* SmartHR Textarea — CVEditScreens.jsx line 11. ShrInput's shell with the platform's own
   resize handle turned off, and a footer row carrying the helper on the left and the
   counter on the right. */
.shr-textarea[b-t5ecj8r4r7] {
  display: block;
  font-family: var(--font-sans);
}

/* The same quiet label as ShrInput — Input.jsx:31: 14px, weight 500, --shr-grey-700. */
.shr-textarea__label[b-t5ecj8r4r7] {
  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-textarea__input[b-t5ecj8r4r7] {
  display: block;
  width: 100%;
  /* The row grows by Rows, never by dragging: a resized field breaks the sheet it sits in. */
  resize: none;
  padding: 11px 13px;
  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);
  line-height: 1.55;
  color: var(--text-heading);
  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-textarea__input[b-t5ecj8r4r7]::placeholder {
  color: var(--text-muted);
}

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

.shr-textarea__footer[b-t5ecj8r4r7] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 5px;
}

.shr-textarea__helper[b-t5ecj8r4r7],
.shr-textarea__count[b-t5ecj8r4r7] {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.shr-textarea__count[b-t5ecj8r4r7] {
  flex-shrink: 0;
  /* Digits of one width, so the count does not jitter as it climbs. */
  font-variant-numeric: tabular-nums;
}

/* ---- Disabled ---- */
.shr-textarea--disabled .shr-textarea__input[b-t5ecj8r4r7] {
  background: var(--shr-grey-50);
  color: var(--text-muted);
  cursor: not-allowed;
}

.shr-textarea--disabled .shr-textarea__label[b-t5ecj8r4r7] {
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .shr-textarea__input[b-t5ecj8r4r7] {
    transition: none;
  }
}
/* /Components/ShrToast.razor.rz.scp.css */
/* SmartHR Toast — pinned above the tab bar by whoever renders it; this file owns only the pill
   itself. The rise is the sheet's shrUp, scoped here for the same reason it is scoped there. */
.shr-toast[b-96vspa9rbh] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 8px 8px 16px;
  background: var(--surface-brand-deep);
  color: var(--text-on-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  animation: shrToastUp-b-96vspa9rbh var(--dur-slow) var(--ease-out);
}

.shr-toast__message[b-96vspa9rbh] {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}

/* The action is text on the panel, not a button on a button: one weight up and underlined, the
   way the onboarding banner's link is, with the hit target padded out to 44px. */
.shr-toast__action[b-96vspa9rbh] {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.shr-toast__close[b-96vspa9rbh] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px -8px 0;
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.shr-toast__action:focus-visible[b-96vspa9rbh],
.shr-toast__close:focus-visible[b-96vspa9rbh] {
  outline: 2px solid var(--text-on-brand);
  outline-offset: -2px;
}

@keyframes shrToastUp-b-96vspa9rbh {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shr-toast[b-96vspa9rbh] { animation: none; }
}
/* /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;
}
/* /Components/SuggestRow.razor.rz.scp.css */
/* SmartHR SuggestRow — CVEditScreens.jsx line 52. Dashed chips, so they read as an offer
   rather than as something already chosen; blue text, never the orange accent. */
.shr-suggest[b-6ta5qns16t] {
  display: block;
}

.shr-suggest__label[b-6ta5qns16t] {
  margin-bottom: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.shr-suggest__chips[b-6ta5qns16t] {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shr-suggest__chip[b-6ta5qns16t] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* TAP = 44 in the JSX: the smallest thing a thumb should have to hit. */
  min-height: 44px;
  padding: 0 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.shr-suggest__chip:focus-visible[b-6ta5qns16t] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
/* /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 ---------------------------------------------------------
   An empty state until an alert service exists; the title and copy rules above are shared. */
.saved__alerts-empty[b-8haf4v91dr] {
	text-align: center;
}

/* ---- Loading and unreachable ------------------------------------------------- */
.saved__loading[b-8haf4v91dr] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

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

.saved__notice[b-8haf4v91dr] {
	color: var(--shr-danger);
}

.saved__state-copy[b-8haf4v91dr] {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}
/* /Features/Auth/ForgotPasswordPage.razor.rz.scp.css */
/* Forgot password — no prototype frame; the head, form and note rules mirror
   LogInPage.razor.css and ResetPasswordPage.razor.css. Scoped CSS is per component, so the
   screens in this journey each carry their own copy of the shared shape. */

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

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

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

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

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

/* ---- The body of the screen ---------------------------------------------
   Two things wear .auth-form: the EditForm before the request and the plain div that
   replaces it afterwards, so the column keeps its width and rhythm across the swap.
   EditForm renders the <form> itself and so never carries this component's scope
   attribute — ::deep is what reaches it, and it reaches the div just as well. */
.auth-screen[b-g6jz0dhzjx]  .auth-form {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--surface-page);
}

/* The confirmation: a statement of what has happened, not a warning and not a failure, so
   it takes the tint the head wears rather than the danger colour. */
.auth-note[b-g6jz0dhzjx] {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--surface-tint);
	color: var(--text-body);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.auth-failure[b-g6jz0dhzjx] {
	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;
}
/* /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;
}

/* Open space where the prototype framed a photograph: the frame's 208px plus its 26px above
   and 34px below, kept so the wave and the headline sit where they always did. */
.onboarding__photo-well[b-cm1d9bmt9s] {
	height: 268px;
}

/* 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/RegisterPage.razor.rz.scp.css */
/* Create your login — no prototype frame; the head, form, note and failure rules mirror
   ResetPasswordPage.razor.css and SignUpPage.razor.css. Scoped CSS is per component, so the
   screens in this journey each carry their own copy of the shared shape. */

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

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

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

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

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

/* ---- The body of the screen ---------------------------------------------
   Four things wear .auth-form in turn — the EditForm and the three states that have no form —
   so the column keeps its width and rhythm whichever one is showing. EditForm renders the
   <form> itself and so never carries this component's scope attribute: ::deep is what reaches
   it, and it reaches the divs just as well. */
.auth-screen[b-o9zbj2383x]  .auth-form {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--surface-page);
}

/* A statement of where the screen has got to, in the tint the head wears. */
.auth-note[b-o9zbj2383x] {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--surface-tint);
	color: var(--text-body);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* The number the WhatsApp link went to. Read-only and not a field: it is here to be recognised
   rather than edited, so it wears the quiet caption styling instead of a form row. */
.auth-screen[b-o9zbj2383x]  .register__number {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--text-muted);
}

/* One failure — the login somebody else already has — comes with somewhere to go, and the way
   out belongs inside the message it answers. */
.auth-screen[b-o9zbj2383x]  .auth-failure {
	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;
}

/* inline-flex with a 44px floor rather than padding: the text stays centred against the sentence
   beside it while the tap target keeps the size everything else on these screens has. */
.auth-screen[b-o9zbj2383x]  .auth-failure__action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: 4px;
	text-decoration: underline;
}

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

.auth-screen[b-o9zbj2383x]  .auth-textlink:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
/* /Features/Auth/ResetPasswordPage.razor.rz.scp.css */
/* Reset password — no prototype frame; the head, form and note rules mirror
   ForgotPasswordPage.razor.css and LogInPage.razor.css. Scoped CSS is per component, so the
   screens in this journey each carry their own copy of the shared shape. */

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

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

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

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

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

/* ---- The body of the screen ---------------------------------------------
   Three things wear .auth-form in turn — the EditForm, the confirmation, the dead link —
   so the column keeps its width and rhythm whichever state the screen is in. EditForm
   renders the <form> itself and so never carries this component's scope attribute:
   ::deep is what reaches it, and it reaches the divs just as well. */
.auth-screen[b-bmo4xo7ahz]  .auth-form {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--surface-page);
}

/* A statement of where the screen has got to, in the tint the head wears. The alert
   modifier is for the dead link — still a state rather than a field error, but not
   something to read as good news. */
.auth-note[b-bmo4xo7ahz] {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--surface-tint);
	color: var(--text-body);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.auth-note--alert[b-bmo4xo7ahz] {
	background: var(--shr-danger-tint);
	color: var(--shr-danger);
}

.auth-failure[b-bmo4xo7ahz] {
	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;
}
/* /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);
}

/* A block rather than a paragraph: one failure — the address that already has an account — comes
   with somewhere to go, and the way out belongs inside the message it answers. */
.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-failure__text[b-zm0t0bw4b0] {
	margin: 0;
}

/* inline-flex with a 44px floor rather than padding: the text stays centred against the sentence
   above it while the tap target keeps the size everything else on these screens has. */
.auth-failure__action[b-zm0t0bw4b0] {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: underline;
}

.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);
}

.cv-review__error[b-s6xxfjnk7m] {
	margin: 0 16px;
	color: var(--shr-danger);
}

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

/* ---- What else we found --------------------------------------------------
   The roles and qualifications the analyser read, in the profile screen's row idiom minus the
   pencil: read-only here, edited there. */
.cv-entry[b-s6xxfjnk7m] {
	display: flex;
	gap: 12px;
	padding: 13px 10px;
}

.cv-entry--education[b-s6xxfjnk7m] {
	align-items: center;
}

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

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

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

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

.cv-entry--education .cv-entry__title[b-s6xxfjnk7m] {
	font-weight: var(--fw-medium);
}

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

.cv-entry--education .cv-entry__meta[b-s6xxfjnk7m] {
	color: var(--text-muted);
}

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

/* A section the analyser found nothing for says so on one line, and where to add it. */
.cv-review__none[b-s6xxfjnk7m] {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

.cv-review__footnote[b-s6xxfjnk7m] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ---- 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/DocumentPage.razor.rz.scp.css */
/* The document viewer — the CV read-back's geometry (Screen bg="var(--surface-app)", Body pad={16},
   one action pinned in a white bar under the scrolling column), with the file card the read-back
   already draws and the browser's own rendering of the file under it. */

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

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

/* ---- The file ------------------------------------------------------------ */
.document__file[b-clp5yzlloa] {
	display: flex;
	align-items: center;
	gap: 12px;
}

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

.document__file-text[b-clp5yzlloa] {
	flex: 1;
	min-width: 0;
}

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

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

/* ---- What the browser draws ------------------------------------------------ */
/* The frame takes whatever height the column has left, and never less than a readable page. */
.document__frame[b-clp5yzlloa] {
	flex: 1;
	width: 100%;
	min-height: 420px;
	border: 0;
	border-radius: var(--radius-card);
	background: var(--surface-card);
}

.document__image[b-clp5yzlloa] {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	background: var(--surface-card);
}

.document__no-preview[b-clp5yzlloa],
.document__state-copy[b-clp5yzlloa],
.document__loading[b-clp5yzlloa] {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

.document__state-copy[b-clp5yzlloa] {
	margin-bottom: 12px;
}

/* ---- The action bar -------------------------------------------------------
   The file's own button and the quiet remove under it; the remove's question stands in their
   place, so two filled buttons are never on screen at once. */
.document__actions[b-clp5yzlloa] {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 10px 16px;
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
}

.document__confirm[b-clp5yzlloa] {
	margin: 0;
	font-size: 13px;
	color: var(--text-body);
}

.document__confirm-note[b-clp5yzlloa] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* The upload sheet's error line, so a refusal reads the same on both surfaces. */
.document__remove-error[b-clp5yzlloa] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--shr-danger);
	text-wrap: pretty;
}
/* /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 ------------------------------------------------------- */
/* A row is a column: the button that is the row, and — for a merged CV — the read-back button
   tucked under it. Two controls, so two buttons; a button inside a button is not HTML. */
.doc-row[b-vhyj0d4tei] {
	display: flex;
	flex-direction: column;
}

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

.doc-row__main[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__main:focus-visible[b-vhyj0d4tei],
.doc-row__review: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 merged CV's second destination, indented to the text column (10px pad + 38px icon + 12px
   gap) and pulled up under the meta line; still a 44px target in its own right. */
.doc-row__review[b-vhyj0d4tei] {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	min-height: 44px;
	margin-top: -14px;
	padding: 0 10px 0 60px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-medium);
	color: var(--color-primary);
	cursor: pointer;
}

.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;
}

/* Why the CV half of the locker is empty, when it is empty for a reason. */
.documents__state[b-vhyj0d4tei] {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}


.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;
}

/* ---- Waiting -------------------------------------------------------------------------
   SkDocuments: the progress card's outline, the heading and five rows with a badge's slot;
   the upload panel under them is real. */
.documents__loading[b-vhyj0d4tei] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.documents__skeleton-progress-head[b-vhyj0d4tei] {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.documents__skeleton-bar[b-vhyj0d4tei] {
	margin: 12px 0 10px;
}
/* /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 --------------------------------------
   A real <input type="file">, hidden and stretched over the label so the whole row is the hit
   target; the label reuses the old source row's icon/text/chevron styling pixel for pixel. */
.upload-sheet__picker[b-av151g80gl] {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 56px;
	padding: 14px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	cursor: pointer;
}

/* display: flex above would beat the user agent's [hidden] rule, so say it explicitly. The row
   is hidden, not removed, because the <input> inside still owns the chosen file. */
.upload-sheet__picker[hidden][b-av151g80gl] {
	display: none;
}

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

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

/* The <input> is rendered by InputFile, a child component, so CSS isolation never stamps it
   with this file's scope — without ::deep the rule matches nothing and the native control sits
   visible inside the row. */
.upload-sheet__picker[b-av151g80gl]  .upload-sheet__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.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;
}

/* ---- Reading the CV -------------------------------------------------------
   The sheet's one Wave: no Wave exists on the Documents surface yet, so this is it. */
.upload-sheet__progress[b-av151g80gl] {
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
	padding: 24px 0 8px;
}

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

.upload-sheet__progress-copy[b-av151g80gl] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ---- What the API refused ------------------------------------------------ */
.upload-sheet__error[b-av151g80gl] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--shr-danger);
	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);
}

/* ---- Unreachable ------------------------------------------------------------- */
.job-detail__state-copy[b-qn4o84gv99] {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

.job-detail__notice[b-qn4o84gv99] {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--shr-danger);
	text-wrap: pretty;
}

/* ---- Waiting ---------------------------------------------------------------------
   SkJobDetail: the header's placeholders wear the on-blue tone; the body is the facts card,
   the summary's lines and two sections' outlines; the apply bar holds its own height. */
.job-detail__loading .job-detail__body[b-qn4o84gv99] {
	gap: 12px;
}

.job-detail__skeleton-headings[b-qn4o84gv99] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 2px;
}

.job-detail__skeleton-facts[b-qn4o84gv99] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.job-detail__skeleton-fact[b-qn4o84gv99] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.job-detail__skeleton-section[b-qn4o84gv99] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.job-detail__skeleton-bar[b-qn4o84gv99] {
	display: flex;
	align-items: center;
	gap: 10px;
}

.job-detail__skeleton-bar[b-qn4o84gv99]  .shr-skeleton--pill {
	flex: 1;
	min-width: 0;
}

.job-detail__loading[b-qn4o84gv99] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
/* /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);
}

/* ---- Loading and unreachable ------------------------------------------------- */
.jobs__loading[b-289g4ww33y] {
	padding: 12px 16px 18px; /* the chips row's top and the list's sides, so nothing moves when the cards land */
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jobs__skeleton-chips[b-289g4ww33y] {
	display: flex;
	gap: 8px;
}
.jobs__notice[b-289g4ww33y] {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

.jobs__notice[b-289g4ww33y] {
	color: var(--shr-danger);
}

.jobs__state[b-289g4ww33y] {
	margin-top: 12px;
}

.jobs__state-copy[b-289g4ww33y] {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}
/* /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;
}

/* ---- Unreachable ------------------------------------------------------------- */
.search__state[b-1nqn7zilma] {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

.search__notice[b-1nqn7zilma] {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--shr-danger);
	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/Jobs/VacancyCardSkeleton.razor.rz.scp.css */
/* VacancyCard's spacing, with placeholders where its text sits. */
.vacancy-skeleton__head[b-njh67goejh] {
	display: flex;
	gap: 12px;
}

.vacancy-skeleton__headings[b-njh67goejh] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-top: 2px;
}

.vacancy-skeleton__meta[b-njh67goejh] {
	display: flex;
	gap: 14px;
	margin-top: 12px;
}

.vacancy-skeleton__facts[b-njh67goejh] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}

.vacancy-skeleton__dates[b-njh67goejh] {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid var(--border-subtle);
}
/* /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;
}

/* ---- Waiting, and no answer ---------------------------------------------
   The same two states the tracker draws: one line while the read is in flight, and a card with
   the sentence and a way to ask again when it did not land. */
.messages__loading[b-nhmq4xrvlj] {
	margin: 0;
}

.messages__state-copy[b-nhmq4xrvlj] {
	margin: 0 0 12px;
	font-size: 14px;
	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);
}

/* ---- A send that did not land -------------------------------------------
   One line on the composer's own white, above the field, in the danger red. The typed text stays
   in the field under it: the next move is to try again, not to type it again. */
.chat__error[b-appyn8b4kj] {
	flex-shrink: 0;
	margin: 0;
	padding: 10px 16px 0;
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--shr-danger);
	text-wrap: pretty;
}

.chat__error + .chat__composer[b-appyn8b4kj] {
	border-top: 0;
}

/* ---- No answer ----------------------------------------------------------
   The same card the tracker draws when a read did not land: the sentence and a way to ask again,
   never an empty conversation. */
.chat__state-copy[b-appyn8b4kj] {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
	.chat__input[b-appyn8b4kj] {
		transition: none;
	}
}

/* ---- Waiting ----------------------------------------------------------------------- */
.chat__loading .chat__body[b-appyn8b4kj] {
	gap: 12px;
}

.chat__skeleton-slot[b-appyn8b4kj] {
	width: 82%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.chat__skeleton-slot--me[b-appyn8b4kj] {
	align-items: flex-end;
}

.chat__loading[b-appyn8b4kj] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
/* /Features/Profile/AddressPage.razor.rz.scp.css */
/* Your home address — not a gallery screen; borrows EditDetailsPage's shape (stacked ShrInputs in
   cards, one CTA pinned at the foot) with a search card above the parts and a map card between. */

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

/* 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. */
.address[b-ucpc3z5tqb]  .address__form {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

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

.address__body[b-ucpc3z5tqb]  .shr-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below its content's min-content width,
   and an <input> with no size attribute is about 187px wide in Ubuntu before the control's own
   32px of padding — two of those plus the gap outgrow a phone-width card by some 70px and drag a
   horizontal scrollbar onto the body. A zero minimum lets the field take the half it is given. */
.address__pair[b-ucpc3z5tqb] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

/* ---- Find it (Task 11) ---- */

.address__suggestions[b-ucpc3z5tqb] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: -6px;
}

.address__suggestion[b-ucpc3z5tqb] {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 11px 13px;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	background: var(--surface-card);
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	color: var(--text-heading);
	cursor: pointer;
}

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

.address__quiet[b-ucpc3z5tqb] {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--text-muted);
}

.address__provider[b-ucpc3z5tqb] {
	margin: -6px 2px 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--text-muted);
}

/* ---- Is it one of these? (spec 2026-09-09) ------------------------------
   The search card's rows, under the parts card, with a quiet label above them. */
.address__candidates[b-ucpc3z5tqb] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.address__candidates-label[b-ucpc3z5tqb] {
	margin: 0 2px 2px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

.address__candidate[b-ucpc3z5tqb] {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 11px 13px;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	background: var(--surface-card);
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	color: var(--text-heading);
	cursor: pointer;
}

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

/* ---- Places under a field ------------------------------------------------- */
/* .address__place, .address__place:focus-visible, .address__place-name and .address__place-where
   moved to PlacesList.razor.css — they belong to the rows, not the wrapper, and CSS isolation only
   reaches an element the Razor compiler wrote. */
.address__places[b-ucpc3z5tqb] {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: -6px;
}

/* ---- Confirm it on the map (Task 12) ---- */

.address__map[b-ucpc3z5tqb] {
	width: 100%;
	height: 240px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--shr-grey-100, #eef1f4);
}

.address__caption[b-ucpc3z5tqb] {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--shr-grey-700);
}

.address__map-hint[b-ucpc3z5tqb] {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--text-muted);
}

/* ---- Shared ---- */

.address__error[b-ucpc3z5tqb] {
	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;
}

.address__actions[b-ucpc3z5tqb] {
	flex-shrink: 0;
	padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
}
/* /Features/Profile/CertificatePicker.razor.rz.scp.css */
/* Picking the certificate behind a qualification. The rows borrow the document locker's geometry
   (DocScreens.jsx doc rows) so a file looks the same wherever the app lists one. */

.cert-picker[b-9b7au4j89l] {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cert-picker__list[b-9b7au4j89l] {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--surface-card);
}

.cert-picker__row[b-9b7au4j89l] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 13px 12px;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.cert-picker__row + .cert-picker__row[b-9b7au4j89l] {
	border-top: 1px solid var(--border-subtle);
}

.cert-picker__row:focus-visible[b-9b7au4j89l] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

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

.cert-picker__text[b-9b7au4j89l] {
	flex: 1;
	min-width: 0;
}

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

.cert-picker__meta[b-9b7au4j89l] {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}

.cert-picker__chev[b-9b7au4j89l] {
	flex-shrink: 0;
	line-height: 0;
	color: var(--shr-grey-400);
}

/* ---- The way out of an empty locker -------------------------------------- */
.cert-picker__state[b-9b7au4j89l] {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

.cert-picker__upload[b-9b7au4j89l] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 14px 12px;
	border: 1.5px dashed var(--border-strong);
	border-radius: var(--radius-card);
	background: var(--surface-card);
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.cert-picker__upload:focus-visible[b-9b7au4j89l] {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.cert-picker__upload-icon[b-9b7au4j89l] {
	flex-shrink: 0;
	line-height: 0;
	color: var(--color-primary);
}

.cert-picker__upload-text[b-9b7au4j89l] {
	flex: 1;
	min-width: 0;
}

.cert-picker__upload-title[b-9b7au4j89l] {
	display: block;
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.cert-picker__upload-hint[b-9b7au4j89l] {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}
/* /Features/Profile/ChangePasswordSheet.razor.rz.scp.css */
/* Change your password — the sheet behind Settings' Password row. The Sheet component supplies the
   panel, the grip, the heading and the footer rule; this is the body and the two actions in it. */

.change-password[b-umjjzyr7b7] {
	display: grid;
	gap: var(--space-3);
	font-family: var(--font-sans);
}

.change-password__error[b-umjjzyr7b7] {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--shr-danger);
	text-wrap: pretty;
}

/* Change above cancel, stacked: the sheet is the width of the phone, and two pills side by side
   would make the one nobody came for as large as the one they did. */
.change-password__actions[b-umjjzyr7b7] {
	display: grid;
	gap: var(--space-2);
}

/* The submit that only Enter ever reaches: off the layout, out of the tab order, unannounced. */
.change-password__submit[b-umjjzyr7b7] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* /Features/Profile/EditDetailsPage.razor.rz.scp.css */
/* Edit your details — not a gallery screen; borrows SignUpPage's shape (stacked ShrInputs in a
   card, one CTA pinned at the foot) since the prototype only draws the button that opens this. */

.edit-details[b-08kt1lhzz2] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
}

/* 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, same as SignUpPage. */
.edit-details[b-08kt1lhzz2]  .edit-details__form {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

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

/* ShrCard's own gap between stacked ShrInputs — matches SignUpPage's auth-form gap. */
.edit-details__body[b-08kt1lhzz2]  .shr-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.edit-details__field[b-08kt1lhzz2] {
	display: block;
}

.edit-details__label[b-08kt1lhzz2] {
	display: block;
	margin-bottom: var(--space-2);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	color: var(--shr-grey-700);
}

.edit-details__textarea[b-08kt1lhzz2] {
	width: 100%;
	min-height: 96px;
	padding: 12px var(--space-4);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	font: inherit;
	color: var(--text-heading);
	resize: vertical;
}

.edit-details__textarea:focus-visible[b-08kt1lhzz2] {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.edit-details__error[b-08kt1lhzz2] {
	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;
}

.edit-details__actions[b-08kt1lhzz2] {
	flex-shrink: 0;
	padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
}
/* /Features/Profile/ExperienceFormPage.razor.rz.scp.css */
/* Add/edit a role — CVEditScreens.jsx ExperienceForm (line 99). A screen, not a sheet: app bar,
   a scrolling body of 16px-gapped fields, and the sticky FormFooter under it. */

.role-form[b-3sb5xloen1] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-app);
}

/* 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 plus the footer beneath it. */
.role-form[b-3sb5xloen1]  .role-form__form {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.role-form__body[b-3sb5xloen1] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
}

/* ---- The opening note ----------------------------------------------------
   The JSX tints this card and drops its shadow, so it reads as guidance rather than as the first
   thing on the form. */
.role-form__intro[b-3sb5xloen1]  .shr-card {
	background: var(--surface-tint);
	box-shadow: none;
}

.role-form__intro-row[b-3sb5xloen1] {
	display: flex;
	gap: 10px;
}

.role-form__intro-icon[b-3sb5xloen1] {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--color-primary);
	line-height: 0;
}

.role-form__intro-copy[b-3sb5xloen1] {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-body);
}

/* ---- Grouped fields ------------------------------------------------------ */
.role-form__group[b-3sb5xloen1] {
	display: block;
}

.role-form__group-label[b-3sb5xloen1] {
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

/* Dimmed with the pair it labels while "I still work here" is on. */
.role-form__group-label--off[b-3sb5xloen1] {
	opacity: 0.45;
}

/* The JSX's Pair: month wider than year. */
.role-form__pair[b-3sb5xloen1] {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 10px;
}

.role-form__pair--off[b-3sb5xloen1] {
	opacity: 0.45;
	pointer-events: none;
}

.role-form__switch[b-3sb5xloen1] {
	margin-top: 11px;
}

/* ---- Skills -------------------------------------------------------------- */
/* Row gap over column gap: the remove buttons stand 44px tall inside 25px chips (below), and a
   7px row gap would let one row's hit target reach into the row under it. */
.role-form__chips[b-3sb5xloen1] {
	display: flex;
	flex-wrap: wrap;
	column-gap: 7px;
	row-gap: 12px;
}

.role-form__chips:empty[b-3sb5xloen1] {
	display: none;
}

/* A thumb needs 44px; the chip is 25px tall and must stay that way, so the button takes its size
   and gives the extra back as negative margin. The × keeps the chip's own type — the glyph is
   small, the target it sits in the middle of is not. The trailing margin cancels the chip's right
   padding, which the button now covers. */
.role-form__chip-remove[b-3sb5xloen1] {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	margin: -10px -12px -10px -4px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	font: inherit;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}

.role-form__chip-remove:focus-visible[b-3sb5xloen1] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -8px;
}

.role-form__suggest[b-3sb5xloen1] {
	margin-top: 12px;
}

/* ---- Refusals and states ------------------------------------------------- */
.role-form__lookups[b-3sb5xloen1] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: -6px;
}

.role-form__lookups-copy[b-3sb5xloen1],
.role-form__error[b-3sb5xloen1] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	color: var(--shr-danger);
}

.role-form__lookups-copy[b-3sb5xloen1] {
	color: var(--text-muted);
}

.role-form__state[b-3sb5xloen1] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	line-height: 1.5;
	color: var(--text-body);
}

/* ---- The footer ----------------------------------------------------------
   The delete confirm stands in the footer's place, so it wears the same shelf: the save is hidden
   while it is up, and two filled buttons are never on screen at once. */
.role-form__footer[b-3sb5xloen1] {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 10px var(--space-4);
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
	box-shadow: 0 -8px 20px rgba(0, 43, 63, 0.07);
}

.role-form__confirm[b-3sb5xloen1] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	color: var(--text-body);
}

/* The submit that only Enter ever reaches: off the layout, out of the tab order, unannounced. */
.role-form__submit[b-3sb5xloen1] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* /Features/Profile/ImproveProfilePage.razor.rz.scp.css */
/* "Improve my profile" — EnrichScreens.jsx EnrichEntryScreen (line 300): Screen bg surface-app,
   Body pad 16, a 16px-gapped column of cards. */

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

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

/* ---- Unreachable --------------------------------------------------------- */
.improve__state[b-eh4a09snl7] {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: center;
}

.improve__state-copy[b-eh4a09snl7] {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
}

/* ---- The meter card ------------------------------------------------------ */
.improve__lead[b-eh4a09snl7] {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

.improve__meter + .improve__lead[b-eh4a09snl7] {
	margin-top: 12px;
}

/* ---- The option card ------------------------------------------------------
   The prototype's card wears a 1px primary border to say it is the route to take. ShrCard is
   reached through ::deep because the border is this screen's, not the card's. */
.improve__option[b-eh4a09snl7]  .shr-card {
	border: 1px solid var(--color-primary);
}

.improve__option-row[b-eh4a09snl7] {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

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

.improve__option-text[b-eh4a09snl7] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.improve__option-title[b-eh4a09snl7] {
	font-size: 15px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.improve__option-caption[b-eh4a09snl7] {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

.improve__option-chev[b-eh4a09snl7] {
	flex-shrink: 0;
	margin-top: 10px;
	color: var(--color-primary);
	line-height: 0;
}

.improve__preview[b-eh4a09snl7] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

/* ---- What is on your profile now ----------------------------------------
   One row per bucket: an 84px eyebrow column with the count under it, the names as chips. The card
   is padded to 4px so each row's own 12px/10px runs the hairlines the full width. */
.improve__held-row[b-eh4a09snl7] {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 10px;
}

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

.improve__held-head[b-eh4a09snl7] {
	width: 84px;
	flex-shrink: 0;
	padding-top: 5px;
}

.improve__held-bucket[b-eh4a09snl7] {
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.improve__held-count[b-eh4a09snl7] {
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}

.improve__held-chips[b-eh4a09snl7] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.improve__held-empty[b-eh4a09snl7] {
	margin: 0;
	padding: 14px 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- The footnote ------------------------------------------------------- */
.improve__foot[b-eh4a09snl7] {
	margin: 0;
	text-align: center;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ---- Waiting -------------------------------------------------------------------
   The same three cards, outlined in tint until the summary lands. */
.improve__skeleton-meter[b-eh4a09snl7] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.improve__skeleton-option[b-eh4a09snl7] {
	display: flex;
	align-items: center;
	gap: 12px;
}

.improve__skeleton-text[b-eh4a09snl7] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.improve__skeleton-held[b-eh4a09snl7] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.improve__skeleton-held + .improve__skeleton-held[b-eh4a09snl7] {
	margin-top: 16px;
}

.improve__skeleton-chips[b-eh4a09snl7] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* /Features/Profile/PlacesList.razor.rz.scp.css */
.address__place[b-36yf8rd573] {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 13px;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	background: var(--surface-card);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.address__place:focus-visible[b-36yf8rd573] {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

.address__place-name[b-36yf8rd573] {
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

.address__place-where[b-36yf8rd573] {
	font-size: 12px;
	color: var(--text-muted);
}
/* /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;
}

/* ---- 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;
}

/* ---- The empty-profile states -------------------------------------------
   NoCellNumber and Unreachable both land here: a sentence in place of the three sections, rather
   than three empty cards. */
.profile__state[b-055930y5b8] {
	margin: 0;
	color: var(--text-muted);
}

/* The one invitation a profile with nothing in it gets, in place of three empty cards. */
.profile__empty[b-055930y5b8] {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- 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;
}

/* A list with nothing in it still says so, on one line, rather than leaving a blank card. */
.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 ---------------------------------------------------------------
   Read-only since the skills editor landed: the chips carry no × any more, and the row itself is
   the control that opens /profile/skills. A button rather than a div, so it is one tab stop with
   one accessible name — and stripped of the button chrome, because what it looks like is a row of
   tags. flex-shrink: 0 because the body is a flex column that scrolls: it shrinks its children to
   their min-height before it overflows, and the 44px floor here replaces the content-sized minimum
   a block gets for free — a profile with enough skills to scroll would otherwise be squashed to
   one row and paint the rest behind the links card below. */
.profile__skills[b-055930y5b8] {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	width: 100%;
	min-height: 44px;
	flex-shrink: 0;
	padding: 4px 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

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

/* ---- Empty sections ------------------------------------------------------
   One card per section with nothing in it, in the inbox's idiom: a bold line naming what is
   missing and one sentence on what belongs there. The heading's action is the way in. */
.profile-empty[b-055930y5b8] {
	text-align: center;
}

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

.profile-empty__copy[b-055930y5b8] {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- 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);
}

/* ---- Questionnaires ------------------------------------------------------- */
.profile__qcard[b-055930y5b8] { display: flex; align-items: center; gap: 12px; color: var(--color-primary); }
.profile__qcard-text[b-055930y5b8] { flex: 1; min-width: 0; font-size: 14px; font-weight: var(--fw-medium); color: var(--text-heading); }

/* ---- The footnote ------------------------------------------------------- */
.profile__version[b-055930y5b8] {
	margin: 0;
	text-align: center;
	font-size: 11.5px;
	color: var(--text-muted);
}

/* ---- Improve your profile -----------------------------------------------
   The prototype's EnrichEntryCard icon: a 40px tile on the warning tint with the accent-hover glyph. A
   tinted glyph, not a control — orange on this screen still belongs to the staff flag alone. */
.profile__improve[b-055930y5b8] {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-primary);
}

.profile__improve-icon[b-055930y5b8] {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--shr-warning-tint);
	color: var(--color-accent-hover);
}

.profile__improve-text[b-055930y5b8] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

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

.profile__improve-caption[b-055930y5b8] {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- Confirmed from your role --------------------------------------------
   Between the candidate's own chips and the framework matches: one row per bucket, the bucket's name
   in the small uppercase eyebrow the entry screen uses. Blue chips — these are things the candidate
   said yes to, not matches the platform made on its own. */
.profile__confirmed[b-055930y5b8] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 0 8px;
}

.profile__confirmed-caption[b-055930y5b8] {
	font-size: var(--fs-sm, 13px);
	color: var(--text-muted);
}

.profile__confirmed-row[b-055930y5b8] {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.profile__confirmed-bucket[b-055930y5b8] {
	width: 84px;
	flex-shrink: 0;
	padding-top: 5px;
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.profile__confirmed-chips[b-055930y5b8] {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	flex: 1;
	min-width: 0;
}

/* ---- Waiting ------------------------------------------------------------------------
   SkProfile's sections: the roles and the studies as rows-in-a-card, the skills as chips of
   varied width; the identity card above them is real. */
.profile__loading[b-055930y5b8] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.profile__skeleton-section[b-055930y5b8] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.profile__skeleton-chips[b-055930y5b8] {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 4px 0;
}
/* /Features/Profile/QualificationFormPage.razor.rz.scp.css */
/* Add/edit a qualification — CVEditScreens.jsx QualificationForm (line 185). The role editor's
   shell exactly: app bar, a scrolling body of 16px-gapped fields, the sticky FormFooter under it.
   The proof section is this screen's own. */

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

/* 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 plus the footer beneath it. */
.qual-form[b-iylwbqfw95]  .qual-form__form {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

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

/* ---- Grouped fields ------------------------------------------------------ */
.qual-form__group[b-iylwbqfw95] {
	display: block;
}

.qual-form__group-label[b-iylwbqfw95] {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

/* The JSX's Pair: the year wider than the NQF level beside it. */
.qual-form__pair[b-iylwbqfw95] {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 10px;
}

.qual-form__switch[b-iylwbqfw95] {
	margin-top: 11px;
}

/* ---- Proof of qualification ---------------------------------------------
   The attached certificate, drawn as the locker draws a document: the tinted file mark, the name
   over its provenance, the badge, and the × that takes it off again. */
.qual-form__proof-row[b-iylwbqfw95] {
	display: flex;
	align-items: center;
	gap: 12px;
}

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

.qual-form__proof-text[b-iylwbqfw95] {
	flex: 1;
	min-width: 0;
}

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

.qual-form__proof-meta[b-iylwbqfw95] {
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-muted);
}

/* 44px, as the JSX sizes it: taking the certificate off is a tap that must not need aim. */
.qual-form__proof-remove[b-iylwbqfw95] {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--shr-grey-400);
	cursor: pointer;
}

.qual-form__proof-remove:focus-visible[b-iylwbqfw95] {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

.qual-form__attach[b-iylwbqfw95] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 100%;
	padding: 18px 16px;
	border: 1.5px dashed var(--border-strong);
	border-radius: var(--radius-card);
	background: var(--surface-card);
	font-family: var(--font-sans);
	cursor: pointer;
}

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

.qual-form__attach-icon[b-iylwbqfw95] {
	line-height: 0;
	color: var(--color-primary);
}

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

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

.qual-form__proof-note[b-iylwbqfw95] {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ---- Refusals and states ------------------------------------------------- */
.qual-form__lookups[b-iylwbqfw95] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: -6px;
}

.qual-form__lookups-copy[b-iylwbqfw95],
.qual-form__error[b-iylwbqfw95] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	color: var(--shr-danger);
}

.qual-form__lookups-copy[b-iylwbqfw95] {
	color: var(--text-muted);
}

.qual-form__state[b-iylwbqfw95] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	line-height: 1.5;
	color: var(--text-body);
}

/* ---- The footer ----------------------------------------------------------
   The delete confirm stands in the footer's place, so it wears the same shelf: the save is hidden
   while it is up, and two filled buttons are never on screen at once. */
.qual-form__footer[b-iylwbqfw95] {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 10px var(--space-4);
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
	box-shadow: 0 -8px 20px rgba(0, 43, 63, 0.07);
}

.qual-form__confirm[b-iylwbqfw95] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	color: var(--text-body);
}

/* The submit that only Enter ever reaches: off the layout, out of the tab order, unannounced. */
.qual-form__submit[b-iylwbqfw95] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* /Features/Profile/RelatedStrip.razor.rz.scp.css */
/* The related strip — EnrichScreens.jsx RelatedStrip (line 94): indented under its card behind a
   2px blue-tint rule, one 44px row per neighbour on the card surface, blue-tinted once picked. */

.related[b-i6v3r7mh19] {
	margin-left: 14px;
	padding-left: 12px;
	border-left: 2px solid var(--shr-blue-tint);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.related__row[b-i6v3r7mh19] {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	background: var(--surface-card);
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.related__row--on[b-i6v3r7mh19] {
	border-color: var(--color-primary);
	background: var(--shr-blue-tint);
}

/* The pick box: an outlined plus that fills blue with a check once picked. */
.related__box[b-i6v3r7mh19] {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 6px;
	border: 1.5px solid var(--border-strong);
	background: #fff;
	color: var(--color-primary);
	line-height: 0;
}

.related__row--on .related__box[b-i6v3r7mh19] {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

.related__text[b-i6v3r7mh19] {
	flex: 1;
	min-width: 0;
}

.related__name[b-i6v3r7mh19] {
	display: block;
	font-size: 13.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	text-wrap: pretty;
}

.related__row--on .related__name[b-i6v3r7mh19] {
	font-weight: var(--fw-bold);
}

.related__sub[b-i6v3r7mh19] {
	display: block;
	margin-top: 1px;
	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 — bar the password row, which opens the change sheet. The row shape
   follows the prototype's link rows so the card sits with the rest of the screen; the two readouts
   drop the chevron, since nothing would follow it. */
.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;
}

/* The one account row that is a button. Stripped back to the readouts' geometry so the card still
   reads as one list; the 52px row is well past the 44px target on its own. */
.settings__password[b-lanviav22c] {
	width: 100%;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

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

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

/* ---- 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;
}

.settings__push[b-lanviav22c] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.settings__push-caption[b-lanviav22c] {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--text-muted);
}

.settings__push-error[b-lanviav22c] {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--shr-danger);
}

/* ---- 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/Profile/SkillsPage.razor.rz.scp.css */
/* Skills — CVEditScreens.jsx SkillsScreen (line 269). The same shell as the other two CV editors:
   app bar, a scrolling body of 16px-gapped blocks, and the sticky FormFooter under it. */

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

/* EditForm renders the <form> itself, so it never carries this component's scope attribute —
   ::deep is what reaches it. */
.skills[b-ucsdd48ywb]  .skills__form {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

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

/* ---- Search results ------------------------------------------------------
   The JSX's stack of tappable rows: a card-surfaced row per match, then the dashed one that adds
   whatever was typed. */
.skills__matches[b-ucsdd48ywb] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: -6px;
}

.skills__match[b-ucsdd48ywb] {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 11px 13px;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	background: var(--surface-card);
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	color: var(--text-heading);
	cursor: pointer;
}

.skills__match--new[b-ucsdd48ywb] {
	border: 1px dashed var(--border-strong);
	background: transparent;
	color: var(--color-primary);
}

.skills__match-mark[b-ucsdd48ywb] {
	flex-shrink: 0;
	line-height: 0;
	color: var(--color-primary);
}

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

/* ---- The working list ---------------------------------------------------- */
.skills__list[b-ucsdd48ywb] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.skills__empty[b-ucsdd48ywb] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	line-height: 1.5;
	color: var(--text-muted);
}

/* The refused row keeps its card and gains a rim, so the sentence in the banner has something to
   point at. aria-invalid on the same element is what says it without the colour. */
.skills__card--invalid[b-ucsdd48ywb]  .shr-card {
	box-shadow: 0 0 0 1.5px var(--shr-danger);
}

.skills__head[b-ucsdd48ywb] {
	display: flex;
	align-items: center;
	gap: 10px;
}

.skills__text[b-ucsdd48ywb] {
	flex: 1;
	min-width: 0;
}

.skills__name[b-ucsdd48ywb] {
	font-size: 13.5px;
	font-weight: var(--fw-bold, 700);
	color: var(--text-heading);
	text-wrap: pretty;
}

.skills__meta[b-ucsdd48ywb] {
	margin-top: 1px;
	font-size: 12px;
	color: var(--text-muted);
}

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

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

/* The level trough runs the width the JSX gives it; the years field sits beside it, narrow enough
   that a two-digit number is plainly all it wants. */
.skills__controls[b-ucsdd48ywb] {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-top: 10px;
}

.skills__level[b-ucsdd48ywb] {
	flex: 1;
	min-width: 0;
}

.skills__years[b-ucsdd48ywb] {
	flex-shrink: 0;
	width: 84px;
}

.skills__years[b-ucsdd48ywb]  .shr-field__label {
	font-size: 11.5px;
}

.skills__years[b-ucsdd48ywb]  .shr-field__input {
	text-align: center;
}

/* ---- Refusals and states ------------------------------------------------- */
.skills__error[b-ucsdd48ywb] {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.skills__error-copy[b-ucsdd48ywb] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	line-height: 1.5;
	color: var(--shr-danger);
}

.skills__state[b-ucsdd48ywb] {
	margin: 0;
	font-size: var(--fs-sm, 13px);
	line-height: 1.5;
	color: var(--text-body);
}

.skills__footer[b-ucsdd48ywb] {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 10px var(--space-4);
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
	box-shadow: 0 -8px 20px rgba(0, 43, 63, 0.07);
}

/* The submit that only Enter ever reaches: off the layout, out of the tab order, unannounced. */
.skills__submit[b-ucsdd48ywb] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* /Features/Profile/SuggestFromRolePage.razor.rz.scp.css */
/* "From your role" — EnrichScreens.jsx EnrichFromRole (line 116) and EnrichDone (line 276): a
   scrolling 16px column of cards over the app canvas, the sticky footer under it. */

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

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

/* ---- The opening note ------------------------------------------------------
   Tinted and shadowless, as the JSX draws it: guidance, not the first card. */
.role__intro[b-263l4bbg6x]  .shr-card {
	background: var(--surface-tint);
	box-shadow: none;
}

.role__intro-copy[b-263l4bbg6x] {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}

.role__intro-meter[b-263l4bbg6x] {
	margin-top: 12px;
}

.role__intro-review[b-263l4bbg6x] {
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: var(--fw-medium);
	color: var(--text-heading);
}

/* ---- The alert line -------------------------------------------------------- */
.role__alert[b-263l4bbg6x] {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--shr-danger);
}

/* ---- One suggestion ---------------------------------------------------------
   A transparent border on every card keeps the size when a confirmed one turns blue. */
.role__row[b-263l4bbg6x]  .shr-card {
	border: 1px solid transparent;
	transition: opacity var(--dur-base) var(--ease-out);
}

.role__row--accepted[b-263l4bbg6x]  .shr-card {
	border-color: var(--color-primary);
}

.role__row--dismissed[b-263l4bbg6x]  .shr-card {
	opacity: 0.55;
}

.role__row--busy[b-263l4bbg6x]  .shr-card {
	opacity: 0.75;
}

.role__row-head[b-263l4bbg6x] {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.role__row-text[b-263l4bbg6x] {
	flex: 1;
	min-width: 0;
}

.role__row-title[b-263l4bbg6x] {
	display: flex;
	gap: 7px;
	align-items: center;
	flex-wrap: wrap;
}

.role__row-name[b-263l4bbg6x] {
	font-size: 14.5px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
	text-wrap: pretty;
}

.role__row-description[b-263l4bbg6x] {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-body);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.role__row-variants[b-263l4bbg6x] {
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--text-muted);
	text-wrap: pretty;
}

.role__row-check[b-263l4bbg6x] {
	flex-shrink: 0;
	color: var(--color-primary);
	line-height: 0;
}

/* Two buttons sharing the width, on the 44px floor ShrButton already keeps. */
.role__row-actions[b-263l4bbg6x] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 12px;
}

.role__row-note[b-263l4bbg6x] {
	margin-top: 10px;
	font-size: 12px;
	color: var(--text-muted);
}

/* ---- The related toggle and strip ----------------------------------------------
   A text-link button on a 36px floor, the chevron turning when the strip is open; the strip
   itself sits 12px under the card, which with the prototype's -4px lands it where the JSX put it. */
.role__row-related[b-263l4bbg6x] {
	margin-top: 12px;
}

.role__row-related-toggle[b-263l4bbg6x] {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--text-link);
	cursor: pointer;
}

.role__row-related-chev[b-263l4bbg6x] {
	display: inline-flex;
	line-height: 0;
	transition: transform var(--dur-base) var(--ease-out);
}

.role__row-related-chev--open[b-263l4bbg6x] {
	transform: rotate(180deg);
}

.role__row-strip[b-263l4bbg6x] {
	margin-top: 12px;
}

/* ---- The states -------------------------------------------------------------- */
.role__state[b-263l4bbg6x] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

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

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

/* ---- The footnote ------------------------------------------------------------ */
.role__foot[b-263l4bbg6x] {
	margin: 0;
	text-align: center;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ---- The footer ----------------------------------------------------------------
   Sticky under the list on the card surface, with the prototype's upward shadow. */
.role__footer[b-263l4bbg6x] {
	flex-shrink: 0;
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--surface-card);
	border-top: 1px solid var(--border-subtle);
	box-shadow: 0 -8px 20px rgba(0, 43, 63, 0.07);
}

/* ---- Done ------------------------------------------------------------------------
   EnrichDone: centred on the page surface, the check in a blue-tint disc, then the pair. */
.role__body--done[b-263l4bbg6x] {
	justify-content: center;
	background: var(--surface-page, var(--surface-app));
}

.role__done[b-263l4bbg6x] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 6px;
	text-align: center;
}

.role__done-disc[b-263l4bbg6x] {
	width: 78px;
	height: 78px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--shr-blue-tint);
	color: var(--color-primary);
}

.role__done-title[b-263l4bbg6x] {
	margin: 0;
	font-size: 23px;
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.role__done-copy[b-263l4bbg6x] {
	margin: -6px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}

.role__done-actions[b-263l4bbg6x] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
}

/* ---- Waiting ----------------------------------------------------------------------
   The note and three cards, outlined in tint until the suggestions land. */
.role__skeleton-intro[b-263l4bbg6x] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.role__skeleton-title[b-263l4bbg6x] {
	display: flex;
	align-items: center;
	gap: 7px;
}

.role__skeleton-actions[b-263l4bbg6x] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 12px;
}
/* /Features/Profile/VerifyIdentityPage.razor.rz.scp.css */
/* Verify your identity - a pushed screen off the Profile quick links. Borrows the address
   screen's frame (AddressPage.razor.css): app surface, one scrolling body, cards stacked. */

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

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

/* EditForm renders the <form> itself, so it never carries this component's scope attribute. */
.verify[b-wdo1wr9twr]  .verify__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.verify__title[b-wdo1wr9twr] {
	margin: 0 0 8px;
	font-size: var(--fs-lg);
	line-height: 1.3;
}

.verify__copy[b-wdo1wr9twr] {
	margin: 0 0 8px;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--text-body);
}

.verify__error[b-wdo1wr9twr] {
	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;
}

/* Didit's embedded flow fills its host; give it a phone's worth of height to fill. */
.verify__host[b-wdo1wr9twr] {
	flex: 1;
	min-height: 560px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-card);
}

.verify__fallback[b-wdo1wr9twr] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* /Features/Questionnaires/DateField.razor.rz.scp.css */
.q-date__trigger[b-an5avgcyby] { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; font-family: var(--font-sans); cursor: pointer; color: var(--color-primary); }
.q-date__trigger--invalid[b-an5avgcyby] { border-color: var(--shr-danger); }
.q-date__trigger:disabled[b-an5avgcyby] { cursor: default; background: var(--shr-grey-50); color: var(--text-muted); }
.q-date__value[b-an5avgcyby] { flex: 1; text-align: left; font-size: 14.5px; font-weight: var(--fw-medium); color: var(--text-heading); }
.q-date__value--empty[b-an5avgcyby] { font-weight: var(--fw-regular); color: var(--text-muted); }
/* /Features/Questionnaires/LongTextField.razor.rz.scp.css */
.q-long--near[b-23w9y5jqph]  .shr-textarea__count { color: var(--color-accent-hover); font-weight: var(--fw-bold); }
/* /Features/Questionnaires/MultipleChoiceField.razor.rz.scp.css */
.q-multi__line[b-zrojerith3] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.q-multi__hint[b-zrojerith3] { font-size: 12px; color: var(--text-muted); }
.q-multi__count[b-zrojerith3] { margin-left: auto; font-size: 12px; font-weight: var(--fw-bold); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.q-multi__count--full[b-zrojerith3] { color: var(--color-accent-hover); }
.q-multi__rows[b-zrojerith3] { display: flex; flex-direction: column; gap: 8px; }
/* /Features/Questionnaires/NumberField.razor.rz.scp.css */
.q-number__row[b-xk0q99anl9] { display: flex; align-items: center; gap: 10px; }
.q-number__step[b-xk0q99anl9] { width: 48px; height: 48px; flex-shrink: 0; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); color: var(--color-primary); display: grid; place-items: center; cursor: pointer; }
.q-number__step:disabled[b-xk0q99anl9] { color: var(--shr-grey-300); cursor: not-allowed; }
.q-number__box[b-xk0q99anl9] { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--border-strong); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; }
.q-number__box--invalid[b-xk0q99anl9] { border-color: var(--shr-danger); }
.q-number__prefix[b-xk0q99anl9] { font-size: 15px; color: var(--text-muted); }
.q-number__unit[b-xk0q99anl9] { font-size: 13.5px; color: var(--text-muted); }
.q-number__input[b-xk0q99anl9] { width: 110px; border: 0; outline: none; background: transparent; text-align: center; font-family: var(--font-sans); font-size: 19px; font-weight: var(--fw-bold); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.q-number__rule[b-xk0q99anl9] { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; text-align: center; }
/* /Features/Questionnaires/QuestionCard.razor.rz.scp.css */
.q-card[b-2atpjtdccl]  .shr-card { border: 1px solid transparent; }
.q-card--invalid[b-2atpjtdccl]  .shr-card { border-color: var(--shr-danger); }
/* /Features/Questionnaires/QuestionError.razor.rz.scp.css */
.q-error[b-j7nb6dg6kw] { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; font-weight: var(--fw-medium); color: var(--shr-danger); }
/* /Features/Questionnaires/QuestionField.razor.rz.scp.css */
.q-field__unsupported[b-yviv11lltm] { font-size: 13px; color: var(--shr-danger); }
/* /Features/Questionnaires/QuestionHead.razor.rz.scp.css */
.q-head[b-md47mlkru5] { margin-bottom: 12px; }
.q-head__eyebrow[b-md47mlkru5] { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.q-head__eyebrow:empty[b-md47mlkru5] { display: none; }
.q-head__index[b-md47mlkru5] { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.q-head__follow[b-md47mlkru5] { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--fw-medium); color: var(--color-accent-hover); }
.q-head__label[b-md47mlkru5] { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.32; color: var(--text-heading); text-wrap: pretty; }
.q-head__req[b-md47mlkru5] { color: var(--color-accent); }
.q-head__help[b-md47mlkru5] { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-top: 5px; text-wrap: pretty; }
/* /Features/Questionnaires/QuestionnaireDone.razor.rz.scp.css */
.qn-done[b-zasjow8u02] { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-page); }
.qn-done__body[b-zasjow8u02] { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.qn-done__disc[b-zasjow8u02] { width: 78px; height: 78px; border-radius: 999px; background: var(--shr-blue-tint); color: var(--color-primary); display: grid; place-items: center; }
.qn-done__title[b-zasjow8u02] { margin: 0; font-size: 23px; font-weight: var(--fw-bold); color: var(--text-heading); }
.qn-done__copy[b-zasjow8u02] { margin: -6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.qn-done__card[b-zasjow8u02] { width: 100%; margin-top: 8px; text-align: left; }
.qn-done__name[b-zasjow8u02] { font-size: 14px; font-weight: var(--fw-bold); color: var(--text-heading); }
.qn-done__meta[b-zasjow8u02] { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
/* /Features/Questionnaires/QuestionnaireFooter.razor.rz.scp.css */
.qn-footer[b-kc2sxjjz3w] { flex-shrink: 0; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface-card); border-top: 1px solid var(--border-subtle); box-shadow: 0 -8px 20px rgba(0, 43, 63, 0.07); }
.qn-footer__note[b-kc2sxjjz3w] { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 9px; }
.qn-footer__row[b-kc2sxjjz3w] { display: flex; gap: 10px; }
/* /Features/Questionnaires/QuestionnaireIntro.razor.rz.scp.css */
.qn-intro[b-lb7uptb31f] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qn-intro__body[b-lb7uptb31f] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.qn-intro__rule[b-lb7uptb31f] { width: 34px; height: 3px; margin: 0 0 12px; }
.qn-intro__title[b-lb7uptb31f] { margin: 0; font-size: 21px; font-weight: var(--fw-bold); line-height: 1.22; color: var(--text-heading); text-wrap: pretty; }
.qn-intro__intro[b-lb7uptb31f] { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.qn-intro__stats[b-lb7uptb31f] { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; text-align: center; }
.qn-intro__stat-value[b-lb7uptb31f] { font-size: 17px; font-weight: var(--fw-bold); color: var(--color-primary); }
.qn-intro__stat-key[b-lb7uptb31f] { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.qn-intro__resume[b-lb7uptb31f]  .shr-card { background: var(--shr-warning-tint); box-shadow: none; }
.qn-intro__resume-head[b-lb7uptb31f] { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--text-heading); }
.qn-intro__resume-head svg[b-lb7uptb31f] { color: var(--color-accent-hover); }
.qn-intro__resume-copy[b-lb7uptb31f] { font-size: 12px; color: var(--text-body); margin-top: 7px; }
.qn-intro__sections[b-lb7uptb31f] { display: flex; flex-direction: column; margin-top: 8px; }
.qn-intro__section[b-lb7uptb31f] { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-subtle); }
.qn-intro__section:first-child[b-lb7uptb31f] { border-top: 0; }
.qn-intro__section-number[b-lb7uptb31f] { width: 24px; height: 24px; flex-shrink: 0; border-radius: 999px; background: var(--shr-blue-tint); color: var(--color-primary); font-size: 11.5px; font-weight: var(--fw-bold); display: grid; place-items: center; }
.qn-intro__section-title[b-lb7uptb31f] { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--text-heading); }
.qn-intro__section-note[b-lb7uptb31f] { font-size: 12px; color: var(--text-muted); margin-top: 1px; text-wrap: pretty; }
.qn-intro__privacy[b-lb7uptb31f] { display: flex; gap: 10px; padding: 13px; border-radius: 14px; background: var(--surface-tint); font-size: 12.5px; line-height: 1.5; color: var(--text-body); }
.qn-intro__privacy svg[b-lb7uptb31f] { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
/* /Features/Questionnaires/QuestionnairePage.razor.rz.scp.css */
.qn[b-ln345qsv85] { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-app); font-family: var(--font-sans); }
.qn[b-ln345qsv85]  .qn__form, .qn[b-ln345qsv85]  .qn__stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qn__body[b-ln345qsv85] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.qn__state[b-ln345qsv85] { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.qn__top[b-ln345qsv85] { flex-shrink: 0; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); padding: 4px 8px 10px; }
.qn__bar[b-ln345qsv85] { display: flex; align-items: center; gap: 4px; }
.qn__nav[b-ln345qsv85] { width: 44px; height: 44px; border: 0; background: transparent; color: var(--color-primary); display: grid; place-items: center; cursor: pointer; }
.qn__nav--close[b-ln345qsv85] { color: var(--text-muted); }
.qn__bar-text[b-ln345qsv85] { flex: 1; min-width: 0; }
.qn__bar-title[b-ln345qsv85] { margin: 0; font-size: 16px; font-weight: var(--fw-bold); color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qn__bar-sub[b-ln345qsv85] { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.qn__steps[b-ln345qsv85] { display: flex; gap: 5px; padding: 8px 8px 0; }
/* A 44px tap target around a 6px pill: the button paints nothing itself, the span is the bar.
   (A background-clip trick fails here - the background shorthand resets the clip.) */
.qn__step[b-ln345qsv85] { flex: 1; min-width: 0; height: 44px; padding: 19px 0; border: 0; background: transparent; cursor: pointer; }
.qn__step-bar[b-ln345qsv85] { display: block; height: 6px; border-radius: 999px; background: var(--shr-grey-200); }
.qn__step--done .qn__step-bar[b-ln345qsv85] { background: var(--color-primary); }
.qn__step--current .qn__step-bar[b-ln345qsv85] { background: var(--color-accent); }
.qn__eyebrow[b-ln345qsv85] { font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.qn__section-title[b-ln345qsv85] { margin: 7px 0 0; font-size: 20px; font-weight: var(--fw-bold); color: var(--text-heading); }
.qn__section-note[b-ln345qsv85] { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.qn__banner[b-ln345qsv85] { display: flex; gap: 9px; padding: 12px; border-radius: 12px; background: var(--shr-danger-tint); font-size: 12.5px; line-height: 1.5; color: var(--text-heading); }
.qn__banner svg[b-ln345qsv85] { color: var(--shr-danger); flex-shrink: 0; margin-top: 1px; }
/* /Features/Questionnaires/QuestionnaireReview.razor.rz.scp.css */
.qn-review[b-5f39qvuxwm] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qn-review__body[b-5f39qvuxwm] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.qn-review__note[b-5f39qvuxwm] { display: flex; gap: 9px; align-items: center; font-size: 13.5px; line-height: 1.5; color: var(--text-heading); }
.qn-review__note--top[b-5f39qvuxwm] { align-items: flex-start; }
.qn-review__note svg[b-5f39qvuxwm] { flex-shrink: 0; color: var(--color-primary); }
.qn-review__missing[b-5f39qvuxwm]  .shr-card { background: var(--shr-danger-tint); box-shadow: none; }
.qn-review__missing .qn-review__note svg[b-5f39qvuxwm] { color: var(--shr-danger); margin-top: 1px; }
.qn-review__missing-title[b-5f39qvuxwm] { font-weight: var(--fw-bold); }
.qn-review__missing-links[b-5f39qvuxwm] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 9px; }
.qn-review__missing-link[b-5f39qvuxwm] { border: 0; background: none; padding: 0; min-height: 30px; font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--fw-medium); color: var(--text-link); text-align: left; cursor: pointer; }
.qn-review__complete[b-5f39qvuxwm]  .shr-card, .qn-review__submitted[b-5f39qvuxwm]  .shr-card { background: var(--surface-tint); box-shadow: none; }
.qn-review__section[b-5f39qvuxwm]  .shr-card { margin-top: 8px; }
.qn-review__row[b-5f39qvuxwm] { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 10px; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; font-family: var(--font-sans); text-align: left; }
.qn-review__row:first-child[b-5f39qvuxwm] { border-top: 0; }
.qn-review__row-edit[b-5f39qvuxwm] { cursor: pointer; }
.qn-review__row-edit svg[b-5f39qvuxwm] { color: var(--shr-grey-400); flex-shrink: 0; margin-top: 2px; }
.qn-review__row-text[b-5f39qvuxwm] { flex: 1; min-width: 0; }
.qn-review__row-label[b-5f39qvuxwm] { font-size: 12px; color: var(--text-muted); text-wrap: pretty; }
.qn-review__row-value[b-5f39qvuxwm] { font-size: 13.5px; font-weight: var(--fw-medium); margin-top: 3px; color: var(--text-heading); text-wrap: pretty; }
.qn-review__row-value--missing[b-5f39qvuxwm] { color: var(--shr-danger); }
.qn-review__error[b-5f39qvuxwm] { margin: 0; font-size: 13px; color: var(--shr-danger); }
/* /Features/Questionnaires/QuestionnairesPage.razor.rz.scp.css */
.qlist[b-2m1da28u4p] { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-app); font-family: var(--font-sans); }
.qlist__body[b-2m1da28u4p] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.qlist__loading[b-2m1da28u4p] { display: flex; flex-direction: column; gap: 12px; }
.qlist__skeleton-head[b-2m1da28u4p] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qlist__skeleton-meta[b-2m1da28u4p] { margin-top: 10px; }
.qlist__state[b-2m1da28u4p], .qlist__empty[b-2m1da28u4p] { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.qlist__empty[b-2m1da28u4p] { margin-bottom: 0; }
.qlist__head[b-2m1da28u4p] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qlist__name[b-2m1da28u4p] { font-size: 15.5px; font-weight: var(--fw-bold); color: var(--text-heading); text-wrap: pretty; }
.qlist__meta[b-2m1da28u4p] { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.qlist__progress[b-2m1da28u4p] { margin-top: 10px; }
/* /Features/Questionnaires/RatingField.razor.rz.scp.css */
.q-rating__row[b-ugzzsmiwgq] { display: flex; gap: 7px; }
.q-rating__point[b-ugzzsmiwgq] { flex: 1; min-width: 0; height: 54px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); font-family: var(--font-sans); font-size: 18px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text-body); cursor: pointer; }
.q-rating__point--on[b-ugzzsmiwgq] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.q-rating__point--invalid[b-ugzzsmiwgq] { border-color: var(--shr-danger); }
.q-rating__ends[b-ugzzsmiwgq] { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 11.5px; color: var(--text-muted); }
.q-rating__stack[b-ugzzsmiwgq] { display: flex; flex-direction: column; gap: 7px; }
.q-rating__likert[b-ugzzsmiwgq] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 13px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); font-family: var(--font-sans); text-align: left; cursor: pointer; }
.q-rating__likert--on[b-ugzzsmiwgq] { border-color: var(--color-primary); background: var(--shr-blue-tint); }
.q-rating__likert-disc[b-ugzzsmiwgq] { width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-bold); background: var(--shr-grey-50); color: var(--text-muted); }
.q-rating__likert--on .q-rating__likert-disc[b-ugzzsmiwgq] { background: var(--color-primary); color: #fff; }
.q-rating__likert-label[b-ugzzsmiwgq] { font-size: 14px; color: var(--text-heading); }
.q-rating__likert--on .q-rating__likert-label[b-ugzzsmiwgq] { font-weight: var(--fw-bold); }
/* /Features/Questionnaires/ShortTextField.razor.rz.scp.css */
.q-text__count[b-rvbjkcy8cg] { text-align: right; font-size: 11.5px; color: var(--text-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
/* /Features/Questionnaires/SingleChoiceField.razor.rz.scp.css */
.q-single__rows[b-ud4kgng5pj] { display: flex; flex-direction: column; gap: 8px; }
/* /Features/Questionnaires/YesNoField.razor.rz.scp.css */
.q-yesno__grid[b-epu3sp36k1] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-yesno__target[b-epu3sp36k1] { min-height: 56px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 15.5px; font-weight: var(--fw-medium); color: var(--text-heading); cursor: pointer; }
.q-yesno__target--on[b-epu3sp36k1] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; font-weight: var(--fw-bold); }
.q-yesno__target--invalid[b-epu3sp36k1] { border-color: var(--shr-danger); }
.q-yesno__target:disabled[b-epu3sp36k1] { cursor: default; }
/* /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);
}

/* The questionnaire still to do: the card's second line, in the brand blue rather than the
   accent — it is information, not the screen's one call to action. */
.application-card__questionnaire[b-7w6xfxvzt3] {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: var(--fw-medium);
	color: var(--color-primary);
}

.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/ApplicationCardSkeleton.razor.rz.scp.css */
/* ApplicationCard's spacing, with placeholders where its text and track sit. */
.application-skeleton__head[b-w8ollxpp27] {
	display: flex;
	gap: 12px;
}

.application-skeleton__headings[b-w8ollxpp27] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-top: 2px;
}

.application-skeleton__track[b-w8ollxpp27] {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-subtle);
}

.application-skeleton__foot[b-w8ollxpp27] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}
/* /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);
}

/* ---- The vacancy's questionnaire ------------------------------------------- */
.application-detail__questionnaire-head[b-db367wd0tx] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.application-detail__questionnaire-eyebrow[b-db367wd0tx] {
	font-size: 11.5px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-heading);
}

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

.application-detail__questionnaire-progress[b-db367wd0tx] {
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--text-muted);
}

.application-detail__questionnaire-action[b-db367wd0tx] {
	margin-top: 12px;
}

/* ---- 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;
}

/* ---- Unreachable ------------------------------------------------------------- */
.application-detail__state-copy[b-db367wd0tx] {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}

/* ---- Waiting ---------------------------------------------------------------------
   SkAppDetail: the identity card with the stage track's dots, the tint card's outline, the
   History heading and three events on the timeline. */
.application-detail__loading .application-detail__body[b-db367wd0tx] {
	gap: 12px;
}

.application-detail__skeleton-headings[b-db367wd0tx] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.application-detail__skeleton-flags[b-db367wd0tx] {
	display: flex;
	gap: 7px;
	margin-top: 4px;
}

.application-detail__skeleton-next-label[b-db367wd0tx] {
	margin-top: 10px;
}

.application-detail__skeleton-next-rows[b-db367wd0tx] {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 10px;
}

.application-detail__skeleton-event[b-db367wd0tx] {
	display: flex;
	gap: 12px;
}

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

.application-detail__skeleton-event-body[b-db367wd0tx] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.application-detail__loading[b-db367wd0tx] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
/* /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);
}

/* ---- Loading and unreachable ------------------------------------------------- */
.applications__loading[b-csl82yh89x] {
	padding: 12px 16px 18px; /* the chips row's top and the list's sides, so nothing moves when the cards land */
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.applications__skeleton-chips[b-csl82yh89x] {
	display: flex;
	gap: 8px;
}
.applications__state-copy[b-csl82yh89x] {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
	text-wrap: pretty;
}
/* /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;
}

/* ---- Waiting, and no answer ---------------------------------------------
   The same two states the tracker draws: one line while the read is in flight, and a card with
   the sentence and a way to ask again when it did not land. */
.notifications__loading[b-tffeclmz3d] {
	margin: 0;
}

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

/* /Features/Tracking/StageTrackSkeleton.razor.rz.scp.css */
/* Four equal columns; the rail between dots takes the column's rest. */
.stage-skeleton[b-7tzrmj6lmi] {
	display: flex;
}

.stage-skeleton__stage[b-7tzrmj6lmi] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stage-skeleton__rail[b-7tzrmj6lmi] {
	display: flex;
	align-items: center;
}

.stage-skeleton__rail[b-7tzrmj6lmi]  .shr-skeleton--line {
	flex: 1;
	width: auto;
}
/* /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);
}

.app-shell__banner[b-i37iw4c0ae] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface-app);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}

.app-shell__banner-action[b-i37iw4c0ae] {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- A CV being read in the background ------------------------------------
   The strip shares the onboarding banner's geometry; the pulse is the only motion, and it stops
   for anyone who asked motion to. */
.app-shell__reading[b-i37iw4c0ae] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.app-shell__reading-pulse[b-i37iw4c0ae] {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  animation: appShellPulse-b-i37iw4c0ae 1.4s ease-in-out infinite;
}

.app-shell__reading-copy[b-i37iw4c0ae] {
  font-weight: var(--fw-medium);
}

@keyframes appShellPulse-b-i37iw4c0ae {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell__reading-pulse[b-i37iw4c0ae] { animation: none; }
}

/* Pinned to the bottom of the column — above the tab bar where there is one — and above the
   sheet's backdrop (z-index 40), so a toast that lands while a sheet is open is still seen. */
.app-shell__toast[b-i37iw4c0ae] {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
}

.app-shell__toast--tabbed[b-i37iw4c0ae] {
  bottom: calc(12px + 60px + env(safe-area-inset-bottom));
}
/* /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;
}