/**
 * Stage B1 (#478) / #493 — Shared directory family
 * Recruiter list (#view-recruiters) + Training list/detail.
 * #493 adds reusable provider-directory primitives (search, A–Z, logo plate)
 * for Training without restyling frozen Recruiter company detail.
 * #562 Medical uses the same empty-state chrome for an honest Coming Soon
 * catalog (no invented clinic list).
 * Company detail is intentionally NOT styled here (frozen #473).
 * Tracker / Account are out of scope (B2).
 * Standalone Certification views are not invented here.
 */

/* —— Shared primitives —— */
.mh-dir-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 2px;
  border: none;
  border-bottom: 1px solid var(--mh-line-divider);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-height: 64px;
}

.mh-dir-row:active {
  background: color-mix(in srgb, var(--mh-surface-inset) 55%, transparent);
}

.mh-dir-row__identity,
.mh-dir-row .job-avatar,
.mh-dir-row .ref-rc-logo--list {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--mh-surface-inset);
  box-shadow: none;
  border: none;
}

.mh-dir-row__body,
.mh-dir-row .compact-job-body,
.mh-dir-row .ref-rc-company-card__content {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mh-dir-row__title,
.mh-dir-row .compact-job-title,
.mh-dir-row .ref-rc-company-card__name {
  margin: 0;
  font-size: var(--mh-type-card, 0.98rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mh-text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mh-dir-row__meta,
.mh-dir-row .compact-job-sub,
.mh-dir-row .ref-rc-company-card__meta {
  margin: 0;
  font-size: var(--mh-type-meta);
  font-weight: 500;
  color: var(--mh-text-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mh-dir-row__chev,
.mh-dir-row .ref-rc-company-card__chev {
  flex-shrink: 0;
  color: var(--mh-text-muted);
  font-size: 1.15rem;
  font-weight: 400;
  opacity: 0.65;
  line-height: 1;
}

.mh-dir-group-label {
  margin: var(--mh-space-4) 0 var(--mh-space-2);
  padding: 0 2px;
  font-size: var(--mh-type-label);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-text-muted);
}

.mh-dir-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--mh-space-3);
  padding: 4px 6px 4px 12px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  box-shadow: none;
}

.mh-dir-search input,
.mh-dir-search .mj-recruiter-search__input {
  flex: 1;
  min-height: var(--mh-control-h-sm);
  border: none;
  background: transparent;
  color: var(--mh-input-text);
  font-size: var(--mh-type-body);
  box-shadow: none;
}

.mh-dir-search input:focus,
.mh-dir-search .mj-recruiter-search__input:focus {
  outline: none;
}

.mh-dir-filters {
  display: grid;
  gap: var(--mh-space-3);
  margin: 0 0 var(--mh-space-3);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mh-dir-filters .filter-label {
  font-size: var(--mh-type-label);
  font-weight: 650;
  color: var(--mh-text-muted);
  letter-spacing: 0.02em;
}

.mh-dir-filters input {
  width: 100%;
  min-height: var(--mh-control-h-sm);
  padding: 0 12px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  color: var(--mh-input-text);
  font-size: var(--mh-type-body);
  box-shadow: none;
}

.mh-dir-filters input:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-focus) 18%, transparent);
}

.mh-dir-detail {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.mh-dir-detail__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--mh-text);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mh-dir-detail__meta {
  margin: 0 0 var(--mh-space-4);
  font-size: var(--mh-type-meta);
  color: var(--mh-text-muted);
  line-height: 1.4;
}

.mh-dir-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--mh-space-5);
}

.mh-dir-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--mh-radius-md);
  border: none;
  background: var(--mh-surface-inset);
  color: var(--mh-accent);
  font-size: var(--mh-type-meta);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.mh-dir-action:hover,
.mh-dir-action:focus-visible {
  text-decoration: none;
  color: var(--mh-accent);
}

.mh-dir-action--muted {
  color: var(--mh-text-secondary);
}

.mh-dir-section {
  margin: 0 0 var(--mh-space-5);
  padding: 0 0 var(--mh-space-4);
  border: none;
  border-bottom: 1px solid var(--mh-line-divider);
  background: transparent;
}

.mh-dir-section:last-of-type {
  border-bottom: none;
}

.mh-dir-section__label {
  margin: 0 0 var(--mh-space-3);
  font-size: var(--mh-type-label);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-text-muted);
}

.mh-dir-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.mh-dir-course-row {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 2px;
  border: none;
  border-bottom: 1px solid var(--mh-line-divider);
  background: transparent;
  border-radius: 0;
}

.mh-dir-course-row:last-child {
  border-bottom: none;
}

.mh-dir-course-row__title {
  margin: 0;
  font-size: var(--mh-type-body);
  font-weight: 650;
  color: var(--mh-text);
}

.mh-dir-course-row__price {
  font-size: var(--mh-type-meta);
  color: var(--mh-text-muted);
}

.mh-dir-course-row__link {
  font-size: var(--mh-type-meta);
  font-weight: 650;
  color: var(--mh-accent);
  text-decoration: none;
}

.mh-dir-course-row__link:hover {
  text-decoration: none;
}

/* —— Hidden-state safety (author display must not defeat [hidden]) —— */
#view-recruiters #recruiters-loading[hidden],
#view-recruiters #recruiters-empty[hidden],
#view-recruiters #recruiters-load-more[hidden],
#view-training #training-loading[hidden],
#view-training #training-empty[hidden],
#view-training #training-load-more[hidden],
#view-training-detail[hidden],
#view-recruiters[hidden],
#view-training[hidden] {
  display: none !important;
}

/* —— Recruiters list (#view-recruiters only; detail frozen) —— */
#view-recruiters.mh-stage3-recruiters {
  padding-bottom: calc(var(--mh-space-6) + var(--safe-bottom, 0px));
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#view-recruiters .mj-recruiter-topbar {
  margin-bottom: 4px;
  align-items: flex-start;
}

#view-recruiters .mj-recruiter-topbar__title {
  font-size: var(--mh-type-screen);
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--mh-text);
}

