/**
 * #736 reopen — computed Saved parity.
 *
 * Loads last (after visual-unification.css). Forces every reachable view to
 * compute the same canvas, card, type, field, chip, and CTA geometry as the
 * actually rendered Saved screen. Earlier !important flatteners
 * (directory-family, mobile-visual-qa-498, recruiter-ref-ui LinkedIn blues)
 * lose here by equal-or-higher specificity.
 *
 * Do not restyle bottom nav into the CTA family. Vessel stays default-off.
 * Content hero images may remain content; the surrounding page must stay
 * on the Saved graphite/gold canvas.
 */

/* Ambient opacity/compositing lives in app-shell.css. Do not flatten
   mesh/beam here — last-load 0.07/0.25 made the Saved field invisible
   in Telegram WKWebView after #744. */

/* —— No opaque view paint (Saved never paints #view-saved) —— */
html[data-theme="dark"] #view-recruiters,
html[data-theme="dark"] #view-recruiter-detail,
html[data-theme="dark"] #view-training,
html[data-theme="dark"] #view-training-detail,
html[data-theme="dark"] .mj-recruiter-ref,
html[data-theme="dark"] .mj-recruiter-ref.view-active,
html[data-theme="light"] #view-recruiters,
html[data-theme="light"] #view-recruiter-detail,
html[data-theme="light"] #view-training,
html[data-theme="light"] #view-training-detail,
#view-jobs,
#view-saved,
#view-news,
#view-news-detail,
#view-career,
#view-profile,
#view-cv-builder,
#view-applications,
#view-account,
#view-medical,
#view-job-detail,
#view-quick-apply,
body.mj-app[data-active-view] .app-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] .mj-recruiter-topbar--detail,
#view-training-detail .mj-recruiter-topbar,
#view-recruiter-detail .mj-recruiter-topbar {
  background: transparent !important;
  border-bottom-color: color-mix(in srgb, var(--mh-border-subtle) 70%, transparent);
}

/* —— Saved card slab (14px / depth-1 / dark #181b21) —— */
#jobs-empty,
#jobs-api-fallback,
#jobs-loading,
#saved-empty,
#news-empty,
#news-loading,
#news-error,
#applications-empty,
#medical-unavailable,
#view-medical .mh-empty,
#jobs-empty.mh-empty,
#saved-empty.mh-empty,
#view-jobs .job-card-v2.job-offer-card,
#view-saved .figma-saved-card,
#view-career .mj-career-card,
#view-career .mj-career-card[data-career-tool="recruiters"],
#view-quick-apply .mh-qa-card,
#view-cv-builder #cv-builder-start,
#view-cv-builder .mh-cv-builder-start,
#demo-sheet-root .demo-sheet-panel,
#view-profile .mh-profile-card,
#view-applications .mj-application-card,
#view-applications.mh-stage3-applications .mj-applications-list .mj-application-card,
#view-account .mj-premium-card,
#view-account .mh-account-privacy-card,
#view-account [data-account-privacy-confirm],
#view-account .mh-account-privacy-confirm,
#view-account.mh-stage3-account .mh-account-privacy-confirm,
#view-account .mj-account-profile,
#view-account .mj-settings-list,
#view-recruiters .ref-rc-company-card,
#view-training .ref-rc-company-card,
#view-training .mh-training-card,
#view-training #training-list .mh-training-card,
#view-training button.mh-training-card,
#view-training button.ref-rc-company-card,
#view-training .mh-catalog-status,
#view-training-detail .mh-training-detail,
#view-training-detail .directory-detail-card,
#view-recruiter-detail .ref-rc-contact-card,
#view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="light"] #view-recruiters .ref-rc-company-card,
html[data-theme="dark"] #view-recruiters .ref-rc-company-card,
html[data-theme="light"] #view-training .ref-rc-company-card,
html[data-theme="dark"] #view-training .ref-rc-company-card,
#view-recruiters.mh-stage3-recruiters .ref-rc-company-card,
#view-recruiters.mh-stage3-recruiters .ref-rc-list .ref-rc-company-card,
#view-training.mh-stage3-training .mh-training-card,
#view-training.mh-stage3-training .ref-rc-company-card.mh-training-card,
html[data-theme="light"] #view-recruiter-detail .ref-rc-contact-card,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card,
html[data-theme="light"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
#view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  background-image: none !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
}

/* Inner-wrapper slabs (Saved/Jobs list rows) keep 0 outer padding.
   Content cards (Account, Career, empty/status, directory rows) keep
   Saved-derived 16×14 inset — never zero then restore. */
#view-jobs .job-card-v2.job-offer-card,
#view-saved .figma-saved-card,
#view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="light"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body {
  padding: 0 !important;
  gap: 0 !important;
}

#jobs-empty,
#jobs-api-fallback,
#jobs-loading,
#saved-empty,
#news-empty,
#news-loading,
#news-error,
#applications-empty,
#jobs-empty.mh-empty,
#saved-empty.mh-empty {
  padding: 16px 14px !important;
  gap: 8px !important;
}

#medical-unavailable,
#view-medical .mh-empty,
#view-medical .mh-coming-soon-card {
  padding: 16px 14px !important;
  gap: 10px !important;
}

#demo-sheet-root .demo-sheet-panel {
  padding: 16px 14px !important;
  gap: 8px !important;
}

html[data-theme="dark"] #jobs-empty,
html[data-theme="dark"] #jobs-api-fallback,
html[data-theme="dark"] #jobs-loading,
html[data-theme="dark"] #saved-empty,
html[data-theme="dark"] #news-empty,
html[data-theme="dark"] #news-loading,
html[data-theme="dark"] #news-error,
html[data-theme="dark"] #applications-empty,
html[data-theme="dark"] #medical-unavailable,
html[data-theme="dark"] #view-jobs .job-card-v2.job-offer-card,
html[data-theme="dark"] #view-saved .figma-saved-card,
html[data-theme="dark"] #view-career .mj-career-card,
html[data-theme="dark"] #view-quick-apply .mh-qa-card,
html[data-theme="dark"] #view-cv-builder #cv-builder-start,
html[data-theme="dark"] #demo-sheet-root .demo-sheet-panel,
html[data-theme="dark"] #view-profile .mh-profile-card,
html[data-theme="dark"] #view-applications .mj-application-card,
html[data-theme="dark"] #view-account .mj-premium-card,
html[data-theme="dark"] #view-account .mh-account-privacy-card,
html[data-theme="dark"] #view-account [data-account-privacy-confirm],
html[data-theme="dark"] #view-account .mh-account-privacy-confirm,
html[data-theme="dark"] #view-account .mj-settings-list,
html[data-theme="dark"] #view-recruiters .ref-rc-company-card,
html[data-theme="dark"] #view-training .ref-rc-company-card,
html[data-theme="dark"] #view-training .mh-training-card,
html[data-theme="dark"] #view-training .mh-catalog-status,
html[data-theme="dark"] #view-training-detail .mh-training-detail,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body {
  background: #181b21 !important;
  background-color: #181b21 !important;
  background-image: none !important;
  border-color: var(--mh-card-edge, rgba(255, 255, 255, 0.09)) !important;
}

#view-recruiters.mh-stage3-recruiters .ref-rc-list,
#view-training.mh-stage3-training #training-list,
#view-training.mh-stage3-training .mh-training-list,
#view-applications.mh-stage3-applications .mj-applications-list {
  display: grid;
  gap: 8px !important;
}

#view-recruiters .ref-rc-company-card,
#view-training .ref-rc-company-card:not(.mh-training-card),
#view-recruiters.mh-stage3-recruiters .ref-rc-company-card {
  margin: 0 !important;
  padding: 16px 14px !important;
  gap: 14px !important;
}

/* Training freshness banners: exact Saved card edge on list and detail.
   The 28% gold/--mh-card-edge mix was the 6398c398 assertSavedParity
   failure (`training card` borderTopColor). Do not reintroduce it —
   graphite/gold detail treatment is the #181b21 slab + gold kicker. */
#view-training .mh-catalog-status,
#view-training .mh-catalog-status[data-catalog-freshness="stale"],
#view-training .mh-catalog-status[data-catalog-freshness="snapshot"],
#view-training-detail .mh-catalog-status,
#view-training-detail .mh-catalog-status[data-catalog-freshness="stale"],
#view-training-detail .mh-catalog-status[data-catalog-freshness="snapshot"] {
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-color: var(--mh-card-edge, var(--mh-border-subtle)) !important;
  color: var(--mh-text);
}

#view-training .mh-catalog-status__kicker,
#view-training-detail .mh-catalog-status__kicker {
  color: var(--mh-kicker, var(--mh-accent));
}

/* Recruiter detail: keep hero image as content; flatten letterbox to Saved canvas */
#view-recruiter-detail .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__hero,
#view-recruiter-detail .recruiter-hero[data-hero-fit="contain"],
#view-recruiter-detail .recruiter-hero[data-hero-fill="blur"] {
  background-color: color-mix(in srgb, var(--mh-card-surface, #181b21) 88%, #0c0d0f) !important;
}

#view-recruiter-detail .ref-rc-contact-row,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-row,
html[data-theme="light"] #view-recruiter-detail .ref-rc-contact-row {
  background: color-mix(in srgb, var(--mh-surface-inset) 70%, transparent) !important;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 70%, transparent);
}

/* —— Typography: Saved screen / card titles everywhere —— */
.mj-screen-title,
.mh-page-header__title,
.mh-type-screen,
#view-jobs .mj-screen-title,
#view-saved .mj-screen-title,
#view-news .mj-screen-title,
#view-career .mj-screen-title,
#view-account .mj-screen-title,
#view-profile .mj-screen-title,
#view-cv-builder .mj-screen-title,
#view-applications .mj-screen-title,
#view-quick-apply .mj-screen-title {
  font-family: var(--mh-font);
  font-size: 1.62rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  color: var(--mh-text) !important;
}

.mj-recruiter-topbar__title,
#view-recruiters .mj-recruiter-topbar__title,
#view-training .mj-recruiter-topbar__title,
#view-medical .mj-recruiter-topbar__title,
#view-recruiter-detail .mj-recruiter-topbar__title,
#view-training-detail .mj-recruiter-topbar__title {
  font-family: var(--mh-font);
  font-size: var(--mh-type-nested, 1.12rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--mh-text) !important;
}

#view-news-detail .mh-news-detail-card__title,
#view-job-detail .job-detail-title-v2,
#view-job-detail .job-card-v2__title,
#view-saved .figma-saved-card__title,
#view-saved .job-card-v2__title,
#view-jobs .job-offer-card__title,
#view-jobs .job-card-v2__title,
#view-news .mh-news-card__title,
#view-career .mj-career-card__title,
#view-applications .mj-application-card__title,
#view-recruiters .ref-rc-company-card__name,
#view-training .ref-rc-company-card__name,
#view-training-detail .mh-training-detail__title,
#view-recruiter-detail .ref-rc-detail__name {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.22 !important;
  color: var(--mh-text) !important;
}

#view-profile .mh-profile-section .mj-section-title,
#view-account .mh-account-section__title {
  font-size: var(--mh-type-section, 1.08rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--mh-text);
}
}

/* —— Search / fields: Jobs search + Saved Daily Alert tokens —— */
#view-recruiters .mj-recruiter-search-wrap,
#view-training .mj-recruiter-search-wrap,
#view-recruiters.mh-stage3-recruiters .mj-recruiter-search-wrap,
#view-training.mh-stage3-training .mj-recruiter-search-wrap {
  min-height: 46px !important;
  padding: 0 8px 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 65%, transparent) !important;
  background: color-mix(in srgb, var(--mh-surface-inset) 55%, transparent) !important;
  box-shadow: none !important;
}

#view-jobs .mj-search-input,
#filter-role-search,
#daily-alert-keywords,
#view-saved .mh-saved-alerts .mh-input,
#view-saved .mh-saved-alerts #daily-alert-keywords,
#view-applications #applications-status-filter,
#view-applications .mj-application-card__actions select,
#view-profile input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
#view-profile select,
#profile-full-name,
#cv-builder-fixture,
#cv-builder-template,
#view-cv-builder select,
#view-cv-builder .mh-select,
#view-cv-builder .mh-input,
#view-cv-builder input[type="text"],
#view-cv-builder input[type="email"],
#view-cv-builder input[type="tel"],
#view-cv-builder input[type="date"],
#recruiters-search,
#training-search,
#view-training .mh-training-filter,
#view-account .mh-account-privacy-input,
[data-account-delete-confirm] {
  min-height: 44px !important;
  height: 44px !important;
  box-sizing: border-box !important;
  border-radius: var(--mh-radius-md) !important;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 80%, transparent) !important;
  background: color-mix(in srgb, var(--mh-surface-inset) 70%, transparent) !important;
  color: var(--mh-input-text) !important;
  padding: 0 12px !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-body) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

/* —— Chips / segments / alpha: Saved gold-rim language —— */
#view-jobs .category-tabs.mj-sector-rail,
#view-jobs .category-tabs-inline.mj-sector-rail,
#view-saved .mh-saved-segments {
  padding: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-surface-inset) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 70%, transparent);
}

