/* ============================================================================
   Sea Potential — Job Board component styles
   Colors/shadows/type: tokens.css ONLY (zero raw hex).
   Layout constants below are the off-scale Figma pixel values (page margin 80,
   card radius 10, row padding 20, etc.) named centrally rather than scattered —
   flagged in Phase 1 as not matching the token scale.
   ============================================================================ */

:root {
  --layout-page-margin: 80px;   /* JB page gutter */
  --layout-max-wide:   1440px;  /* board/list screens (content ~1280) */
  --layout-narrow-col: 860px;   /* detail/form column */
  --radius-card:       10px;    /* List Row (off token scale; token = 8) */
  --radius-control:    var(--radius-button);
  --space-row:         20px;    /* List Row padding/gap (off scale) */
  --avatar-size:       40px;
  --top-nav-height:    72px;
  --input-height:      52px;
  --page-pad-top:      40px;
  --row-shadow:        var(--sp-card-shadow); /* token color; Figma used 4px blur, token 8px */
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--sp-body-family);
  font-size: var(--sp-body-size);
  font-weight: var(--sp-body-weight);
  line-height: 1.45;                 /* readability; token line=1 kept for single-line elements */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---- Skip link --------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--space-2); top: -100px;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  border: var(--border-width-control) solid var(--color-action-primary-border);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4);
  z-index: 100; transition: top .15s ease;
}
.skip-link:focus { top: var(--space-2); }

/* ---- Focus visibility (global) ----------------------------------------- */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}
#main-content:focus { outline: none; } /* programmatic focus target */

/* ---- Top Nav ----------------------------------------------------------- */
.top-nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--top-nav-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-inline: 40px;
  background: var(--color-surface-card);
  box-shadow: var(--sp-card-shadow);
}
/* Brand logo lockup (icon + wordmark). --sp-logo-h drives the rendered height;
   the clip wrapper lets very narrow headers show the icon square only. */
.top-nav { --sp-logo-h: 38px; }
.top-nav__brand {
  display: inline-flex; align-items: center;
  text-decoration: none; border-radius: var(--radius-control);
}
.top-nav__brand:focus-visible {
  outline: var(--border-width-control) solid var(--color-border-input-focus);
  outline-offset: 4px;
}
/* Block clip + non-shrinking block image: at a constrained width the image
   overflows and is cropped (not squished) to the left icon square. */
.top-nav__logo-clip { display: block; overflow: hidden; line-height: 0; flex-shrink: 0; }
.top-nav__logo { display: block; height: var(--sp-logo-h); width: auto; max-width: none; }
/* Very narrow: clip the lockup to its icon square (≈ viewBox 0..640 of 5530).
   Width = height × (640/621) keeps the full crescent, drops the wordmark. */
@media (max-width: 480px) {
  .top-nav { --sp-logo-h: 40px; }
  .top-nav__logo-clip { width: calc(var(--sp-logo-h) * 640 / 621); }
}
.top-nav__context {
  margin: 0; text-align: right;
  font-size: var(--sp-caption-size); color: var(--color-text-secondary);
}

/* ---- Page container ---------------------------------------------------- */
.page {
  width: 100%; margin: 0 auto;
  padding-inline: var(--layout-page-margin);
  padding-block: var(--page-pad-top) 64px;
}
.page--wide   { max-width: var(--layout-max-wide); }
.page--narrow { max-width: calc(var(--layout-narrow-col) + 2 * var(--layout-page-margin)); }

/* ---- Headings ---------------------------------------------------------- */
.page-heading { margin-bottom: var(--space-5); }
.page-heading__title { margin: 0 0 var(--space-3); color: var(--color-text-primary); }
.page-heading__title--display-medium {
  font-family: var(--sp-display-medium-family); font-size: var(--sp-display-medium-size);
  font-weight: var(--sp-display-medium-weight); line-height: 1.15;
}
.page-heading__title--heading-small {
  font-family: var(--sp-heading-small-family); font-size: var(--sp-heading-small-size);
  font-weight: var(--sp-heading-small-weight); line-height: 1.2;
}
.page-heading__subtitle { margin: 0; color: var(--color-text-secondary); max-width: 70ch; }

/* ---- Stack / rows ------------------------------------------------------ */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.field-group { display: flex; flex-direction: column; gap: var(--space-2); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.button-row--end { justify-content: flex-end; }

/* ---- List Row ---------------------------------------------------------- */
.list-row {
  display: flex; align-items: center; gap: var(--space-row);
  padding: var(--space-row);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
}
.list-row--interactive { cursor: pointer; transition: transform .1s ease, background .1s ease; }
.list-row--interactive:hover { background: var(--color-action-secondary-hover-bg); }
.list-row--interactive:active { background: var(--color-action-secondary-active-bg); }
.list-row__logo {
  width: var(--avatar-size); height: var(--avatar-size);
  border-radius: var(--radius-control); flex-shrink: 0; object-fit: cover;
}
.list-row__logo--placeholder { background: var(--color-surface-placeholder); }
.list-row__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.list-row__title {
  margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-bold-size); color: var(--color-text-primary);
}
.list-row__subtitle { margin: 0; font-size: var(--sp-body-size); color: var(--color-text-secondary); }
.list-row__caption { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.list-row__meta {
  flex-shrink: 0; margin-left: auto; text-align: right;
  font-size: var(--sp-caption-size); color: var(--color-text-secondary);
}

/* ---- Badge ------------------------------------------------------------- */
.badge {
  display: inline-block; padding: var(--space-1) var(--space-2);
  border-radius: 999px; white-space: nowrap;
  font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); line-height: 1;
}
.badge--success { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.badge--warning { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.badge--error   { background: var(--color-badge-error-bg);   color: var(--color-badge-error-text); }
.badge--neutral { background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }

/* Credential verification status badge (Task 2) — icon + label, reuses the
   badge color variants above. */
.credential-status-badge { display: inline-flex; align-items: center; gap: var(--space-1); }
.credential-status-badge__icon { flex: none; }

/* ---- Credential row (job-seeker profile, Task 2) ------------------------ */
.credential-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: var(--space-2) 0; flex-wrap: wrap;
}
.credential-row__main { display: flex; align-items: center; gap: var(--space-2); }
.credential-row__name { font-weight: 600; }

/* ---- Admin credential verification detail (AD-06) ----------------------- */
.credential-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-3) 0; }
.credential-detail__number { display: flex; align-items: center; gap: var(--space-2); }
.credential-detail__doc { max-width: 100%; max-height: 480px; border-radius: var(--radius-card); object-fit: contain; }
@media (max-width: 720px) { .credential-detail__grid { grid-template-columns: 1fr; } }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  border: var(--border-width-control) solid transparent;
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-bold-size); line-height: 1;
  text-decoration: none; /* anchors styled as buttons (e.g. external links) */
  transition: background .1s ease, border-color .1s ease;
}
.btn--primary {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  border-color: var(--color-action-primary-border);
}
.btn--primary:hover:not(:disabled) { background: var(--color-action-primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-action-primary-active); }
.btn--secondary {
  background: var(--color-surface-card);
  color: var(--color-action-secondary-text);
  border-color: var(--color-action-secondary-border);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-action-secondary-hover-bg); }
.btn--secondary:active:not(:disabled) { background: var(--color-action-secondary-active-bg); }
.btn:disabled {
  background: var(--color-action-disabled-bg);
  color: var(--color-action-disabled-text);
  border-color: transparent; cursor: not-allowed;
}

/* ---- Fields ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
/* `display: flex` above beats the `hidden` attribute's default `display: none`,
   so a conditionally-revealed field (e.g. the referral "Other" write-in) needs
   this to actually hide. Same pattern as .profile-chip__menu[hidden] and
   .typeahead__list[hidden] below. */
.field[hidden] { display: none; }
.field__label {
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-bold-size); color: var(--color-text-primary);
}
.field__required { color: var(--color-error); }
.field__control {
  width: 100%; min-height: var(--input-height);
  padding: var(--space-3);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  border: var(--border-width-control) solid var(--color-border-input);
  border-radius: var(--radius-control);
  font-family: var(--sp-body-family); font-size: var(--sp-body-size);
  /* Readable leading. --sp-body-line is 1 (Figma's token), which is right for
     single-line display text and cramped for anything a user types into. The
     textarea rule below already used 1.45 for exactly this reason; controls now
     share it (EMP-UI-2026-08-25 item 1). */
  line-height: 1.45;
}
.field__control::placeholder { color: var(--color-text-secondary); }
.field__control:hover { border-color: var(--color-border-input-hover); }
.field__control:focus-visible { border-color: var(--color-border-input-focus); outline-offset: 0; }
.field__control--textarea { min-height: 140px; resize: vertical; line-height: 1.45; }
.field__control--error { border-color: var(--color-border-input-error); }
.field__control:disabled {
  background: var(--color-surface-input-disabled);
  color: var(--color-action-disabled-text);
  border-color: var(--color-border-input-disabled);
}
.field__error { margin: 0; font-size: var(--sp-caption-size); color: var(--color-error); }

/* Password field with show/hide toggle. The toggle overlays the right of the
   input (no layout shift); the input reserves space for it via padding-right. */
.field__password { position: relative; display: flex; }
.field__password .field__control { padding-right: var(--input-height); }
.password-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: var(--input-height);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--color-text-secondary); border-radius: var(--radius-control);
}
.password-toggle:hover { color: var(--color-text-primary); }
.password-toggle:focus-visible {
  outline: var(--border-width-control) solid var(--color-border-input-focus);
  outline-offset: -3px; color: var(--color-text-primary);
}
.password-toggle__icon { display: flex; }
.password-toggle svg { width: 20px; height: 20px; display: block; }
.field-tip { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-link); }
.field-tip--muted { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.field-count { color: var(--color-text-secondary); text-align: right; }

/* B2 — post-application Readiness Track prompt */
.readiness-prompt {
  margin: var(--space-4) 0; padding: var(--space-4);
  border: var(--border-width-control) solid var(--color-border-default); border-radius: var(--radius-card);
  background: var(--color-surface-raised, var(--color-surface-page));
}
.readiness-prompt__title { margin: 0 0 var(--space-2); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-body-size); color: var(--color-text-primary); }
.readiness-prompt__body { margin: 0 0 var(--space-3); color: var(--color-text-primary); line-height: 1.5; }

/* ---- Cert filter (CL-07 placeholder) ----------------------------------- */
.cert-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface-card);
  border: var(--border-width-control) dashed var(--color-border-default);
  border-radius: var(--radius-control);
}
.cert-filter__label {
  font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); color: var(--color-text-primary);
}
.cert-filter__control {
  min-height: var(--touch-target-min); padding: var(--space-2) var(--space-3);
  background: var(--color-surface-card); color: var(--color-text-primary);
  border: var(--border-width-control) solid var(--color-border-input);
  border-radius: var(--radius-control);
  font-family: var(--sp-body-family); font-size: var(--sp-body-size);
}
.cert-filter__hint { font-size: var(--sp-caption-size); color: var(--color-text-secondary); margin-left: auto; }

/* ---- Resume card / dropzone (AP-02) ------------------------------------ */
.resume-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-page);
  border: var(--border-width-control) solid var(--color-border-default);
  border-radius: var(--radius-control);
}
.resume-card__chip {
  width: 24px; height: 30px; flex-shrink: 0;
  background: var(--color-surface-placeholder); border-radius: 3px;
}
.resume-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.resume-card__name {
  margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-caption-size); color: var(--color-text-primary);
}
.resume-card__actions { display: flex; align-items: center; gap: var(--space-2); }
.resume-card__sep { color: var(--color-text-secondary); }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); min-height: 96px; padding: var(--space-4);
  background: var(--color-surface-card);
  border: var(--border-width-control) dashed var(--color-border-input);
  border-radius: var(--radius-control); text-align: center;
}
.dropzone--error { border-color: var(--color-border-input-error); }
/* The dropzone is a real button: it has a pointer, and it reacts to a dragged
   file. Before the 2026-08-20 QA fixes it was a plain div that looked droppable
   and was not — see components/resumeDropzone.js. */
