/**
 * #736 — Saved / accepted News visual unification.
 *
 * Loads last. Remaps remaining screen-specific type, card, empty, search,
 * and CTA geometry to the rendered Saved + News graphite/gold reference.
 * Do not restyle bottom nav, chips, tabs, card hit-targets, or Vessel
 * (default-off). Layout-only rules elsewhere stay.
 */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --mh-type-screen: 1.62rem;
  --mh-type-screen-weight: 800;
  --mh-type-screen-tracking: -0.03em;
  --mh-type-screen-lh: 1.12;
  --mh-type-nested: 1.12rem;
  --mh-card-radius: 16px;
}

/* —— One screen-title scale (Saved) —— */
.mj-screen-title,
.mh-page-header__title,
.mh-type-screen,
#view-jobs .mj-screen-title,
#view-saved .mj-screen-title,
#view-news.mh-stage-news .mj-screen-title,
#view-career.mh-stage3-career .mj-screen-title,
#view-account.mh-stage3-account .mj-screen-title,
#view-profile .mj-screen-title,
#view-cv-builder .mj-screen-title,
#view-applications.mh-stage3-applications .mj-screen-title,
#view-quick-apply .mj-screen-title {
  margin: 0;
  font-family: var(--mh-font);
  font-size: var(--mh-type-screen);
  font-weight: var(--mh-type-screen-weight);
  letter-spacing: var(--mh-type-screen-tracking);
  line-height: var(--mh-type-screen-lh);
  color: var(--mh-text);
}

/* Nested Back+title toolbars are compact, not the tab-root 1.62rem. */
.mj-recruiter-topbar__title,
#view-recruiters.mh-stage3-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 {
  margin: 0;
  font-family: var(--mh-font);
  font-size: var(--mh-type-nested, 1.12rem);
  font-weight: var(--mh-type-screen-weight, 800);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--mh-text);
}

.mj-screen-sub,
.mh-page-header__subtitle,
#view-jobs .mj-screen-sub,
#view-saved .mj-screen-sub,
#view-news .mj-screen-sub,
#view-career.mh-stage3-career .mj-screen-sub,
#view-account.mh-stage3-account .mj-screen-sub,
#view-profile .mj-screen-sub,
#view-cv-builder .mj-screen-sub,
#view-applications.mh-stage3-applications .mj-screen-sub,
.mj-recruiter-lead,
#view-recruiters.mh-stage3-recruiters .mj-recruiter-lead,
#view-training .mj-recruiter-lead,
#view-medical .mj-recruiter-lead {
  margin: 4px 0 0;
  font-size: var(--mh-type-meta);
  font-weight: 500;
  line-height: 1.35;
  color: var(--mh-text-muted);
}

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

/* —— Shared card family (News / Saved) —— */
#view-news .mh-news-card,
#view-news .mh-news-card.mh-surface,
#view-jobs .job-card-v2.job-offer-card,
#view-saved .job-card-v2.job-offer-card,
#view-saved .mh-job-card.figma-saved-card,
#view-account.mh-stage3-account .mj-premium-card,
#view-account.mh-stage3-account .mh-account-privacy-card,
#view-recruiters.mh-stage3-recruiters .ref-rc-company-card,
#view-training .ref-rc-company-card,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="recruiters"] {
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: var(--mh-card-radius);
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight);
}

#view-career.mh-stage3-career .mj-career-card[data-career-tool="recruiters"] {
  padding: 16px 14px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--mh-accent) 8%, transparent) 0%,
      transparent 42%
    ),
    var(--mh-card-surface, var(--mh-surface));
}

#view-career.mh-stage3-career .mj-career-card[data-career-tool="recruiters"] .mj-career-card__title,
#view-news .mh-news-card__title,
#view-saved .figma-saved-card__title,
#view-saved .mh-job-card__title {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--mh-text);
}

#view-career.mh-stage3-career .mj-career-card[data-career-tool="profile"] .mj-career-card__action,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="cv-builder"] .mj-career-card__action,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="applications"] .mj-career-card__action,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="training"] .mj-career-card__action,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="medical"] .mj-career-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--mh-text-muted);
  font-size: 0;
}