#view-jobs .mj-sector-rail .category-tab.is-active,
#view-saved .mh-saved-segment.is-active {
  background: color-mix(in srgb, var(--mh-surface) 92%, transparent);
  color: var(--mh-text);
  font-weight: 750;
  border: 1px solid var(--mh-saved-active-gold-border, color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 18%, transparent));
  box-shadow: var(--mh-depth-2-shadow);
}

.mj-filter-chip,
.mj-recruiter-sector-chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  height: auto !important;
  min-width: 44px;
  padding: 0 10px;
  overflow: visible !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: var(--mh-text-muted) !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-caption) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.mj-filter-chip::after,
.mj-recruiter-sector-chip::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -8px !important;
  bottom: -8px !important;
  width: max(100%, 48px) !important;
  height: auto !important;
  min-height: 48px !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

.mj-filter-chip.is-active,
.mj-recruiter-sector-chip.is-active,
.mj-recruiter-az-letter.is-active,
.mh-provider-az-letter.is-active,
#view-training .mh-provider-az-letter.is-active {
  background: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  color: var(--mh-text) !important;
  font-weight: 750 !important;
  border: 1px solid var(--mh-saved-active-gold-border, color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 18%, transparent)) !important;
  box-shadow: var(--mh-depth-2-shadow) !important;
}

#view-training .mh-provider-az-letter {
  width: auto;
  height: auto;
  font-size: var(--mh-type-caption);
}

/* —— Heart / icon save: Saved 36px pill —— */
#view-jobs .job-offer-card__save,
#view-saved .job-offer-card__save,
#view-saved .figma-saved-card .job-offer-card__save {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--mh-font) !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--mh-text-muted) !important;
}

html[data-theme="light"] #view-job-detail #job-detail-save-btn,
html[data-theme="dark"] #view-job-detail #job-detail-save-btn,
html[data-theme="light"] #view-job-detail #job-detail-save-btn.mh-button--icon,
html[data-theme="dark"] #view-job-detail #job-detail-save-btn.mh-button--icon,
html[data-theme="light"] #view-job-detail .job-detail-dock-btn--icon,
html[data-theme="dark"] #view-job-detail .job-detail-dock-btn--icon,
#view-job-detail #job-detail-save-btn.job-detail-dock-btn.job-detail-dock-btn--icon.mh-button.mh-button--icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* —— True buttons: Saved pill family (beats LinkedIn / row leftovers) —— */
.mh-button,
#daily-alert-save,
#news-detail-source-btn,
#profile-save-btn,
#jobs-load-more,
#recruiters-load-more,
#training-load-more,
#job-detail-apply-btn,
.ref-rc-contact-open,
.ref-rc-contact-copy,
.ref-rc-contact-call,
.ref-rc-detail__action,
.ref-rc-detail__person-email,
.mh-training-detail__action,
.btn-source-link,
.mh-dir-action,
.mj-application-card__open,
.mj-application-card__remove--primary,
.mj-btn-primary,
.mj-btn-secondary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 18px;
  border-radius: 999px !important;
  font-family: var(--mh-font);
  font-size: var(--mh-type-button, 0.92rem);
  font-weight: 750;
  line-height: 1.2;
}

.mh-button--compact,
.mh-button--sm,
.ref-rc-contact-open,
.ref-rc-contact-copy,
.ref-rc-contact-call,
.ref-rc-detail__action,
.ref-rc-detail__person-email,
.mh-training-detail__action,
.btn-source-link,
.mh-dir-action,
.mj-application-card__open,
#jobs-empty-reset,
#news-retry,
#filter-role-done,
#filter-role-reset,
#view-saved .mh-saved-alerts .mh-button--outline,
#view-saved .mh-button--outline {
  min-height: 44px !important;
  padding: 8px 18px;
  font-size: var(--mh-type-button, 0.92rem) !important;
  font-weight: 700 !important;
}

.mh-button--primary,
#daily-alert-save,
#view-saved .mh-saved-alerts #daily-alert-save,
#news-detail-source-btn,
#profile-save-btn,
#job-detail-apply-btn,
.mj-btn-primary,
.btn-account-upgrade {
  min-height: 44px !important;
  background: var(--mh-btn-primary-bg, var(--mh-accent)) !important;
  color: var(--mh-btn-primary-fg, #fff) !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  font-weight: 750 !important;
}

.mh-button--secondary:not(.mh-button--primary),
.mh-button--outline:not(.mh-button--primary),
.mj-btn-secondary:not(.mh-button--primary),
#jobs-empty-reset,
#jobs-api-retry,
#news-retry,
#jobs-load-more,
#recruiters-load-more,
#training-load-more,
.ref-rc-contact-open,
.ref-rc-contact-copy,
.ref-rc-contact-call,
.ref-rc-detail__action,
.ref-rc-detail__person-email,
.mh-training-detail__action,
.btn-source-link,
.mh-dir-action,
.mj-application-card__open,
#view-saved .mh-saved-alerts .mh-button--outline,
#view-saved .mh-button--outline {
  background: transparent !important;
  color: var(--mh-btn-secondary-fg, var(--mh-text)) !important;
  border: 1.5px solid var(--mh-btn-secondary-border, color-mix(in srgb, var(--mh-text) 22%, var(--mh-border-subtle))) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.ref-rc-contact-copy.is-copied,
.mh-button.is-copied {
  background: var(--mh-btn-success-bg, #d1fadf) !important;
  color: var(--mh-btn-success-fg, #037a48) !important;
  border-color: var(--mh-btn-success-border, transparent) !important;
}

.mh-button--danger:not(.mh-button--outline),
[data-account-delete-confirm-go] {
  background: var(--mh-btn-danger-bg, var(--mh-danger)) !important;
  color: var(--mh-btn-danger-fg, #fff) !important;
  border-color: var(--mh-btn-danger-bg, var(--mh-danger)) !important;
}

.mj-application-card__remove:not(.mj-application-card__remove--primary) {
  background: transparent !important;
  color: var(--mh-text-muted) !important;
  border: 1.5px solid transparent !important;
  min-height: 44px;
  border-radius: 999px !important;
  font-weight: 750;
}

/* Kill leftover LinkedIn blues on contact chrome */
.ref-rc-contact-open,
.ref-rc-contact-copy,
.ref-rc-contact-call,
.ref-rc-detail__action-icon,
.ref-rc-contact-row__icon,
.ref-rc-directory__filter-btn {
  --jobs-primary: var(--mh-accent);
}

.ref-rc-directory__filter-btn,
.ref-rc-directory__sheet-apply {
  background: transparent !important;
  color: var(--mh-accent) !important;
  border: 1.5px solid color-mix(in srgb, var(--mh-accent) 35%, var(--mh-border-subtle)) !important;
  border-radius: 999px !important;
  min-height: 44px;
  font-weight: 750;
}

.ref-rc-directory__filter-btn.is-active {
  background: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  border-color: var(--mh-saved-active-gold-border, color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 18%, transparent)) !important;
  color: var(--mh-text) !important;
}

/* Applications status rail: stay semantic, use Saved gold family not LinkedIn blue */
#view-applications .mj-application-card::before {
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--mh-accent) 55%, var(--mh-text-muted));
}

#view-applications .mj-application-card[data-status="applied"]::before,
#view-applications .mj-application-card[data-status="interview"]::before,
#view-applications .mj-application-card[data-status="offer"]::before {
  background: var(--mh-accent);
}

#view-applications .mj-application-card[data-status="rejected"]::before {
  background: var(--mh-danger);
}

#view-applications .mj-application-card[data-status="planned"]::before {
  background: var(--mh-warning);
}

#view-applications .mj-application-card__status-label {
  border-radius: 999px;
  font-size: var(--mh-type-caption);
  font-weight: 750;
  background: color-mix(in srgb, var(--mh-surface-inset) 80%, transparent);
  color: var(--mh-text-secondary);
}

#view-applications .mj-application-card[data-status="applied"] .mj-application-card__status-label,
#view-applications .mj-application-card[data-status="interview"] .mj-application-card__status-label,
#view-applications .mj-application-card[data-status="offer"] .mj-application-card__status-label {
  background: color-mix(in srgb, var(--mh-accent) 16%, transparent);
  color: var(--mh-accent);
}

/* News cards keep Saved radius/surface; 16/14 padding is required so
   the existing -16px/-14px media bleed lands on the card inner edges. */
html[data-theme="light"] #view-news .mh-news-card,
html[data-theme="dark"] #view-news .mh-news-card,
html[data-theme="light"] #view-news .mh-news-card.mh-surface,
html[data-theme="dark"] #view-news .mh-news-card.mh-surface,
html[data-theme="light"] #view-news.mh-stage-news .mh-news-card,
html[data-theme="dark"] #view-news.mh-stage-news .mh-news-card,
html[data-theme="light"] #news-list [data-news-card],
html[data-theme="dark"] #news-list [data-news-card],
html[data-theme="light"] #view-news-detail .mh-news-detail-card,
html[data-theme="dark"] #view-news-detail .mh-news-detail-card,
html[data-theme="light"] #view-news-detail.mh-stage-news-detail .mh-news-detail-card,
html[data-theme="dark"] #view-news-detail.mh-stage-news-detail .mh-news-detail-card {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  background-image: none !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
  padding: 16px 14px !important;
}

html[data-theme="dark"] #view-news .mh-news-card,
html[data-theme="dark"] #view-news .mh-news-card.mh-surface,
html[data-theme="dark"] #view-news.mh-stage-news .mh-news-card,
html[data-theme="dark"] #news-list [data-news-card],
html[data-theme="dark"] #view-news-detail .mh-news-detail-card,
html[data-theme="dark"] #view-news-detail.mh-stage-news-detail .mh-news-detail-card {
  background: #181b21 !important;
  background-color: #181b21 !important;
  border-color: var(--mh-card-edge, rgba(255, 255, 255, 0.09)) !important;
}

#view-news .mh-news-card__media,
#view-news-detail .mh-news-detail-card__media {
  border-radius: 14px 14px 0 0;
}

/* Focus / press / reduced motion */
.mh-button:focus-visible,
.ref-rc-contact-open:focus-visible,
.ref-rc-contact-copy:focus-visible,
.ref-rc-contact-call:focus-visible,
.mj-filter-chip:focus-visible,
.mh-saved-segment:focus-visible,
.category-tab:focus-visible {
  outline: 2px solid var(--mh-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mh-button,
  .mj-filter-chip,
  .mj-career-card,
  .mh-news-card,
  .ref-rc-company-card,
  .mj-application-card {
    transition: none;
  }
}

/* Beat directory-family / #498 flatteners that use html[data-theme] + article. */
html[data-theme="light"] #view-training-detail article.mh-training-detail,
html[data-theme="dark"] #view-training-detail article.mh-training-detail,
html[data-theme="light"] #view-training-detail .mh-training-detail,
html[data-theme="dark"] #view-training-detail .mh-training-detail,
html[data-theme="light"] #view-training-detail .directory-detail-card,
html[data-theme="dark"] #view-training-detail .directory-detail-card,
#view-training-detail.mh-stage3-training-detail article.mh-training-detail,
#view-training-detail.mh-stage3-training-detail .mh-training-detail,
html[data-theme="light"] #view-training .mh-catalog-status,
html[data-theme="dark"] #view-training .mh-catalog-status,
html[data-theme="light"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="light"] #view-applications.mh-stage3-applications .mj-application-card,
html[data-theme="dark"] #view-applications.mh-stage3-applications .mj-application-card,
html[data-theme="light"] #view-profile.mh-stage3-profile .mh-profile-card,
html[data-theme="dark"] #view-profile.mh-stage3-profile .mh-profile-card {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
}

html[data-theme="light"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body {
  padding: 0 !important;
  gap: 0 !important;
}

html[data-theme="dark"] #view-training-detail article.mh-training-detail,
html[data-theme="dark"] #view-training-detail .mh-training-detail,
html[data-theme="dark"] #view-training .mh-catalog-status,
html[data-theme="dark"] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="dark"] #view-applications.mh-stage3-applications .mj-application-card,
html[data-theme="dark"] #view-profile.mh-stage3-profile .mh-profile-card {
  background: #181b21 !important;
  background-color: #181b21 !important;
}

html[data-theme="light"] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card.mh-dir-row,
html[data-theme="dark"] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card.mh-dir-row,
html[data-theme="light"] #view-training.mh-stage3-training button.mh-training-card.directory-card,
html[data-theme="dark"] #view-training.mh-stage3-training button.mh-training-card.directory-card,
#view-training.mh-stage3-training #training-list button.mh-training-card.ref-rc-company-card {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
}

html[data-theme="dark"] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card.mh-dir-row,
html[data-theme="dark"] #view-training.mh-stage3-training button.mh-training-card.directory-card,
html[data-theme="dark"] #view-training.mh-stage3-training #training-list button.mh-training-card.ref-rc-company-card {
  background: #181b21 !important;
  background-color: #181b21 !important;
}