.dropzone { cursor: pointer; }
.dropzone--active {
  border-color: var(--color-border-input-focus);
  background: var(--color-surface-dropzone-active);
}
.dropzone__text { margin: 0; color: var(--color-text-primary); }
.dropzone__hint { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ---- Image uploader (company logo, profile photo) ----------------------
   One component, three surfaces (components/imageUploader.js). Tokens only —
   no raw colour values, per the brand-token rule. */
.image-upload { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.image-upload__current { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.image-upload__img {
  width: 96px; height: 96px; object-fit: contain;
  background: var(--color-surface-card);
  border: var(--border-width-control) solid var(--color-border-default);
}
.image-upload__img--square { border-radius: var(--radius-control); }
/* object-fit: cover on the circle so a non-square portrait fills the frame
   rather than letterboxing inside it. */
.image-upload__img--circle { border-radius: 50%; object-fit: cover; }
.image-upload__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* At phone widths the preview and its two buttons do not fit on one line;
   stacking keeps both action labels fully readable rather than truncating. */
@media (max-width: 520px) {
  .image-upload__current { flex-direction: column; align-items: flex-start; }
}

/* Whole-form save failure (QA 2026-08-20, Defect 7). Empty until something
   fails, so it takes no space in the normal case. */
.form-error-slot:empty { display: none; }
.form-error-slot { margin-top: var(--space-2); }

/* ---- Link buttons ------------------------------------------------------ */
.link-btn {
  background: none; border: none; padding: 0;
  font-size: var(--sp-label-small-size); color: var(--color-text-link);
  text-decoration: underline;
}
.link-btn--danger { color: var(--color-error); }
/* Disabled affordances (Coming-soon / unbuilt actions): visibly inert. */
.link-btn--disabled,
.btn--disabled {
  opacity: .5; cursor: not-allowed; text-decoration: none;
  color: var(--color-text-secondary);
}
.btn--disabled { border-color: var(--color-border-default); }

/* ---- Empty state ------------------------------------------------------- */
.empty-state {
  padding: var(--space-5); text-align: center; color: var(--color-text-secondary);
  background: var(--color-surface-card); border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
}

/* ---- Certification module bits ----------------------------------------- */
.meta-stack { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.expiry-pill {
  display: inline-block; padding: 2px var(--space-2); border-radius: 999px;
  border: var(--border-width-control) solid var(--color-border-default);
  background: var(--color-surface-page);
  font-size: var(--sp-caption-size); color: var(--color-text-primary); white-space: nowrap;
}
.banner {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  border: var(--border-width-control) solid transparent;
  font-size: var(--sp-body-size);
}
.banner--success { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); border-color: var(--color-badge-success-text); }
.banner--info { background: var(--color-surface-card); color: var(--color-text-primary); border-color: var(--color-border-default); }
.field__control--select { min-height: var(--touch-target-min); }
.field__control--multi { min-height: auto; padding: var(--space-2); }
.button-row--top { margin-top: 0; margin-bottom: var(--space-4); }
.button-row--split { justify-content: space-between; }

/* Step pills (employer onboarding EMP-08 / EMP-Step5) */
.step-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.step-pill { font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight); font-size: var(--sp-label-small-size);
  padding: var(--space-2) var(--space-3); border-radius: 999px; white-space: nowrap;
  background: var(--color-surface-card); color: var(--color-text-secondary);
  border: var(--border-width-control) solid var(--color-border-default); }
.step-pill--done { background: var(--color-pill-complete-bg); color: var(--color-pill-complete-text); border-color: transparent; }
.step-pill--current { background: var(--color-surface-structural-dark); color: var(--color-text-on-dark); border-color: transparent; }

/* ---- Diagnosis Tool (assessment engine) -------------------------------- */
.btn--tertiary { background: transparent; border-color: transparent; color: var(--color-text-secondary); min-height: auto; padding: var(--space-2) var(--space-3); }
.btn--tertiary:hover:not(:disabled) { background: var(--color-action-secondary-hover-bg); }

.stepper { margin-bottom: var(--space-4); }
.stepper__label { margin: 0 0 var(--space-2); font-family: var(--sp-label-small-family); font-weight: 700; font-size: var(--sp-label-small-size); color: var(--color-text-primary); }
.stepper__track { height: 6px; border-radius: 3px; background: var(--color-progress-track); overflow: hidden; }
.stepper__fill { height: 6px; border-radius: 3px; background: var(--color-progress-fill); }

.q { padding: var(--space-3) 0; border-bottom: var(--border-width-control) solid var(--color-border-default); display: flex; flex-direction: column; gap: var(--space-2); }
.q__prompt { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-body-size); color: var(--color-text-primary); }
.q__options { display: flex; flex-direction: column; gap: var(--space-1); }
.q__check { display: flex; align-items: center; gap: var(--space-2); }
.q__followups { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-4); border-left: var(--border-width-control) solid var(--color-border-default); margin-top: var(--space-2); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
/* Two form fields side by side (e.g. pay-range min/max); stacks on mobile. */
.field-row { display: flex; gap: var(--space-3); }
.field-row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) { .field-row { flex-direction: column; } }

/* RC single-select option cards (RC-03a bordered boxes) */
.q__option-card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--color-surface-card); border: var(--border-width-control) solid var(--color-border-input);
  border-radius: var(--radius-control); cursor: pointer; }
.q__option-card:hover { border-color: var(--color-border-input-hover); }
.q__option-card--selected { border-color: var(--color-border-input-focus); background: var(--color-action-secondary-hover-bg); }

.score-hero { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); background: var(--color-surface-card); border-radius: var(--radius-card); box-shadow: var(--row-shadow); }
.score-hero__value { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 40px; color: var(--color-text-primary); }
.report__subhead { font-family: var(--sp-body-bold-family); font-size: 18px; color: var(--color-text-primary); margin: var(--space-5) 0 var(--space-3); }
.report__subhead-block { margin-top: var(--space-4); }

.cert-badge-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface-card); border: var(--border-width-control) solid var(--color-action-primary-border); border-radius: var(--radius-card); box-shadow: var(--sp-card-shadow); text-align: center; margin-bottom: var(--space-4); }
.cert-badge-card__year { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--color-text-primary); }
.cert-badge-card__note { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ---- Section label (sub-heading above a list) ------------------------- */
.section-label {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--sp-heading-small-size, 20px);
  color: var(--color-text-primary);
}

/* ---- Stat grid (Admin dashboard AD-01) -------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.stat-tile {
  padding: var(--space-4);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
}
.stat-tile__value {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  color: var(--color-text-primary);
}
.stat-tile__label {
  margin: var(--space-1) 0 0;
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}

/* <Metric> (Phase 1.2) — em-dash "not yet calculated" state, plus the inline
   variant used mid-row/mid-sentence instead of a full stat-tile block. */
.metric--empty .metric__value {
  color: var(--color-text-secondary);
  font-weight: 400;
}
.metric--inline {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}
.metric--inline .metric__value {
  font-family: var(--font-heading);
  font-weight: 700;
}
.metric--inline .metric__label {
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}
/* Two inline metrics next to each other used to butt together with nothing
   between them — the Comparative retention panel read "Your 90-day
   retention74% Platform average". el() appends nodes directly, so there is no
   whitespace text node between siblings to fall back on. */
.metric--inline + .metric--inline { margin-left: var(--space-4); }
/* ...except when a column layout has already separated them onto their own
   rows, where a left margin would just indent the second one. */
.stack > .metric--inline + .metric--inline,
.stack-sm > .metric--inline + .metric--inline { margin-left: 0; }

/* ---- Job Board re-skin (V0 v7: hero + filter rail + rich cards) --------- */
/* Colors/type/spacing: tokens only. No teal surfaces (brand rule); the dark
   initials avatar uses the sanctioned structural-dark token. */
.jb-hero { margin-bottom: var(--space-5); }
.jb-hero .page-heading { margin-bottom: 0; }

.jb-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.filter-rail {
  position: sticky; top: calc(var(--top-nav-height) + var(--space-4));
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-card);
  border: var(--border-width-control) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
}
.filter-rail__title {
  margin: 0;
  font-family: var(--font-heading); font-weight: 700;
  font-size: var(--sp-heading-small-size); color: var(--color-text-primary);
}
/* Restyle the EXISTING cert filter into the rail's stacked idiom — same
   component, same wired behavior; only its in-context layout changes. */
.filter-rail .cert-filter {
  flex-direction: column; align-items: stretch; gap: var(--space-2);
  padding: 0; margin: 0; border: none; background: transparent;
}
.filter-rail .cert-filter__control-wrap,
.filter-rail .cert-filter__control { width: 100%; }
.filter-rail .cert-filter__hint { margin-left: 0; }

.jb-results { min-width: 0; }
.jb-results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.jb-results-bar__count {
  margin: 0;
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-size); color: var(--color-text-primary);
}

/* CARDS HAVE A VISIBLE EDGE (QA item P2-4).
   "Cards and modules blend into the background." They did, and measurably: the
   card surface is #ede5dc, the page surface is ALSO #ede5dc, and the only thing
   separating them was `0 2px 8px #0000001a` — a shadow that is very nearly
   invisible against a warm mid-tone ground. The border here was literally
   `transparent` until a pointer hovered it, so on a touchscreen it never
   appeared at all.
   Now a real border at 3.31:1 (--color-border-strong), which clears WCAG 2.2
   SC 1.4.11's 3:1 for a UI boundary. The hover state keeps its job of being a
   CHANGE by darkening to the full brand brown. */
.job-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-row);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
  border: var(--border-width-control) solid var(--color-border-strong);
  transition: border-color .1s ease, background .1s ease;
}
.job-card--interactive { cursor: pointer; }
.job-card--interactive:hover { border-color: var(--color-text-primary); }
.job-card--interactive:active { background: var(--color-action-secondary-active-bg); }

.job-card__top { display: flex; align-items: flex-start; gap: var(--space-3); }
.job-card__logo {
  width: var(--avatar-size); height: var(--avatar-size); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  background: var(--color-surface-structural-dark);
  color: var(--color-text-on-dark);
  font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); letter-spacing: .04em;
}
.job-card__head { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.job-card__title {
  margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: 18px; color: var(--color-text-primary);
}
.job-card__company { margin: 0; font-size: var(--sp-body-size); color: var(--color-text-secondary); }
.job-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.job-card__pay {
  flex-shrink: 0; margin: 0; text-align: right;
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-size); color: var(--color-text-primary);  /* Dark Brown display number (RESKIN_DECISIONS D12) */
  white-space: nowrap;
}
.job-card__certs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.job-card__certs-label { font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.cert-tag {
  display: inline-block; padding: 2px var(--space-2); border-radius: 999px;
  border: var(--border-width-control) solid var(--color-border-default);
  background: var(--color-surface-page);
  font-size: var(--sp-caption-size); color: var(--color-text-primary); white-space: nowrap;
}
.job-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: var(--border-width-control) solid var(--color-border-default);
}

/* A4 — full job detail view */
.job-detail__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.job-detail__facts {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4); padding: var(--space-4);
  border: var(--border-width-control) solid var(--color-border-default); border-radius: var(--radius-card);
  background: var(--color-surface-page);
}
.job-detail__facts-term { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.job-detail__facts-desc { margin: 0; font-size: var(--sp-body-size); color: var(--color-text-primary); }
.job-detail__section { margin-top: var(--space-5); }
.job-detail__section-title {
  margin: 0 0 var(--space-2); font-family: var(--sp-body-bold-family);
  font-size: var(--sp-body-large-size, var(--sp-body-size)); font-weight: var(--sp-body-bold-weight);
  color: var(--color-text-primary);
}
.job-detail__prose { margin: 0; color: var(--color-text-primary); line-height: 1.55; white-space: pre-wrap; }
.job-detail__section .job-card__certs { margin-top: var(--space-2); }
.job-card__posted { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.job-card__apply {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-control);
  border: var(--border-width-control) solid var(--color-action-primary-border); /* Dark Brown border (CTA rule) */
  background: var(--color-action-primary);       /* Light Brown fill */
  color: var(--color-action-primary-text);
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-bold-size); line-height: 1;
}
.job-card--interactive:hover .job-card__apply { background: var(--color-action-primary-hover); }

/* Phase 2.1 — Save for later, from the board card footer */
.job-card__footer-actions { display: flex; align-items: center; gap: var(--space-3); }
.job-card__save {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  border: var(--border-width-control) solid var(--color-border-default);
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-size: var(--sp-caption-size); font-family: var(--sp-body-bold-family);
  cursor: pointer;
}
.job-card__save:hover { background: var(--color-surface-card); }
.job-card__save--active {
  border-color: var(--color-action-primary-border);
  color: var(--color-action-primary-border);
}
/* Defect 10: an already-saved job is a statement of fact, not an offer. It is
   rendered as a static marker rather than a button, so it must not look or
   behave like something to press. */
.job-card__save--static { cursor: default; }
.job-card__save--static:hover { background: var(--color-surface-page); }

@media (max-width: 900px) {
  .jb-layout { grid-template-columns: 1fr; }
  .filter-rail { position: static; }
}
@media (max-width: 720px) {
  .job-card__top { flex-wrap: wrap; }
  .job-card__pay { text-align: left; }
}

/* ---- Job Board: search / sort / facets / chips ------------------------- */
.jb-search { display: flex; gap: var(--space-3); margin-top: var(--space-4); max-width: 640px; }
.jb-search__input {
  flex: 1 1 0; min-width: 0; min-height: var(--input-height);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-card); color: var(--color-text-primary);
  border: var(--border-width-control) solid var(--color-border-input);
  border-radius: var(--radius-control);
  font-family: var(--sp-body-family); font-size: var(--sp-body-size);
}
.jb-search__input::placeholder { color: var(--color-text-secondary); }
.jb-search__input:hover { border-color: var(--color-border-input-hover); }
.jb-search__input:focus-visible { border-color: var(--color-border-input-focus); }
.jb-search__btn { flex-shrink: 0; }

.filter-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.filter-group { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width-control) solid var(--color-border-default); }
.filter-group__label {
  margin: 0; font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-secondary);
}
.filter-opt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--sp-body-size); color: var(--color-text-primary); cursor: pointer; }
.filter-opt input { accent-color: var(--color-text-link); flex-shrink: 0; width: 16px; height: 16px; }

/* "SP certified employers only" toggle (V0 rail switch). On-state uses the
   link/success teal — consistent with the checkbox accent above. */
.filter-toggle { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; padding-bottom: var(--space-1); }
.filter-toggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filter-toggle__track {
  position: relative; flex-shrink: 0; width: 36px; height: 20px; border-radius: 999px;
  background: var(--color-progress-track);
  border: var(--border-width-control) solid var(--color-border-input);
  transition: background .12s ease, border-color .12s ease;
}
.filter-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px;
  background: var(--color-surface-card); box-shadow: var(--sp-card-shadow); transition: transform .12s ease;
}
.filter-toggle__input:checked + .filter-toggle__track { background: var(--color-text-link); border-color: var(--color-text-link); }
.filter-toggle__input:checked + .filter-toggle__track .filter-toggle__thumb { transform: translateX(16px); }
.filter-toggle__input:focus-visible + .filter-toggle__track { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 2px; }
.filter-toggle__label { font-size: var(--sp-body-size); color: var(--color-text-primary); }

.jb-sort { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.jb-sort__label { font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.jb-sort__select {
  min-height: var(--touch-target-min); padding: var(--space-2) var(--space-3);
  background: var(--color-surface-card); color: var(--color-text-primary);
  border: var(--border-width-control) solid var(--color-border-input);
  border-radius: var(--radius-control);
  font-family: var(--sp-body-family); font-size: var(--sp-caption-size);
}

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
/* With nothing chosen this row has no content (SP 2026-09-18 took the
   "Nothing selected yet." line out of it). Its own margin would still push
   the search box away from its label, so an empty row leaves the flow. */
.active-filters:empty { display: none; }
.active-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); border-radius: 999px;
  background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text);
  font-size: var(--sp-caption-size);
}
.active-chip__x {
  background: none; border: none; padding: 0; line-height: 1; cursor: pointer;
  color: var(--color-text-secondary); font-size: var(--sp-caption-size);
}
.active-chip__x:hover { color: var(--color-text-primary); }

/* ---- Signup nudge ------------------------------------------------------ */
.signup-nudge {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-4); margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-card); border-radius: var(--radius-card);
  border: var(--border-width-control) solid var(--color-border-default);
  box-shadow: var(--row-shadow);
}
.signup-nudge__text { margin: 0; flex: 1 1 320px; color: var(--color-text-primary); }