#view-recruiters .mj-recruiter-list-toggle {
  min-height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: transparent;
  color: var(--mh-text-muted);
  font-size: var(--mh-type-caption);
  font-weight: 600;
  box-shadow: none;
}

#view-recruiters .mj-recruiter-lead,
#view-recruiters .mj-recruiter-result-note {
  margin: 0 0 var(--mh-space-3);
  padding: 0 2px;
  font-size: var(--mh-type-meta);
  font-weight: 550;
  color: var(--mh-text-muted);
  background: transparent;
  border: none;
}

#view-recruiters .mj-recruiter-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--mh-space-3);
  padding: 4px 6px 4px 12px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  box-shadow: none;
}

#view-recruiters .mj-recruiter-search__input {
  flex: 1;
  min-height: var(--mh-control-h-sm);
  border: none;
  background: transparent;
  color: var(--mh-input-text);
  font-size: var(--mh-type-body);
  box-shadow: none;
}

#view-recruiters .mj-recruiter-search__filter {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: transparent;
  color: var(--mh-text-muted);
  cursor: pointer;
}

#view-recruiters .mj-recruiter-sector-chips,
#view-recruiters .mj-recruiter-alpha-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 var(--mh-space-3);
  padding: 0 0 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#view-recruiters .mj-recruiter-sector-chips::-webkit-scrollbar,
#view-recruiters .mj-recruiter-alpha-row::-webkit-scrollbar {
  display: none;
}

#view-recruiters .mj-recruiter-sector-chip,
#view-recruiters .mj-recruiter-az-letter {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: transparent;
  color: var(--mh-text-muted);
  font-size: var(--mh-type-caption);
  font-weight: 600;
  cursor: pointer;
}

#view-recruiters .mj-recruiter-sector-chip.is-active,
#view-recruiters .mj-recruiter-az-letter.is-active {
  background: color-mix(in srgb, var(--mh-accent) 12%, var(--mh-surface-inset));
  color: var(--mh-text);
  font-weight: 700;
}

#view-recruiters .ref-rc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

#view-recruiters .ref-rc-section {
  margin: 0 0 var(--mh-space-2);
  padding: 0;
}

#view-recruiters .ref-rc-section__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: var(--mh-space-3) 0 4px;
  padding: 0 2px;
}

#view-recruiters .ref-rc-section__bar {
  display: none;
}

#view-recruiters .ref-rc-section__title {
  margin: 0;
  font-size: var(--mh-type-label);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-text-muted);
}

#view-recruiters .ref-rc-section__count {
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mh-text-muted);
  font-size: var(--mh-type-caption);
  font-weight: 600;
}

#view-recruiters .ref-rc-section__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#view-recruiters .ref-rc-company-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 14px 2px;
  border: none;
  border-bottom: 1px solid var(--mh-line-divider);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: none;
}

/*
 * Legacy conflict (#478): recruiter-ref-ui.css ends with
 * html[data-theme="light|dark"] .ref-rc-company-card card slabs.
 * Scope-neutralize for the list view only — company detail untouched.
 */
html[data-theme="light"] #view-recruiters .ref-rc-company-card,
html[data-theme="dark"] #view-recruiters .ref-rc-company-card,
#view-recruiters.mh-stage3-recruiters .ref-rc-list .ref-rc-company-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mh-line-divider) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#view-recruiters .ref-rc-company-card:active {
  transform: none;
  background: color-mix(in srgb, var(--mh-surface-inset) 55%, transparent);
}

html[data-theme="light"] #view-recruiters .ref-rc-company-card:active,
html[data-theme="dark"] #view-recruiters .ref-rc-company-card:active {
  background: color-mix(in srgb, var(--mh-surface-inset) 55%, transparent) !important;
}

#view-recruiters .ref-rc-logo--list {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  padding: 6px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(200, 203, 208, 0.55);
  box-shadow: 0 1px 2px rgba(12, 13, 15, 0.12);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

html[data-theme="light"] #view-recruiters .ref-rc-logo--list,
html[data-theme="dark"] #view-recruiters .ref-rc-logo--list {
  background: #ffffff !important;
  border: 1px solid rgba(200, 203, 208, 0.55) !important;
  box-shadow: 0 1px 2px rgba(12, 13, 15, 0.12) !important;
}

#view-recruiters .ref-rc-logo--list .ref-rc-logo__img,
#view-recruiters .ref-rc-logo--list img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Initials fallback: deliberate silver/graphite plate — not a fake white logo */
#view-recruiters .ref-rc-logo--list.ref-rc-logo--initials-only,
html[data-theme="light"] #view-recruiters .ref-rc-logo--list.ref-rc-logo--initials-only,
html[data-theme="dark"] #view-recruiters .ref-rc-logo--list.ref-rc-logo--initials-only {
  background: #2a2d33 !important;
  border-color: rgba(200, 203, 208, 0.28) !important;
  color: #c8cbd0;
}

#view-recruiters .ref-rc-company-card__content {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

#view-recruiters .ref-rc-company-card__name {
  margin: 0;
  font-size: var(--mh-type-card, 0.98rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mh-text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#view-recruiters .ref-rc-company-card__meta,
#view-recruiters .ref-rc-company-card__sector,
#view-recruiters .ref-rc-company-card__contacts {
  color: var(--mh-text-muted);
  font-size: var(--mh-type-meta);
  font-weight: 500;
}

#view-recruiters .ref-rc-company-card__chev {
  color: var(--mh-text-muted);
  opacity: 0.65;
  font-size: 1.15rem;
}

html[data-theme="light"] #view-recruiters .ref-rc-section__count,
html[data-theme="dark"] #view-recruiters .ref-rc-section__count,
#view-recruiters .ref-rc-section__count {
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--mh-text-muted) !important;
  font-size: var(--mh-type-caption);
  font-weight: 600;
}

#view-recruiters .empty-state,
#view-recruiters .jobs-status-panel {
  margin: var(--mh-space-5) 0;
  padding: var(--mh-space-5) var(--mh-space-3);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