html[data-theme="dark"] #view-news .mh-news-card,
html[data-theme="dark"] #view-news .mh-news-card.mh-surface,
html[data-theme="dark"] #view-news.mh-stage-news .mh-news-card,
html[data-theme="dark"] #view-news.mh-stage-news .mh-news-card.mh-surface,
html[data-theme="dark"] #news-list [data-news-card],
html[data-theme="dark"] #view-news-detail .mh-news-detail-card,
html[data-theme="dark"] #view-news-detail.mh-stage-news-detail .mh-news-detail-card {
  background: #181b21 !important;
  background-color: #181b21 !important;
  border: 1px solid var(--mh-card-edge, rgba(255, 255, 255, 0.09)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
}

html[data-theme="light"] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__block.section.ref-rc-contact-card,
html[data-theme="dark"] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__block.section.ref-rc-contact-card,
html[data-theme="light"] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme="dark"] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-contact-card .ref-rc-contact-card__body,
#view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__block.section.ref-rc-contact-card,
#view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-contact-card .ref-rc-contact-card__body {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
}

#view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-contact-card .ref-rc-contact-card__body {
  padding: 0 !important;
  gap: 0 !important;
}

html[data-theme="dark"] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__block.section.ref-rc-contact-card,
html[data-theme="dark"] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-contact-card .ref-rc-contact-card__body {
  background: #181b21 !important;
  background-color: #181b21 !important;
}

/* Last-load paired fields/chips: beat Stage 2 html[data-theme] !important. */
html[data-theme="light"] #view-jobs .mj-search-input,
html[data-theme="dark"] #view-jobs .mj-search-input,
html[data-theme="light"] #view-jobs .mj-search-input:focus,
html[data-theme="dark"] #view-jobs .mj-search-input:focus,
html[data-theme="light"] #filter-role-search,
html[data-theme="dark"] #filter-role-search,
html[data-theme="light"] #view-saved .mh-saved-alerts #daily-alert-keywords,
html[data-theme="dark"] #view-saved .mh-saved-alerts #daily-alert-keywords,
html[data-theme="light"] #daily-alert-keywords,
html[data-theme="dark"] #daily-alert-keywords,
html[data-theme="light"] #profile-full-name,
html[data-theme="dark"] #profile-full-name,
html[data-theme="light"] #applications-status-filter,
html[data-theme="dark"] #applications-status-filter,
html[data-theme="light"] #cv-builder-fixture,
html[data-theme="dark"] #cv-builder-fixture,
html[data-theme="light"] #cv-builder-template,
html[data-theme="dark"] #cv-builder-template,
html[data-theme="light"] #view-cv-builder select,
html[data-theme="dark"] #view-cv-builder select,
html[data-theme="light"] #view-cv-builder .mh-select,
html[data-theme="dark"] #view-cv-builder .mh-select,
html[data-theme="light"] #view-cv-builder .mh-input,
html[data-theme="dark"] #view-cv-builder .mh-input,
html[data-theme="light"] #recruiters-search,
html[data-theme="dark"] #recruiters-search,
html[data-theme="light"] #training-search,
html[data-theme="dark"] #training-search,
html[data-theme="light"] [data-account-delete-confirm],
html[data-theme="dark"] [data-account-delete-confirm] {
  min-height: 44px !important;
  height: 44px !important;
  box-sizing: border-box !important;
  border-radius: var(--mh-radius-md) !important;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 80%, transparent) !important;
  background: color-mix(in srgb, var(--mh-surface-inset) 70%, transparent) !important;
  background-color: color-mix(in srgb, var(--mh-surface-inset) 70%, transparent) !important;
  color: var(--mh-input-text) !important;
  padding: 0 12px !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-body) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.mj-app #view-applications .mj-application-card__open,
html[data-theme="dark"] body.mj-app #view-applications .mj-application-card__open,
html[data-theme="light"] body.mj-app #view-saved .mh-saved-alerts .mh-button--outline,
html[data-theme="dark"] body.mj-app #view-saved .mh-saved-alerts .mh-button--outline,
html[data-theme="light"] body.mj-app #view-recruiter-detail .ref-rc-contact-open,
html[data-theme="dark"] body.mj-app #view-recruiter-detail .ref-rc-contact-open,
html[data-theme="light"] body.mj-app #view-recruiter-detail .ref-rc-contact-copy,
html[data-theme="dark"] body.mj-app #view-recruiter-detail .ref-rc-contact-copy,
html[data-theme="light"] body.mj-app #view-recruiter-detail [data-action-kind="email"],
html[data-theme="dark"] body.mj-app #view-recruiter-detail [data-action-kind="email"],
html[data-theme="light"] body.mj-app #view-training-detail .mh-training-detail__action,
html[data-theme="dark"] body.mj-app #view-training-detail .mh-training-detail__action,
html[data-theme="light"] body.mj-app #jobs-empty-reset,
html[data-theme="dark"] body.mj-app #jobs-empty-reset,
html[data-theme="light"] body.mj-app #news-retry,
html[data-theme="dark"] body.mj-app #news-retry,
html[data-theme="light"] body.mj-app #view-saved .mh-button--outline,
html[data-theme="dark"] body.mj-app #view-saved .mh-button--outline {
  min-height: 44px !important;
  font-size: var(--mh-type-button, 0.92rem) !important;
  font-weight: 700 !important;
  font-family: var(--mh-font) !important;
  padding: 8px 18px !important;
  color: var(--mh-btn-secondary-fg, var(--mh-text)) !important;
  background: transparent !important;
  border: 1.5px solid var(--mh-btn-secondary-border, color-mix(in srgb, var(--mh-text) 22%, var(--mh-border-subtle))) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.mj-app #view-quick-apply .mh-qa-card,
html[data-theme="dark"] body.mj-app #view-quick-apply .mh-qa-card,
html[data-theme="light"] body.mj-app #view-jobs #jobs-empty,
html[data-theme="dark"] body.mj-app #view-jobs #jobs-empty,
html[data-theme="light"] body.mj-app #view-jobs #jobs-api-fallback,
html[data-theme="dark"] body.mj-app #view-jobs #jobs-api-fallback,
html[data-theme="light"] body.mj-app #view-jobs #jobs-loading,
html[data-theme="dark"] body.mj-app #view-jobs #jobs-loading,
html[data-theme="light"] body.mj-app #view-saved #saved-empty,
html[data-theme="dark"] body.mj-app #view-saved #saved-empty,
html[data-theme="light"] body.mj-app #view-news #news-empty,
html[data-theme="dark"] body.mj-app #view-news #news-empty,
html[data-theme="light"] body.mj-app #view-news #news-loading,
html[data-theme="dark"] body.mj-app #view-news #news-loading,
html[data-theme="light"] body.mj-app #view-news #news-error,
html[data-theme="dark"] body.mj-app #view-news #news-error,
html[data-theme="light"] body.mj-app #view-applications #applications-empty,
html[data-theme="dark"] body.mj-app #view-applications #applications-empty {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
  padding: 16px 14px !important;
  gap: 8px !important;
}

html[data-theme] #view-jobs #jobs-empty {
  padding: 6px 14px !important;
  gap: 4px !important;
}

html[data-theme] #view-jobs #jobs-empty .mj-empty-title,
html[data-theme] #view-jobs #jobs-empty .mh-empty__title,
html[data-theme] #view-jobs #jobs-empty .mh-empty__text,
html[data-theme] #view-jobs #jobs-empty .muted {
  margin: 0 !important;
}

html[data-theme="light"] body.mj-app #view-medical #medical-unavailable,
html[data-theme="dark"] body.mj-app #view-medical #medical-unavailable {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
  padding: 16px 14px !important;
  gap: 10px !important;
}

html[data-theme="dark"] body.mj-app #view-quick-apply .mh-qa-card,
html[data-theme="dark"] body.mj-app #view-jobs #jobs-empty,
html[data-theme="dark"] body.mj-app #view-jobs #jobs-api-fallback,
html[data-theme="dark"] body.mj-app #view-jobs #jobs-loading,
html[data-theme="dark"] body.mj-app #view-saved #saved-empty,
html[data-theme="dark"] body.mj-app #view-news #news-empty,
html[data-theme="dark"] body.mj-app #view-news #news-loading,
html[data-theme="dark"] body.mj-app #view-news #news-error,
html[data-theme="dark"] body.mj-app #view-applications #applications-empty,
html[data-theme="dark"] body.mj-app #view-medical #medical-unavailable {
  background: #181b21 !important;
  background-color: #181b21 !important;
}

html[data-theme="light"] body.mj-app #view-jobs button.mj-filter-chip,
html[data-theme="dark"] body.mj-app #view-jobs button.mj-filter-chip {
  min-height: 44px !important;
  height: 44px !important;
}

html[data-theme="light"] body.mj-app #view-saved button.mh-saved-segment,
html[data-theme="dark"] body.mj-app #view-saved button.mh-saved-segment {
  min-height: 34px !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  color: var(--mh-text-muted) !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-caption) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.mj-app #view-jobs button.mj-filter-chip.is-active,
html[data-theme="dark"] body.mj-app #view-jobs button.mj-filter-chip.is-active,
html[data-theme="light"] body.mj-app #view-saved button.mh-saved-segment.is-active,
html[data-theme="dark"] body.mj-app #view-saved button.mh-saved-segment.is-active,
html[data-theme="light"] body.mj-app #view-recruiters .mj-recruiter-az-letter.is-active,
html[data-theme="dark"] body.mj-app #view-recruiters .mj-recruiter-az-letter.is-active,
html[data-theme="light"] body.mj-app #view-recruiters .mh-provider-az-letter.is-active,
html[data-theme="dark"] body.mj-app #view-recruiters .mh-provider-az-letter.is-active,
html[data-theme="light"] body.mj-app #view-training .mh-provider-az-letter.is-active,
html[data-theme="dark"] body.mj-app #view-training .mh-provider-az-letter.is-active {
  background-color: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  color: var(--mh-text) !important;
  font-weight: 750 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 18%, transparent) !important;
  box-shadow: var(--mh-depth-2-shadow) !important;
}

@media (max-width: 320px) {
  .mj-screen-title,
  .mh-page-header__title,
  .mj-recruiter-topbar__title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .mh-button,
  .ref-rc-contact-open,
  .ref-rc-contact-copy,
  .mj-application-card__open {
    max-width: 100%;
  }
}

/* Last-load News gutter: Stage 2 media uses margin:-16px -14px. */
html[data-theme] #view-news .mh-news-card,
html[data-theme] #view-news .mh-news-card.mh-surface,
html[data-theme] #view-news.mh-stage-news .mh-news-card,
html[data-theme] #news-list [data-news-card],
html[data-theme] #view-news-detail .mh-news-detail-card,
html[data-theme] #view-news-detail.mh-stage-news-detail .mh-news-detail-card {
  padding: 16px 14px !important;
}

/* Account privacy keeps Saved surface plus its own content inset so
   export/delete/confirm actions stay above the fixed bottom nav. */
html[data-theme] #view-account .mh-account-privacy-card,
html[data-theme] #view-account.mh-stage3-account .mh-account-privacy-card {
  padding: 16px !important;
  gap: 10px !important;
}

html[data-theme] #view-account [data-account-privacy-confirm],
html[data-theme] #view-account .mh-account-privacy-confirm,
html[data-theme] #view-account.mh-stage3-account .mh-account-privacy-confirm {
  padding: 12px !important;
  gap: 10px !important;
}

html[data-theme] #view-training-detail article.mh-training-detail,
html[data-theme] #view-training-detail .mh-training-detail,
html[data-theme] #view-training-detail .directory-detail-card,
html[data-theme] #view-training-detail.mh-stage3-training-detail article.mh-training-detail,
html[data-theme] #view-training-detail.mh-stage3-training-detail .mh-training-detail,
html[data-theme] #view-training-detail.mh-stage3-training-detail .mh-training-detail__canvas {
  padding: 0 !important;
  gap: 0 !important;
}

/* Content inset: Saved inner open-control is 16/16/14/16. Non-heart
   cards use the News/Saved-derived 16×14 slab so text never sits on the rim.
   News media bleed stays 16/14 only. */
html[data-theme] #view-applications .mj-application-card,
html[data-theme] #view-applications.mh-stage3-applications .mj-application-card,
html[data-theme] #view-applications.mh-stage3-applications .mj-applications-list .mj-application-card,
html[data-theme] #view-profile .mh-profile-card,
html[data-theme] #view-profile.mh-stage3-profile .mh-profile-card,
html[data-theme] #view-training .mh-catalog-status,
html[data-theme] #view-training-detail .mh-catalog-status,
html[data-theme] #view-recruiter-detail .ref-rc-contact-card,
html[data-theme] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__block.section.ref-rc-contact-card,
html[data-theme] #view-cv-builder #cv-builder-start,
html[data-theme] #view-cv-builder .mh-cv-builder-start {
  padding: 16px 14px !important;
  gap: 8px !important;
}