/* ---- Promo band (For employers / For job seekers) ---------------------- */
.promo-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: var(--space-5); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--row-shadow);
}
.promo { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.promo--light { background: var(--color-surface-card); }
.promo--dark { background: var(--color-surface-structural-dark); }
.promo__eyebrow {
  margin: 0; font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-link);
}
.promo__eyebrow--on-dark { color: var(--color-text-on-dark); opacity: .8; }
.promo__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--color-text-primary); }
.promo__title--on-dark { color: var(--color-text-on-dark); }
.promo__body { margin: 0; color: var(--color-text-secondary); line-height: 1.6; }
.promo__body--on-dark { color: var(--color-text-on-dark); opacity: .85; }
.promo__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* D7 — separates the resources pitch from the career services request in the
   dark job seeker promo. */
.promo__divider { align-self: stretch; height: 1px; margin: var(--space-2) 0; background: var(--color-text-on-dark); opacity: .25; }
/* ---- Interest capture (mentoring / career services waitlists) ----------
   Items B1, C and D. One block used on the job board promo band (on dark) and
   on the quiz results page (on card). Structure mirrors .promo deliberately, so
   the mentoring waitlist sits in the promo band without a seam. Brand tokens
   only; no raw colour values. */
.interest-capture { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; width: 100%; }
.interest-capture__eyebrow {
  margin: 0; font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-link);
}
.interest-capture__eyebrow--on-dark { color: var(--color-text-on-dark); opacity: .8; }
.interest-capture__title {
  margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  line-height: 1.3; color: var(--color-text-primary);
}
.interest-capture__title--on-dark { color: var(--color-text-on-dark); }
.interest-capture__body { margin: 0; color: var(--color-text-secondary); line-height: 1.6; }
.interest-capture__body--on-dark { color: var(--color-text-on-dark); opacity: .85; }
.interest-capture__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.interest-capture__note { margin: 0; font-size: var(--sp-label-small-size); color: var(--color-text-secondary); }
.interest-capture__note--on-dark { color: var(--color-text-on-dark); opacity: .8; }
/* The tick is decorative — the heading beside it carries the meaning, and the
   region is aria-live, so the confirmation is announced as a sentence rather
   than as a symbol. */
.interest-capture__tick { margin-right: var(--space-2); }

/* E2 — button built but blocked on the client's Cal.com link */
.btn.is-pending { opacity: 0.6; cursor: not-allowed; }

/* C3 — Post-a-job gate */
.post-job-gate { margin-bottom: var(--space-4); }
.post-job-gate__msg { margin: var(--space-2) 0; color: var(--color-text-secondary); font-size: var(--sp-caption-size); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* C4 — employer profile switcher */
.profile-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.profile-switch__current { font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); padding: 0 var(--space-2); }
.btn--ghost-on-dark { background: transparent; color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); }
.btn--ghost-on-dark:hover:not(:disabled) { text-decoration: underline; }
/* A disabled ghost button on a dark panel needs its own treatment. The shared
   .btn:disabled rule swaps in the light disabled background and the light
   disabled text, which on the structural-dark surface renders as a
   near-invisible smudge — the offline mentoring waitlist button was unreadable
   in the first capture of this run. Keep it transparent, keep the on-dark text,
   and let the border carry the shape. Dimmed enough to read as unavailable,
   legible enough to read at all. */
.btn--ghost-on-dark:disabled,
.btn--ghost-on-dark[aria-disabled="true"] {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
  opacity: .7;
}

/* ---- Site footer ------------------------------------------------------- */
.site-foot { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface-structural-dark); color: var(--color-text-on-dark); }
.site-foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.site-foot__brand { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-text-on-dark); }
.site-foot__blurb { margin: 0; line-height: 1.7; color: var(--color-text-on-dark); opacity: .8; font-size: var(--sp-caption-size); }
.site-foot__heading { margin: 0 0 var(--space-3); font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight); font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-on-dark); opacity: .7; }
.foot__link { display: block; margin-bottom: var(--space-2); color: var(--color-text-on-dark); opacity: .85; text-decoration: none; font-size: var(--sp-caption-size); }
a.foot__link:hover { opacity: 1; text-decoration: underline; }
.foot__link--static { cursor: default; }
.site-foot__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--border-width-control) solid var(--color-border-default); font-size: var(--sp-caption-size); color: var(--color-text-on-dark); opacity: .7; }
.site-foot__tag { font-style: italic; }

@media (max-width: 900px) {
  .promo-band { grid-template-columns: 1fr; }
  .site-foot__cols { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- Onboarding card (V0 wizard "screen card") ------------------------- */
/* Contained card with a structural-dark header band carrying the step
   indicator, over a padded form body. Tokens only; no teal surfaces. */
.onboard-card {
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--sp-card-shadow);
  overflow: hidden;
}
.onboard-card__header {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-structural-dark);
}
.onboard-card__body { padding: var(--space-5); }
.onboard-card__body .page-heading { margin-top: var(--space-1); }

/* On-dark step pills: current = Light Brown (matches CTA/current-pill intent);
   done/upcoming = on-dark text at differing opacity. Avoids teal-on-teal. */
.step-pills--on-dark { margin-bottom: 0; }
.step-pills--on-dark .step-pill {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
  opacity: .55;
}
.step-pills--on-dark .step-pill--done { opacity: .9; }
.step-pills--on-dark .step-pill--current {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  border-color: var(--color-action-primary-border);
  opacity: 1;
}

/* ---- Onboarding / profile shared patterns (new V1 screens) ------------- */
.form-divider { border: none; border-top: var(--border-width-control) solid var(--color-border-default); margin: var(--space-5) 0; }
.form-section-label {
  margin: 0 0 var(--space-2); font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-secondary);
}
.form-help { margin: 0 0 var(--space-2); font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

.unlock-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.unlock-row { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-primary); }
.unlock-icon { color: var(--color-text-link); flex-shrink: 0; font-weight: 700; }

.tag-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  padding: var(--space-1) var(--space-3); border-radius: 999px;
  border: var(--border-width-control) solid var(--color-border-input);
  background: var(--color-surface-card); color: var(--color-text-secondary);
  font-family: var(--sp-body-family); font-size: var(--sp-caption-size); cursor: pointer;
}
.tag:hover { border-color: var(--color-border-input-hover); }
.tag--selected { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); border-color: var(--color-badge-success-text); }
.tag--special { border-style: dashed; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2) var(--space-4); }
.check-item { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-primary); cursor: pointer; }
.check-item input { accent-color: var(--color-text-link); flex-shrink: 0; width: 16px; height: 16px; }

.q--card { background: var(--color-surface-page); border: var(--border-width-control) solid var(--color-border-default); border-radius: var(--radius-control); padding: var(--space-4); margin-bottom: var(--space-3); }
.q__num { margin: 0 0 var(--space-1); font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight); font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-link); }
.q__radio { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-primary); cursor: pointer; }
.q__radio input { accent-color: var(--color-text-link); margin-top: 3px; flex-shrink: 0; }

.score-meter { margin-bottom: var(--space-5); padding: var(--space-4); background: var(--color-surface-page); border-radius: var(--radius-card); }
.score-meter__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.score-meter__value { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--color-text-primary); }
.score-meter__labs { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

.reco-card { padding: var(--space-4); border: var(--border-width-control) solid var(--color-border-default); border-radius: var(--radius-card); margin-bottom: var(--space-3); }
.reco-card__tag { margin: 0 0 var(--space-1); font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight); font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-link); }
.reco-card__title { margin: 0 0 var(--space-2); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: 16px; color: var(--color-text-primary); }
.reco-card__body { margin: 0 0 var(--space-3); color: var(--color-text-secondary); line-height: 1.6; }
.reco-card__ctas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.reco-card__cta { text-align: left; }

/* ---- Admin toolbar: type filter + sort + export (AD-09) -----------------
   Item B3. Matches the operational tone of the other admin screens rather than
   introducing a new one. Brand tokens only. */
.admin-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.admin-toolbar__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.filter-chip {
  font: inherit; cursor: pointer;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: var(--border-width-control) solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
}
.filter-chip:hover { border-color: var(--color-border-input-hover); }
/* The pressed state is carried by more than colour — the border thickens and the
   weight changes — so it survives a monochrome or high-contrast rendering.
   aria-pressed carries it for a screen reader regardless. */
.filter-chip--on {
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  font-weight: var(--sp-body-bold-weight);
}

/* ---- Quiz results page sections (item E) --------------------------------
   The four sections of #/jobseeker/onboarding/results, and of a quiz finished
   from the dashboard. Each is a plain block on the page surface; the mentoring
   and career services captures inside two of them bring their own treatment
   from .interest-capture. Brand tokens only. */
.results-section { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.results-section > .next-steps { margin-bottom: 0; }
.results-sector {
  padding: var(--space-4); background: var(--color-surface-page);
  border-radius: var(--radius-card); display: flex; flex-direction: column; gap: var(--space-2);
}
.results-sector__name {
  margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  color: var(--color-text-primary);
}

.mentor-box { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-surface-page); border-radius: var(--radius-card); }
.mentor-box__title { margin: 0 0 var(--space-2); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: 16px; color: var(--color-text-primary); }

.success-block { text-align: center; padding: var(--space-4) 0; }
.success-block__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: var(--border-width-control) solid var(--color-text-link); color: var(--color-text-link); font-size: 22px; margin-bottom: var(--space-3); }
.success-block__title { margin: 0 0 var(--space-2); font-family: var(--sp-display-medium-family); font-size: var(--sp-display-medium-size); font-weight: 700; color: var(--color-text-primary); }
.success-block__sub { margin: 0 auto; max-width: 52ch; color: var(--color-text-secondary); line-height: 1.6; }

.next-steps { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.next-steps__row { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); }
.next-steps__plus { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: var(--border-width-control) solid var(--color-border-default); font-size: 12px; flex-shrink: 0; }

/* ---- Panels (profile / employer-profile cards) ------------------------- */
/* Same edge, same reason, as .job-card above (QA item P2-4): the panel surface
   and the page surface are the same colour, so without a border a dashboard is
   a page of floating text. */
.panel { background: var(--color-surface-card); border: var(--border-width-control) solid var(--color-border-strong); border-radius: var(--radius-card); box-shadow: var(--row-shadow); padding: var(--space-4); margin-bottom: var(--space-4); }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.panel__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-text-primary); }
.panel__note { font-size: var(--sp-caption-size); color: var(--color-text-secondary); white-space: nowrap; }
.panel__divider { border: none; border-top: var(--border-width-control) solid var(--color-border-default); margin: var(--space-4) 0; }
.callout { background: var(--color-surface-page); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); line-height: 1.6; color: var(--color-text-secondary); }
.callout__lead { margin: 0 0 var(--space-1); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }
.btn--sm { min-height: auto; padding: var(--space-2) var(--space-4); font-size: var(--sp-caption-size); }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.profile-col { min-width: 0; }
.profile-metrics { margin-bottom: var(--space-4); }

/* ---- Job-seeker profile hero ------------------------------------------- */
.profile-hero { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5); margin-bottom: var(--space-4); background: var(--color-surface-structural-dark); border-radius: var(--radius-card); color: var(--color-text-on-dark); }
.profile-hero__avatar, .ep-hero__logo { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-action-primary); color: var(--color-action-primary-text); font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
/* An uploaded photo in the hero slot: same footprint as the initials block it
   replaces, cropped to fill rather than letterboxed inside the circle. */
.profile-hero__avatar--photo, .ep-hero__logo--photo { object-fit: cover; background: var(--color-surface-card); }
.profile-hero__id { flex: 1 1 240px; min-width: 0; }
.profile-hero__name { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--color-text-on-dark); }
.profile-hero__sub { margin: 0 0 var(--space-2); font-size: var(--sp-caption-size); color: var(--color-text-on-dark); opacity: .82; }
.profile-hero__tags, .ep-hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-tag { padding: 2px var(--space-2); border-radius: 999px; border: var(--border-width-control) solid var(--color-text-on-dark); font-size: var(--sp-caption-size); color: var(--color-text-on-dark); opacity: .9; }
.profile-complete { flex-shrink: 0; text-align: right; min-width: 160px; }
.profile-complete__label { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-on-dark); opacity: .8; }
.profile-complete__num { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: var(--color-action-primary); }
.profile-complete__track { height: 6px; border-radius: 999px; background: var(--color-progress-track); overflow: hidden; }
.profile-complete__fill { height: 100%; background: var(--color-action-primary); }
.profile-complete__note { margin: var(--space-1) 0 0; font-size: var(--sp-caption-size); color: var(--color-text-on-dark); opacity: .7; }