#view-recruiters .btn-load-more {
  min-height: 40px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  color: var(--mh-text-secondary);
  font-weight: 650;
  box-shadow: none;
}

/* —— Training list (Recruiter directory-family chrome) —— */
#view-training.mh-stage3-training .mj-recruiter-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--mh-space-2);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

#view-training.mh-stage3-training .mj-recruiter-topbar__title,
#view-training-detail.mh-stage3-training-detail .mj-recruiter-topbar__title {
  margin: 0;
  font-size: var(--mh-type-screen);
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--mh-text);
}

#view-training.mh-stage3-training .mh-training-toolbar {
  display: grid;
  gap: 8px;
  margin: 0 0 var(--mh-space-3);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#view-training.mh-stage3-training .mj-recruiter-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 6px 4px 12px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  box-shadow: none;
}

#view-training.mh-stage3-training .mh-training-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#view-training.mh-stage3-training .mh-training-filter {
  min-height: var(--mh-control-h-sm);
  padding: 0 10px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  color: var(--mh-input-text);
  box-shadow: none;
}

#view-training.mh-stage3-training .mh-training-filter-label,
#view-training.mh-stage3-training .mh-training-filter--price {
  grid-column: 1 / -1;
}

#view-training.mh-stage3-training .mh-training-filter-label {
  margin: 2px 0 0;
  font-size: var(--mh-type-caption);
  color: var(--mh-text-muted);
}

#view-training-detail.mh-stage3-training-detail .mh-training-course-provenance {
  grid-area: provenance;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 4px 0 0;
}

#view-training-detail.mh-stage3-training-detail .mh-training-chip {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mh-text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#view-training-detail.mh-stage3-training-detail .mh-training-chip + .mh-training-chip::before {
  content: "·";
  margin-right: 8px;
  color: var(--mh-text-muted);
  opacity: 0.7;
}

#view-training-detail.mh-stage3-training-detail .mj-recruiter-topbar--detail,
#view-training-detail.mh-stage3-training-detail .mj-recruiter-topbar--nested {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  margin: 0 0 8px;
  padding: 0;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* #627: Training Back must stay one line and must not collide with the title. */
#view-training-detail.mh-stage3-training-detail .mj-recruiter-back--label,
#view-training-detail.mh-stage3-training-detail .mj-recruiter-back--control,
#view-vessel-detail .mj-recruiter-back--label,
#view-vessel-detail .mj-recruiter-back--control {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  max-width: none;
  white-space: nowrap;
  min-width: 44px;
  position: relative;
  z-index: 2;
}

#view-training-detail.mh-stage3-training-detail .mj-recruiter-back__text,
#view-vessel-detail .mj-recruiter-back__text {
  white-space: nowrap;
  flex-shrink: 0;
}

#view-training-detail.mh-stage3-training-detail .mj-recruiter-topbar__title,
#view-training-detail.mh-stage3-training-detail .mj-recruiter-topbar__title--center {
  flex: 1 1 auto;
  min-width: 0;
  justify-self: start;
  text-align: left;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-size: var(--mh-type-meta);
  font-weight: 650;
  color: var(--mh-text-muted);
}

#view-training-detail.mh-stage3-training-detail [data-training-layout="detail-v1"] .ref-rc-detail__actions,
#view-training-detail.mh-stage3-training-detail .mh-training-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  margin: 0 0 24px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--mh-line-divider, rgba(220, 222, 226, 0.12));
}

#view-training-detail.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="1"] .mh-training-detail__action,
#view-training-detail.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="2"] .mh-training-detail__action {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

#view-training-detail.mh-stage3-training-detail .mh-training-detail__action {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mh-accent, #d8be88);
  font-size: 0.82rem;
  font-weight: 700;
}

#view-training-detail.mh-stage3-training-detail .mh-training-course-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 14px 2px;
  border: none;
  border-bottom: 1px solid var(--mh-line-divider);
  background: transparent;
  box-shadow: none;
}

#view-training.mh-stage3-training .page-lead,
#view-training.mh-stage3-training #training-result-note {
  margin: 0 0 var(--mh-space-3);
  padding: 0 2px;
  font-size: var(--mh-type-meta);
  font-weight: 550;
  color: var(--mh-text-muted);
}

#view-training.mh-stage3-training .directory-filters {
  display: grid;
  gap: var(--mh-space-3);
  margin: 0 0 var(--mh-space-3);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-training.mh-stage3-training .filter-row {
  display: grid;
  gap: 6px;
  margin: 0;
}

#view-training.mh-stage3-training .filter-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-3);
}

#view-training.mh-stage3-training .filter-label {
  font-size: var(--mh-type-label);
  font-weight: 650;
  color: var(--mh-text-muted);
}

#view-training.mh-stage3-training #training-search,
#view-training.mh-stage3-training #training-country,
#view-training.mh-stage3-training #training-course {
  width: 100%;
  min-height: var(--mh-control-h-sm);
  padding: 0 12px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  color: var(--mh-input-text);
  font-size: var(--mh-type-body);
  box-shadow: none;
}

#view-training.mh-stage3-training #training-search:focus,
#view-training.mh-stage3-training #training-country:focus,
#view-training.mh-stage3-training #training-course:focus {
  outline: none;
  border: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-focus) 18%, transparent);
}

#view-training.mh-stage3-training #training-list,
#view-training.mh-stage3-training .mh-training-list.compact-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#view-training.mh-stage3-training .mj-recruiter-search-wrap,
#view-training.mh-stage3-training .mh-training-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--mh-space-3);
  padding: 4px 6px 4px 12px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  box-shadow: none;
}

#view-training.mh-stage3-training .mh-training-filter-row[hidden] {
  display: none !important;
}

#view-training.mh-stage3-training .mh-recruiters-loading[hidden] {
  display: none !important;
}

#view-training.mh-stage3-training #training-list,
#view-training.mh-stage3-training .mh-training-list {
  display: grid;
  gap: 0;
}

#view-training.mh-stage3-training .mh-training-card,
#view-training.mh-stage3-training .ref-rc-company-card.mh-training-card,
#view-training.mh-stage3-training .compact-job-card.directory-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 14px 2px;
  border: none;
  border-bottom: 1px solid var(--mh-line-divider);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