html[data-theme] #view-training .mh-training-card,
html[data-theme] #view-training #training-list .mh-training-card,
html[data-theme] #view-training button.mh-training-card,
html[data-theme] #view-training.mh-stage3-training .mh-training-card,
html[data-theme] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card.mh-dir-row,
html[data-theme] #view-training.mh-stage3-training button.mh-training-card.directory-card.mh-dir-row,
html[data-theme] #view-training.mh-stage3-training #training-list button.mh-training-card.ref-rc-company-card.mh-dir-row.directory-card {
  padding: 16px 14px !important;
  gap: 12px !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-contact-card .ref-rc-contact-card__body,
html[data-theme] #view-recruiter-detail.mh-stage3-company .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-contact-card .ref-rc-contact-card__body {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-contact-row {
  padding: 10px 12px !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-contact-row__icon,
html[data-theme] #view-recruiter-detail .ref-rc-contact-row__icon svg,
html[data-theme] #view-recruiter-detail .ref-rc-detail__action-icon,
html[data-theme] #view-recruiter-detail .ref-rc-detail__action-icon svg {
  color: var(--mh-gold, var(--mh-accent)) !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-contact-row__icon--website svg,
html[data-theme] #view-recruiter-detail .ref-rc-contact-row__icon--phone svg,
html[data-theme] #view-recruiter-detail .ref-rc-detail__action-icon svg {
  fill: none !important;
  stroke: currentColor !important;
}

/* Applications action row: 390px two-column grid clipped "To apply" → "To ap"
   between 44px Open vacancy / Remove. Stack so the selected label is fully
   painted. Inset 16×14 and 44px targets stay. */
html[data-theme] #view-applications .mj-application-card__actions,
html[data-theme] #view-applications.mh-stage3-applications .mj-application-card__actions,
html[data-theme] #view-applications.mh-stage3-applications .mj-applications-list .mj-application-card__actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

html[data-theme] #view-applications .mj-application-card__move,
html[data-theme] #view-applications.mh-stage3-applications .mj-application-card__move {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
}

html[data-theme] #view-applications .mj-application-card__status,
html[data-theme] #view-applications.mh-stage3-applications .mj-application-card__status,
html[data-theme] #view-applications.mh-stage3-applications .mj-applications-list .mj-application-card__actions select,
html[data-theme] #view-applications .mj-application-card__actions select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
}

html[data-theme] #view-applications .mj-application-card__links,
html[data-theme] #view-applications.mh-stage3-applications .mj-application-card__links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* —— #736 iPhone residual pass (2026-09-01 live TEST) ——
   Last-load. Beats the earlier padding:0 / gap:0 flatteners that made
   Account / Career / Medical look flush on real Telegram WKWebView. */

/* 1. Jobs search: one custom glyph, stable left inset, no native collision */
html[data-theme] #view-jobs .mj-search-wrap {
  position: relative;
}

html[data-theme] #view-jobs .mj-search-wrap__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 18px;
  height: 18px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--mh-text-muted);
}

html[data-theme] #view-jobs .mj-search-wrap__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

html[data-theme] #view-jobs .mj-search-input,
html[data-theme="light"] #view-jobs .mj-search-input,
html[data-theme="dark"] #view-jobs .mj-search-input,
html[data-theme] #view-jobs .mj-search-input:focus,
html[data-theme="light"] #view-jobs .mj-search-input:focus,
html[data-theme="dark"] #view-jobs .mj-search-input:focus,
html[data-theme] #view-jobs #demo-search {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  padding: 0 40px 0 46px !important;
  min-height: 44px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] #view-jobs .mj-search-input::placeholder,
html[data-theme] #view-jobs #demo-search::placeholder {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] #view-jobs .mj-search-input::-webkit-search-decoration,
html[data-theme] #view-jobs .mj-search-input::-webkit-search-cancel-button,
html[data-theme] #view-jobs .mj-search-input::-webkit-search-results-button,
html[data-theme] #view-jobs .mj-search-input::-webkit-search-results-decoration,
html[data-theme] #view-jobs #demo-search::-webkit-search-decoration,
html[data-theme] #view-jobs #demo-search::-webkit-search-cancel-button,
html[data-theme] #view-jobs #demo-search::-webkit-search-results-button,
html[data-theme] #view-jobs #demo-search::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 2. Role picker: visible roles, chevron affordance, no clipped wrap gaps */
html[data-theme] #view-jobs .mj-role-group,
html[data-theme] #view-jobs .mj-role-group__options {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

html[data-theme] #view-jobs .mj-role-selector {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-theme] #view-jobs .mj-role-group__label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
}

html[data-theme] #view-jobs .mj-role-group__label::after {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(225deg);
  color: var(--mh-text-muted);
}

html[data-theme] #view-jobs .mj-role-group.is-collapsed .mj-role-group__label::after {
  transform: rotate(45deg);
}

html[data-theme] #view-jobs .mj-role-group__options,
html[data-theme] #view-jobs .mj-role-search-results {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px !important;
  min-height: 0;
}

html[data-theme] #view-jobs .mj-role-group.is-collapsed .mj-role-group__options {
  display: none !important;
}

/* Role options share .mh-saved-segment for inventory, but must NOT inherit
   the Saved Jobs | Alerts flex: 1 1 0 equal-column rail. Wrap by words;
   longer roles may take a full row. */
html[data-theme] #view-jobs .mj-role-option,
html[data-theme] #view-jobs .mj-role-option.mh-saved-segment,
html[data-theme] #view-jobs .mj-role-option--search-hit,
html[data-theme] #view-jobs .mj-role-option--all {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  flex-basis: auto !important;
  width: max-content !important;
  min-width: min(100%, 7.5rem) !important;
  min-inline-size: min(100%, 7.5rem) !important;
  max-width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 6px 12px !important;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 80%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--mh-surface) 88%, transparent) !important;
  color: var(--mh-text) !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none;
}

html[data-theme] #view-jobs .mj-role-option__label {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

html[data-theme] #view-jobs .mj-role-option--all {
  width: 100% !important;
  max-width: 100% !important;
}

html[data-theme] #view-jobs .mj-role-option.is-selected {
  border-color: color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 40%, var(--mh-border-subtle)) !important;
  background: color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 16%, var(--mh-surface)) !important;
  color: var(--mh-text) !important;
  font-weight: 750 !important;
}

html[data-theme] #view-jobs .mj-role-search-results {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  touch-action: pan-y;
}

html[data-theme] #view-jobs .mj-role-option--search-hit {
  touch-action: pan-y;
}

html[data-theme] #view-jobs .mj-role-search-results[hidden] {
  display: none !important;
}

/* 3–4. Account cards: Saved 16×14 inset + avatar/text gap */
html[data-theme] #view-account .mj-premium-card,
html[data-theme] #view-account.mh-stage3-account .mj-premium-card,
html[data-theme] #view-account #account-entitlement-card,
html[data-theme] #view-account #account-referral-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 14px !important;
  gap: 8px !important;
}

html[data-theme] #view-account .mj-account-profile,
html[data-theme] #view-account.mh-stage3-account .mj-account-profile {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  padding: 16px 14px !important;
  gap: 14px !important;
}

html[data-theme] #view-account .mj-account-avatar {
  margin: 0 !important;
}

html[data-theme] #view-account .mj-settings-list,
html[data-theme] #view-account.mh-stage3-account .mj-settings-list {
  padding: 16px 14px !important;
  gap: 10px !important;
}

html[data-theme] #view-account .mj-settings-row {
  margin: 0 !important;
  padding: 10px 0 !important;
}

/* 5. Career hub tools: card rhythm + icon-to-copy inset */
html[data-theme] #view-career .mh-career-tools,
html[data-theme] #view-career.mh-stage3-career .mh-career-tools {
  display: grid !important;
  gap: 10px !important;
}

html[data-theme] #view-career .mj-career-card,
html[data-theme] #view-career .mj-career-card[data-career-tool="recruiters"],
html[data-theme] #view-career .mj-career-card[data-career-tool="profile"],
html[data-theme] #view-career .mj-career-card[data-career-tool="cv-builder"],
html[data-theme] #view-career .mj-career-card[data-career-tool="applications"],
html[data-theme] #view-career .mj-career-card[data-career-tool="training"],
html[data-theme] #view-career .mj-career-card[data-career-tool="medical"],
html[data-theme] #view-career.mh-stage3-career .mj-career-card {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  padding: 16px 14px !important;
  gap: 12px !important;
  margin: 0 !important;
}

html[data-theme] #view-career .mj-career-card[data-career-tool="vessels"][hidden] {
  display: none !important;
}

html[data-theme] #view-career .mh-career-tool__icon {
  margin: 0 !important;
  flex-shrink: 0;
}

html[data-theme] #view-career,
html[data-theme] #view-career.mh-stage3-career {
  padding-bottom: 24px !important;
}

/* 6. Medical / coming-soon: stacked Saved card, not 2-col */
html[data-theme] #view-career .career-tool-card,
html[data-theme] #view-career .career-tool-card.figma-tool-card,
html[data-theme] #view-career .mh-coming-soon-card,
html[data-theme] #view-career.mh-stage3-career .career-tool-card,
html[data-theme] #view-career.mh-stage3-career .career-tool-card.figma-tool-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  padding: 16px 14px !important;
  text-align: left !important;
  opacity: 1 !important;
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
}

html[data-theme="dark"] #view-career .career-tool-card,
html[data-theme="dark"] #view-career .mh-coming-soon-card,
html[data-theme="dark"] #view-career.mh-stage3-career .career-tool-card {
  background: #181b21 !important;
  background-color: #181b21 !important;
}

html[data-theme] #view-career .mh-coming-soon-card__copy,
html[data-theme] #view-career .career-tool-card .mh-coming-soon-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

html[data-theme] #view-career .career-tool-status--soon,
html[data-theme] #view-career .mh-coming-soon-card__kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 14%, var(--mh-surface-inset));
  color: var(--mh-text-secondary);
  font-size: var(--mh-type-caption);
  font-weight: 700;
  width: auto;
  max-width: 100%;
}

html[data-theme] #view-medical #medical-unavailable,
html[data-theme] body.mj-app #view-medical #medical-unavailable,
html[data-theme] #view-medical .mh-coming-soon-card,
html[data-theme="light"] body.mj-app #view-medical #medical-unavailable,
html[data-theme="dark"] body.mj-app #view-medical #medical-unavailable {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  text-align: left !important;
  padding: 16px 14px !important;
  gap: 10px !important;
}

html[data-theme] #view-medical #medical-unavailable .mh-empty__title,
html[data-theme] #view-medical #medical-unavailable .mh-coming-soon-card__kicker {
  margin: 0;
}

html[data-theme] #view-medical #medical-unavailable .mh-empty__text,
html[data-theme] #view-medical #medical-unavailable #medical-disclaimer {
  margin: 0;
  max-width: none;
}

html[data-theme] #view-medical .mj-recruiter-lead {
  display: none;
}

/* —— Owner final design contract: one Saved segment primitive ——
   Jobs sector rail now uses the same .mh-saved-segments / .mh-saved-segment
   class contract as Saved Jobs | Alerts. Last-load beats Jobs lookalike
   chrome (white pill, no gold rim, 3px track padding). */
html[data-theme] .mh-saved-segments,
html[data-theme] #view-saved .mh-saved-segments,
html[data-theme] #view-jobs .mj-sector-rail.mh-saved-segments,
html[data-theme] #view-jobs .category-tabs.mj-sector-rail.mh-saved-segments,
html[data-theme] #view-jobs .category-tabs-inline.mj-sector-rail.mh-saved-segments,
html[data-theme="light"] #view-jobs .category-tabs.mj-sector-rail.mh-saved-segments,
html[data-theme="dark"] #view-jobs .category-tabs.mj-sector-rail.mh-saved-segments,
html[data-theme="light"] #view-jobs .category-tabs-inline.mj-sector-rail.mh-saved-segments,
html[data-theme="dark"] #view-jobs .category-tabs-inline.mj-sector-rail.mh-saved-segments {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  align-items: stretch;
  gap: 2px !important;
  padding: 2px !important;
  min-height: 0;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--mh-surface-inset) 88%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 70%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme] .mh-saved-segment,
html[data-theme] #view-saved .mh-saved-segment {
  position: relative !important;
  min-height: 34px !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0;
  padding: 0 8px !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mh-text-muted) !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-caption) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  overflow-wrap: anywhere;
}

html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment,
html[data-theme] #view-jobs .mj-sector-rail .category-tab.mh-saved-segment,
html[data-theme="light"] #view-jobs .mj-sector-rail .category-tab,
html[data-theme="dark"] #view-jobs .mj-sector-rail .category-tab,
html[data-theme="light"] body.mj-app #view-jobs .mj-sector-rail .mh-saved-segment,
html[data-theme="dark"] body.mj-app #view-jobs .mj-sector-rail .mh-saved-segment {
  position: relative !important;
  min-height: 44px !important;
  height: 44px !important;
  overflow: visible !important;
  margin: 0;
  padding: 0 8px !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mh-text-muted) !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-caption) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  overflow-wrap: normal;
}