/* ---- Experience tiers -------------------------------------------------- */
.tier-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.tier { flex: 1; text-align: center; padding: var(--space-3) var(--space-2); border-radius: var(--radius-control); border: var(--border-width-control) solid var(--color-border-default); background: var(--color-surface-page); opacity: .55; }
.tier--active { opacity: 1; border-color: var(--color-border-input-focus); border-width: 2px; background: var(--color-badge-success-bg); }
.tier__name { margin: 0 0 var(--space-1); font-size: var(--sp-label-small-size); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-primary); }
.tier__meta { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ---- Fit bars + quiz history ------------------------------------------- */
.fit-item { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.fit-item__rank { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-surface-structural-dark); color: var(--color-text-on-dark); font-size: var(--sp-caption-size); font-weight: 700; }
.fit-item__text { flex: 1 1 0; min-width: 0; }
.fit-item__title { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.fit-item__sub { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.fit-item__bar { width: 96px; flex-shrink: 0; height: 6px; border-radius: 999px; background: var(--color-progress-track); overflow: hidden; }
.fit-item__fill { height: 100%; background: var(--color-progress-fill); }
.quiz-hist { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.quiz-hist__ts { font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.quiz-hist__label { font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ---- Cert chips (profile) ---------------------------------------------- */
.cert-shelf { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.cert-chip { width: 92px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-control); text-align: center; border: var(--border-width-control) solid var(--color-border-default); }
.cert-chip--earned { background: var(--color-badge-success-bg); border-color: var(--color-badge-success-text); }
.cert-chip--progress { background: var(--color-badge-warning-bg); border-color: var(--color-badge-warning-text); }
.cert-chip__abbr { font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.cert-chip__label { margin-top: var(--space-1); font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ---- Job/archive rows -------------------------------------------------- */
.job-item, .job-row, .archive-row { padding: var(--space-3) 0; border-bottom: var(--border-width-control) solid var(--color-border-default); }
.job-item:last-child, .job-row:last-child, .archive-row:last-child { border-bottom: none; }
.job-item--interactive { cursor: pointer; }
.job-item--interactive:hover .job-item__title { color: var(--color-text-link); }
.job-item--interactive:focus-visible { outline: 2px solid var(--color-text-link); outline-offset: 2px; }
.job-item__title { margin: 0 0 var(--space-1); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.job-item__meta { margin: 0 0 var(--space-2); font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* Phase 2.1 — saved-jobs row: clickable body + a separate unsave action */
.job-item__body { cursor: pointer; }
.job-item__body:hover .job-item__title { color: var(--color-text-link); }
.job-item__body:focus-visible { outline: 2px solid var(--color-text-link); outline-offset: 2px; }
.job-item__unsave { margin-top: var(--space-1); }
.pipeline { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.archive-row { display: flex; align-items: center; gap: var(--space-3); }
.archive-row__text { flex: 1 1 0; min-width: 0; }

/* ---- Mentor + resources ------------------------------------------------ */
.mentor-row { display: flex; gap: var(--space-3); }
.mentor-row__avatar { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-surface-structural-dark); color: var(--color-text-on-dark); font-weight: 700; font-size: var(--sp-caption-size); }
.mentor-row__name { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }
.mentor-row__role, .mentor-row__since { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.mentor-row__since { margin-bottom: var(--space-2); }
.resource-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.resource-item__icon { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-control); background: var(--color-surface-page); color: var(--color-text-link); }
.resource-item__title { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.resource-item__type { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.resource-card { padding: var(--space-4); background: var(--color-surface-card); border: var(--border-width-control) solid var(--color-border-strong); border-radius: var(--radius-card); box-shadow: var(--row-shadow); }
.resource-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.resource-card__title { margin: 0 0 var(--space-1); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }

/* ---- Employer profile: version tabs + hero + contacts ------------------ */
.ver-tabs { display: inline-flex; gap: var(--space-1); margin-bottom: var(--space-4); padding: var(--space-1); background: var(--color-surface-card); border-radius: var(--radius-control); box-shadow: var(--row-shadow); }
.ver-tab { padding: var(--space-2) var(--space-4); border: none; background: transparent; border-radius: var(--radius-control); font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.ver-tab--active { background: var(--color-surface-structural-dark); color: var(--color-text-on-dark); }
.ep-hero { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; padding: var(--space-5); background: var(--color-surface-structural-dark); border-radius: var(--radius-card); color: var(--color-text-on-dark); }
.ep-hero__id { flex: 1 1 260px; min-width: 0; }
.ep-hero__name { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--color-text-on-dark); }
.ep-hero__sub { margin: 0 0 var(--space-2); font-size: var(--sp-caption-size); color: var(--color-text-on-dark); opacity: .82; }
.ep-hero__cert { flex-shrink: 0; text-align: right; max-width: 220px; }
.ep-hero__cert-note { margin: var(--space-2) 0 0; font-size: var(--sp-caption-size); color: var(--color-text-on-dark); opacity: .75; line-height: 1.4; }
.ep-contacts { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-5) 0; margin-bottom: var(--space-4); }
.contact { display: flex; align-items: center; gap: var(--space-2); }
.contact__avatar { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); font-size: var(--sp-caption-size); font-weight: 700; }
.contact__name { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.contact__role { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ---- Category bars + strengths/gaps + cert steps ----------------------- */
.cat-bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.cat-bar__label { flex: 1 1 0; min-width: 0; font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.cat-bar__track { width: 110px; flex-shrink: 0; height: 8px; border-radius: 999px; background: var(--color-progress-track); overflow: hidden; }
.cat-bar__fill { height: 100%; background: var(--color-progress-fill); border-radius: 999px; }
.cat-bar__num { width: 28px; flex-shrink: 0; text-align: right; font-size: var(--sp-caption-size); font-weight: 700; color: var(--color-text-primary); }
.str-gap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-3); }
.str-gap__title { margin: 0 0 var(--space-2); font-family: var(--sp-label-small-family); font-weight: 700; font-size: var(--sp-label-small-size); }
.str-gap__title--pos { color: var(--color-text-link); }
.str-gap__title--neg { color: var(--color-error); }
.str-gap__item { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.str-gap__mark { flex-shrink: 0; font-weight: 700; }
.str-gap__mark--pos { color: var(--color-text-link); }
.str-gap__mark--neg { color: var(--color-error); }
.cert-tier-row { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
.cert-tier { flex: 1; text-align: center; padding: var(--space-2) var(--space-1); border-radius: var(--radius-control); background: var(--color-surface-page); border: var(--border-width-control) solid var(--color-border-default); font-size: var(--sp-caption-size); color: var(--color-text-secondary); opacity: .55; }
.cert-tier--current { opacity: 1; background: var(--color-badge-success-bg); color: var(--color-badge-success-text); border-color: var(--color-badge-success-text); font-weight: 700; }
.cert-steps { display: flex; flex-direction: column; gap: var(--space-3); }
.cert-step { display: flex; gap: var(--space-3); }
.cert-step__icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: var(--sp-caption-size); border: var(--border-width-control) solid var(--color-border-default); color: var(--color-text-secondary); }
.cert-step--done .cert-step__icon { background: var(--color-badge-success-bg); border-color: var(--color-badge-success-text); color: var(--color-badge-success-text); }
.cert-step--active .cert-step__icon { background: var(--color-action-primary); border-color: var(--color-action-primary-border); color: var(--color-action-primary-text); }
.cert-step__text { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.cert-step__sub { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.cert-awarded { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cert-awarded__seal { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-badge-success-bg); border: 2px solid var(--color-badge-success-text); color: var(--color-badge-success-text); font-size: 18px; }
.cert-awarded__name { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }

/* ---- Speed / retention rows -------------------------------------------- */
.speed-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.speed-row__role { flex: 1 1 0; min-width: 0; font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.speed-row__track { width: 120px; flex-shrink: 0; height: 8px; border-radius: 999px; background: var(--color-progress-track); overflow: hidden; }
.speed-row__fill { height: 100%; background: var(--color-progress-fill); }
.speed-row__fill--muted { background: var(--color-action-disabled-text); }
.speed-row__days { width: 56px; flex-shrink: 0; text-align: right; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.ret-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.ret-row__dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.ret-row__dot--active { background: var(--color-progress-fill); }
.ret-row__dot--left { background: var(--color-error); }
.ret-row__name { flex: 1 1 0; min-width: 0; font-size: var(--sp-caption-size); color: var(--color-text-primary); }
.ret-row__months { flex-shrink: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .str-gap { grid-template-columns: 1fr; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --layout-page-margin: 20px; }
  .top-nav { padding-inline: 20px; }
  .top-nav__context { font-size: var(--sp-caption-size); }
  .page-heading__title--display-medium { font-size: 28px; }
  .list-row { flex-wrap: wrap; }
  /* Badge/meta drops to its own line under the text (indented past the avatar)
     so title/subtitle keep full width instead of cramping beside the badge. */
  .list-row__meta {
    flex: 1 0 100%;
    margin-left: 0;
    padding-left: calc(var(--avatar-size) + var(--space-row)); /* border-box: stays within row width */
    text-align: left;
  }
  .button-row .btn { flex: 1 1 auto; }
  .cert-filter__hint { margin-left: 0; width: 100%; }
}

/* ========================================================================== */
/* UX PASS (Jul 29–30) — welcome, profile chip, apply interstitial, saved-tick */
/* Additive only; reuses existing tokens (tokens.css). No new token values.   */
/* ========================================================================== */

/* ---- Welcome (entry screen) -------------------------------------------- */
/* Two equal-prominence actions; neither is subordinate (side by side on
   desktop, stacked full-width on mobile). */
.welcome-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-5);
}
.welcome-actions .btn { flex: 1 1 0; min-width: 44%; justify-content: center; }
.welcome-browse { margin-top: var(--space-4); color: var(--color-text-secondary); }
@media (max-width: 480px) {
  .welcome-actions .btn { flex: 1 1 100%; }
}

/* ---- Profile chip (persistent account control, top-right) --------------- */
.top-nav__right { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.profile-chip { position: relative; flex-shrink: 0; }
.profile-chip__trigger {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-profile-chip-fill);
  border: 1px solid var(--color-profile-chip-border);
  color: var(--color-profile-chip-text);
  font-family: var(--sp-font-heading, inherit);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.profile-chip__trigger:focus-visible {
  outline: var(--border-width-control) solid var(--color-border-input-focus);
  outline-offset: 3px;
}
.profile-chip__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 220px; max-width: 80vw;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--sp-card-shadow);
  padding: var(--space-3);
}
.profile-chip__menu[hidden] { display: none; }
.profile-chip__id { padding: var(--space-2) var(--space-2) var(--space-3); }
.profile-chip__name { margin: 0 0 var(--space-2); font-weight: 700; color: var(--color-text-primary); }
.profile-chip__divider { height: 1px; background: var(--color-border-default); margin: var(--space-2) 0; border: 0; }
.profile-chip__item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: var(--space-2) var(--space-2);
  font-size: var(--sp-body-size, 16px); color: var(--color-text-primary);
  border-radius: var(--radius-control);
}
.profile-chip__item:hover { background: var(--color-action-secondary-hover-bg); }
.profile-chip__item:focus-visible {
  outline: var(--border-width-control) solid var(--color-border-input-focus);
  outline-offset: -2px;
}
@media (max-width: 480px) {
  /* Keep the chip; drop the wordy context label so the header never overflows. */
  .top-nav__right .top-nav__context { display: none; }
  .profile-chip__menu { position: fixed; top: var(--top-nav-height); right: 8px; }
}

/* ---- Mentorship coming-soon note --------------------------------------- */
.promo__soon {
  display: inline-flex; align-items: center;
  color: var(--color-text-on-dark); opacity: .7;
  font-size: var(--sp-label-small-size); font-style: italic;
}

/* ---- Form validation: dynamic error + Saved ✓ confirmation -------------- */
.check-grid--error {
  border: 1px solid var(--color-border-input-error);
  border-radius: var(--radius-control);
  padding: var(--space-2);
}
.saved-tick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-control);
  background: var(--color-badge-success-bg); color: var(--color-badge-success-text);
  font-size: var(--sp-label-small-size); font-weight: 700;
}

/* ---- Resume upload states (quick apply) --------------------------------- */
.resume-card--uploading { opacity: .8; }
.resume-card__tick { color: var(--color-badge-success-text); font-weight: 700; }

/* ==========================================================================
   Public company profile (PCP) — the job-seeker-facing company page.
   Token-only: no raw hex. Teal (--color-text-link / --color-badge-success-*)
   appears in exactly two roles here, per the brand rule — links, and the
   certified success surface. The certified card is the only teal-tinted
   surface on the page and it contains no links, so a teal link never sits on
   a teal-tinted background.
   ========================================================================== */
.pcp-hero {
  display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap;
  padding: var(--space-5); margin-bottom: var(--space-5);
  background: var(--color-surface-card); border-radius: var(--radius-button);
  box-shadow: var(--sp-card-shadow);
}
.pcp-hero__logo {
  width: 88px; height: 88px; flex-shrink: 0; border-radius: var(--radius-button);
  object-fit: contain; background: var(--color-surface-placeholder);
}
.pcp-hero__logo--initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 28px;
  color: var(--color-text-primary);
}
.pcp-hero__id { flex: 1 1 320px; min-width: 0; }
.pcp-hero__name {
  margin: 0 0 var(--space-2);
  font-family: var(--sp-display-medium-family); font-size: var(--sp-display-medium-size);
  font-weight: var(--sp-display-medium-weight); line-height: 1.1; color: var(--color-text-primary);
}
.pcp-hero__tagline {
  margin: 0 0 var(--space-2);
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: 18px; line-height: 1.4; color: var(--color-text-primary);
}
.pcp-hero__facts {
  margin: 0 0 var(--space-3);
  font-family: var(--sp-body-family); font-size: var(--sp-body-size); line-height: 1.5;
  color: var(--color-text-secondary);
}
.pcp-hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pcp-hero__cert { flex: 0 1 260px; }

/* ---- Certification mark ------------------------------------------------- */
.cert-mark {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-button);
}
/* Certified is the loud one on purpose: it is a credential Sea Potential
   stands behind, and a job seeker must be able to tell it apart from anything
   an employer wrote about itself. */
.cert-mark--certified {
  background: var(--color-badge-success-bg);
  border: 2px solid var(--color-badge-success-text);
}
.cert-mark--certified .cert-mark__seal {
  background: var(--color-badge-success-text); color: var(--color-text-on-dark);
}
/* .cert-mark--in-progress removed 2026-08-25 with the "Committed to a Sea
   Potential safe workplace" badge (EMP-UI-2026-08-25 item 20). The state it
   styled can no longer be produced -- see sp_company_certification_standing(). */
.cert-mark__seal {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
}
.cert-mark__text { min-width: 0; }
.cert-mark__label {
  margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-size); line-height: 1.3; color: var(--color-text-primary);
}
.cert-mark__detail {
  margin: var(--space-1) 0 0; font-family: var(--sp-label-small-family);
  font-weight: var(--sp-label-small-weight); font-size: var(--sp-label-small-size);
  color: var(--color-text-primary);
}
.cert-mark__note {
  margin: var(--space-1) 0 0; font-family: var(--sp-caption-family);
  font-size: var(--sp-caption-size); line-height: 1.4; color: var(--color-text-secondary);
}
.cert-mark--compact { padding: var(--space-2); }

/* ---- Body layout -------------------------------------------------------- */
.pcp-layout { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.pcp-main { flex: 1 1 520px; min-width: 0; }
.pcp-side {
  flex: 0 1 280px; padding: var(--space-4);
  background: var(--color-surface-card); border-radius: var(--radius-button);
  box-shadow: var(--sp-card-shadow);
}
.pcp-section { margin-bottom: var(--space-5); }
.pcp-section__title {
  margin: 0 0 var(--space-3);
  font-family: var(--sp-heading-small-family); font-size: var(--sp-heading-small-size);
  font-weight: var(--sp-heading-small-weight); line-height: 1.2; color: var(--color-text-primary);
}
.pcp-prose {
  margin: 0 0 var(--space-3); font-family: var(--sp-body-family);
  font-size: var(--sp-body-size); line-height: 1.6; color: var(--color-text-primary);
  white-space: pre-line;
}

/* ---- Commitment / training chips ---------------------------------------- */
.pcp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pcp-chip {
  padding: var(--space-1) var(--space-3); border-radius: 999px;
  background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text);
  font-family: var(--sp-caption-family); font-size: var(--sp-caption-size); line-height: 1.4;
}

/* ---- Open roles --------------------------------------------------------- */
.pcp-roles { list-style: none; margin: 0; padding: 0; }
.pcp-role {
  padding: var(--space-3) 0; border-bottom: var(--border-width-control) solid var(--color-border-default);
}
.pcp-role:last-child { border-bottom: none; }
.pcp-role__link {
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-size); color: var(--color-text-link);
}
.pcp-role__meta {
  margin: var(--space-1) 0 0; font-family: var(--sp-caption-family);
  font-size: var(--sp-caption-size); color: var(--color-text-secondary);
}
.pcp-role__posted {
  margin: var(--space-1) 0 0; font-family: var(--sp-label-small-family);
  font-size: var(--sp-label-small-size); color: var(--color-text-secondary);
}

/* ---- Links -------------------------------------------------------------- */
.pcp-link { color: var(--color-text-link); }
.pcp-social { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }

/* ---- Company name as a link on job-seeker surfaces ---------------------- */
/* Nested inside the job card's own activatable region, so it stops event
   propagation in JS (same pattern as the card's Save control) and needs a
   visible affordance of its own. */
.company-link { color: var(--color-text-link); text-decoration: underline; }
.company-link:hover { text-decoration: none; }

/* ---- Employer editor: public vs internal ------------------------------- */
.pcp-edit__banner {
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border-left: 4px solid var(--color-text-link); border-radius: var(--radius-button);
  background: var(--color-surface-card); box-shadow: var(--sp-card-shadow);
}
.pcp-edit__banner p { margin: 0 0 var(--space-1); }
.pcp-edit__banner p:last-child { margin-bottom: 0; }
.pcp-completeness { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.pcp-completeness li {
  font-family: var(--sp-caption-family); font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}

@media (max-width: 720px) {
  .pcp-hero { gap: var(--space-4); }
  .pcp-hero__cert { flex-basis: 100%; }
}

/* ---- Typeahead (combobox) --------------------------------------------------
   Employer onboarding company search. Tokens only — no raw hex anywhere, per
   tokens.css's standing rule. Visual language matches .field__control so the
   control does not read as a different family of input. */
.typeahead { position: relative; }
.typeahead__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + var(--space-1));
  margin: 0; padding: var(--space-1) 0; list-style: none;
  max-height: 280px; overflow-y: auto;
  background: var(--color-surface-card);
  border: var(--border-width-control) solid var(--color-border-input);
  border-radius: var(--radius-control);
  box-shadow: var(--sp-card-shadow);
}
.typeahead__list[hidden] { display: none; }
.typeahead__option {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: var(--sp-body-family); font-size: var(--sp-body-size);
  color: var(--color-text-primary);
}
.typeahead__option:hover,
.typeahead__option--active {
  background: var(--color-surface-input-disabled);
  /* Hover/keyboard highlight must not be colour-only — the left rule carries
     the same state for anyone who cannot distinguish the tint. */
  box-shadow: inset 3px 0 0 0 var(--color-border-input-focus);
}
.typeahead__meta { color: var(--color-text-secondary); font-size: var(--sp-caption-size, 0.875rem); }
.typeahead__option--none { border-top: 1px solid var(--color-border-default); font-style: italic; }

/* ---- Repeatable rows (invite teammates) ---------------------------------- */
.repeat-row {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.repeat-row__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.repeat-row__title { font-family: var(--sp-body-family); font-weight: 700; color: var(--color-text-primary); }

/* ---- Modal dialog (QA-EMP-06) ------------------------------------------ */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: var(--color-surface-scrim);
}
.dialog {
  width: 100%; max-width: 420px;
  padding: var(--space-5);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--sp-card-shadow);
}
.dialog__title {
  margin: 0 0 var(--space-2);
  font-family: var(--sp-heading-small-family); font-size: var(--sp-heading-small-size);
  color: var(--color-text-primary);
}
.dialog__message { margin: 0 0 var(--space-4); color: var(--color-text-primary); }
.dialog__actions { display: flex; justify-content: flex-end; }

/* ---- Mobile: keep the employer tab bar above the fold ------------------
   Run brief 5.4, 2026-08-21. Moving the tab bar below the numbers banner
   (5.2) put it out of reach on a small phone: measured at 375x667 the tabs
   began at 824px, well past a 667px viewport, so an employer on an iPhone SE
   would have had to scroll to find navigation that used to be the first thing
   on the page.

   The fix is to make what now sits ABOVE the tabs shorter, rather than to move
   the tabs back or to truncate the longer tab label — the label is the exact
   string SP asked for and truncating it is explicitly ruled out.

   Three reductions, all confined to <=520px, so nothing changes on tablet or
   desktop where there was never a problem:
     * the hero loses its outer padding and its oversized name;
     * the stat tiles become a compact 2-up strip instead of four full cards;
     * the tab row tightens its gaps.
   Together these bring the tab bar to just inside the fold on the smallest
   phone we test. Verified by scripts/qa/profile-remediation-screens.mjs. */
@media (max-width: 520px) {
  .ep-hero { padding: var(--space-4); gap: var(--space-3); }
  .ep-hero__name { font-size: 20px; }
  .ep-hero__cert { max-width: none; text-align: left; }
  .ep-hero__cert-note { margin-top: var(--space-1); }

  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
  .stat-tile { padding: var(--space-3); }
  .stat-tile__value { font-size: 22px; }

  /* The tab bar WRAPS rather than scrolling horizontally. Both are allowed by
     the brief; wrapping is chosen because every tab stays visible at once. A
     horizontal scroller would fit on one line but would hide Team off the
     right-hand edge, and a navigation control you have to discover by swiping
     is worse than one that takes two lines. */
  .profile-switch { gap: var(--space-1); margin-bottom: var(--space-3); }
  .profile-switch .btn { padding-top: var(--space-2); padding-bottom: var(--space-2); }

  .post-job-gate { margin-bottom: var(--space-2); }
  .post-job-gate .button-row { margin: 0; }
  .post-job-gate__msg { margin: var(--space-1) 0; }
  /* The page's own top padding is generous for reading long forms; on the
     dashboard it is 24px of nothing above a hero that already has its own. */
  .page { padding-top: var(--space-3); }
}

/* ===========================================================================
   Job seeker intake quizzes (Explore Fit + Maritime Readiness Check)
   ===========================================================================
   Builds on the existing .q__option-card / .stepper primitives the employer
   Readiness Check already uses, rather than introducing a parallel set. Only
   what the job seeker instruments need beyond those is defined here.

   TOKENS ONLY — no raw hex anywhere in this block. */

/* Fieldset + legend carry the question, so they must not bring a browser's
   default border and inset padding with them. */
.q__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q__legend {
  /* The legend IS the visible question stem, and the only copy of it. Styled to
     match .page-heading__subtitle so the screen looks like the canonical RC-10
     layout, while the sentence appears in the DOM once rather than twice. */
  display: block; padding: 0; margin: 0 0 var(--space-4);
  max-width: 70ch; color: var(--color-text-secondary);
}
.q__helper { margin: 0 0 var(--space-3); }

/* MOBILE: option labels run past 35 words in places. `align-items: center` is
   right for a one-line option and wrong for a five-line one, so long labels
   align to the top and the text is free to wrap. Options crammed onto one line
   was a specific defect in the employer instrument — this is what stops it
   coming back. */
.q__option-card { align-items: flex-start; }
.q__option-card > input { margin-top: 2px; flex: 0 0 auto; }
.q__option-text {
  display: block; min-width: 0;
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
  line-height: var(--sp-body-line-height, 1.5);
}

/* At a selection cap, or beside a selected exclusive option, the remaining
   options are genuinely disabled — so they must look it, and must not offer a
   pointer that implies they can still be clicked. */
.q__option-card--disabled {
  background: var(--color-surface-input-disabled);
  border-color: var(--color-border-input-disabled);
  color: var(--color-action-disabled-text);
  cursor: not-allowed;
}
.q__option-card--disabled .q__option-text { color: var(--color-action-disabled-text); }

/* Visible focus. The card is the click target, so the ring belongs on the card
   rather than on the input hidden inside it. */
.q__option-card:focus-within {
  outline: var(--border-width-control) solid var(--color-focus-ring);
  outline-offset: 2px;
}

.q__cap-count {
  margin: 0 0 var(--space-2);
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}
.q__notice { margin-top: var(--space-3); }
.q__free-text { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }

.stepper__section {
  margin: var(--space-2) 0 0;
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}

/* rc_q19a — 15 collapsible credential categories. <details>/<summary> is
   keyboard-operable and announces expanded state without any script. */
.q__groups { display: flex; flex-direction: column; gap: var(--space-2); }
.q__group {
  border: var(--border-width-control) solid var(--color-border-default);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}
.q__group-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-family: var(--sp-label-small-family);
  font-weight: 700;
  color: var(--color-text-primary);
}
.q__group-summary:focus-visible {
  outline: var(--border-width-control) solid var(--color-focus-ring);
  outline-offset: 2px;
}
.q__group-name { min-width: 0; overflow-wrap: break-word; }
.q__group-count {
  flex: 0 0 auto;
  font-family: var(--sp-body-family);
  font-weight: 400;
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}
.q__options--grouped { padding: 0 var(--space-3) var(--space-3); }

/* Quiz intro */
.quiz-intro__meta {
  margin: 0 0 var(--space-4);
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}

/* Results panel. In the not-computed state this deliberately holds NO numeric
   slot at all — there is nothing to lay out, because there is no number and a
   placeholder where one will later sit would read as a real result. */
.quiz-results {
  padding: var(--space-4);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.quiz-results__heading {
  margin: 0;
  font-family: var(--sp-label-small-family);
  font-weight: 700;
  color: var(--color-text-primary);
}
.quiz-results__date { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.quiz-results__score { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: var(--color-text-primary); }
.quiz-results__segment { margin: 0; color: var(--color-text-secondary); }

/* Read-only list — the D4 schedule availability field on the profile form. */
.read-only-list { margin: 0 0 var(--space-2); padding-left: var(--space-4); }
.read-only-list__row { margin: 0 0 var(--space-1); color: var(--color-text-primary); }

/* NARROW VIEWPORTS. The split button row puts Back opposite Continue; below
   this width there is not room for three controls on one line, so they stack
   and each becomes full width rather than being squeezed. */
@media (max-width: 560px) {
  .q__option-card { padding: var(--space-3); }
  .q__group-summary { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .quiz-flow .button-row--split { flex-direction: column-reverse; align-items: stretch; gap: var(--space-2); }
  .quiz-flow .button-row--split > .button-row { flex-direction: column-reverse; align-items: stretch; gap: var(--space-2); }
}

/* ============================================================================
   Certification 2.0 — the employer score report.
   Tokens only; no raw hex (L18). Playfair Display for headings comes from
   --font-heading, the same variable every other heading in the platform uses.
   ============================================================================ */

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

.text-secondary { color: var(--color-text-secondary); }

.heading-xsmall {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--sp-heading-small-size);
  color: var(--color-text-primary);
}

.score-hero__label { margin: 0; color: var(--color-text-secondary); }

/* Wide content scrolls inside its own container so the page body never scrolls
   horizontally on a phone. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sp-body-size);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
}
.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-default);
}
.data-table thead th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table th[scope="row"] { font-weight: 600; color: var(--color-text-primary); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.score-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
}
.score-summary__row { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.score-summary__label { color: var(--color-text-secondary); }
.score-summary__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.scope-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.scope-list li { max-width: 80ch; }

/* ---- Certification 2.0 admin review cards (AD-08, AD-09) ------------------ */
.review-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
}
.review-card__label { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.review-card__answer {
  padding: var(--space-3);
  border-left: 3px solid var(--color-border-default);
}
.review-card__group { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.review-card__group legend { padding: 0; margin-bottom: var(--space-1); color: var(--color-text-secondary); font-size: var(--sp-caption-size); }
.review-card__choice { display: flex; align-items: center; gap: var(--space-2); }
.review-card__row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.review-card__row > .field { flex: 1 1 12rem; }
.review-card__doc { width: 100%; max-width: 100%; min-height: 24rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); }
.review-card__prompts { margin: 0; }
.review-card__prompts dt { font-weight: 600; color: var(--color-text-primary); }
.review-card__prompts dd { margin: 0 0 var(--space-2); color: var(--color-text-secondary); }

/* Reviewer notes on the certification report. */
.review-note {
  padding: var(--space-3);
  border-left: 3px solid var(--color-border-default);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
}
.review-note__where {
  margin: 0 0 var(--space-1);
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}

/* ---- Publish checklist (job post wizard) ---------------------------------
   EMP-UI-2026-08-25 item 29. Every line is a link to the thing it names, so the
   employer fixes exactly what is missing instead of walking the wizard again.
   Tokens only — no raw colour values, per tokens.css's standing rule. */
.publish-checklist__wrap {
  background: var(--color-surface-card);
  border: var(--border-width-control) solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
}
.publish-checklist__summary {
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight);
  font-size: var(--sp-body-bold-size); color: var(--color-text-primary);
  cursor: pointer;
}
.publish-checklist { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.publish-checklist__item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2);
  align-items: baseline;
}
.publish-checklist__mark { color: var(--color-text-secondary); }
.publish-checklist__item--met .publish-checklist__mark { color: var(--color-badge-success-text); }
.publish-checklist__link { text-align: left; }
.publish-checklist__state {
  font-family: var(--sp-caption-family); font-size: var(--sp-caption-size);
  color: var(--color-text-secondary); white-space: nowrap;
}
/* The "why" line sits under the whole row, spanning all three columns. */
.publish-checklist__detail {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--sp-caption-family); font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}

/* ---- Clickable step pills (EMP-UI-2026-08-25 item 28) --------------------
   A pill for a step the employer has already reached is a real <button>. It
   must look identical to the inert pills beside it apart from being obviously
   pressable — the strip is a progress indicator first and navigation second. */
.step-pill--link { cursor: pointer; font: inherit; }
.step-pill--link:hover { text-decoration: underline; }
.step-pill--link:focus-visible { outline: 2px solid var(--color-border-input-focus); outline-offset: 2px; }

/* ---- Optional demographics page (ADMIN-METRICS-2026-08-26, Phase 4) -------
   The one page in job seeker onboarding that collects something the platform
   will never use FOR the person. Its bargain is different from every other
   step, so it has to look different, or it reads as more of the same and gets
   answered as though it affected their chances.

   The panel is what does that work: a dark structural block above the
   questions, carrying the three promises before a single question is asked.
   Structure and tokens mirror .promo and .interest-capture deliberately, so it
   is recognisably part of the same system rather than a stranger. Brand tokens
   only; no raw colour values anywhere. */
.demographics-panel {
  width: 100%;
  background: var(--color-surface-structural-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-button);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.demographics-panel__eyebrow {
  margin: 0; font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-on-dark); opacity: .8;
}
.demographics-panel__title {
  margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  line-height: 1.3; color: var(--color-text-on-dark);
}
.demographics-panel__body { margin: 0; color: var(--color-text-on-dark); opacity: .85; line-height: 1.6; }
/* The three promises are a list, not a paragraph, because a person scanning
   this page for "will my employer see this" needs to find the answer without
   reading a sentence to its end. */
.demographics-panel__promises {
  margin: 0; padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  color: var(--color-text-on-dark); opacity: .9; line-height: 1.5;
}
/* Space between questions, so eleven of them read as eleven separate decisions
   rather than as one long form to get through. */
.demographics-question + .demographics-question { margin-top: var(--space-4); }
.demographics-version { margin-top: var(--space-4); }

/* ---- Admin: metric tile detail (ADMIN-METRICS-2026-08-26, Phase 7) --------
   The existing .stat-tile shows a value and a label. Several of the new
   platform metrics need a third line: WHY a number is empty. "0 verified
   certifications" and "verification has not started" are different facts, and a
   tile that cannot tell them apart teaches an admin to distrust the whole
   screen. */
.stat-tile__note {
  margin: var(--space-2) 0 0; font-size: var(--sp-label-small-size);
  color: var(--color-text-secondary); line-height: 1.4;
}

/* ---- Tab bar (shared) -----------------------------------------------------
   Built for the SP admin console and deliberately generic: SP asked for tabs
   over long pages and wants the same shape on the employer and job seeker
   dashboards, so this is a component rather than admin-only styling.

   The count chip is part of the tab, not an afterthought — on an operational
   screen "Listings 0" is what stops an admin opening six tabs to find five
   empty. Brand tokens only; no raw colour values. */
.tabbar {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  border-bottom: 1px solid var(--color-border-default);
  margin-bottom: var(--space-4);
}
.tabbar__tab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--sp-body-size);
  color: var(--color-text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  /* The 2px border is what moves, so the label must not shift with it. */
  margin-bottom: -1px;
}
.tabbar__tab:hover { color: var(--color-text-primary); }
.tabbar__tab--on {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-link);
}
.tabbar__count {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--sp-label-small-size);
  color: var(--color-text-secondary);
  background: var(--color-surface-input-disabled);
  border-radius: var(--radius-button);
  padding: 0 var(--space-2);
}
.tabbar__panel:focus-visible { outline: 2px solid var(--color-border-input-focus); outline-offset: 2px; }