html[data-theme="light"] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card,
html[data-theme="dark"] #view-training.mh-stage3-training .ref-rc-company-card.mh-training-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mh-line-divider) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#view-training.mh-stage3-training .mh-training-card:active,
#view-training.mh-stage3-training .compact-job-card.directory-card:active {
  background: color-mix(in srgb, var(--mh-surface-inset) 55%, transparent);
}

#view-training.mh-stage3-training .mh-training-card .job-avatar,
#view-training.mh-stage3-training .compact-job-card .job-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--mh-surface-inset);
  color: var(--mh-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mh-type-caption);
  font-weight: 750;
  box-shadow: none;
  border: none;
}

#view-training.mh-stage3-training .compact-job-body {
  flex: 1;
  min-width: 0;
}

#view-training.mh-stage3-training .compact-job-title {
  margin: 0 0 2px;
  font-size: var(--mh-type-card, 0.98rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mh-text);
  overflow-wrap: anywhere;
}

#view-training.mh-stage3-training .compact-job-sub {
  margin: 0;
  font-size: var(--mh-type-meta);
  color: var(--mh-text-muted);
  overflow-wrap: anywhere;
}

#view-training.mh-stage3-training .mh-training-card__name,
#view-training.mh-stage3-training .ref-rc-company-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
  font-size: var(--mh-type-card, 0.98rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mh-text);
  line-height: 1.25;
}

#view-training.mh-stage3-training .mh-training-card__place {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-training.mh-stage3-training .mh-training-card__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  max-width: 38%;
}

#view-training.mh-stage3-training .mh-training-card__count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mh-text-secondary);
  white-space: nowrap;
}

#view-training.mh-stage3-training .mh-dir-row__chev {
  flex-shrink: 0;
  color: var(--mh-text-muted);
  opacity: 0.65;
  font-size: 1.15rem;
}

/* #662: wrap A–Z so 320/390 never clip letters or overflow the page */
#view-training.mh-stage3-training .mj-recruiter-alpha-row,
#view-training.mh-stage3-training .mh-provider-alpha-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--mh-space-3);
  padding: 4px 0;
  scrollbar-width: none;
}

#view-training.mh-stage3-training .mj-recruiter-az-letter,
#view-training.mh-stage3-training .mh-provider-az-letter {
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  font-size: 0.72rem;
  line-height: 26px;
  text-align: center;
}

#view-training.mh-stage3-training .mh-provider-az-letter.is-empty,
#view-training.mh-stage3-training .mh-provider-az-letter:disabled {
  opacity: 0.38;
  cursor: default;
}

#view-training .mh-catalog-status,
#view-training-detail .mh-catalog-status {
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--mh-space-3);
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle, #d4d7dc));
  background: var(--mh-card-surface, var(--mh-surface, #fff));
  color: var(--mh-text);
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight);
  overflow-wrap: break-word;
  word-break: normal;
}

#view-training .mh-catalog-status[data-catalog-freshness="stale"],
#view-training-detail .mh-catalog-status[data-catalog-freshness="stale"] {
  border-color: var(--mh-card-edge, var(--mh-border-subtle, #d4d7dc));
}

#view-training .mh-catalog-status__kicker,
#view-training-detail .mh-catalog-status__kicker {
  margin: 0;
  font-size: var(--mh-type-label, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mh-kicker, var(--mh-accent));
}

#view-training .mh-catalog-status__scope,
#view-training .mh-catalog-status__meta,
#view-training .mh-catalog-status__limits,
#view-training-detail .mh-catalog-status__scope,
#view-training-detail .mh-catalog-status__meta,
#view-training-detail .mh-catalog-status__limits {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#view-training.mh-stage3-training .mj-recruiter-alpha-row::-webkit-scrollbar,
#view-training.mh-stage3-training .mh-provider-alpha-row::-webkit-scrollbar {
  display: none;
}

#view-training.mh-stage3-training .mh-provider-group-label {
  margin: var(--mh-space-3) 0 var(--mh-space-1);
  padding: 0 2px;
}

#view-training.mh-stage3-training .ref-rc-logo--list,
#view-training.mh-stage3-training .mh-provider-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  padding: 6px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(200, 203, 208, 0.55);
  box-shadow: 0 1px 2px rgba(12, 13, 15, 0.12);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

html[data-theme="light"] #view-training.mh-stage3-training .ref-rc-logo--list,
html[data-theme="dark"] #view-training.mh-stage3-training .ref-rc-logo--list,
html[data-theme="light"] #view-training.mh-stage3-training .mh-provider-logo,
html[data-theme="dark"] #view-training.mh-stage3-training .mh-provider-logo {
  background: #ffffff !important;
  border: 1px solid rgba(200, 203, 208, 0.55) !important;
  box-shadow: 0 1px 2px rgba(12, 13, 15, 0.12) !important;
}

#view-training.mh-stage3-training .ref-rc-logo--list.ref-rc-logo--initials-only,
#view-training.mh-stage3-training .mh-provider-logo--fallback,
#view-training-detail.mh-stage3-training-detail .mh-provider-logo--fallback,
#view-training-detail.mh-stage3-training-detail .ref-rc-logo--fallback,
html[data-theme="light"] #view-training.mh-stage3-training .ref-rc-logo--list.ref-rc-logo--initials-only,
html[data-theme="dark"] #view-training.mh-stage3-training .ref-rc-logo--list.ref-rc-logo--initials-only,
html[data-theme="light"] #view-training.mh-stage3-training .mh-provider-logo--fallback,
html[data-theme="dark"] #view-training.mh-stage3-training .mh-provider-logo--fallback,
html[data-theme="light"] #view-training-detail.mh-stage3-training-detail .mh-provider-logo--fallback,
html[data-theme="dark"] #view-training-detail.mh-stage3-training-detail .mh-provider-logo--fallback {
  background: #2a2d33 !important;
  border-color: rgba(200, 203, 208, 0.28) !important;
  color: #c8cbd0 !important;
}