#view-career.mh-stage3-career .mj-career-card[data-career-tool="profile"] .mj-career-card__action::after,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="cv-builder"] .mj-career-card__action::after,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="applications"] .mj-career-card__action::after,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="training"] .mj-career-card__action::after,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="medical"] .mj-career-card__action::after {
  content: "›";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--mh-text-muted);
}

#view-career.mh-stage3-career .mj-career-card[data-career-tool="profile"] .mj-career-card__title,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="applications"] .mj-career-card__title,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="training"] .mj-career-card__title,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="cv-builder"] .mj-career-card__title,
#view-career.mh-stage3-career .mj-career-card[data-career-tool="medical"] .mj-career-card__title {
  font-size: var(--mh-type-card);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* —— Empty / error / loading canvas (Saved / News) —— */
.mj-empty-card,
.mh-empty.mj-empty-card,
.empty-state,
#view-applications .empty-state,
#view-recruiters .empty-state,
#view-training .empty-state,
#view-medical .empty-state,
#view-vessels .empty-state {
  margin: var(--mh-space-4) 0;
  padding: 28px 12px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Jobs / Saved / News status cards are content-inset cards, not tall canvas. */
#view-jobs #jobs-empty,
#view-jobs #jobs-api-fallback,
#view-jobs #jobs-loading,
#view-saved #saved-empty,
#view-news #news-empty,
#view-news #news-loading,
#view-news #news-error {
  margin: 8px 0;
  padding: 16px 14px;
  text-align: left;
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: 14px;
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight);
}

.empty-title,
.mj-empty-title,
.mh-empty__title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--mh-text);
}

.empty-state .muted,
.mh-empty__text {
  margin: 0 auto;
  max-width: 22rem;
  font-size: var(--mh-type-meta);
  line-height: 1.5;
  color: var(--mh-text-muted);
}

#view-profile .mh-page-header,
#view-cv-builder .mh-page-header,
#view-applications .mh-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* —— Nested chrome: back + directory search —— */
.mj-back-btn,
#view-applications.mh-stage3-applications .mj-back-btn,
#view-profile .mj-back-btn,
#view-cv-builder .mj-back-btn {
  min-height: var(--mh-tap-min, 44px);
  min-width: var(--mh-tap-min, 44px);
  padding: 0 8px 0 2px;
  border: none;
  background: transparent;
  color: var(--mh-accent);
  font-size: var(--mh-type-meta);
  font-weight: 650;
  box-shadow: none;
}

/* Icon-only directory chevrons: gold + tap target. */
.mj-recruiter-back:not(.mj-recruiter-back--label):not(.mj-recruiter-back--control) {
  min-height: var(--mh-tap-min, 44px);
  min-width: var(--mh-tap-min, 44px);
  border: none;
  background: transparent;
  color: var(--mh-accent);
  box-shadow: none;
}

/* #627: labeled Training/Vessel Back must stay one line and ≥60px.
   Directory-family uses an ID+class min-width:44px; beat that selector. */
#view-training-detail.mh-stage3-training-detail .mj-recruiter-back.mj-recruiter-back--label,
#view-training-detail.mh-stage3-training-detail .mj-recruiter-back.mj-recruiter-back--control,
#view-vessel-detail .mj-recruiter-back.mj-recruiter-back--label,
#view-vessel-detail .mj-recruiter-back.mj-recruiter-back--control,
.mj-recruiter-back.mj-recruiter-back--label,
.mj-recruiter-back.mj-recruiter-back--control {
  width: auto;
  min-width: 64px;
  height: 44px;
  padding: 0 8px 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mh-accent);
  background: transparent;
  border: none;
  box-shadow: none;
}

.mj-recruiter-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}

#view-recruiters.mh-stage3-recruiters .mj-recruiter-search-wrap,
#view-training.mh-stage3-training .mj-recruiter-search-wrap,
#view-vessels .mj-recruiter-search-wrap {
  min-height: 46px;
  padding: 0 8px 0 14px;
  border-radius: var(--mh-radius-pill);
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 65%, transparent);
  background: color-mix(in srgb, var(--mh-surface-inset) 55%, transparent);
  box-shadow: none;
}