/* Last-load: role pills must not inherit overflow-wrap:anywhere (1ch columns). */
html[data-theme] #view-jobs .mj-role-option,
html[data-theme] #view-jobs .mj-role-option.mh-saved-segment,
html[data-theme] #view-jobs .mj-role-option--search-hit,
html[data-theme] #view-jobs .mj-role-option--all {
  flex: 0 1 auto !important;
  min-width: min(100%, 7.5rem) !important;
  min-inline-size: min(100%, 7.5rem) !important;
  width: max-content !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

html[data-theme] #view-jobs .mj-role-option--all {
  width: 100% !important;
  max-width: 100% !important;
}

html[data-theme] .mh-saved-segment.is-active,
html[data-theme] #view-saved .mh-saved-segment.is-active,
html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment.is-active,
html[data-theme] #view-jobs .mj-sector-rail .category-tab.mh-saved-segment.is-active,
html[data-theme="light"] #view-jobs .mj-sector-rail .category-tab.is-active,
html[data-theme="dark"] #view-jobs .mj-sector-rail .category-tab.is-active,
html[data-theme="light"] body.mj-app #view-jobs .mj-sector-rail .mh-saved-segment.is-active,
html[data-theme="dark"] body.mj-app #view-jobs .mj-sector-rail .mh-saved-segment.is-active,
html[data-theme="light"] body.mj-app #view-saved button.mh-saved-segment.is-active,
html[data-theme="dark"] body.mj-app #view-saved button.mh-saved-segment.is-active {
  background: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  background-color: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  color: var(--mh-text) !important;
  font-weight: 750 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--mh-saved-active-gold-border, color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 18%, transparent)) !important;
  box-shadow: var(--mh-depth-2-shadow) !important;
}

html[data-theme="dark"] .mh-saved-segment.is-active,
html[data-theme="dark"] #view-saved .mh-saved-segment.is-active,
html[data-theme="dark"] #view-jobs .mj-sector-rail .mh-saved-segment.is-active,
html[data-theme="dark"] #view-jobs .mj-sector-rail .category-tab.is-active,
html[data-theme="dark"] #view-jobs .mj-filter-chips .mh-saved-segment.is-active {
  background: color-mix(in srgb, var(--mh-surface-elevated, var(--mh-surface)) 92%, transparent) !important;
  background-color: color-mix(in srgb, var(--mh-surface-elevated, var(--mh-surface)) 92%, transparent) !important;
}

/* Filter chips, recruiter sectors, and A–Z share the Saved track class;
   wrap at 320 instead of a squeezed column-grid. */
html[data-theme] #view-jobs .mj-filter-chips.mh-saved-segments,
html[data-theme="light"] #view-jobs .mj-filter-chips.mh-saved-segments,
html[data-theme="dark"] #view-jobs .mj-filter-chips.mh-saved-segments,
html[data-theme] #view-recruiters .mj-recruiter-sector-chips.mh-saved-segments {
  display: flex !important;
  flex-wrap: wrap;
  grid-auto-flow: unset;
  grid-auto-columns: unset;
  grid-template-columns: none;
  justify-content: flex-start;
  gap: 6px !important;
  width: auto;
  max-width: 100%;
  padding: 8px 0 !important;
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] #view-jobs .mj-filter-chips .mh-saved-segment,
html[data-theme] #view-jobs .mj-filter-chip.mh-saved-segment,
html[data-theme="light"] body.mj-app #view-jobs .mj-filter-chip.mh-saved-segment,
html[data-theme="dark"] body.mj-app #view-jobs .mj-filter-chip.mh-saved-segment,
html[data-theme] #view-recruiters .mj-recruiter-sector-chip.mh-saved-segment {
  flex: 0 0 auto;
  min-width: 44px;
  width: auto;
}

html[data-theme] #view-jobs .mj-filter-chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  height: 44px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  border-width: 0 !important;
  border-style: none !important;
  background: transparent !important;
  color: var(--mh-text-muted) !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-caption) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

html[data-theme] #view-recruiters .mj-recruiter-sector-chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  height: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  border-width: 0 !important;
  border-style: none !important;
  background: transparent !important;
  color: var(--mh-text-muted) !important;
  font-family: var(--mh-font) !important;
  font-size: var(--mh-type-caption) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

html[data-theme] #view-jobs .mj-filter-chip::after,
html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment::after,
html[data-theme] #view-recruiters .mj-recruiter-sector-chip::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -8px !important;
  bottom: -8px !important;
  width: max(100%, 48px) !important;
  height: auto !important;
  min-height: 48px !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

html[data-theme] #view-jobs .mj-filter-chip.is-active,
html[data-theme] #view-jobs .mj-filter-chips .mh-saved-segment.is-active,
html[data-theme] #view-jobs .mj-filter-chip.mh-saved-segment.is-active,
html[data-theme] #view-recruiters .mj-recruiter-sector-chip.is-active,
html[data-theme] #view-recruiters .mj-recruiter-az-letter.is-active,
html[data-theme] #view-training .mh-provider-az-letter.is-active,
html[data-theme] .mh-saved-segment.is-selected,
html[data-theme] #view-jobs .mj-role-option.mh-saved-segment.is-selected {
  background: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  background-color: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  color: var(--mh-text) !important;
  font-weight: 750 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--mh-saved-active-gold-border, color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 18%, transparent)) !important;
  box-shadow: var(--mh-depth-2-shadow) !important;
}

/* Job/News labeled Backs keep #702/#705 chrome after joining mh-button.
   Never strip these to border-color:transparent / box-shadow:none.
   Recruiter icon-only backs stay simpler; they are not the News gold contract. */
html[data-theme] .mj-back-btn.mj-back-btn--control.mh-button,
html[data-theme] .mj-back-btn.mj-back-btn--control.mh-button.mh-button--text,
html[data-theme] #view-job-detail .mj-back-btn.mh-button,
html[data-theme] #view-job-detail .mj-back-btn.mh-button.mh-button--text,
html[data-theme] #view-news-detail .mj-back-btn.mh-button,
html[data-theme] #view-news-detail .mj-back-btn.mh-button.mh-button--text,
html[data-theme] #job-detail-back-btn.mh-button,
html[data-theme] #news-detail-back-btn.mh-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 12px 0 10px !important;
  border-radius: var(--mh-radius-pill) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--mh-border-subtle) 80%, transparent) !important;
  background: color-mix(in srgb, var(--mh-card-surface, var(--mh-surface)) 88%, transparent) !important;
  background-color: color-mix(in srgb, var(--mh-card-surface, var(--mh-surface)) 88%, transparent) !important;
  box-shadow: var(--mh-depth-1-shadow) !important;
  color: var(--mh-text) !important;
}

html[data-theme] #view-news-detail .mj-back-btn.mh-button,
html[data-theme] #view-news-detail .mj-back-btn.mh-button.mh-button--text,
html[data-theme] #view-news-detail .mj-back-btn--control.mh-button,
html[data-theme] #news-detail-back-btn.mh-button,
html[data-theme] #news-detail-back-btn.mh-button.mh-button--text {
  border-color: var(--mh-saved-active-gold-border) !important;
  box-shadow: var(--mh-depth-1-shadow) !important;
}

html[data-theme] .mj-recruiter-back.mh-button:not(.mj-recruiter-back--label) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: var(--mh-text) !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

html[data-theme] .mj-recruiter-back.mj-recruiter-back--label.mh-button,
html[data-theme] .mj-back-btn.mj-back-btn--control.mh-button {
  min-width: 64px !important;
}

/* WebKit guard: keep the source role-panel contract (flex column + static paired actions). */
html[data-theme] #view-jobs .mj-role-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box !important;
  max-height: min(38vh, 240px);
  min-height: 0;
  overflow: hidden !important;
  gap: 6px;
}

html[data-theme] #view-jobs .mj-role-panel[hidden] {
  display: none !important;
}

html[data-theme] #view-jobs .mj-role-panel-actions {
  position: static !important;
  flex: 0 0 auto;
  flex-shrink: 0;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  z-index: auto;
  margin-top: auto;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .app-main:has(#filter-role-panel:not([hidden])) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-theme] #view-jobs .mj-role-panel:not([hidden]) .mj-role-selector {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-theme] #view-jobs .mj-role-panel:not([hidden]) .mj-role-selector.is-searching {
  flex: 0 0 0 !important;
  flex-basis: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

html[data-theme] #view-jobs .mj-role-panel:not([hidden]) .mj-role-search-results {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-theme] #view-jobs .mj-role-panel.is-keyboard-open,
html[data-theme] #view-jobs .mj-role-panel.is-viewport-tight {
  gap: 4px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

html[data-theme] #view-jobs .mj-role-panel.is-keyboard-open .mj-role-panel-status,
html[data-theme] #view-jobs .mj-role-panel.is-viewport-tight .mj-role-panel-status {
  display: none !important;
}

html[data-theme] #view-jobs .mj-role-panel.is-keyboard-open .mj-role-selector:not(.is-searching),
html[data-theme] #view-jobs .mj-role-panel.is-keyboard-open .mj-role-search-results {
  max-height: none;
}

html[data-theme] #view-jobs .mj-role-option--search-hit,
html[data-theme] #view-jobs .mj-role-option--search-hit.mh-pressable,
html[data-theme] #view-jobs .mj-role-search-results [data-role-search-hit] {
  touch-action: pan-y !important;
}

html[data-theme] #view-jobs .mj-role-selected__reset.mh-button,
html[data-theme] #view-jobs button.mj-role-selected__reset.mh-button--outline {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 6px 12px !important;
}

html[data-theme] summary.mh-button,
html[data-theme] summary.mj-section-title.mh-button {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  justify-content: flex-start;
  min-height: 44px !important;
  color: var(--mh-text) !important;
}

html[data-theme] .mh-saved-card:not(.job-offer-card__open),
html[data-theme] .job-offer-card.mh-saved-card,
html[data-theme] .figma-saved-card.mh-saved-card,
html[data-theme] .mj-career-card.mh-saved-card,
html[data-theme] .mh-news-card.mh-saved-card,
html[data-theme] .ref-rc-company-card.mh-saved-card,
html[data-theme] .mh-coming-soon-card.mh-saved-card,
html[data-theme] .home-nav-card.mh-saved-card {
  border-radius: 14px !important;
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--mh-card-edge, var(--mh-border-subtle)) !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
}

/* Directory/career/news cards that stay cards get Saved 16×14 inset.
   Job/Saved list shells keep 0 outer padding; inset lives on the open body. */
html[data-theme] #view-recruiters .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-recruiters.mh-stage3-recruiters .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-recruiters.mh-stage3-recruiters .ref-rc-list .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-training .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-training.mh-stage3-training .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-career .mj-career-card.mh-saved-card,
html[data-theme] #view-career .career-tool-card.mh-saved-card,
html[data-theme] #view-career .figma-tool-card.mh-saved-card,
html[data-theme] #view-news .mh-news-card.mh-saved-card,
html[data-theme] #view-career .mh-coming-soon-card.mh-saved-card,
html[data-theme] #view-medical .mh-coming-soon-card.mh-saved-card,
html[data-theme] .home-nav-card.mh-saved-card {
  padding: 16px 14px !important;
}

html[data-theme] #view-recruiters .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-recruiters.mh-stage3-recruiters .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-recruiters.mh-stage3-recruiters .ref-rc-list .ref-rc-company-card.mh-saved-card,
html[data-theme] #view-training .ref-rc-company-card.mh-saved-card:not(.mh-training-card) {
  gap: 14px !important;
}