/* ---- Admin console --------------------------------------------------------
   The mirror panel is the reason this screen exists. It shows what the EMPLOYER
   sees, read from the sources their own screens read, so a disagreement between
   the admin's toggle and the employer's reality is visible in one place instead
   of arriving as a message four days later. It is styled to read as a quotation
   of somebody else's screen rather than as more admin furniture. */
.mirror-panel {
  border: 1px dashed var(--color-border-input);
  border-radius: var(--radius-button);
  padding: var(--space-4);
  background: var(--color-surface-input-disabled);
}
.mirror-panel__eyebrow {
  margin: 0 0 var(--space-2); font-family: var(--sp-label-small-family);
  font-size: var(--sp-label-small-size); text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-text-secondary);
}
.mirror-panel__quote {
  margin: 0 0 var(--space-3); font-size: 18px; line-height: 1.4;
  color: var(--color-text-primary);
}
/* The contradiction state. If the toggle and the mirror disagree, that IS the
   finding, and it should not need reading twice to notice. */
.mirror-panel--conflict { border-style: solid; border-color: var(--color-border-input-error); }
.mirror-panel__conflict {
  margin: var(--space-3) 0 0; color: var(--color-border-input-error); font-weight: 700;
}
/* Read-only field, shown with the reason it cannot be edited. Phase 1's
   three-way split: edit / locked with a stated reason / adjudicated. */