#view-recruiters.mh-stage3-recruiters .mj-recruiter-search__input,
#view-training.mh-stage3-training .mj-recruiter-search__input,
#view-vessels .mj-recruiter-search__input {
  min-height: 44px;
  font-size: 0.96rem;
  font-weight: 500;
}

.mj-recruiter-search__filter,
.mj-recruiter-list-toggle {
  min-height: var(--mh-tap-min, 44px);
  min-width: var(--mh-tap-min, 44px);
  border-radius: var(--mh-radius-pill);
}

/* —— Fields: same tokens as Saved Daily Alert / Jobs search —— */
#view-profile input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
#view-profile select,
#view-profile textarea,
#view-cv-builder textarea,
#view-applications select,
#view-training .mh-training-filter,
#view-account .mh-account-privacy-input {
  width: 100%;
  min-height: var(--mh-control-h);
  padding: 0 14px;
  border-radius: var(--mh-radius-md);
  border: 1px solid var(--mh-border-standard);
  background: var(--mh-surface-interactive);
  color: var(--mh-input-text);
  font-family: var(--mh-font);
  font-size: var(--mh-type-body);
  box-shadow: none;
}

#view-cv-builder #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"] {
  width: 100%;
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: var(--mh-radius-md);
  border: 1px solid var(--mh-border-standard);
  background: var(--mh-surface-interactive);
  color: var(--mh-input-text);
  font-family: var(--mh-font);
  font-size: var(--mh-type-body);
  box-shadow: none;
}

#view-profile textarea,
#view-cv-builder textarea {
  min-height: 72px;
  padding: 10px 14px;
}

#view-profile input:focus,
#view-profile select:focus,
#view-profile textarea:focus,
#view-cv-builder select:focus,
#view-cv-builder textarea:focus,
#view-applications select:focus,
#view-training .mh-training-filter:focus,
#view-account .mh-account-privacy-input:focus {
  outline: none;
  border-color: var(--mh-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-focus) 22%, transparent);
}

.filter-label,
.mh-field__label,
#view-profile .filter-label,
#view-cv-builder .filter-label,
#view-applications .filter-label {
  font-size: var(--mh-type-label);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--mh-text-secondary);
}

/* —— CTA family wins over leftover screen geometry —— */
#view-account.mh-stage3-account .btn-account-upgrade,
#view-account.mh-stage3-account .btn-account-upgrade.mh-button--primary {
  width: auto;
  max-width: 100%;
  min-height: var(--mh-btn-h, 44px);
  padding: 8px var(--mh-btn-pad-x, 18px);
  border-radius: var(--mh-btn-radius, 999px);
  font-size: var(--mh-type-button);
  font-weight: var(--mh-btn-weight, 750);
  background: var(--mh-btn-primary-bg, var(--mh-accent));
  color: var(--mh-btn-primary-fg, #fff);
  border: 1.5px solid transparent;
  box-shadow: none;
}

#view-account.mh-stage3-account .btn-account-upgrade[hidden] {
  display: none !important;
}

.mh-button,
button.mj-btn-primary,
button.mj-btn-secondary,
#daily-alert-save,
#news-detail-source-btn,
#jobs-load-more,
#recruiters-load-more,
#training-load-more {
  border-radius: var(--mh-btn-radius, 999px);
  min-height: var(--mh-btn-h, 44px);
}

/* Focus / press already live on .mh-button; extend to remaining chrome. */
.mj-back-btn:focus-visible,
.mj-recruiter-back:focus-visible,
.mj-recruiter-search__filter:focus-visible,
.mj-recruiter-list-toggle:focus-visible,
.mj-role-toggle:focus-visible,
.category-tab:focus-visible,
.mj-filter-chip:focus-visible,
.mh-saved-segment:focus-visible,
.bottom-nav-item: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 {
    transition: none;
  }
}

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

  .job-detail-actions-row,
  .mh-account-privacy-actions,
  .mh-cv-builder-actions,
  .mj-empty-actions,
  .mh-referral-actions {
    min-width: 0;
  }

  .mh-button,
  button.mj-btn-primary,
  button.mj-btn-secondary {
    max-width: 100%;
  }
}