html[data-theme] .job-offer-card__open.mh-saved-card {
  /* Inner hit target only. Visual chrome lives on the enclosing card host.
     Compact inset leaves room for the integrated save control. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 12px 44px 12px 14px !important;
  display: block;
  text-align: left;
}

html[data-theme] .demo-sheet-backdrop.mh-button {
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  box-shadow: none !important;
}

/* —— #736 iPhone geometry residual (2026-09-01 00:24 live TEST) ——
   Root cause 1: page headers used an implicit single-column grid and
   CV/Career actions used flex:1 / width:100%, so Saved DNA was read as
   “stretch every action”. Root cause 2: #recruiters-list-view-btn combined
   .mh-button--icon { width:44px } with a “List view” label and
   overflow-wrap:anywhere, forcing a per-character column at 390px.
   Root cause 3: Training detail .mh-catalog-status kept directory-family
   #b45309 brown because last-load graphite only targeted the list banner. */

html[data-theme] .mh-button:not(.mh-button--size-full):not(.mh-button--block):not(.mh-button--icon):not(.demo-sheet-backdrop):not(.mh-vessel-map-open):not(.mh-vessel-map__close):not(#vessel-map-recenter):not(#vessel-map-retry):not(#vessel-map-list-fallback),
html[data-theme] button.mj-btn-primary:not(.mh-button--size-full):not(.mh-button--icon):not(.mh-vessel-map-open),
html[data-theme] button.mj-btn-secondary:not(.mh-button--size-full):not(.mh-button--icon) {
  width: auto !important;
  max-width: 100% !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  justify-self: start !important;
  align-self: start !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
}

html[data-theme] .mh-button--icon {
  width: var(--mh-btn-h, 44px) !important;
  min-width: var(--mh-tap-min, 44px) !important;
  flex: 0 0 auto !important;
}

html[data-theme] .mh-button--size-full,
html[data-theme] .mh-button--block,
html[data-theme] #daily-alert-save,
html[data-theme] #daily-alert-save.mh-button {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  justify-self: stretch !important;
}

html[data-theme] #view-profile .mh-page-header,
html[data-theme] #view-cv-builder .mh-page-header,
html[data-theme] #view-applications .mh-page-header,
html[data-theme] #view-quick-apply .mh-page-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

html[data-theme] #view-cv-builder .mh-cv-builder-actions,
html[data-theme] #view-profile .mh-profile-form-actions,
html[data-theme] .mh-button-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

html[data-theme] #view-cv-builder .mh-cv-builder-actions .mh-button,
html[data-theme] #view-cv-builder .mh-cv-builder-actions button,
html[data-theme] #view-profile .mh-profile-form-actions .mh-button {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* One Saved-derived navigation primitive: content-width capsule, never page-wide. */
html[data-theme] .mh-nav-back.mh-button,
html[data-theme] .mj-back-btn.mh-button,
html[data-theme] .mj-back-btn.mj-back-btn--control.mh-button,
html[data-theme] .mj-recruiter-back.mh-button,
html[data-theme] .mj-recruiter-back.mj-recruiter-back--label.mh-button,
html[data-theme] .mj-recruiter-back.mj-recruiter-back--control.mh-button,
html[data-theme] #view-profile .mj-back-btn.mh-button,
html[data-theme] #view-cv-builder .mj-back-btn.mh-button,
html[data-theme] #view-applications .mj-back-btn.mh-button,
html[data-theme] #view-recruiters .mj-recruiter-back.mh-button,
html[data-theme] #view-training .mj-recruiter-back.mh-button,
html[data-theme] #view-training-detail .mj-recruiter-back.mh-button,
html[data-theme] #view-medical .mj-recruiter-back.mh-button,
html[data-theme] #quick-apply-back-btn.mh-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 6px 10px !important;
  flex: 0 0 auto !important;
  justify-self: start !important;
  align-self: start !important;
  border-radius: var(--mh-radius-pill, 999px) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--mh-border-subtle) 55%, transparent) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--mh-text) !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

html[data-theme] #view-news-detail .mj-back-btn.mh-button,
html[data-theme] #news-detail-back-btn.mh-button {
  border-color: var(--mh-saved-active-gold-border) !important;
}

html[data-theme] .mh-nav-back__chev,
html[data-theme] .mj-back-btn__chev,
html[data-theme] .mj-recruiter-back__chev {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
}

/* Recruiter list header: title + Back + view-mode must fit 320/390.
   List view collapses to a 44px icon-only control; never a glyph column. */
html[data-theme] #view-recruiters .mj-recruiter-topbar,
html[data-theme] #view-recruiters.mh-stage3-recruiters .mj-recruiter-topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-theme] #view-recruiters .mj-recruiter-topbar__titles {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-theme] #view-recruiters .mj-recruiter-topbar__title,
html[data-theme] #view-recruiters.mh-stage3-recruiters .mj-recruiter-topbar__title {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  writing-mode: horizontal-tb !important;
}

html[data-theme] #recruiters-list-view-btn,
html[data-theme] #view-recruiters .mj-recruiter-list-toggle,
html[data-theme] #view-recruiters .mj-recruiter-list-toggle.mh-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  flex: 0 0 44px !important;
  justify-self: end !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
  border-radius: var(--mh-radius-pill, 999px) !important;
}

html[data-theme] #recruiters-list-view-btn .mj-recruiter-list-toggle__label,
html[data-theme] #view-recruiters .mj-recruiter-list-toggle__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Shared directory topbar: keep Back compact; give the nested 1.12rem
   title a real min-width so words like "Certification" wrap to the next
   row instead of splitting mid-word at 320. */
html[data-theme] #view-training .mj-recruiter-topbar,
html[data-theme] #view-training-detail .mj-recruiter-topbar,
html[data-theme] #view-medical .mj-recruiter-topbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px 10px !important;
  min-width: 0 !important;
}

html[data-theme] #view-training .mj-recruiter-topbar__spacer,
html[data-theme] #view-medical .mj-recruiter-topbar__spacer {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
}

html[data-theme] #view-training .mj-recruiter-topbar__titles,
html[data-theme] #view-medical .mj-recruiter-topbar__titles {
  flex: 1 1 auto !important;
  min-width: min(100%, 13ch) !important;
  max-width: 100% !important;
}

html[data-theme] #view-training .mj-recruiter-topbar__title,
html[data-theme] #view-training-detail .mj-recruiter-topbar__title,
html[data-theme] #view-medical .mj-recruiter-topbar__title {
  min-width: min(100%, 13ch) !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

html[data-theme] #view-recruiters .mj-recruiter-topbar__title,
html[data-theme] #view-recruiter-detail .mj-recruiter-topbar__title,
html[data-theme] .mj-screen-title,
html[data-theme] .mh-page-header__title {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Training list + detail freshness: Saved card chrome, no gold/brown edge.
   `#view-training .mh-catalog-status` is the #736 `training card` parity
   target and must compute to the same --mh-card-edge as Saved. */
html[data-theme] #view-training .mh-catalog-status,
html[data-theme] #view-training .mh-catalog-status[data-catalog-freshness="stale"],
html[data-theme] #view-training .mh-catalog-status[data-catalog-freshness="snapshot"],
html[data-theme] #view-training-detail .mh-catalog-status,
html[data-theme] #view-training-detail .mh-catalog-status[data-catalog-freshness="stale"],
html[data-theme] #view-training-detail .mh-catalog-status[data-catalog-freshness="snapshot"] {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  background-color: var(--mh-card-surface, var(--mh-surface)) !important;
  background-image: none !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-color: var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-radius: 14px !important;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight) !important;
  color: var(--mh-text) !important;
}

html[data-theme="dark"] #view-training-detail .mh-catalog-status,
html[data-theme="dark"] #view-training-detail .mh-catalog-status[data-catalog-freshness="stale"],
html[data-theme="dark"] #view-training .mh-catalog-status,
html[data-theme="dark"] #view-training .mh-catalog-status[data-catalog-freshness="stale"] {
  background: #181b21 !important;
  background-color: #181b21 !important;
}

html[data-theme] #view-training .mh-catalog-status__kicker,
html[data-theme] #view-training-detail .mh-catalog-status__kicker {
  color: var(--mh-kicker, var(--mh-accent)) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: var(--mh-type-status, var(--mh-type-label, 0.76rem)) !important;
  font-weight: 700 !important;
}

html[data-theme] #view-training .mh-training-card,
html[data-theme] #view-training #training-list .mh-training-card,
html[data-theme] #view-training button.mh-training-card,
html[data-theme] #view-training.mh-stage3-training .mh-training-card,
html[data-theme] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card,
html[data-theme] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card.mh-dir-row,
html[data-theme] #view-training.mh-stage3-training button.mh-training-card.directory-card,
html[data-theme] #view-training.mh-stage3-training #training-list button.mh-training-card.ref-rc-company-card {
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
  border-color: var(--mh-card-edge, var(--mh-border-subtle)) !important;
}

html[data-theme] #view-training-detail .mh-training-detail__action,
html[data-theme] #view-training-detail a.mh-training-detail__action.mh-button {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: 44px !important;
  border-radius: var(--mh-btn-radius, 999px) !important;
  border: 1.5px solid var(--mh-btn-secondary-border, var(--mh-border-subtle)) !important;
  background: transparent !important;
  color: var(--mh-text) !important;
  font-weight: 700 !important;
}

/* #720 map-unavailable@320: Vessel list / Reset view must shrink inside
   the nowrap action row and stay inside .app-main after scroll-to-end.
   Do not let the #736 no-stretch contract force flex-shrink:0 here. */
@media (max-width: 360px) {
  html[data-theme] #view-vessels[data-vessel-map-open="1"] .mj-recruiter-back.mh-button,
  html[data-theme] #view-vessels[data-vessel-map-open="1"] .mh-nav-back.mh-button {
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 6px 0 0 !important;
    font-size: 0.78rem !important;
  }

  html[data-theme] #vessel-map-open.mh-vessel-map-open,
  html[data-theme] #view-vessels .mh-vessel-map-open.mh-button {
    min-width: 0 !important;
    max-width: 3.6rem !important;
    min-height: 28px !important;
    height: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0.2rem 0.48rem !important;
    font-size: 0.7rem !important;
  }

  html[data-theme] #vessel-map-panel .mh-vessel-map__close.mh-button {
    min-height: 28px !important;
    height: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
  }

  html[data-theme] #vessel-map-panel .mh-vessel-map__actions .mh-button,
  html[data-theme] #vessel-map-recenter.mh-button,
  html[data-theme] #vessel-map-retry.mh-button,
  html[data-theme] #vessel-map-list-fallback.mh-button {
    flex: 1 1 0 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
  }
}

/* —— #736 premium composition contract (2026-09-02) ——
   Source files now own Saved graphite/card rhythm. This last-load block
   only protects WebKit appearance and remaining composition invariants.
   Do not reintroduce padding:0 on content cards or brown/LinkedIn fills. */

html[data-theme] #demo-search,
html[data-theme] #recruiters-search,
html[data-theme] #training-search,
html[data-theme] #filter-role-search,
html[data-theme] #daily-alert-keywords,
html[data-theme] #cv-builder-template,
html[data-theme] #view-cv-builder select,
html[data-theme] #view-cv-builder .mh-select {
  -webkit-appearance: none;
  appearance: none;
}

html[data-theme] #view-jobs .mj-search-wrap__icon,
html[data-theme] #view-recruiters .mj-recruiter-search__icon,
html[data-theme] #view-training .mj-recruiter-search__icon {
  pointer-events: none;
}

html[data-theme] #view-medical .mh-coming-soon-card,
html[data-theme] #medical-unavailable.mh-coming-soon-card,
html[data-theme] #view-medical .mh-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 16px 14px !important;
  grid-template-columns: none !important;
}

html[data-theme] #view-career .mj-career-list {
  display: grid !important;
  gap: 10px !important;
}

html[data-theme] #view-training .mh-catalog-status,
html[data-theme] #view-training-detail .mh-catalog-status {
  padding: 16px 14px !important;
  gap: 8px !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* #736 / #661 / #662 — A–Z is a 44×44 horizontal scroller, not a wrap blob
   and not a sub-44 tap grid. Inset gold ring stays inside the letter so
   overflow-x:auto cannot clip the active state. The product overflow cue
   is the edge fade/chevron (pointer-events:none), not a platform scrollbar. */
html[data-theme] #view-recruiters .mj-recruiter-alpha-row.mh-saved-segments,
html[data-theme] #view-training .mh-provider-alpha-row.mh-saved-segments,
html[data-theme] #view-training .mj-recruiter-alpha-row.mh-saved-segments,
html[data-theme="light"] body.mj-app #view-recruiters .mj-recruiter-alpha-row.mh-saved-segments,
html[data-theme="dark"] body.mj-app #view-recruiters .mj-recruiter-alpha-row.mh-saved-segments,
html[data-theme="light"] body.mj-app #view-training .mh-provider-alpha-row.mh-saved-segments,
html[data-theme="dark"] body.mj-app #view-training .mh-provider-alpha-row.mh-saved-segments {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 36px 6px 8px !important;
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 0 0 6px !important;
  width: 100%;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

html[data-theme] #view-recruiters .mj-recruiter-alpha-row.mh-saved-segments::-webkit-scrollbar,
html[data-theme] #view-training .mh-provider-alpha-row.mh-saved-segments::-webkit-scrollbar,
html[data-theme] #view-training .mj-recruiter-alpha-row.mh-saved-segments::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

html[data-theme] #view-recruiters .mj-recruiter-az-letter.mh-saved-segment,
html[data-theme] #view-training .mh-provider-az-letter.mh-saved-segment,
html[data-theme] #view-training .mj-recruiter-az-letter.mh-saved-segment,
html[data-theme="light"] body.mj-app #view-recruiters .mj-recruiter-az-letter,
html[data-theme="dark"] body.mj-app #view-recruiters .mj-recruiter-az-letter,
html[data-theme="light"] body.mj-app #view-training .mh-provider-az-letter,
html[data-theme="dark"] body.mj-app #view-training .mh-provider-az-letter {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