#view-training.mh-stage3-training .mj-recruiter-search__filter.is-active,
#view-training.mh-stage3-training .mj-recruiter-search__filter[aria-expanded="true"] {
  color: var(--mh-accent);
  background: color-mix(in srgb, var(--mh-accent) 14%, transparent);
}

#view-training.mh-stage3-training .empty-state,
#view-training.mh-stage3-training .jobs-status-panel {
  margin: var(--mh-space-5) 0;
  padding: var(--mh-space-5) var(--mh-space-3);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

#view-training.mh-stage3-training .btn-load-more {
  min-height: 40px;
  border: none;
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface-inset);
  color: var(--mh-text-secondary);
  font-weight: 650;
  box-shadow: none;
}

/* —— Training detail —— */
#view-training-detail.mh-stage3-training-detail .detail-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: var(--mh-space-3);
}

#view-training-detail.mh-stage3-training-detail .back-btn {
  min-height: 32px;
  padding: 0 2px;
  border: none;
  background: transparent;
  color: var(--mh-accent);
  font-size: var(--mh-type-meta);
  font-weight: 650;
  cursor: pointer;
}

#view-training-detail.mh-stage3-training-detail .page-title {
  margin: 0;
  font-size: var(--mh-type-meta);
  font-weight: 650;
  color: var(--mh-text-muted);
}

#view-training-detail.mh-stage3-training-detail .directory-detail-root {
  display: grid;
  gap: 0;
}

#view-training-detail.mh-stage3-training-detail .directory-detail-card,
#view-training-detail.mh-stage3-training-detail .mh-training-detail,
#view-training-detail.mh-stage3-training-detail .mh-dir-detail {
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#view-training-detail.mh-stage3-training-detail .mh-training-detail__canvas,
#view-training-detail.mh-stage3-training-detail .mh-training-detail .detail-content {
  margin: 0;
  padding: 0 0 8px;
  min-height: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#view-training-detail.mh-stage3-training-detail .mh-training-detail__identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 var(--mh-space-4);
}

#view-training-detail.mh-stage3-training-detail .mh-training-detail__mark,
#view-training-detail.mh-stage3-training-detail .mh-provider-logo--detail {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 12px;
  background: #2a2d33;
  color: #c8cbd0;
  border: 1px solid rgba(200, 203, 208, 0.28);
  box-shadow: 0 1px 2px rgba(12, 13, 15, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
}

#view-training-detail.mh-stage3-training-detail .mh-training-detail__mark .ref-rc-logo__initials,
#view-training-detail.mh-stage3-training-detail .mh-provider-logo--detail .ref-rc-logo__initials {
  display: flex !important;
  position: absolute;
  inset: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

#view-training-detail.mh-stage3-training-detail .mh-training-detail__copy {
  min-width: 0;
  flex: 1 1 auto;
}

#view-training-detail.mh-stage3-training-detail .directory-detail-title,
#view-training-detail.mh-stage3-training-detail .mh-dir-detail__title,
#view-training-detail.mh-stage3-training-detail .mh-training-detail__title {
  margin: 0 0 6px;
  max-width: 100%;
  font-size: clamp(1.05rem, 4.8vw, 1.35rem);
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--mh-text);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-training-detail.mh-stage3-training-detail .directory-detail-lead,
#view-training-detail.mh-stage3-training-detail .mh-dir-detail__meta {
  margin: 0 0 var(--mh-space-4);
  max-width: 100%;
  font-size: var(--mh-type-meta);
  color: var(--mh-text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-training-detail.mh-stage3-training-detail .directory-link-row,
#view-training-detail.mh-stage3-training-detail .mh-dir-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--mh-space-5);
}

#view-training-detail.mh-stage3-training-detail .btn-source-link,
#view-training-detail.mh-stage3-training-detail .mh-dir-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--mh-radius-md);
  border: none;
  background: var(--mh-surface-inset);
  color: var(--mh-accent);
  font-size: var(--mh-type-meta);
  font-weight: 650;
  text-decoration: none;
  box-shadow: none;
}

#view-training-detail.mh-stage3-training-detail .btn-source-link--muted,
#view-training-detail.mh-stage3-training-detail .mh-dir-action--muted {
  color: var(--mh-text-secondary);
}

#view-training-detail.mh-stage3-training-detail .directory-section-title,
#view-training-detail.mh-stage3-training-detail .mh-dir-section__label {
  margin: 0 0 var(--mh-space-3);
  font-size: var(--mh-type-label);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-text-muted);
}

#view-training-detail.mh-stage3-training-detail .course-list,
#view-training-detail.mh-stage3-training-detail .mh-dir-section__list {
  list-style: none;
  margin: 0 0 var(--mh-space-4);
  padding: 0;
  display: grid;
  gap: 0;
  background: transparent;
  border: none;
}

#view-training-detail.mh-stage3-training-detail .course-row,
#view-training-detail.mh-stage3-training-detail .mh-dir-course-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title aside"
    "meta aside"
    "provenance provenance";
  align-items: start;
  gap: 2px 12px;
  margin: 0;
  padding: 14px 2px;
  border: none;
  border-bottom: 1px solid var(--mh-line-divider);
  border-radius: 0;
  background: transparent;
}

#view-training-detail.mh-stage3-training-detail .mh-dir-course-row .ref-rc-person-card__body,
#view-training-detail.mh-stage3-training-detail .mh-dir-course-row__body {
  display: contents;
}

#view-training-detail.mh-stage3-training-detail .course-row:last-child,
#view-training-detail.mh-stage3-training-detail .mh-dir-course-row:last-child {
  border-bottom: none;
}

#view-training-detail.mh-stage3-training-detail .course-row-title,
#view-training-detail.mh-stage3-training-detail .mh-dir-course-row__title {
  grid-area: title;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--mh-text);
  overflow-wrap: anywhere;
}

#view-training-detail.mh-stage3-training-detail .course-price,
#view-training-detail.mh-stage3-training-detail .mh-dir-course-row__price {
  grid-area: meta;
  font-size: var(--mh-type-meta);
  font-weight: 600;
  color: var(--mh-text-secondary);
}