.locked-field { display: flex; flex-direction: column; gap: var(--space-1); }
.locked-field__value {
  font-family: var(--font-body); color: var(--color-text-primary);
  padding: var(--space-3) 0;
}
.locked-field__why { margin: 0; font-size: var(--sp-label-small-size); color: var(--color-text-secondary); }
/* ---- The certification stage timeline (2026-09-16) ---------------------- */
/* SP's six stages, on the employer's own dashboard and driven by their own
   record. The current stage is marked by weight and a badge rather than colour
   alone, so it survives a greyscale print and a colour-blind reader. */
.cert-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cert-step { display: flex; align-items: flex-start; gap: var(--space-3); }
.cert-step__mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width-control) solid var(--color-border-default);
  background: var(--color-surface-page); color: var(--color-text-secondary);
  font-size: var(--sp-label-small-size); font-weight: 700; line-height: 1;
}
.cert-step__name { margin: 0; color: var(--color-text-primary); }
.cert-step__note { margin: 2px 0 0; font-size: var(--sp-label-small-size); color: var(--color-text-secondary); }
.cert-step--done .cert-step__mark {
  background: var(--color-badge-success-bg); color: var(--color-badge-success-text);
  border-color: var(--color-badge-success-bg);
}
.cert-step--active .cert-step__mark { border-color: var(--color-text-primary); color: var(--color-text-primary); border-width: 2px; }
.cert-step--active .cert-step__name { font-weight: 700; }
.cert-step--upcoming .cert-step__name { color: var(--color-text-secondary); }

/* ---- The Readiness Check cell in the companies table (2026-09-14) ------- */
/* A score and, when a company is part-way through a new run, the word that
   stops the two being read as one claim. */
.rc-cell { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rc-cell__note { font-size: var(--sp-label-small-size); color: var(--color-text-secondary); }

/* ---- Admin dashboard action chips (2026-09-14) -------------------------- */
/* Each task-queue row says what it LETS YOU DO, because until now an editor and
   a report were the same row with different words in it. Tokens only: the chip
   is the existing badge shape in outline, so it reads as an affordance rather
   than as a status. */
.queue-meta { display: inline-flex; align-items: center; gap: var(--space-2); }
.queue-action {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-control) solid var(--color-border-default);
  border-radius: 999px; white-space: nowrap;
  font-family: var(--sp-label-small-family); font-weight: var(--sp-label-small-weight);
  font-size: var(--sp-label-small-size); line-height: 1.4;
  color: var(--color-text-secondary); background: var(--color-surface-page);
}
.queue-action__icon { font-size: 14px; line-height: 1; }
/* The one kind that changes something gets the stronger ink. A review queue and
   a report are both "go and look"; an editor is not. */
.queue-action--edit { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.list-row--interactive:hover .queue-action { border-color: var(--color-text-primary); }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  text-align: left; padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  font-size: var(--sp-body-size);
}
.admin-table th { font-family: var(--font-heading); font-weight: 700; }
.admin-table tbody tr:hover { background: var(--color-surface-input-disabled); }
.admin-table__link {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--color-text-link); text-decoration: underline; cursor: pointer;
}
/* ---- Employer pricing / paywall (2026-09-09) ---------------------------- */
/* Tier cards, the Flagship banner and the FAQ. Tokens only — no new colour
   values enter the system here; the "recommended" card is distinguished by
   border weight and the existing structural-dark ink, not by a new accent. */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-4); }
.plan-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface-card); border-radius: var(--radius-card); box-shadow: var(--row-shadow); padding: var(--space-4); }
.plan-card--recommended { border: var(--border-width-control) solid var(--color-surface-structural-dark); }
.plan-card__head-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.plan-card__name { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--color-text-primary); }
.plan-card__price { margin: var(--space-2) 0 0; font-family: var(--font-heading); font-weight: 700; font-size: 28px; color: var(--color-text-primary); }
.plan-card__tagline { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-style: italic; }
.plan-card__inherits { margin: 0; color: var(--color-text-secondary); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); }
.plan-card__features { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.6; }
/* Pushes the action to the card's foot so both cards' buttons line up even
   when one lists four features and the other two. */
.plan-card__action { margin-top: auto; padding-top: var(--space-2); }
.plan-card__note { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

.flagship-banner { background: var(--color-surface-structural-dark); color: var(--color-text-on-dark); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-4); }
.flagship-banner__heading { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--color-text-on-dark); }
.flagship-banner__tagline { margin: var(--space-1) 0 var(--space-3); font-style: italic; color: var(--color-text-on-dark); }
.flagship-banner__lead { margin: 0 0 var(--space-3); color: var(--color-text-on-dark); }
.flagship-banner .plan-card__features { color: var(--color-text-on-dark); }
.flagship-banner__footnote { margin: var(--space-3) 0 0; font-size: var(--sp-caption-size); font-style: italic; color: var(--color-text-on-dark); }
/* The shared .link-btn is inked for a light ground; on the dark banner it needs
   the on-dark colour or it disappears into the panel. */
.flagship-banner .link-btn { color: var(--color-text-on-dark); text-decoration: underline; font-style: normal; }

.faq-item { border-top: var(--border-width-control) solid var(--color-border-default); padding: var(--space-3) 0; }
.faq-item:first-of-type { border-top: none; }
.faq-item__q { cursor: pointer; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }
.faq-item__a { margin: var(--space-2) 0 0; color: var(--color-text-secondary); line-height: 1.6; }

@media (max-width: 720px) {
  .plan-grid { grid-template-columns: 1fr; }
}
.pricing-aside { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ==========================================================================
   Employer QA round 1 (run qa1-9563)
   Existing tokens only — no new colours are introduced below.
   ========================================================================== */

/* ---- Screen-reader-only text --------------------------------------------
   The timelines carry each step's state as text for a screen reader; sighted
   users read it from position and fill. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- 5.1.5 · ONE password eye, not two ----------------------------------
   The app draws its own show/hide toggle (components/passwordField.js). Edge
   and Chromium ALSO draw a native reveal control inside a type=password input,
   and the two stack: two eyes, side by side, doing the same job, one of which
   the app does not know about. These pseudo-elements are the native ones. */
.field__password input::-ms-reveal,
.field__password input::-ms-clear { display: none; }
.field__password input::-webkit-credentials-auto-fill-button,
.field__password input::-webkit-strong-password-auto-fill-button {
  visibility: hidden; pointer-events: none; position: absolute; right: 0;
}

/* ---- 5.1.1 / 5.1.2 · Account type cards (Upwork reference) --------------- */
.role-cards { border: 0; margin: 0 0 var(--space-5); padding: 0; }
.role-cards__legend {
  padding: 0; margin-bottom: var(--space-3);
  font-family: var(--font-body); font-weight: 600; color: var(--color-text-primary);
}
.role-cards__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .role-cards__grid { grid-template-columns: 1fr; } }

.role-card {
  position: relative; display: flex; gap: var(--space-3);
  padding: var(--space-4); cursor: pointer;
  border: var(--border-width-control) solid var(--color-border-default, var(--color-text-primary));
  border-radius: var(--radius-button); background: var(--color-surface-card);
}
.role-card:hover { background: var(--color-action-secondary-hover-bg); }
.role-card--selected {
  border-width: 2px; border-color: var(--color-action-primary-border);
  background: var(--color-action-secondary-hover-bg);
}
/* The real radio stays in the DOM (it is what a screen reader and the keyboard
   drive) but is visually replaced by the indicator dot beside it. */
.role-card__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.role-card__indicator {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  border: var(--border-width-control) solid var(--color-text-primary); background: transparent;
}
.role-card--selected .role-card__indicator {
  background: var(--color-action-primary);
  box-shadow: inset 0 0 0 3px var(--color-surface-card);
}
.role-card__radio:focus-visible + .role-card__indicator {
  outline: var(--focus-ring-width) solid var(--color-text-link); outline-offset: 2px;
}
.role-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.role-card__title { font-weight: 700; color: var(--color-text-primary); }
.role-card__blurb { font-size: 0.9em; color: var(--color-text-secondary); }

.auth-admin-link { margin-top: var(--space-5); text-align: center; }
.link-btn--quiet { color: var(--color-text-secondary); font-size: 0.9em; }

/* ---- 5.2.4 / 5.2.5 · Clickable metrics and their info icons -------------- */
.metric--action {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.metric--action:hover { background: var(--color-action-secondary-hover-bg); }
.metric--action:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-text-link); outline-offset: 2px;
}

.info-tip { position: relative; display: inline-flex; margin-left: var(--space-1); }
.info-tip__trigger {
  width: 18px; height: 18px; border-radius: 50%; padding: 0; line-height: 1;
  font-size: 11px; font-weight: 700; font-family: var(--font-body); cursor: pointer;
  border: var(--border-width-control) solid var(--color-text-secondary);
  background: transparent; color: var(--color-text-secondary);
}
.info-tip__trigger:hover,
.info-tip__trigger[aria-expanded="true"] {
  border-color: var(--color-text-primary); color: var(--color-text-primary);
}
.info-tip__trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-text-link); outline-offset: 2px;
}
.info-tip__bubble {
  position: absolute; z-index: 30; bottom: calc(100% + var(--space-2)); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: var(--space-3);
  border: var(--border-width-control) solid var(--color-text-primary);
  border-radius: var(--radius-button);
  background: var(--color-surface-structural-dark); color: var(--color-text-on-dark);
  font-size: 0.85em; font-weight: 400; line-height: 1.4; text-align: left;
  white-space: normal;
}
/* Near the right edge of a four-across metric row a centred bubble would leave
   the page. Nudge the last tile's bubble back inside. */
.stat-grid > *:last-child .info-tip__bubble { left: auto; right: 0; transform: none; }

/* ---- 5.5.5 · Candidate stage timeline ----------------------------------- */
.stage-timeline { margin: var(--space-3) 0; }
.stage-timeline__rail,
.stage-timeline__outcomes {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  list-style: none; margin: 0; padding: 0;
}
.stage-timeline__fork-label {
  margin: var(--space-4) 0 var(--space-2); font-size: 0.8em; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.stage-step { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9em; }
.stage-step__dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: var(--border-width-control) solid var(--color-text-secondary); background: transparent;
}
.stage-step--done .stage-step__dot {
  background: var(--color-text-link); border-color: var(--color-text-link);
}
.stage-step--current .stage-step__dot {
  background: var(--color-action-primary); border-color: var(--color-action-primary-border);
  box-shadow: 0 0 0 3px var(--color-action-secondary-hover-bg);
}
.stage-step--done .stage-step__label { color: var(--color-text-secondary); }
.stage-step--current .stage-step__label { font-weight: 700; color: var(--color-text-primary); }
.stage-step--upcoming .stage-step__label { color: var(--color-text-secondary); opacity: 0.75; }