html[data-theme] #view-recruiters .mj-recruiter-az-letter.is-active,
html[data-theme] #view-training .mh-provider-az-letter.is-active,
html[data-theme] #view-training .mj-recruiter-az-letter.is-active,
html[data-theme="light"] body.mj-app #view-recruiters .mj-recruiter-az-letter.is-active,
html[data-theme="dark"] body.mj-app #view-recruiters .mj-recruiter-az-letter.is-active,
html[data-theme="light"] body.mj-app #view-training .mh-provider-az-letter.is-active,
html[data-theme="dark"] body.mj-app #view-training .mh-provider-az-letter.is-active {
  background: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  color: var(--mh-text) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--mh-saved-active-gold-border, color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 18%, transparent)) !important;
  box-shadow: inset 0 0 0 1.5px var(--mh-saved-active-gold-border, color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 55%, transparent)) !important;
}

html[data-theme] #view-recruiters .mj-az-rail,
html[data-theme] #view-training .mj-az-rail {
  position: relative;
  width: 100%;
  min-width: 0;
}

html[data-theme] #view-recruiters .mj-az-rail__cue,
html[data-theme] #view-training .mj-az-rail__cue {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  min-height: 44px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: none;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--mh-bg, #0c0d0f) 88%, transparent) 72%
  );
}

html[data-theme] #view-recruiters .mj-az-rail[data-az-can-scroll-end="true"] .mj-az-rail__cue,
html[data-theme] #view-training .mj-az-rail[data-az-can-scroll-end="true"] .mj-az-rail__cue {
  opacity: 1;
  visibility: visible;
}

html[data-theme] #view-recruiters .mj-az-rail__cue::after,
html[data-theme] #view-training .mj-az-rail__cue::after {
  content: "›";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: 750;
  line-height: 1;
  color: var(--mh-gold, var(--mh-accent));
}

html[data-theme] #view-recruiters .mj-az-rail.is-at-end .mj-az-rail__cue,
html[data-theme] #view-training .mj-az-rail.is-at-end .mj-az-rail__cue {
  opacity: 0;
  visibility: hidden;
  width: 0;
}

/* Honesty lives in the one catalogue banner, not a second lead paragraph. */
#view-training.mh-stage3-training #training-page-lead {
  display: none;
}

#view-recruiters .mj-recruiter-topbar,
#view-training .mj-recruiter-topbar,
#view-medical .mj-recruiter-topbar {
  margin-bottom: 4px;
}

#view-recruiters .mj-recruiter-lead,
#view-training .mj-recruiter-lead {
  margin: 0 0 6px;
}

html[data-theme] #view-jobs .mj-search-block.jobs-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 0 4px !important;
}

html[data-theme] #view-jobs.mh-stage2-jobs .mj-search-block.jobs-filters {
  gap: 10px !important;
  margin: 0 0 4px !important;
}

html[data-theme] #view-jobs .mj-sector-rail.mh-saved-segments,
html[data-theme] #view-jobs .category-tabs.mj-sector-rail.mh-saved-segments,
html[data-theme] #view-jobs .category-tabs-inline.mj-sector-rail.mh-saved-segments {
  overflow: visible !important;
  isolation: isolate;
}

html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment,
html[data-theme] #view-jobs .mj-sector-rail .category-tab.mh-saved-segment {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  overflow-wrap: normal !important;
  min-width: 44px !important;
  color: var(--mh-text-muted) !important;
}

html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment.is-active,
html[data-theme] #view-jobs .mj-sector-rail .category-tab.mh-saved-segment.is-active,
html[data-theme] #view-jobs .category-tab.is-active {
  color: var(--mh-text) !important;
  min-width: 44px !important;
}

html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment::after {
  display: none !important;
}

html[data-theme] #view-jobs .mj-filter-chips.mh-saved-segments {
  flex-wrap: wrap !important;
  row-gap: 8px !important;
  column-gap: 6px !important;
  padding: 4px 0 !important;
  overflow: visible !important;
  isolation: isolate;
}

html[data-theme] #view-jobs .mj-filter-chip,
html[data-theme] #view-jobs .mj-filter-chip.mh-saved-segment {
  position: relative !important;
  overflow: visible !important;
  z-index: 1;
}

html[data-theme] #view-jobs .mj-filter-role-wrap,
html[data-theme] #view-jobs.mh-stage2-jobs .mj-filter-role-wrap {
  display: block !important;
  margin-top: 2px !important;
  padding-top: 0 !important;
  isolation: isolate;
  position: relative;
  z-index: 0;
}

html[data-theme] #view-profile .mh-profile-card--summary {
  padding: 12px 14px !important;
  margin: 0 0 10px !important;
}

html[data-theme] #view-profile .mh-profile-breakdown {
  margin: 8px 0 0 !important;
  gap: 4px !important;
}

html[data-theme] #view-training-detail .mh-training-detail__identity {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

html[data-theme] #view-training-detail .mh-training-detail__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}

html[data-theme] #view-training-detail .directory-foot {
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

html[data-theme] #view-jobs.mh-stage2-jobs .job-offer-card__open {
  position: relative;
}

html[data-theme] #view-jobs.mh-stage2-jobs .job-offer-card__open::after {
  content: "›";
  position: absolute;
  right: 44px;
  top: 10px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--mh-text-muted);
  pointer-events: none;
}

/* Neutralize leftover vacancy/person button-family stretch. Source owners
   are company-profile-premium.css + recruiter-ref-ui.css. */
html[data-theme] #view-recruiter-detail .ref-rc-detail__vacancies,
html[data-theme] #view-recruiter-detail .ref-rc-detail__vacancies--empty,
html[data-theme] .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__vacancies {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
}

html[data-theme] #view-recruiter-detail p.ref-rc-detail__vacancies,
html[data-theme] #view-recruiter-detail .ref-rc-detail__vacancies--empty,
html[data-theme] .ref-rc-detail[data-company-layout="premium-v1"] p.ref-rc-detail__vacancies,
html[data-theme] .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__vacancies--empty {
  min-height: 28px !important;
  padding: 4px 10px !important;
}

html[data-theme] #view-recruiter-detail button.ref-rc-detail__vacancies,
html[data-theme] #view-recruiter-detail .ref-rc-detail__vacancies[data-view-vacancies],
html[data-theme] .ref-rc-detail[data-company-layout="premium-v1"] button.ref-rc-detail__vacancies,
html[data-theme] .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__vacancies[data-view-vacancies] {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px 12px !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-person-card,
html[data-theme] .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-person-card {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 8px 2px !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-person-card__body {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 120px) !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-person-card__actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  width: auto !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-person-card__action {
  box-sizing: border-box !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-person-card__action::before {
  content: "" !important;
  position: absolute !important;
  width: 36px !important;
  height: 36px !important;
  inset: 4px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

html[data-theme] #view-account .mh-account-privacy-actions,
html[data-theme] #view-account.mh-stage3-account .mh-account-privacy-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

html[data-theme] #view-account .mh-account-privacy-actions .mh-button,
html[data-theme] #view-account [data-account-export].mh-button,
html[data-theme] #view-account [data-account-delete].mh-button,
html[data-theme] #view-account [data-back-to-bot].mh-button {
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  padding: 6px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
}

/* #736 recording pass: English switch, compact Jobs chrome, hide native
   file-picker locale chrome, denser application cards. */
html[data-theme] .mj-alert-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px !important;
}

html[data-theme] .mj-alert-toggle input[type="checkbox"] {
  appearance: none !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--mh-text-muted) 28%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 70%, transparent) !important;
  position: relative !important;
  flex: 0 0 48px !important;
}

html[data-theme] .mj-alert-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f4f4f2;
}

html[data-theme] .mj-alert-toggle input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 72%, #1e2229) !important;
}

html[data-theme] .mj-alert-toggle input[type="checkbox"]:checked::after {
  left: 22px;
}

html[data-theme] #view-jobs .mj-screen-title,
html[data-theme] #view-jobs .mh-page-header__title {
  font-size: 1.18rem !important;
  margin: 0 0 4px !important;
}

html[data-theme] #view-jobs .mj-screen-sub {
  font-size: 0.82rem !important;
  color: var(--mh-text-secondary) !important;
  margin: 0 0 4px !important;
}

html[data-theme] #view-jobs .mj-filter-chip,
html[data-theme] #view-jobs .category-tab {
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  color: var(--mh-text) !important;
}

html[data-theme] #cv-builder-photo-file {
  color: transparent !important;
}

html[data-theme] #cv-builder-photo-file::file-selector-button {
  color: var(--mh-text) !important;
  background: color-mix(in srgb, var(--mh-surface) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 80%, transparent) !important;
  border-radius: 999px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  font-weight: 650 !important;
}

html[data-theme] #view-applications .mj-application-card {
  padding: 12px 14px !important;
  gap: 8px !important;
}

html[data-theme] #view-applications .mj-application-card .mh-button--danger,
html[data-theme] #view-applications .mj-application-card [data-application-remove] {
  color: var(--mh-danger, #c23b3b) !important;
  opacity: 1 !important;
}

/* #736 recording pass — remaining presentation residuals */
html[data-theme] #view-recruiters .mj-recruiter-az-letter.is-active,
html[data-theme] #view-training .mh-provider-az-letter.is-active,
html[data-theme] #view-training .mj-recruiter-az-letter.is-active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme] #view-recruiters .mj-recruiter-az-letter[aria-label="All letters"],
html[data-theme] #view-training .mh-provider-az-letter[aria-label="All letters"],
html[data-theme] #view-training .mj-recruiter-az-letter[aria-label="All letters"] {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 52px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 10px !important;
  font-weight: 700 !important;
  position: relative !important;
  overflow: visible !important;
}

html[data-theme] #view-recruiters .mj-recruiter-az-letter[aria-label="All letters"]::after,
html[data-theme] #view-training .mh-provider-az-letter[aria-label="All letters"]::after,
html[data-theme] #view-training .mj-recruiter-az-letter[aria-label="All letters"]::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: max(100%, 48px) !important;
  height: 48px !important;
  min-height: 48px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}

html[data-theme] #view-jobs .mj-filter-chip.is-active,
html[data-theme] #view-jobs .category-tab.is-active,
html[data-theme] #view-jobs .mh-saved-segment.is-active {
  color: var(--mh-text) !important;
  font-weight: 750 !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mh-gold, var(--mh-accent)) 55%, transparent) !important;
}

html[data-theme] #view-jobs .job-detail-section {
  margin: 0 0 16px !important;
}

html[data-theme] #view-jobs .job-detail-desc,
html[data-theme] #view-job-detail .job-detail-desc {
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  margin: 0 0 10px !important;
  max-width: 42rem;
}

html[data-theme] #view-job-detail .job-detail-actions-flow,
html[data-theme] #view-job-detail .job-detail-dock {
  padding-bottom: calc(12px + var(--mh-nav-clearance, 72px)) !important;
}

html[data-theme] #view-job-detail .job-detail-save-label {
  font-size: 0.72rem;
  font-weight: 650;
  margin-left: 4px;
}

html[data-theme] .demo-toast {
  bottom: calc(16px + var(--mh-nav-clearance, 72px)) !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: none !important;
  font-size: 0.9rem !important;
  padding: 10px 14px !important;
}

html[data-theme] #view-news .mh-news-card__meta,
html[data-theme] #view-news [data-news-source],
html[data-theme] #view-news [data-news-time],
html[data-theme] #view-news-detail .mh-news-detail-card__meta {
  font-size: 0.82rem !important;
  color: var(--mh-text-secondary) !important;
  font-weight: 600 !important;
}

html[data-theme] #view-news-detail .mh-news-detail-card__body-p {
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
}

html[data-theme] #view-news-detail .news-detail-source-btn {
  width: auto !important;
  max-width: 100% !important;
  margin-bottom: calc(12px + var(--mh-nav-clearance, 72px)) !important;
}

html[data-theme] #view-recruiters .ref-rc-company-card,
html[data-theme] #view-training .ref-rc-company-card,
html[data-theme] #view-training .mh-training-card {
  padding: 10px 12px !important;
  min-height: 0 !important;
}

html[data-theme] #view-recruiter-detail .recruiter-hero,
html[data-theme] #view-recruiter-detail .ref-rc-detail__hero {
  max-height: 168px !important;
}

html[data-theme] #view-recruiter-detail .mh-empty-card,
html[data-theme] #view-recruiter-detail .ref-rc-directory__empty.mh-empty-card,
html[data-theme] #view-recruiter-detail .ref-rc-detail__empty-state.mh-empty-card {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle)) !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-contact-card,
html[data-theme] #view-recruiter-detail .ref-rc-person-card {
  margin-bottom: 8px !important;
}

html[data-theme] #view-recruiter-detail .ref-rc-detail__panel,
html[data-theme] #view-training-detail .mh-training-detail {
  padding-bottom: calc(16px + var(--mh-nav-clearance, 72px)) !important;
}

html[data-theme] #view-profile .mh-profile-breakdown__item {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-size: 0.9rem !important;
  min-height: 36px !important;
  align-items: center !important;
}

html[data-theme] #view-profile .mh-profile-breakdown__need {
  font-size: 0.8rem !important;
  font-weight: 650 !important;
  color: var(--mh-text-secondary) !important;
}