#view-training-detail.mh-stage3-training-detail .course-price--muted {
  opacity: 0.9;
}

#view-training-detail.mh-stage3-training-detail .mh-dir-course-row__aside {
  grid-area: aside;
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}

#view-training-detail.mh-stage3-training-detail .course-row-link,
#view-training-detail.mh-stage3-training-detail .mh-dir-course-row__link {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--mh-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

#view-training-detail.mh-stage3-training-detail .directory-foot {
  margin: var(--mh-space-3) 0 0;
  font-size: var(--mh-type-caption);
  color: var(--mh-text-muted);
}

/* —— Dark theme: continuous canvas, no re-cardifying —— */
html[data-theme="dark"] #view-recruiters .mj-recruiter-search-wrap,
html[data-theme="dark"] #view-recruiters .ref-rc-company-card,
html[data-theme="dark"] #view-training .directory-filters,
html[data-theme="dark"] #view-training .mh-training-card,
html[data-theme="dark"] #view-training .compact-job-card.directory-card,
html[data-theme="dark"] #view-training-detail .directory-detail-card,
html[data-theme="dark"] #view-training-detail .mh-training-detail,
html[data-theme="dark"] #view-training-detail .course-row {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] #view-recruiters .mj-recruiter-search-wrap,
html[data-theme="dark"] #view-training #training-search,
html[data-theme="dark"] #view-training #training-country,
html[data-theme="dark"] #view-training #training-course,
html[data-theme="dark"] #view-training-detail .btn-source-link,
html[data-theme="dark"] #view-training-detail .mh-dir-action {
  background: var(--mh-surface-inset);
}

html[data-theme="dark"] #view-recruiters .ref-rc-company-card,
html[data-theme="dark"] #view-training .mh-training-card,
html[data-theme="dark"] #view-training-detail .course-row {
  border-bottom-color: var(--mh-line-divider);
}

html[data-theme="dark"] #view-recruiters .ref-rc-section__count {
  background: transparent;
  color: var(--mh-text-muted);
}

/* —— #562 Medical Coming Soon (honest unavailable catalog) —— */
#view-medical.mh-stage3-medical .mj-recruiter-lead {
  margin: 0 0 var(--mh-space-4);
}

#view-medical.mh-stage3-medical .empty-state,
#view-vessels.mh-stage3-vessels .mh-gated-panel,
#view-medical.mh-stage3-medical .mh-gated-panel {
  margin: var(--mh-space-3) 0;
  padding: var(--mh-space-4) var(--mh-space-3);
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: 16px;
  box-shadow: var(--mh-depth-1-shadow, none);
  text-align: left;
}

#view-medical.mh-stage3-medical .mh-gated-panel .mh-button,
#view-vessels.mh-stage3-vessels .mh-gated-panel .mh-button {
  margin-top: 14px;
  width: 100%;
}

#view-medical.mh-stage3-medical .empty-title {
  margin: 0 0 var(--mh-space-2);
  font-size: 1.05rem;
  font-weight: 750;
}

#view-medical.mh-stage3-medical .mh-medical-list {
  margin: 0;
}

#view-medical.mh-stage3-medical .mh-provider-logo {
  background: #2a2d33 !important;
}

/* —— #582 Stage 3 Vessel Intelligence: News visual language —— */
#view-vessels.mh-stage3-vessels,
#view-vessel-detail.mh-stage3-vessel-detail {
  min-width: 0;
  max-width: 100%;
}

#view-vessels.mh-stage3-vessels .mj-recruiter-lead,
#view-vessel-detail.mh-stage3-vessel-detail .mj-recruiter-lead {
  margin: 0 0 var(--mh-space-4);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-vessels .mh-vessel-search-wrap {
  margin: 0 0 var(--mh-space-3);
}

#view-vessels .mh-vessel-list {
  display: grid;
  gap: 12px;
  margin: 0 0 calc(var(--mh-safe-bottom, 0px) + 12px);
  min-width: 0;
  max-width: 100%;
}

#view-vessels .mh-vessel-list[hidden],
#view-vessels .mj-recruiter-search-wrap[hidden],
#view-vessels #vessels-page-lead[hidden],
#view-vessels #vessels-result-note[hidden],
#view-vessels #vessels-empty[hidden],
#view-vessels[data-vessel-map-open="1"] .mh-vessel-list,
#view-vessels[data-vessel-map-open="1"] .mj-recruiter-search-wrap,
#view-vessels[data-vessel-map-open="1"] #vessels-page-lead,
#view-vessels[data-vessel-map-open="1"] #vessels-result-note,
#view-vessels[data-vessel-map-open="1"] #vessels-empty {
  display: none !important;
}

#view-vessels .mh-vessel-card,
#view-vessels .mh-vessel-card.mh-surface {
  display: grid;
  margin: 0;
  padding: 16px 14px;
  min-width: 0;
  max-width: 100%;
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: 16px;
  box-shadow: var(--mh-depth-1-shadow);
  cursor: pointer;
}

#view-vessels .mh-vessel-card__name,
#view-vessels .mh-news-card__title {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-vessels .mh-vessel-card__meta,
#view-vessels .mh-news-card__meta.mh-vessel-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 8px;
  margin: 0 0 8px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

#view-vessels .mh-vessel-card__meta .mh-news-card__source {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-vessels .mh-vessel-card__match,
#view-vessels .mh-news-card__summary {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-vessels .mh-vessel-card .mh-news-card__origin {
  flex: 0 0 auto;
  width: max-content;
  min-width: min-content;
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  color: var(--mh-gold, #c6a66a);
  font-size: 0.72rem;
  font-weight: 650;
}

#view-vessels .empty-state,
#view-vessels .mh-vessel-unavailable,
#view-vessels .mh-gated-panel,
#view-vessels .mh-vessel-empty {
  margin: var(--mh-space-3) 0;
  padding: var(--mh-space-4) var(--mh-space-3);
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: 16px;
  box-shadow: var(--mh-depth-1-shadow, none);
  text-align: left;
}