/* ---- 5.2.7 · Certification milestone timeline --------------------------- */
.cert-timeline__steps { list-style: none; margin: 0; padding: 0; }
.cert-step {
  display: flex; gap: var(--space-3); padding: var(--space-3) 0;
  border-bottom: var(--border-width-control) solid var(--color-surface-input-disabled);
}
.cert-step:last-child { border-bottom: 0; }
.cert-step__dot {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8em; font-weight: 700;
  border: var(--border-width-control) solid var(--color-text-secondary);
  background: transparent; color: var(--color-text-secondary);
}
.cert-step--done .cert-step__dot {
  background: var(--color-text-link); border-color: var(--color-text-link);
  color: var(--color-text-on-dark);
}
.cert-step--current .cert-step__dot {
  background: var(--color-action-primary); border-color: var(--color-action-primary-border);
  color: var(--color-action-primary-text);
}
.cert-step__body { display: flex; flex-direction: column; gap: var(--space-1); }
.cert-step__label { margin: 0; font-weight: 600; color: var(--color-text-primary); }
.cert-step--upcoming .cert-step__label { color: var(--color-text-secondary); }
.cert-step__state {
  margin: 0; font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cert-step--current .cert-step__state { color: var(--color-text-primary); font-weight: 700; }

.cert-timeline--compact { margin: var(--space-3) 0; }
.cert-timeline__rail {
  display: flex; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0 0 var(--space-2); padding: 0; flex-wrap: wrap;
}
.cert-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: var(--border-width-control) solid var(--color-text-secondary); background: transparent;
}
.cert-dot--done { background: var(--color-text-link); border-color: var(--color-text-link); }
.cert-dot--current {
  background: var(--color-action-primary); border-color: var(--color-action-primary-border);
  box-shadow: 0 0 0 3px var(--color-action-secondary-hover-bg);
}
.cert-timeline__now { margin: 0; font-size: 0.9em; color: var(--color-text-primary); font-weight: 600; }

/* ---- 5.2.6 / 5.5.6 · New applicants ------------------------------------- */
.new-applicant-banner { margin-bottom: var(--space-4); }

/* ---- 5.3.3 · The profile photo, in the header chip ---------------------- */
.profile-chip__trigger--photo { padding: 0; overflow: hidden; background: transparent; }
.profile-chip__photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.profile-chip__photo--menu { width: 32px; height: 32px; margin-right: var(--space-2); }
.profile-chip__id { display: flex; align-items: center; }

/* ---- 5.2.1 · One nav row that survives a phone -------------------------- */
.profile-switch { flex-wrap: wrap; }
/* Eight entries since "View Job Board" came back (Ebony, 2026-09-23). Tighter
   side padding keeps the row on ONE line at a 1280px window; narrower than
   that it still wraps rather than truncating. */
.profile-switch .btn { padding-left: var(--space-3); padding-right: var(--space-3); }
@media (max-width: 720px) {
  .profile-switch { gap: var(--space-2); }
  .profile-switch > * { flex: 1 1 auto; }
}

/* ---- The full-access banner (SP, 2026-09-17) ----------------------------
   Top of the employer dashboard, naming both gates — plan and Readiness Check
   — before an employer walks into either. On the structural-dark ground the
   Flagship pricing banner already uses: it has to read as a different KIND of
   thing from the tan panels under it, and this adds no new colour.
   Dismissible; hidden outright once both steps are done (see
   components/fullAccessBanner.js for when it renders at all). */
.access-banner {
  position: relative;
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--color-surface-structural-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-4);
  /* Top margin as well as bottom: the identity hero directly above is the SAME
     dark ground, and without a gap the two read as one very tall block rather
     than as a header and a thing asking something of you. */
  margin: var(--space-3) 0 var(--space-4);
}
.access-banner__body { flex: 1 1 auto; min-width: 0; }
.access-banner__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--sp-label-small-size, 12px); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-on-dark); opacity: .85;
}
.access-banner__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading); font-weight: 700; font-size: 26px;
  color: var(--color-text-on-dark);
}
.access-banner__lead {
  margin: 0 0 var(--space-3); max-width: 60ch; line-height: 1.6;
  color: var(--color-text-on-dark); opacity: .9;
}
.access-banner__steps {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--sp-caption-size);
}
.access-banner__step { display: flex; align-items: center; gap: var(--space-2); }
/* The dot doubles as the tick once its step is done — one element, two states,
   so a completed step cannot drift out of alignment with an outstanding one. */
.access-banner__dot {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  border: var(--border-width-control) solid var(--color-text-on-dark);
  opacity: .7;
  font-size: 12px; line-height: 16px; text-align: center;
}
.access-banner__step--done .access-banner__dot {
  background: var(--color-text-on-dark);
  color: var(--color-surface-structural-dark);
  opacity: 1;
}
.access-banner__step--done { opacity: .85; }
.access-banner__actions {
  display: flex; flex-direction: column; gap: var(--space-2);
  flex-shrink: 0;
}
.access-banner__actions .btn { white-space: nowrap; }
/* The dismiss control. Sized to the touch-target minimum even though the glyph
   is small — it is the only way out of this banner, and a 12px hit area on a
   phone is not one. */
.access-banner__dismiss {
  position: absolute; top: var(--space-2); right: var(--space-2);
  min-width: var(--touch-target-min); min-height: var(--touch-target-min);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-on-dark); opacity: .75;
  font-size: 18px; line-height: 1;
}
.access-banner__dismiss:hover { opacity: 1; }
@media (max-width: 720px) {
  .access-banner { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4); }
  .access-banner__heading { font-size: 22px; }
  .access-banner__actions { flex-direction: column; }
  .access-banner__actions .btn { width: 100%; }
}

/* The consulting offer laid across a full-width host (the foot of the employer
   dashboard, SP 2026-09-17): text on the left, the control beside it. The
   column layout above is still the default and is what every narrow card gets.
   The actions cell spans every row so it stays centred against the text
   whichever state the offer is in — and the confirmed state, which has no
   actions at all, simply leaves column 2 empty. */
.interest-capture--wide {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-5); row-gap: var(--space-2);
  align-items: center;
}
.interest-capture--wide > * { grid-column: 1; }
.interest-capture--wide .interest-capture__actions {
  grid-column: 2; grid-row: 1 / -1; align-self: center;
}
.interest-capture--wide .interest-capture__body { max-width: 80ch; }
@media (max-width: 720px) {
  .interest-capture--wide { grid-template-columns: minmax(0, 1fr); }
  .interest-capture--wide .interest-capture__actions { grid-column: 1; grid-row: auto; }
}

/* A panel that is not one of the cards around it (SP, 2026-09-18).
   The consulting offer at the foot of the employer dashboard: full width was
   not enough on its own, because a tan card under a run of tan metric cards
   still reads as one more metric. Same ground as the access banner at the top
   of the page, so the two bookend the employer's own numbers. Tokens only. */
.panel--feature {
  background: var(--color-surface-structural-dark);
  color: var(--color-text-on-dark);
  box-shadow: none;
  padding: var(--space-5);
}
.panel--feature .panel__title,
.panel--feature .panel__note { color: var(--color-text-on-dark); }
.panel--feature .panel__note { opacity: .85; }

/* ---- Rich text: the job description editor and its rendered output ---------
 *
 * Tuuli 2026-09-17 / SP 2026-09-18. Two things share these rules on purpose:
 * the editor (.rich-text__shell) and the rendered description on the listing
 * detail (.rich-text). A description has to look the same while it is being
 * written as it does once it is posted, or the employer is editing a preview
 * of something else.
 */
.rich-text {
  color: var(--color-text-primary);
  line-height: 1.55;
}
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 var(--space-3); }
.rich-text h3,
.rich-text__heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: var(--space-4) 0 var(--space-2);
}
.rich-text ul,
.rich-text ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.rich-text li { margin: 0.15em 0; }
.rich-text a { color: var(--color-text-link); }

.rich-text__shell {
  border: var(--border-width-control) solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}
.rich-text__shell:focus-within { border-color: var(--color-border-input-focus); }

.rich-text__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: var(--space-1);
  border-bottom: var(--border-width-control) solid var(--color-border-default);
  background: var(--color-surface-input-disabled);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.rich-text__btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.rich-text__btn:hover { background: var(--color-action-secondary-hover-bg); }
.rich-text__btn--on,
.rich-text__btn[aria-pressed='true'] {
  background: var(--color-action-secondary-active-bg);
  border-color: var(--color-border-default);
}

.rich-text__body {
  padding: var(--space-3) var(--space-4);
  min-height: 200px;
  outline: none;
}
.rich-text__body:focus-visible { outline: none; }

.rich-text__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width-control) solid var(--color-border-default);
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}
.rich-text__count { margin: 0; }

/* The plain-text prose rule sets `white-space: pre-wrap`, which is right for a
 * textarea's newlines and wrong for rendered blocks — it would double every
 * gap between a paragraph and the heading under it. */
.job-detail__prose--rich { white-space: normal; }

/* ===========================================================================
   Run jsqa-0921 — job seeker QA fixes (21 September 2026)
   Brand palette only. Nothing here introduces a hex value; every colour is a
   token from tokens.css. Teal (--color-text-link) is used for links and
   success states only, and never as a fill behind another teal element.
   =========================================================================== */

/* ---- Job seeker section nav (P1-1) -------------------------------------- */
/* Reuses .profile-switch, which is already flex-wrap, so the row reflows onto
   as many lines as a phone needs and nothing hides behind an overflow edge.
   The modifier exists only to give the seeker's row its own breathing space
   below the top nav. */
.profile-switch--seeker { margin-bottom: var(--space-4); }

/* ---- Filter rail: the certification toggle and its explanation (P2-2) ---- */
.filter-toggle-row { display: flex; align-items: center; gap: var(--space-2); }
.filter-toggle-row .filter-toggle { flex: 1 1 auto; }

/* ---- Filter rail: collapsible groups (P2-3) ----------------------------- */
/* <details>/<summary>: keyboard operable and state-announcing for free. The
   marker is removed in both syntaxes because WebKit still wants the -webkit-
   one; the caret below replaces it so the control never loses its affordance. */
.filter-group--collapsible { border-top: var(--border-width-control) solid var(--color-border-default); padding-top: var(--space-3); }
.filter-group--collapsible:first-of-type { border-top: none; padding-top: 0; }
.filter-group__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); cursor: pointer; list-style: none;
  padding: var(--space-1) 0;
}
.filter-group__summary::-webkit-details-marker { display: none; }
.filter-group__summary::after {
  content: '▸'; color: var(--color-text-secondary); font-size: var(--sp-caption-size);
  transition: transform .1s ease;
}
.filter-group--collapsible[open] > .filter-group__summary::after { transform: rotate(90deg); }
.filter-group__summary:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-text-link); outline-offset: 2px; }
.filter-group__count { font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.filter-group__options { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }

/* ---- The apply checklist (P0-4) ----------------------------------------- */
/* Shown on a job page when something is still outstanding. Every row is
   listed, done and not-done alike, so it reads as progress rather than as a
   list of obstacles. */
.apply-checklist {
  background: var(--color-surface-card);
  border: var(--border-width-control) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--row-shadow);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.apply-checklist__title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-text-primary); }
.apply-checklist__intro { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
.apply-checklist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.apply-checklist__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.apply-checklist__mark { flex: 0 0 auto; width: 1.25em; color: var(--color-text-secondary); }
/* Teal marks a COMPLETED step — a success state, which is what teal is for. */
.apply-checklist__row--done .apply-checklist__mark { color: var(--color-text-link); }
.apply-checklist__body { flex: 1 1 auto; min-width: 0; }
.apply-checklist__label { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }
/* A teal link on the card surface, which is not teal-tinted. */
.apply-checklist__label--link { color: var(--color-text-link); text-decoration: underline; }
.apply-checklist__detail { margin: var(--space-1) 0 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.apply-checklist__state { flex: 0 0 auto; font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* ---- The quiz's read-only answer review (P0-2) -------------------------- */
.quiz-review__item {
  padding: var(--space-4);
  background: var(--color-surface-card);
  border: var(--border-width-control) solid var(--color-border-strong);
  border-radius: var(--radius-card);
}
.quiz-review__q { margin: 0 0 var(--space-2); font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }
.quiz-review__a { margin: 0; padding-left: var(--space-5); color: var(--color-text-primary); }
.quiz-review__free { margin: var(--space-2) 0 0; font-style: italic; color: var(--color-text-secondary); }

/* ---- Admin AD-10: quiz responses ---------------------------------------- */
.quiz-response__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--sp-caption-size); color: var(--color-text-secondary); }
.quiz-response__answers { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.quiz-response__answer { padding-top: var(--space-3); border-top: var(--border-width-control) solid var(--color-border-default); }
.quiz-response__q { margin: 0; font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); }
/* The stable question id, beside the stem. It is what Ebony quotes in SQL and
   what the source document calls the question, so it is shown rather than
   hidden — quiet, but present. */
.quiz-response__qid { margin: 0 0 var(--space-1); font-size: var(--sp-caption-size); color: var(--color-text-secondary); font-family: monospace; }
.quiz-response__a { margin: 0; padding-left: var(--space-5); color: var(--color-text-primary); }
.quiz-response__free { margin: var(--space-2) 0 0; font-style: italic; color: var(--color-text-secondary); }

/* ---- The quiz's message line (P1-7, "the quiz UI felt jumpy") ----------- */
/* The line is ALWAYS in the layout and toggles `visibility`, never `hidden`.
   A message that collapses to zero height moved the Continue button up and
   down by one line under the pointer that was about to press it. */
.q__notice { min-height: 1.5em; }

/* ===========================================================================
   Run jsqc-0921 — quiz content updates (22 September 2026)
   PENDING EBONY AND SOPHIA'S APPROVAL. Brand palette only; no hex values here.
   =========================================================================== */

/* ---- C8: the options pinned above rc_q19a's fifteen categories ----------- */
/* "None yet" and "Qualification or training in progress" used to sit at the
   bottom of the fifteenth of fifteen collapsible categories, and testers could
   not find them. They are drawn here instead, visually separated from the
   category list so they read as a different kind of answer — which they are:
   every other option names a credential, these two are answers about holding
   none. Wording and ids are unchanged; only position moves. */
.q__pinned {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-card);
  border: var(--border-width-control) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-4);
}
.q__pinned-lead {
  margin: 0 0 var(--space-1);
  font-size: var(--sp-caption-size);
  color: var(--color-text-secondary);
}