html[data-theme] #view-profile .mh-profile-section {
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 12px;
}

html[data-theme] #view-profile .mj-section-title {
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[data-theme] #view-profile .mh-profile-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html[data-theme] #view-cv-builder[data-cv-workspace="review"] #cv-builder-form,
html[data-theme] #view-cv-builder[data-cv-workspace="export"] #cv-builder-form,
html[data-theme] #view-cv-builder[data-cv-workspace="review"] #cv-builder-start,
html[data-theme] #view-cv-builder[data-cv-workspace="export"] #cv-builder-start {
  display: none !important;
}

html[data-theme] #view-cv-builder .mh-cv-photo-block,
html[data-theme] #view-cv-builder #cv-builder-photo-block {
  padding: 12px;
  border-radius: 14px;
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
}

html[data-theme] #view-cv-builder .mh-cv-file-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

html[data-theme] #view-cv-builder .mh-cv-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme] #view-cv-builder .mh-cv-file-name {
  font-size: 0.82rem;
  color: var(--mh-text-secondary);
}

html[data-theme] #view-cv-builder input[type="date"],
html[data-theme] #view-cv-builder input[type="range"] {
  accent-color: var(--mh-gold, var(--mh-accent));
  color-scheme: inherit;
}

html[data-theme] #view-cv-builder .mh-cv-section-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

html[data-theme] #view-cv-builder .mh-cv-row-actions {
  display: inline-flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

html[data-theme] #view-cv-builder .mh-cv-row-icon {
  min-width: 44px !important;
  min-height: 44px !important;
  width: auto !important;
  padding: 0 10px !important;
  font-size: 0.82rem !important;
}

html[data-theme] #view-cv-builder .mh-cv-row-icon--danger {
  color: var(--mh-danger, #c23b3b) !important;
}

html[data-theme] #view-cv-builder .mh-cv-builder-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: calc(12px + var(--mh-nav-clearance, 72px));
}

html[data-theme] #view-cv-builder .mh-cv-builder-actions__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-theme] #view-cv-builder[data-cv-workspace="review"] .mh-cv-a4-frame,
html[data-theme] #view-cv-builder[data-cv-workspace="export"] .mh-cv-a4-frame {
  min-height: 62vh;
}

html[data-theme] #view-applications .mj-application-card__actions select,
html[data-theme] #view-applications .mj-application-card select {
  appearance: none !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  padding: 0 32px 0 12px !important;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  color: var(--mh-text) !important;
  border: 1px solid var(--mh-border-subtle) !important;
}

html[data-theme] #view-training .mh-catalog-status {
  background: var(--mh-card-surface, var(--mh-surface)) !important;
  border-color: var(--mh-card-edge, var(--mh-border-subtle)) !important;
  color: var(--mh-text-secondary) !important;
}

html[data-theme] #view-training-detail .mh-dir-source-link,
html[data-theme] #view-training-detail .course-row-link {
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
}

html[data-theme] #view-training-detail .mh-dir-resource-link {
  display: block;
  margin: 0 0 8px;
  font-weight: 650;
}

html[data-theme] #view-cv-builder .mh-cv-doc.mh-cv-tpl-modern {
  border-top: 6px solid #205c78;
}

html[data-theme] #view-cv-builder .mh-cv-doc.mh-cv-accent-gold.mh-cv-tpl-modern {
  border-top-color: #b89440;
}

html[data-theme] #view-cv-builder .mh-cv-doc.mh-cv-accent-teal.mh-cv-tpl-modern {
  border-top-color: #146e70;
}

html[data-theme] #view-cv-builder .mh-cv-doc.mh-cv-tpl-premium .mh-cv-header h1,
html[data-theme] #view-cv-builder .mh-cv-doc.mh-cv-tpl-modern .mh-cv-identity h1,
html[data-theme] #view-cv-builder .mh-cv-doc.mh-cv-tpl-ats .mh-cv-identity h1 {
  font-size: 1.55rem !important;
  line-height: 1.15 !important;
}

html[data-theme] #view-cv-builder .mh-cv-doc .mh-cv-header {
  margin-bottom: 8px !important;
}

html[data-theme] #view-cv-builder .mh-cv-doc .mh-cv-body {
  margin-top: 0 !important;
}

html[data-theme] #daily-alert-save.mh-button--size-full {
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  min-width: min(100%, 220px);
}

html[data-theme] #view-training .mh-catalog-status,
html[data-theme] #view-training-detail .mh-catalog-status {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
}

html[data-theme] #view-training .mh-catalog-status__meta,
html[data-theme] #view-training .mh-catalog-status__scope,
html[data-theme] #view-training-detail .mh-catalog-status__meta,
html[data-theme] #view-training-detail .mh-catalog-status__scope {
  display: block !important;
  visibility: visible !important;
}

/* #736 exact-head: genuine ≥44×44 All / filter chips with working hit-testing. */
html[data-theme] #view-jobs [data-jobs-sector="all"],
html[data-theme] #view-jobs [data-mj-chip="all"],
html[data-theme="light"] body.mj-app #view-jobs button.mj-filter-chip,
html[data-theme="dark"] body.mj-app #view-jobs button.mj-filter-chip,
html[data-theme="light"] body.mj-app #view-jobs button[data-mj-chip="all"],
html[data-theme="dark"] body.mj-app #view-jobs button[data-mj-chip="all"],
html[data-theme="light"] body.mj-app #view-jobs .mj-sector-rail [data-jobs-sector="all"],
html[data-theme="dark"] body.mj-app #view-jobs .mj-sector-rail [data-jobs-sector="all"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: none !important;
  padding: 0 10px !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  line-height: 1.2 !important;
  z-index: 1;
}

/* Beat remaining 34px / height:auto Jobs chip rules that out-specify html[data-theme]. */
html[data-theme="light"] body.mj-app #view-jobs button.mj-filter-chip.mh-saved-segment,
html[data-theme="dark"] body.mj-app #view-jobs button.mj-filter-chip.mh-saved-segment,
html[data-theme="light"] body.mj-app #view-jobs button[data-mj-chip],
html[data-theme="dark"] body.mj-app #view-jobs button[data-mj-chip],
html[data-theme="light"] body.mj-app #view-jobs .mj-sector-rail .mh-saved-segment,
html[data-theme="dark"] body.mj-app #view-jobs .mj-sector-rail .mh-saved-segment,
html[data-theme="light"] body.mj-app #view-jobs .mj-sector-rail .category-tab.mh-saved-segment,
html[data-theme="dark"] body.mj-app #view-jobs .mj-sector-rail .category-tab.mh-saved-segment,
html[data-theme="light"] body.mj-app #view-jobs .mj-sector-rail [data-jobs-sector],
html[data-theme="dark"] body.mj-app #view-jobs .mj-sector-rail [data-jobs-sector],
html[data-theme="light"] #view-jobs .mj-sector-rail .category-tab,
html[data-theme="dark"] #view-jobs .mj-sector-rail .category-tab,
html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment,
html[data-theme] #view-jobs .mj-sector-rail .category-tab.mh-saved-segment,
html[data-theme] #view-jobs .mj-filter-chip,
html[data-theme] #view-jobs .mj-filter-chip.mh-saved-segment,
html[data-theme] #view-jobs .category-tab.mh-saved-segment {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: none !important;
  padding: 0 10px !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  line-height: 1.2 !important;
  z-index: 1;
}

html[data-theme] #view-jobs .mj-sector-rail.mh-saved-segments,
html[data-theme] #view-jobs .category-tabs.mj-sector-rail.mh-saved-segments {
  overflow: visible !important;
}

html[data-theme] #view-jobs .mj-filter-chip::after,
html[data-theme] #view-jobs .mj-sector-rail .mh-saved-segment::after,
html[data-theme] #view-jobs .category-tab.mh-saved-segment::after {
  display: none !important;
  content: none !important;
}

html[data-theme] #view-jobs .mj-filter-chip.is-active,
html[data-theme] #view-jobs .category-tab.is-active,
html[data-theme] #view-jobs .mh-saved-segment.is-active,
html[data-theme] #view-jobs [data-jobs-sector="all"].is-active,
html[data-theme] #view-jobs [data-mj-chip="all"].is-active {
  color: var(--mh-text) !important;
  font-weight: 750 !important;
  opacity: 1 !important;
  overflow: visible !important;
}

html[data-theme] #view-jobs .mj-search-block.jobs-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html[data-theme] #view-jobs .mj-filter-chips.mh-saved-segments {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  row-gap: 4px !important;
  column-gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html[data-theme] #view-jobs .mj-filter-role-wrap,
html[data-theme] #view-jobs.mh-stage2-jobs .mj-filter-role-wrap {
  display: block !important;
  position: relative !important;
  z-index: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  clear: both !important;
}

html[data-theme] #view-jobs .mj-role-toggle,
html[data-theme] #view-jobs.mh-stage2-jobs .mj-role-toggle,
html[data-theme="light"] body.mj-app #view-jobs .mj-role-toggle,
html[data-theme="dark"] body.mj-app #view-jobs .mj-role-toggle {
  height: auto !important;
  min-height: 44px !important;
  overflow: visible !important;
}

html[data-theme] #view-jobs #filter-role-label,
html[data-theme] #view-jobs .mj-filter-role-label,
html[data-theme] #view-jobs .mj-role-toggle__copy {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-theme] #view-cv-builder .mh-cv-preview-toolbar button,
html[data-theme] #view-cv-builder .mh-cv-preview-toolbar .mh-button,
html[data-theme] #view-cv-builder .mh-cv-preview-toolbar [data-cv-zoom] {
  box-sizing: border-box !important;
  min-height: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 12px !important;
}

/* 320 filters + role-selected must keep 44×44 chips and still fit the 292 chrome ceiling.
   Dark Chromium measured jobs-filters-dark-320 at 295 with 2px gaps + 2px rail padding. */
@media (max-width: 360px) {
  html[data-theme] #view-jobs .mj-screen-title,
  html[data-theme] #view-jobs .mh-page-header__title {
    margin: 0 !important;
  }
  html[data-theme] #view-jobs .mj-screen-sub,
  html[data-theme] #view-jobs .mh-page-header__subtitle {
    margin: 0 !important;
  }
  html[data-theme] #view-jobs.mh-stage2-jobs > .mj-screen-head.mh-page-header,
  html[data-theme] #view-jobs .mj-screen-head.mh-page-header {
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-theme] #view-jobs .mj-search-block.jobs-filters,
  html[data-theme] #view-jobs.mh-stage2-jobs .mj-search-block.jobs-filters {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-theme] #view-jobs .mj-search-wrap,
  html[data-theme] #view-jobs #demo-search,
  html[data-theme] #view-jobs .mj-search-input {
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  html[data-theme] #view-jobs .mj-sector-rail.mh-saved-segments,
  html[data-theme] #view-jobs .category-tabs.mj-sector-rail.mh-saved-segments,
  html[data-theme] #view-jobs.mh-stage2-jobs .category-tabs.mj-sector-rail.mh-saved-segments,
  html[data-theme] #view-jobs.mh-stage2-jobs .category-tabs-inline.mj-sector-rail.mh-saved-segments {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  html[data-theme] #view-jobs .mj-filter-chips.mh-saved-segments {
    row-gap: 0 !important;
    column-gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-theme] #view-jobs .mj-role-selected {
    margin: 0 !important;
    gap: 4px !important;
  }
  html[data-theme] #view-jobs .jobs-result-count,
  html[data-theme] #view-jobs #demo-search-note {
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  html[data-theme] #view-jobs .mj-filter-role-wrap,
  html[data-theme] #view-jobs.mh-stage2-jobs .mj-filter-role-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
  }
  html[data-theme] #view-jobs .mj-role-toggle,
  html[data-theme] #view-jobs.mh-stage2-jobs .mj-role-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html[data-theme] #view-jobs .mj-role-selected:not([hidden]) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: min(48vw, 168px) !important;
  }
  /* Keep Reset filters in the first 320×568 viewport above the nav. */
  html[data-theme] #view-jobs #jobs-empty[hidden] {
    display: none !important;
  }
  html[data-theme] #view-jobs #jobs-empty:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    margin: 4px 0 0 !important;
    padding: 6px 10px !important;
    gap: 2px !important;
  }
  html[data-theme] #view-jobs #jobs-empty .mj-empty-title,
  html[data-theme] #view-jobs #jobs-empty .mh-empty__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }
  html[data-theme] #view-jobs #jobs-empty .mh-empty__text,
  html[data-theme] #view-jobs #jobs-empty .muted {
    grid-column: 1;
    grid-row: 2;
    margin: 0 !important;
  }
  html[data-theme] #view-jobs #jobs-empty #jobs-empty-reset {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* List banner stays two visible honesty lines (kicker + limits). */
html[data-theme] #view-training #training-freshness-banner .mh-catalog-status__scope,
html[data-theme] #view-training #training-freshness-banner .mh-catalog-status__meta {
  display: none !important;
}