#view-vessels .empty-title {
  margin: 0 0 var(--mh-space-2);
  font-size: 1.05rem;
  font-weight: 750;
}

#view-vessels .mh-vessel-back,
#view-vessel-detail .mh-vessel-back,
#view-vessel-detail .mj-recruiter-back--control {
  border-color: var(--mh-saved-active-gold-border);
  box-shadow: inset 0 0 0 1px var(--mh-saved-active-gold-border), var(--mh-depth-1-shadow);
}

.mh-vessel-detail {
  display: grid;
  margin: 0;
  padding: 16px 14px;
  min-width: 0;
  max-width: 100%;
  background: var(--mh-card-surface, var(--mh-surface));
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: 16px;
  box-shadow: var(--mh-depth-1-shadow);
  overflow: hidden;
}

.mh-vessel-photo-wrap {
  margin: -16px -14px 12px;
}

.mh-vessel-photo,
.mh-vessel-photo.mh-news-detail-card__media {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--mh-navy, #121316) 82%, var(--mh-silver, #c8cbd0));
}

.mh-vessel-photo__img,
.mh-vessel-photo .mh-news-detail-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.mh-vessel-photo__cap {
  padding: 10px 14px 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-photo.mh-vessel-photo--fallback,
.mh-vessel-photo.mh-news-detail-card__media.is-unavailable {
  display: grid;
  place-items: start stretch;
  gap: 4px;
  margin: 0 0 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  padding: 12px 14px;
  box-sizing: border-box;
  background: #d5d8de;
  border-radius: 12px;
}

.mh-vessel-photo__fallback-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-photo__fallback-copy {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-credit {
  margin: 4px 0 0;
  padding: 8px 0 0;
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid var(--mh-line-divider, rgba(0, 0, 0, 0.08));
}

.mh-vessel-credit__kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-text-muted, #5b6570);
}

.mh-vessel-credit__meta,
.mh-vessel-credit__item {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 0.75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-credit__link {
  color: var(--mh-gold, #c6a66a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mh-vessel-detail__head h1 {
  margin: 10px 0 8px;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-imo,
.mh-vessel-former,
.mh-vessel-source,
.mh-vessel-license,
.mh-vessel-filepage {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-chip {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--mh-gold, #c6a66a);
  background: color-mix(in srgb, var(--mh-gold, #c6a66a) 12%, transparent);
}

.mh-vessel-particulars {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.mh-vessel-particulars th,
.mh-vessel-particulars td {
  text-align: left;
  vertical-align: top;
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--mh-line-divider, rgba(0, 0, 0, 0.08));
  font-size: 0.92rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-particulars th {
  width: 42%;
  color: var(--mh-text-muted, #5b6570);
  font-weight: 600;
}

.mh-vessel-unknown {
  font-style: italic;
  color: var(--mh-text-muted, #5b6570);
}

.mh-vessel-section {
  margin: 16px 0;
}

.mh-vessel-section h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}

html[data-theme="dark"] .mh-vessel-photo--fallback,
html[data-theme="dark"] .mh-vessel-photo.mh-news-detail-card__media.is-unavailable {
  background: #2a2f38;
}

html[data-theme="dark"] .mh-vessel-credit {
  border-top-color: var(--mh-line-divider);
}

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

html[data-theme="dark"] .mh-vessel-particulars th,
html[data-theme="dark"] .mh-vessel-particulars td {
  border-bottom-color: var(--mh-line-divider);
}

/* —— #582 Stage 4A map shell —— */
#view-vessels .mj-recruiter-topbar__titles {
  min-width: 0;
  flex: 1 1 5.5rem;
}

#view-vessels .mj-recruiter-topbar__title {
  overflow-wrap: anywhere;
}

#view-vessels .mh-vessel-map-open,
#view-vessel-detail .mh-vessel-map-open,
.mh-vessel-detail .mh-vessel-map-open {
  flex: 0 0 auto;
  min-width: 3.4rem;
  max-width: 5.5rem;
  margin: 0;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.55);
}

/* #720 / #491: map chrome stays in the app-main scrollport. Do not pin
   height or create an inner scroller (#509). Drop the leftover
   recruiter fixed-nav pad so attribution, actions, and focused detail
   can scroll fully above the in-flow bottom nav + safe-area. */
#view-vessels[data-vessel-map-open="1"].mj-recruiter-ref,
#view-vessels[data-vessel-map-open="1"] {
  padding-bottom: var(--main-scroll-pad, 24px);
}

.app-main:has(#view-vessels[data-vessel-map-open="1"]) {
  scroll-padding-bottom: calc(var(--main-scroll-pad, 24px) + 8px);
}

#vessel-map-panel.mh-vessel-map {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding-bottom: var(--main-scroll-pad, 24px);
}

#vessel-map-panel[hidden] {
  display: none;
}

.mh-vessel-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.mh-vessel-map__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.mh-vessel-map__coverage,
.mh-vessel-map__detail-source,
.mh-vessel-map__detail-meta {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-vessel-map__canvas {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  background: #0e1826;
}

.mh-vessel-map__gl,
.mh-vessel-map__markers {
  position: absolute;
  inset: 0;
}

.mh-vessel-map__gl {
  z-index: 0;
}

/* maplibre-gl.css sets .maplibregl-map { position: relative } after this
   file loads. Keep the GL host filling the 220/168px wrapper or the
   canvas collapses and only the CSS water fill is visible. */
#vessel-map-gl.mh-vessel-map__gl,
#vessel-map-gl.mh-vessel-map__gl.maplibregl-map,
.mh-vessel-map__gl.maplibregl-map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.mh-vessel-map__gl .maplibregl-map,
.mh-vessel-map__gl .maplibregl-canvas,
.mh-vessel-map__gl .maplibregl-canvas-container {
  width: 100%;
  height: 100%;
}

.mh-vessel-map__gl .maplibregl-control-container {
  z-index: 6;
  pointer-events: auto;
}

.mh-vessel-map__gl .maplibregl-ctrl-top-right {
  top: 6px;
  right: 6px;
  z-index: 6;
}

.mh-vessel-map__gl .maplibregl-ctrl-group {
  opacity: 1;
  visibility: visible;
  background: #f7f1e3;
  border: 1px solid #8a6f3d;
}

html[data-theme="dark"] .mh-vessel-map__gl .maplibregl-ctrl-group {
  background: #f4ead3;
  border-color: #c4b089;
}

.mh-vessel-map__gl .maplibregl-ctrl button {
  width: 32px;
  height: 32px;
  opacity: 1;
  visibility: visible;
}

.mh-vessel-map__markers {
  z-index: 2;
  pointer-events: none;
}

.mh-vessel-map__markers .mh-vessel-map__marker,
.mh-vessel-map__markers .mh-vessel-map__cluster {
  pointer-events: auto;
}

.mh-vessel-map__attribution {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  scroll-margin-bottom: calc(var(--main-scroll-pad, 24px) + 8px);
}

.mh-vessel-map__marker,
.mh-vessel-map__cluster {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mh-vessel-map__marker {
  width: 18px;
  height: 18px;
  background: transparent;
}

.mh-vessel-map__marker span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 3px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 0 2px rgba(20, 22, 27, 0.7);
}

.mh-vessel-map__marker.is-selected span {
  width: 14px;
  height: 14px;
  margin: 2px;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.45);
}

.mh-vessel-map__marker.is-stale span {
  background: #b0893a;
}

.mh-vessel-map__marker.is-historical span {
  background: #8a93a3;
}

.mh-vessel-map__cluster {
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  color: #14161b;
  background: #d4af37;
  font-size: 0.75rem;
  font-weight: 800;
}

.mh-vessel-map__detail {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  min-width: 0;
  scroll-margin-bottom: calc(var(--main-scroll-pad, 24px) + 8px);
}

.mh-vessel-map__detail-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c9a227;
}

.mh-vessel-map__detail-name {
  margin: 0 0 6px;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.mh-vessel-map__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  scroll-margin-bottom: calc(var(--main-scroll-pad, 24px) + 8px);
}

#vessel-map-retry[hidden],
#vessel-map-panel .mh-vessel-map__actions #vessel-map-retry[hidden] {
  display: none !important;
}

.mh-vessel-map__status {
  margin: 0;
}

/* 320 / iPhone SE (568vh): keep canvas + marker in the captured panel.
   Visual Review uses height 568 at 320px; a long status card above a
   220px canvas is clipped by the viewport / in-flow bottom nav. */
@media (max-width: 360px) {
  /* News-derived compact Back / Map / Close / header at 320. */
  #view-vessels[data-vessel-map-open="1"] .mj-recruiter-topbar {
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
  }

  #view-vessels[data-vessel-map-open="1"] .mj-recruiter-back.mj-recruiter-back--label,
  #view-vessels[data-vessel-map-open="1"] .mj-recruiter-back.mj-recruiter-back--control {
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding: 0 6px 0 0;
    font-size: 0.78rem;
  }

  #view-vessels[data-vessel-map-open="1"] .mj-recruiter-back__chev {
    font-size: 1.1rem;
  }

  #view-vessels[data-vessel-map-open="1"] .mj-recruiter-topbar__title {
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.15;
  }

  #view-vessels[data-vessel-map-open="1"] .mh-vessel-map-open {
    min-width: 0;
    max-width: 3.6rem;
    min-height: 28px;
    padding: 0.2rem 0.48rem;
    font-size: 0.7rem;
  }

  #vessel-map-panel .mh-vessel-map__bar {
    gap: 4px;
  }

  #vessel-map-panel .mh-vessel-map__title {
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.2;
  }

  #vessel-map-panel #vessel-map-close,
  #vessel-map-panel .mh-vessel-map__close {
    min-height: 28px;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }

  #view-vessels[data-vessel-map-open="1"].mj-recruiter-ref,
  #view-vessels[data-vessel-map-open="1"] {
    padding-bottom: 8px;
  }

  #vessel-map-panel.mh-vessel-map {
    gap: 8px;
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 8px;
  }

  /* Unwrap title/body into the panel grid. A padded empty-state card
     above a 168px canvas is what put the map under the in-flow nav. */
  #vessel-map-panel #vessel-map-status {
    display: contents;
  }

  #vessel-map-panel .mh-vessel-map__bar {
    order: 1;
  }

  #vessel-map-panel [data-vessel-map-title] {
    order: 2;
    min-width: 0;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  #vessel-map-panel .mh-vessel-map__coverage {
    order: 3;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.3;
  }

  #vessel-map-panel #vessel-map-canvas {
    order: 4;
    height: 168px;
    min-height: 160px;
    max-height: 180px;
  }

  /* Compact source line stays above the canvas so scrollTop=0 still
     clears the nav, and attribution+detail+actions remain the only
     chrome that must fit in app-main after scroll-to-end. */
  #vessel-map-panel [data-vessel-map-body] {
    order: 2;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.78rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  #vessel-map-panel #vessel-map-attribution {
    order: 6;
    min-width: 0;
    font-size: 0.6rem;
    line-height: 1.25;
  }

  #vessel-map-panel #vessel-map-detail {
    order: 7;
    padding: 8px 10px;
  }

  #vessel-map-panel .mh-vessel-map__detail-name {
    margin-bottom: 2px;
    font-size: 0.95rem;
  }

  #vessel-map-panel .mh-vessel-map__detail-source,
  #vessel-map-panel .mh-vessel-map__detail p.muted {
    font-size: 0.7rem;
    line-height: 1.25;
  }

  #vessel-map-panel .mh-vessel-map__actions {
    order: 8;
    flex-wrap: nowrap;
    gap: 6px;
  }

  #vessel-map-panel .mh-vessel-map__actions .mh-button {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
}

html[data-theme="light"] .mh-vessel-map__canvas {
  background: #6f96b4;
}

@media (prefers-reduced-motion: reduce) {
  .mh-vessel-map__marker span,
  .mh-vessel-map__cluster {
    transition: none;
  }
}