/* ---- C5: one line of helper text on a credential category --------------- */
/* Only "Professional, Regulatory & Leadership" has one — it is the only
   category listing AREAS rather than named credentials. Inside the <details>,
   above the options it qualifies. */
.q__group-help {
  margin: var(--space-2) 0 var(--space-1);
  padding-left: var(--space-2);
  border-left: var(--border-width-control) solid var(--color-border-strong);
  color: var(--color-text-secondary);
}

/* ---- Admin tabs + breadcrumbs (run admrev-q7m2) ------------------------- */
.admin-tabs a.tabbar__tab { text-decoration: none; }
.breadcrumbs { margin: 0 0 var(--space-3); font-size: var(--sp-label-small-size); }
.breadcrumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.breadcrumbs__item { display: inline-flex; align-items: center; color: var(--color-text-secondary); }
.breadcrumbs__item + .breadcrumbs__item::before { content: '›'; margin-right: var(--space-1); color: var(--color-text-secondary); }
.breadcrumbs__link { color: var(--color-text-link); }
.breadcrumbs__current { color: var(--color-text-primary); }

/* ---- Stream 1 · navigation shell (run admrev-q7m2) ---- */
/* A1 — the admin "Screens" drawer (src/components/screensDrawer.js), which
   replaces the bottom Testing-menu bar. Fixed to the left edge. At ≥1024px an
   open drawer PUSHES the page (body padding) so nothing is covered; below that
   it overlays the page and closes when a screen is picked. */
:root { --screens-drawer-width: 280px; }
.screens-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
  width: var(--screens-drawer-width); max-width: calc(100vw - 48px);
  display: flex; flex-direction: column;
  background: var(--color-surface-structural-dark);
  color: var(--color-text-on-dark);
  box-shadow: var(--sp-card-shadow);
}
.screens-drawer[hidden], .screens-drawer__open[hidden], .screens-drawer__group-body[hidden] { display: none !important; }
.screens-drawer__head {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--top-nav-height); padding: 0 var(--space-3);
  border-bottom: var(--border-width-control) solid var(--color-border-default);
}
.screens-drawer__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--sp-heading-small-size); }
.screens-drawer__tag {
  margin-left: auto; font-size: var(--sp-label-small-size); opacity: .75; white-space: nowrap;
}
.screens-drawer__close, .screens-drawer__open {
  min-width: var(--touch-target-min); min-height: var(--touch-target-min);
  font: inherit; cursor: pointer; border-radius: var(--radius-button);
}
.screens-drawer__close {
  background: transparent; color: var(--color-text-on-dark);
  border: var(--border-width-control) solid transparent; font-size: 1.25rem;
}
.screens-drawer__close:hover { border-color: var(--color-text-on-dark); }
.screens-drawer__open {
  position: fixed; left: var(--space-3); bottom: var(--space-3); z-index: 30;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3);
  background: var(--color-surface-structural-dark); color: var(--color-text-on-dark);
  border: var(--border-width-control) solid var(--color-border-default);
  box-shadow: var(--sp-card-shadow); font-size: var(--sp-caption-size);
}
.screens-drawer__close:focus-visible, .screens-drawer__open:focus-visible,
.screens-drawer__group-toggle:focus-visible, .screens-drawer__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 2px;
}
.screens-drawer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) 0 var(--space-5); }
.screens-drawer__group + .screens-drawer__group { border-top: var(--border-width-control) solid var(--color-border-default); }
.screens-drawer__group-toggle {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3); min-height: var(--touch-target-min);
  background: transparent; color: var(--color-text-on-dark); border: 0; cursor: pointer;
  font-family: var(--sp-body-bold-family); font-weight: var(--sp-body-bold-weight); font-size: var(--sp-body-size);
  text-align: left;
}
.screens-drawer__chevron { display: inline-block; transition: transform .15s ease; }
.screens-drawer__group.is-collapsed .screens-drawer__chevron { transform: rotate(-90deg); }
.screens-drawer__section { padding: 0 var(--space-2) var(--space-2); }
.screens-drawer__subgroup {
  margin: var(--space-2) var(--space-2) var(--space-1);
  font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .04em; opacity: .7;
}
.screens-drawer__list { list-style: none; margin: 0; padding: 0; }
.screens-drawer__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-button);
  color: var(--color-text-on-dark); text-decoration: none; font-size: var(--sp-caption-size);
  border: var(--border-width-control) solid transparent;
}
.screens-drawer__link:hover { border-color: var(--color-text-on-dark); }
.screens-drawer__link.is-active { background: var(--color-action-primary); color: var(--color-action-primary-text); }
.screens-drawer__status { flex-shrink: 0; font-size: var(--sp-label-small-size); opacity: .7; font-style: italic; }
@media (min-width: 1024px) {
  body.screens-drawer-open { padding-left: var(--screens-drawer-width); }
}

/* A4 — the one "Back to dashboard" link at the top of job seeker pages. */
.seeker-back { margin: 0 0 var(--space-3); }

/* B1 — View & Edit. */
.view-edit__note { margin: var(--space-4) 0; }
.view-edit__card { margin-bottom: var(--space-4); }
.view-edit__links { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.module-index__group { margin-top: var(--space-5); }
.module-index__subgroup { margin: var(--space-3) 0 var(--space-1); font-size: var(--sp-label-small-size); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); }
.module-index__list { list-style: none; margin: 0; padding: 0; }
.module-index__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: var(--border-width-control) solid var(--color-border-default);
}
.module-index__name { margin: 0; font-weight: 700; }
.module-index__desc { margin: 0; color: var(--color-text-secondary); font-size: var(--sp-caption-size); }
.module-index__open { flex-shrink: 0; color: var(--color-text-link); }
/* A2 — an admin's own company, indented under "Admin dashboard". */
.profile-chip__item--sub { padding-left: calc(var(--space-2) + var(--space-3)); font-size: var(--sp-caption-size); }
/* ---- Stream 4 — verification calculator (run admrev-q7m2) ---- */
/* WS-J. Dark Brown for actions; teal only for "Confirms" (the success badge);
   Brick Red (--color-error) for Contradicts and structural risk flags;
   Qualifies uses the warning fill. Tokens only. */
.vcalc .btn--secondary { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.vcalc .field__hint { margin: 0; font-size: var(--sp-caption-size); color: var(--color-text-secondary); line-height: 1.4; }
.vcalc__layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .vcalc__layout { grid-template-columns: minmax(0, 1fr); } }
.vcalc__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.vcalc__nav-item {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3); min-height: var(--touch-target-min); text-align: left; cursor: pointer;
  font: inherit; color: var(--color-text-primary);
  background: var(--color-surface-card); border: var(--border-width-control) solid var(--color-border-default);
  border-radius: var(--radius-card);
}
.vcalc__nav-item:hover { border-color: var(--color-border-strong); }
.vcalc__nav-item--on { border-color: var(--color-text-primary); box-shadow: inset 3px 0 0 var(--color-text-primary); }
.vcalc__nav-name { font-weight: var(--sp-body-bold-weight); line-height: 1.3; }
.vcalc__nav-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vcalc__flag-mark { font-size: var(--sp-label-small-size); font-weight: var(--sp-label-small-weight); color: var(--color-error); }
.vcalc__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.vcalc__levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.vcalc__level {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3);
  border: var(--border-width-control) solid var(--color-border-default); border-radius: var(--radius-card);
}
.vcalc__level-title { margin: 0; font-family: var(--font-heading); font-size: var(--sp-body-bold-size); color: var(--color-text-primary); }
.vcalc__calc { display: flex; flex-direction: column; gap: var(--space-3); }
.vcalc__empty { margin: 0; }
.vcalc__box {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: var(--border-width-control) solid var(--color-border-strong); border-radius: var(--radius-card);
}
.vcalc__box-title { margin: 0; font-family: var(--font-heading); font-size: var(--sp-body-bold-size); color: var(--color-text-primary); }
.vcalc__sums { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.vcalc__sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: var(--border-width-control) solid var(--color-border-default); line-height: 1.4; }
.vcalc__sum--max { font-weight: var(--sp-body-bold-weight); }
.vcalc__sum-math { font-variant-numeric: tabular-nums; }
.vcalc__result, .vcalc__formula { margin: 0; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vcalc__finding { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vcalc__legend { border-collapse: collapse; font-size: var(--sp-caption-size); width: 100%; max-width: 26rem; }
.vcalc__legend-caption { text-align: left; color: var(--color-text-secondary); padding-bottom: var(--space-1); }
.vcalc__legend th, .vcalc__legend td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: var(--border-width-control) solid var(--color-border-default); }
.vcalc__legend .num { text-align: right; }
.vcalc__legend-row--on td { font-weight: var(--sp-body-bold-weight); color: var(--color-text-primary); background: var(--color-badge-neutral-bg); }
.vcalc__flag { padding: var(--space-3); border-left: 3px solid var(--color-error); background: var(--color-badge-error-bg); color: var(--color-error); line-height: 1.45; }
.vcalc__flag p { margin: 0; }
.vcalc__flag p + p { margin-top: var(--space-2); }
.vcalc__flag-title { font-weight: var(--sp-body-bold-weight); }
.vcalc__ok { margin: 0; color: var(--color-text-secondary); line-height: 1.45; }
.vcalc__effect { margin: 0; padding: var(--space-3); background: var(--color-badge-neutral-bg); border-radius: var(--radius-card); line-height: 1.45; color: var(--color-text-primary); }
.vcalc__legacy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); background: var(--color-warning-fill); border-radius: var(--radius-card); }
.vcalc__legacy p { margin: 0; line-height: 1.45; }
.vcalc__problem { margin: 0; color: var(--color-error); }
.vcalc__problem:empty { display: none; }
.vcalc__pending { margin: 0; color: var(--color-text-primary); }
.vcalc__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* ---- Stream 3: employer + job seeker surfaces, copy editor (run admrev-q7m2) ---- */
/* Talk through your results (E2/E3). Text, then the two booking buttons and the
   confirmation line. In the wide (dashboard) layout the controls sit in the
   right-hand column, like the consulting offer they replaced. */
.talk-through__text { display: flex; flex-direction: column; gap: var(--space-2); }
.talk-through__controls { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.talk-through__actions { margin: 0; }
.interest-capture--wide.talk-through .talk-through__controls { grid-column: 2; grid-row: 1 / -1; align-self: center; }
@media (max-width: 720px) {
  .interest-capture--wide.talk-through .talk-through__controls { grid-column: 1; grid-row: auto; }
}
.promo .talk-through__lead { margin-top: var(--space-3); margin-bottom: var(--space-2); }

/* Text blocks editor (B4). */
.site-copy-group { gap: var(--space-3); }
.site-copy-card__verbatim { border-left: 3px solid var(--color-border-strong); color: var(--color-text-primary); }

/* My Listings (E5): a non-live listing's applicant count is history. */
.listing-count--past { font-size: var(--sp-caption-size); color: var(--color-text-secondary); }

/* Applicants ?filter=new (E4). */
.applicants-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.applicants-filter .callout__lead { margin: 0; }

/* Job board rail (F1): every sector and job type, zero-count ones disabled. */
.filter-opt__count { margin-left: auto; color: var(--color-text-secondary); font-size: var(--sp-caption-size); }
.filter-opt--empty { color: var(--color-text-secondary); cursor: default; }
.filter-group__options .field--searchable { margin: 0; }

/* Public profile editor (E6): the sandbox company note. */
.pcp-sandbox-note { margin-top: var(--space-2); }

/* Job seeker dashboard (C15) and employer settings (I1). */
.email-team-card__address { margin-top: var(--space-1); }
.settings-goals { white-space: pre-wrap; }
/* The private-note caption is a full sentence here; let the head wrap so it
   does not push the page sideways at phone width (QA admrev-q7m2, 390px). */
.settings-goals-panel .panel__head { flex-wrap: wrap; }
.settings-goals-panel .panel__note { white-space: normal; }

/* Footer contact line (B4/F2). */
.site-foot__contact { margin-top: var(--space-3); }
.foot__link--inline { display: inline; margin: 0; text-decoration: underline; }
/* ---- Stream 2: admin dashboard, console, metrics, job seekers (run admrev-q7m2) ---- */
/* C7 — readiness level word first, points second and smaller. */
.rc-level-badge__score { font-weight: 400; opacity: 0.8; font-size: 0.9em; }
.score-hero__level { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: var(--color-text-primary); }
.score-hero__value--secondary { font-family: inherit; font-size: inherit; font-weight: 700; color: var(--color-text-primary); }
/* C1 — private onboarding answers as plain read-only text. */
.answer-field__value { margin: 0; color: var(--color-text-primary); white-space: pre-wrap; }
.answer-field__value--empty { color: var(--color-text-secondary); font-style: italic; }
/* A3 — admin breadcrumbs and the way back to a company. */
.admin-crumbs { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.admin-crumbs__back { color: var(--color-text-link); font-size: var(--sp-label-small-size); }
/* C10 — inline orientation call date. */
.orientation-call__date { max-width: 12rem; }
/* C14 — what the Activity tab tracks. */
.activity-note p { margin: 0 0 var(--space-2); }
/* C2 — helper under the Self-Assessment unlocked switch. */
.check-item__hint { display: block; font-size: var(--sp-label-small-size); color: var(--color-text-secondary); }
/* C9 — admin dashboard tiles with an ⓘ, links under each tab, the C11 banner. */
.admin-tabs { margin-bottom: var(--space-4); }
.admin-metric__label { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.admin-links { margin: var(--space-2) 0; }
.admin-link { color: var(--color-text-link); }
.admin-rc-banner__list { margin: 0 0 var(--space-2); padding-left: var(--space-4); }
.admin-rc-banner__list a { color: var(--color-text-link); }
/* D2 — one job seeker's basic facts. */
.admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4); }
.admin-facts dt { color: var(--color-text-secondary); }
.admin-facts dd { margin: 0; color: var(--color-text-primary); }
@media (max-width: 600px) { .admin-facts { grid-template-columns: 1fr; } .admin-facts dd { margin-bottom: var(--space-2); } }

/* ---- QA follow-up (run admrev-q7m2) ---------------------------------------
   Room under the page for the floating "☰ Screens" button, so it never covers
   the last row of content. Admin-only: the class exists only when the drawer
   is mounted. */
body.screens-drawer-closed { padding-bottom: calc(var(--space-3) * 2 + 44px); }
/* Bare links (no class) inside page content use the brand link colour rather
   than the browser's default blue/purple. Teal is for links, per the brand. */
.screen a:not([class]), .panel a:not([class]) { color: var(--color-text-link); }