/* Training Centres directory — European STCW / OPITO / GWO / DP centres.
   Independent cache-bust from the shared asset token (see index.html). */

#view-training.mh-training-dir,
#view-training-detail.mh-training-dir {
  --mh-tr-surface: var(--mh-card-surface, var(--mh-surface, #1b212b));
  --mh-tr-surface-2: var(--mh-surface-inset, #202632);
  --mh-tr-line: var(--ap-line, var(--mh-border-subtle, #424752));
  --mh-tr-text: var(--mh-text, #e8eaf0);
  --mh-tr-muted: var(--mh-text-muted, #aeb8c9);
  --mh-tr-accent: var(--ap-accent, #d6dce5);
  --mh-tr-accent-ink: var(--ap-accent-ink, #13151a);
  --mh-tr-verified: #8fd3b5;
  --mh-tr-price: #f2d38a;
  --mh-tr-radius: var(--mh-card-radius, 17px);
  --mh-tr-shadow: 0 10px 28px rgba(6, 9, 14, 0.36);
}

/* ------------------------------------------------------------------ */
/* Snapshot status banner                                              */
/* ------------------------------------------------------------------ */
#view-training.mh-training-dir .mh-training-status {
  display: grid !important;
  gap: 4px !important;
  margin: 2px 0 10px !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 75%, transparent) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--mh-tr-surface) 88%, transparent) !important;
}

#view-training.mh-training-dir .mh-training-status .mh-training-status__meta {
  display: inline !important;
}

#view-training .mh-training-status__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

#view-training .mh-training-status__kicker {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-tr-accent) 18%, transparent);
  color: var(--mh-tr-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#view-training .mh-training-status[data-catalog-freshness="stale"] .mh-training-status__kicker {
  background: color-mix(in srgb, #e8b84a 24%, transparent);
}

#view-training .mh-training-status__meta {
  margin: 0;
  color: var(--mh-tr-muted);
  font-size: 12px;
  line-height: 1.3;
}

#view-training .mh-training-status__details {
  margin: 0;
}

#view-training .mh-training-status__details summary {
  list-style: none;
  cursor: pointer;
  min-height: 0;
  padding: 0;
  color: var(--mh-tr-muted);
  font-size: 11.5px;
  font-weight: 700;
}

#view-training .mh-training-status__details summary::-webkit-details-marker {
  display: none;
}

#view-training .mh-training-status__details[open] summary {
  margin-bottom: 4px;
}

#view-training .mh-training-status .mh-catalog-status__scope,
#view-training .mh-training-status .mh-catalog-status__limits {
  margin: 0 0 2px;
  color: var(--mh-tr-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

#view-training .mh-training-dir__lead {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.35;
}

/* ------------------------------------------------------------------ */
/* Toolbar: search + filter picks                                       */
/* ------------------------------------------------------------------ */
#view-training .mh-training-toolbar--dir {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

#view-training.mh-training-dir #training-filter-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#view-training.mh-training-dir #training-filter-row[hidden],
#view-training.mh-training-dir #training-filter-row.is-collapsed {
  display: none !important;
}

#view-training.mh-training-dir #training-filter-row::-webkit-scrollbar {
  display: none;
}

#view-training .mh-training-pick {
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  /* Four picks and the sticky reset share one 375 px row: at 76 px the reset
     sat on top of the PRICE pick (owner's sweep, 2026-09-20). */
  min-width: 64px;
  min-height: 44px;
  padding: 5px 9px !important;
  border-radius: 12px !important;
  text-align: left;
  line-height: 1.15;
}

#view-training .mh-training-pick__label {
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#view-training .mh-training-pick__value {
  max-width: 132px;
  overflow: hidden;
  color: var(--mh-tr-text);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-training .mh-training-pick.is-active {
  border-color: color-mix(in srgb, var(--mh-tr-accent) 70%, transparent) !important;
  background: color-mix(in srgb, var(--mh-tr-accent) 14%, transparent) !important;
}

#view-training .mh-training-filter-reset {
  flex: 0 0 auto;
  min-height: 44px;
  border-radius: 12px !important;
  /* The strip scrolls sideways, and at 320px the reset used to sit past the right edge: a
     reader had to know it was there and swipe for it. Sticking it to the edge keeps the way
     out of a filter in view at every width. */
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--mh-tr-surface) !important;
  box-shadow: -10px 0 12px -6px var(--mh-tr-surface);
}

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

#view-training .mh-training-filter-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Picker sheet */
#view-training .mh-training-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 10, 14, 0.56);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#view-training .mh-training-picker-sheet[hidden] {
  display: none !important;
}

#view-training .mh-training-picker-sheet__panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 480px);
  max-height: min(78vh, 640px);
  padding: 12px 12px calc(12px + var(--mh-safe-bottom, env(safe-area-inset-bottom, 0px)));
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 80%, transparent);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--ap-sheet-bg, var(--mh-tr-surface));
  color: var(--mh-tr-text);
  box-shadow: 0 -12px 36px rgba(6, 9, 14, 0.5);
}

#view-training .mh-training-picker-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#view-training .mh-training-picker-sheet__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
}

#view-training .mh-training-picker-sheet__search {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 80%, transparent);
  border-radius: 12px;
  background: var(--ap-input-bg, var(--mh-tr-surface-2));
  color: inherit;
  font: inherit;
}

#view-training .mh-training-picker-sheet__search[hidden] {
  display: none;
}

#view-training .mh-training-picker-sheet__list {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding-bottom: 4px;
  overflow: auto;
}

#view-training .mh-training-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mh-tr-surface-2) 80%, transparent);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

#view-training .mh-training-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--mh-tr-accent) 70%, transparent);
  background: color-mix(in srgb, var(--mh-tr-accent) 16%, transparent);
  font-weight: 750;
}

#view-training .mh-training-picker-option.is-empty {
  opacity: 0.5;
}

#view-training .mh-training-picker-option__count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-tr-line) 45%, transparent);
  color: var(--mh-tr-muted);
  font-size: 11.5px;
  font-weight: 750;
  text-align: center;
}

#view-training .mh-training-picker-sheet__empty {
  margin: 8px 4px;
  font-size: 13px;
}

body.mh-training-picker-open {
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* List                                                                 */
/* ------------------------------------------------------------------ */
#view-training .mh-training-dir__note {
  margin: 4px 2px 8px;
  font-size: 12px;
}

#view-training .mh-training-dir__note:empty {
  display: none;
}

#view-training .mh-training-list {
  display: grid;
  gap: 8px;
}

#view-training .mh-training-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 2px 2px;
  padding: 0;
  color: var(--mh-tr-text);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#view-training .mh-training-list > .mh-training-group-label:first-child {
  margin-top: 2px;
}

#view-training .mh-training-group-label__flag {
  font-size: 1rem;
  line-height: 1;
}

#view-training .mh-training-group-label__count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-tr-line) 45%, transparent);
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

#view-training.mh-training-dir .mh-training-card--v2 {
  position: relative;
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) 14px !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100%;
  min-height: 104px !important;
  margin: 0 !important;
  padding: 10px 12px 10px 10px !important;
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 78%, transparent) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mh-tr-surface) 92%, #ffffff) 0%, var(--mh-tr-surface) 70%) !important;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(6, 9, 14, 0.22) !important;
  transition: transform 160ms ease, border-color 160ms ease;
  /* A card far below the fold is laid out and painted only as it comes near: with the whole
     catalogue in one list, a fast flick on an iPhone out-ran the tiles WebKit could paint and
     the list went blank (video audit 2026-09-24, MH-AUD-001). The intrinsic size keeps the
     scrollbar and the saved scroll offset honest while a card is skipped. */
  content-visibility: auto;
  contain-intrinsic-size: auto 124px;
}

#view-training.mh-training-dir .mh-training-az-rail[hidden] {
  display: none !important;
}

#view-training .mh-training-card--v2:active {
  transform: scale(0.992);
}

#view-training .mh-training-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 88px;
  overflow: hidden;
  border-radius: 13px;
  background: var(--mh-id-bg, #1c2b36);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#view-training .mh-training-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mh-hero-object-position, 50% 50%);
  filter: saturate(0.9) contrast(1.04);
}

#view-training .mh-training-card__badge-logo {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  padding: 2px;
  border-radius: 9px;
  /* The badge shows its box only once the mark is in it (is-loaded) or has lent it its own
     edge colour (data-plate-sampled); before that it is invisible, not an empty white square
     on the photograph (video audit 2026-09-24, MH-AUD-005). */
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

#view-training .mh-training-card__badge-logo.is-loaded,
#view-training .mh-training-card__badge-logo[data-plate-sampled] {
  /* The badge takes the mark's own edge colour once the file has loaded (data-plate-sampled),
     so a mark drawn on its own coloured ground fills the badge instead of sitting in a white box. */
  background: var(--mh-plate-bg, rgba(255, 255, 255, 0.94));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#view-training .mh-training-card__logo {
  width: 88%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

#view-training .mh-training-card__media--logo {
  /* The centre's palette colour - the same ground a photograph card shows behind its picture -
     until the mark has arrived; a white plate with nothing on it read as a broken card
     (video audit 2026-09-24, MH-AUD-005). */
  background: var(--mh-id-bg, #1c2b36);
}

#view-training .mh-training-card__media--logo.is-loaded,
#view-training .mh-training-card__media--logo[data-plate-sampled] {
  background: var(--mh-plate-bg, linear-gradient(160deg, #ffffff 0%, #eef1f5 100%));
}

#view-training .mh-training-card__media--logo.is-dark {
  background: linear-gradient(160deg, #202a36 0%, #121820 100%);
}

#view-training .mh-training-card__badge-logo.is-dark {
  background: rgba(18, 24, 32, 0.92);
}

#view-training-detail .mh-training-detail__mark--logo.is-dark {
  background: #161c25;
}

#view-training .mh-training-card__monogram {
  color: var(--mh-id-ink, #dfe8f1);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

#view-training .mh-training-card__media--monogram::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.22) 100%);
}

#view-training .mh-training-card__flag {
  position: absolute;
  left: 6px;
  bottom: 5px;
  z-index: 2;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.62);
  font-size: 12.5px;
  line-height: 1.2;
}

#view-training .mh-training-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#view-training .mh-training-card__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.96rem;
  font-weight: 750;
  line-height: 1.2;
}

#view-training .mh-training-card__place {
  color: var(--mh-tr-muted);
  font-size: 12px;
  line-height: 1.28;
}

#view-training .mh-training-card__schemes,
#view-training .mh-training-card__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

#view-training .mh-training-card__scheme,
#view-training .mh-training-card__more {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-tr-accent) 16%, transparent);
  color: var(--mh-tr-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

#view-training .mh-training-card__more {
  background: color-mix(in srgb, var(--mh-tr-line) 45%, transparent);
  color: var(--mh-tr-muted);
}

#view-training .mh-training-card__signal {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-tr-line) 40%, transparent);
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#view-training .mh-training-card__signal--price {
  background: color-mix(in srgb, var(--mh-tr-price) 18%, transparent);
  color: var(--mh-tr-price);
  font-weight: 800;
}

#view-training .mh-training-card__signal--verified {
  background: color-mix(in srgb, var(--mh-tr-verified) 16%, transparent);
  color: var(--mh-tr-verified);
}

#view-training .mh-training-card--v2 .mh-dir-row__chev {
  justify-self: end;
  color: var(--mh-tr-muted);
  font-size: 1.3rem;
  line-height: 1;
}

@media (max-width: 359px) {
  #view-training .mh-training-card--v2 {
    grid-template-columns: 96px minmax(0, 1fr) 12px;
    gap: 10px;
  }

  #view-training .mh-training-card__media {
    width: 96px;
    height: 76px;
  }

  #view-training .mh-training-card__signal:nth-child(n + 3),
  #view-training .mh-training-card__scheme:nth-child(n + 3) {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Detail                                                               */
/* ------------------------------------------------------------------ */
#view-training-detail .mh-training-detail--v2 {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#view-training-detail .mh-training-detail--v2 .mh-training-detail__canvas {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 0 12px;
}

#view-training-detail .mh-training-detail__hero {
  position: relative;
  display: grid;
  align-items: end;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 186px;
  max-height: 320px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 80%, transparent);
  border-radius: 18px;
  background: var(--mh-id-bg, #1c2b36);
  color: #f4f6fa;
  box-shadow: var(--mh-tr-shadow);
}

#view-training-detail .mh-training-detail__hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mh-hero-object-position, 50% 50%);
  filter: saturate(0.86) contrast(1.04);
}

#view-training-detail .mh-training-detail__hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 16, 24, 0.5) 0%, rgba(8, 16, 24, 0.18) 45%, transparent 75%),
    linear-gradient(180deg, transparent 30%, rgba(8, 16, 24, 0.7) 100%);
}

#view-training-detail .mh-training-detail__hero--designed {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--mh-id-bg, #1c2b36) 82%, #ffffff) 0%, var(--mh-id-bg, #1c2b36) 55%, #0f151d 100%);
}

#view-training-detail .mh-training-detail__hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
}

#view-training-detail .mh-training-detail__hero-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  max-width: calc(100% - 20px);
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.7);
  color: #f4f6fa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

#view-training-detail .mh-training-detail__hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
  padding: 14px;
}

#view-training-detail .mh-training-detail__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--mh-id-bg, #1c2b36);
  color: var(--mh-id-ink, #dfe8f1);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 8px 18px rgba(6, 9, 14, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#view-training-detail .mh-training-detail__mark--logo {
  padding: 4px;
  background: var(--mh-plate-bg, #ffffff);
}

#view-training-detail .mh-training-detail__mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#view-training-detail .mh-training-detail__hero-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#view-training-detail .mh-training-detail__eyebrow {
  margin: 0;
  color: rgba(244, 246, 250, 0.82);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(8, 16, 24, 0.6);
}

#view-training-detail .mh-training-detail__title {
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(1.08rem, 1.3rem, 1.4rem);
  line-height: 1.16;
  overflow-wrap: break-word;
  text-shadow: 0 1px 12px rgba(8, 16, 24, 0.7);
}

#view-training-detail .mh-training-detail__hero-schemes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 0;
}

#view-training-detail .mh-training-detail__hero-scheme {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(244, 246, 250, 0.18);
  color: #f7f9fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#view-training-detail .mh-training-detail__phone,
#view-training-detail .mh-training-detail__email {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0 2px;
  min-width: 0;
}

#view-training-detail .mh-training-detail__phone-label {
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#view-training-detail .mh-training-detail__phone-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--mh-tr-text);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}

#view-training-detail.mh-training-dir .mh-training-detail__actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#view-training-detail.mh-training-dir .mh-training-detail__actions .mh-training-detail__action.mh-button.mh-button--outline,
#view-training-detail.mh-training-dir .mh-training-detail__map-actions .mh-training-detail__action.mh-button.mh-button--outline {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 4px !important;
  border-radius: 14px !important;
  font-size: 11.5px !important;
  font-weight: 750;
  text-decoration: none;
}

#view-training-detail .mh-training-detail__action .ref-rc-detail__action-icon {
  display: inline-flex;
  color: inherit;
}

#view-training-detail .mh-training-detail__availability,
#view-training-detail .mh-training-detail__checked {
  margin: 0 2px;
  color: var(--mh-tr-muted);
  font-size: 11.5px;
  line-height: 1.3;
}

#view-training-detail .mh-training-detail__checked {
  font-weight: 650;
}

#view-training-detail .mh-training-detail__offline-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(232, 184, 74, 0.46);
  border-radius: 12px;
  background: rgba(232, 184, 74, 0.14);
  color: var(--mh-tr-text);
  font-size: 12px;
  line-height: 1.35;
}

#view-training-detail .mh-training-detail__section,
#view-training-detail .mh-training-detail__intro {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 78%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--mh-tr-surface) 92%, transparent);
}

#view-training-detail .mh-training-detail__intro {
  color: var(--mh-tr-text);
  font-size: 12.5px;
  line-height: 1.45;
}

#view-training-detail .mh-training-detail__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#view-training-detail .mh-training-detail__section-head h2,
#view-training-detail .mh-training-detail__section > .directory-section-title {
  margin: 0;
  font-size: 0.92rem;
}

#view-training-detail .mh-training-detail__section > .directory-section-title {
  margin-bottom: 8px;
}

#view-training-detail .mh-training-detail__section-count {
  flex: 0 0 auto;
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

#view-training-detail .mh-training-detail__facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

#view-training-detail .mh-training-detail__facts > div {
  display: grid;
  gap: 2px;
}

#view-training-detail .mh-training-detail__facts dt {
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#view-training-detail .mh-training-detail__facts dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#view-training-detail .mh-training-detail__map-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 10px;
}

#view-training-detail .mh-training-detail__map-actions .mh-training-detail__action {
  flex-direction: row;
  min-height: 44px;
}

/* Accreditations */
#view-training-detail .mh-training-detail__acc-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-training-detail .mh-training-detail__acc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mh-tr-surface-2) 85%, transparent);
}

#view-training-detail .mh-training-detail__acc-scheme {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-tr-accent) 18%, transparent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#view-training-detail .mh-training-detail__acc[data-acc-status="register_listed"] .mh-training-detail__acc-scheme {
  background: color-mix(in srgb, var(--mh-tr-verified) 20%, transparent);
  color: var(--mh-tr-verified);
}

#view-training-detail .mh-training-detail__acc-status {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--mh-tr-muted);
  font-size: 11.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#view-training-detail .mh-training-detail__acc-list li:only-child .mh-training-detail__acc-status,
#view-training-detail .mh-training-detail__acc[open] .mh-training-detail__acc-status {
  -webkit-line-clamp: 6;
}

#view-training-detail .mh-training-detail__acc-link,
#view-training-detail .mh-training-source-link {
  color: var(--mh-tr-text);
  font-size: 11.5px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Courses */
#view-training-detail .mh-training-detail__course-group {
  margin-top: 10px;
}

#view-training-detail .mh-training-detail__course-group:first-of-type {
  margin-top: 0;
}

#view-training-detail .mh-training-detail__course-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#view-training-detail .mh-training-detail__course-group-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-tr-line) 45%, transparent);
  font-size: 11px;
  text-align: center;
}

#view-training-detail .mh-training-course-list {
  display: grid;
  gap: 10px;
}

#view-training-detail.mh-training-dir .mh-training-course {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
  min-width: 0;
  margin: 0 !important;
  padding: 12px 12px 13px !important;
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 60%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--mh-tr-surface-2) 78%, transparent) !important;
  box-shadow: none !important;
}

#view-training-detail.mh-training-dir .mh-training-course__body {
  display: grid;
  gap: 5px;
  min-width: 0;
  justify-items: start;
  text-align: left;
}

#view-training-detail .mh-training-course__title {
  margin: 0;
  color: var(--mh-tr-text);
  font-family: var(--mh-font, inherit);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  /* break-word, not anywhere: a word is split only when it alone is wider than
     the column, so "Responsibility" keeps whole next to the price column. */
  overflow-wrap: break-word;
}

#view-training-detail .mh-training-course__meta {
  margin: 0;
  color: var(--mh-tr-muted);
  font-size: 12px;
  line-height: 1.4;
}

#view-training-detail.mh-training-dir .mh-training-course-provenance {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin: 1px 0 0 !important;
  padding: 0 !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course__aside .mh-training-chip {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--mh-tr-line) 40%, transparent) !important;
  color: var(--mh-tr-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  /* "Price checked 2026-09-17" is wider than the price column; a chip that
     cannot break ran past the card's edge (owner, 2026-09-20). It wraps now
     and never grows past its column. */
  max-width: 100%;
  box-sizing: border-box;
  padding-block: 2px !important;
  white-space: normal;
  overflow-wrap: normal;
  text-align: right;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course__aside .mh-training-chip::before {
  content: none !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course__aside .mh-training-chip--stale {
  background: rgba(232, 184, 74, 0.18) !important;
  color: #f2d38a !important;
}

/* The price column sits in an `auto` track next to a `1fr` one, so it ends at its
   min-content width: the widest unbreakable item. A floor keeps "Not published",
   "Official source" and a two-line "Price checked <date>" chip whole, a ceiling
   keeps the title its room; nothing in it may break inside a word. */
#view-training-detail .mh-training-course__aside {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 118px;
  max-width: min(152px, 46%);
  padding-top: 1px;
  text-align: right;
}

#view-training-detail .mh-training-course__aside > * {
  max-width: 100%;
}

#view-training-detail .mh-training-course__price {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

#view-training-detail .mh-training-course__price--known {
  color: var(--mh-tr-price);
}

#view-training-detail .mh-training-course__price--request {
  color: var(--mh-tr-text);
  font-size: 12px;
  font-weight: 700;
}

#view-training-detail .mh-training-course__price--missing {
  color: var(--mh-tr-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: normal;
}

/* A price that stands on a condition, and one whose readings disagree, are not the same
   thing as a missing price - they say something, so they read like the price line, not like
   grey small print. */
/* A sum that belongs to the centre's other courses must not read like the answer to the
   filter, and the line that says so must not be mistaken for small print. */
#view-training .mh-training-card__signal--price-other {
  opacity: 0.85;
}

#view-training .mh-training-card__signal--price-note {
  color: var(--mh-tr-muted, #9aa4b2);
  font-weight: 650;
  white-space: normal;
}

#view-training-detail .mh-training-course__price--conditional {
  color: var(--mh-tr-price);
  font-size: 12px;
  font-weight: 700;
  white-space: normal;
}

#view-training-detail .mh-training-course__price--unconfirmed {
  color: var(--mh-tr-text);
  font-size: 12px;
  font-weight: 700;
  white-space: normal;
}

/* The unit, the conditions and the other published rates sit under the sum and wrap: a rate
   that only applies in English, or only in Liverpool, is part of the price. */
#view-training-detail .mh-training-course__unit,
#view-training-detail .mh-training-course__conditions,
#view-training-detail .mh-training-course__alternates {
  color: var(--mh-tr-muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

#view-training-detail .mh-training-course__alternates {
  color: var(--mh-tr-text);
}

#view-training-detail .mh-training-course__wording {
  color: var(--mh-tr-muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#view-training-detail .mh-training-course__source {
  font-size: 11px;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__course-more {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px !important;
  margin: 6px 0 0 !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--mh-tr-line) 70%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--mh-tr-surface-2) 70%, transparent) !important;
  color: var(--mh-tr-text) !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 750 !important;
  cursor: pointer;
}

#view-training-detail .mh-training-detail__course-rest[hidden] {
  display: none !important;
}

#view-training-detail .mh-training-detail__course-rest {
  margin-top: 6px;
}

#view-training-detail .mh-training-detail__price-note,
#view-training-detail .mh-training-detail__empty {
  margin: 10px 0 0;
  color: var(--mh-tr-muted);
  font-size: 11px;
  line-height: 1.35;
}

#view-training-detail .mh-training-detail__empty {
  margin-top: 0;
}

/* Provenance */
#view-training-detail .mh-training-detail__provenance {
  margin: 0;
}

#view-training-detail .mh-training-detail__sources summary {
  cursor: pointer;
  color: var(--mh-tr-muted);
  font-size: 12px;
  font-weight: 750;
}

/* A disclosure summary is the row you tap, and this one was 17 px tall (#884, audit
   2026-09-22 UX-002) - the same control the medical detail sized in #778, in one more
   place. The course rows are excluded there and here: they are summaries too, and they
   lay their contents out in a grid. */
#view-training-detail summary:not(.mh-dir-course-row__body) {
  display: flex;
  align-items: center;
  min-height: 44px;
}

#view-training-detail .mh-training-detail__sources[open] summary {
  margin-bottom: 6px;
}

#view-training-detail .mh-training-meta--secondary {
  margin: 0 0 6px;
  color: var(--mh-tr-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

#view-training-detail .mh-training-detail__source-list {
  display: grid;
  gap: 4px;
  margin: 0 0 6px;
  padding: 0 0 0 16px;
  font-size: 11.5px;
}

/* Focus + motion */
#view-training .mh-training-card--v2:focus-visible,
#view-training .mh-training-pick:focus-visible,
#view-training .mh-training-picker-option:focus-visible,
#view-training .mh-training-picker-sheet__search:focus-visible,
#view-training-detail .mh-training-detail__action:focus-visible,
#view-training-detail .mh-training-source-link:focus-visible,
#view-training-detail .mh-training-detail__acc-link:focus-visible,
#view-training-detail .mh-training-detail__phone-value:focus-visible {
  outline: 2px solid var(--ap-focus, #d6e3f5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #view-training .mh-training-card--v2 {
    transition: none;
  }
}

/* Specificity guards against the shared directory/approved rules that pad the
   catalogue banner, hide its meta line, turn <summary> into a 44px button and
   render course source links as 36px pills. */
html #view-training.mh-training-dir.mh-stage3-training .mh-training-status.mh-catalog-status {
  display: grid !important;
  gap: 4px !important;
  margin: 2px 0 10px !important;
  padding: 10px 12px !important;
}

html[data-theme] #view-training.mh-training-dir #training-freshness-banner .mh-training-status__meta,
html #view-training.mh-training-dir.mh-stage3-training .mh-training-status .mh-training-status__meta {
  display: inline !important;
  margin: 0 !important;
  font-size: 12px !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions.ref-rc-detail__actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  gap: 6px !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions .mh-training-detail__action.mh-button,
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__map-actions .mh-training-detail__action.mh-button {
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Four and five actions were pinned to four and five columns at any width. On a phone that is a
   67 px and a 52 px tile, and "Courses & prices" and "Official catalogue" were cut mid-word with
   no ellipsis. Six actions have no such rule, fall through to the auto-fit track above, and lay
   out three to a row at 91 px where the labels read. On a phone, four and five follow six
   (#842, TRN-14). */
@media (max-width: 430.99px) {
  html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="4"],
  html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions[data-action-count="5"] {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  }

  /* And the label takes the second line it needs. The icon keeps its own line above it. */
  html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions .mh-training-detail__action.mh-button > span:not(.ref-rc-detail__action-icon) {
    white-space: normal !important;
    overflow-wrap: break-word;
    text-align: center;
  }
}

html #view-training.mh-training-dir.mh-stage3-training .mh-training-status summary.mh-training-status__more {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mh-tr-muted) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course .mh-training-course__source {
  display: inline !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mh-tr-text) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course::before,
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course::after {
  content: none !important;
  display: none !important;
}

/* The Courses section while its list is on the way (#842, TRN-08). One line tall now and several
   screens tall a moment later moves whatever the reader was about to tap; this holds enough room
   for the first courses so the page settles instead of jumping. */
.mh-training-detail__courses--loading {
  min-height: 220px;
}

.mh-training-detail__courses--loading .mh-training-detail__empty {
  padding: 24px 0;
}

/* TRN-16. The right-hand column is capped at 132 px, which is half a 320 px row, and the terms of
   a price - the language it applies in, the branch, the VAT status, the other published rates -
   were wrapping inside that ribbon. On a phone a row that carries terms puts them under the course
   name with the whole row to wrap in; a row that carries only a sum keeps its right-hand column so
   the list still reads down one edge. */
@media (max-width: 430px) {
  #view-training-detail.mh-training-dir .mh-training-course:has(.mh-training-course__conditions),
  #view-training-detail.mh-training-dir .mh-training-course:has(.mh-training-course__alternates) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #view-training-detail .mh-training-course:has(.mh-training-course__conditions) .mh-training-course__aside,
  #view-training-detail .mh-training-course:has(.mh-training-course__alternates) .mh-training-course__aside {
    max-width: none;
    justify-items: start;
    text-align: left;
  }

  #view-training-detail .mh-training-course:has(.mh-training-course__conditions) .mh-training-course__price,
  #view-training-detail .mh-training-course:has(.mh-training-course__alternates) .mh-training-course__price {
    white-space: normal;
  }
}

/* -- Release audit, 2026-09-20 ----------------------------------------------
   Read on the live TEST build at 375 and 320 by scripts/miniapp_release_audit_842.js. */

/* A centre's name is its identity: three lines hold every name in the catalogue
   ("International Maritime Training Center", "RelyOn Oostende (RelyOn Nutec
   Belgium)"); two clipped them with an ellipsis. */
#view-training .mh-training-card__name,
html #view-training.mh-stage3-training.mh-training-dir .ref-rc-company-card__name {
  -webkit-line-clamp: 3;
}

/* At 320 the title column beside the picture is 104px: 115 of 268 names needed
   a fourth or fifth line at 16px. A smaller face and four lines hold them. */
@media (max-width: 360px) {
  /* !important because the approved sheet sets 16px on every card name from a
     selector of the same weight and loads later; six lines for the eight
     institutional names of 48-83 characters ("Newcastle International Training
     Academy in Partnership with 3t Training Services"). */
  html #view-training.mh-stage3-training.mh-training-dir .ref-rc-company-card__name {
    -webkit-line-clamp: 6;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
  }

  /* The 359px rule above already asked for a 96px picture, but the row's base
     rule pins its columns with !important and won; the title column stayed at
     104px. 88px here, with the flag, gives the name 148px and four lines hold
     every name in the catalogue. */
  html #view-training.mh-stage3-training.mh-training-dir .mh-training-card--v2 {
    grid-template-columns: 88px minmax(0, 1fr) 12px !important;
    gap: 10px !important;
  }

  html #view-training.mh-stage3-training.mh-training-dir .mh-training-card__media {
    width: 88px;
    height: 68px;
  }
}

/* An accreditation row is a grid of pill, status and link. The pill kept its
   text on one line inside an auto track, so a long scheme ("unspecified - site
   states 'international'...") pushed the row 385px past the screen. */
#view-training-detail .mh-training-detail__acc > * {
  min-width: 0;
}

#view-training-detail .mh-training-detail__acc-scheme {
  display: inline-block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* " - STCW" stays one piece inside the wrapped pill. */
#view-training-detail .mh-training-detail__acc-kind {
  display: inline;
  white-space: nowrap;
}

/* The status had the width the pill left over: beside a long body it got about
   50px and broke as "Sta / ted / o..." (T&M walk, 2026-09-24). The body and the
   link share the first line and the status has the whole second line; a row
   with no status is one line. A wrapped body keeps rounded corners instead of
   a stretched capsule, and a long one is set without the capsule tracking. */
#view-training-detail .mh-training-detail__acc {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "scheme link"
    "status status";
  row-gap: 5px;
}

#view-training-detail .mh-training-detail__acc > .mh-training-detail__acc-scheme {
  grid-area: scheme;
  justify-self: start;
  max-width: 100%;
  border-radius: 11px;
}

#view-training-detail .mh-training-detail__acc > .mh-training-detail__acc-scheme--long {
  letter-spacing: 0;
}

#view-training-detail .mh-training-detail__acc > .mh-training-detail__acc-status {
  grid-area: status;
}

#view-training-detail .mh-training-detail__acc > .mh-training-detail__acc-status:empty {
  display: none;
}

#view-training-detail .mh-training-detail__acc > .mh-training-detail__acc-link {
  grid-area: link;
}

/* The empty card is a centred canvas like the rest of the directory family, but
   the shared card grid starts its items at the left: the title and the button
   sat left of a centred hint (T&M walk, 2026-09-24). */
#view-training #training-empty.mh-empty {
  justify-items: center;
  text-align: center;
}

#view-training #training-empty .mh-empty__title,
#view-training #training-empty .mh-empty__text {
  text-wrap: balance;
}

/* The shared button rule pins every .mh-button to `justify-self: start` with
   !important; auto margins centre Clear and Retry under the centred text
   without fighting it. */
#view-training #training-empty > .mh-button {
  margin-inline: auto;
}

/* The reset is pinned to the end of the sideways-scrolling filter row, but the
   glass it wears is see-through: at 320px PRICE showed through the cross. The
   page colour under the glass keeps the look and hides what scrolls beneath. */
#view-training #training-filter-row #training-filter-reset:not([hidden]) {
  background-color: var(--ap-bg, #14161b) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    -8px 0 8px -6px var(--ap-bg, #14161b) !important;
}

/* A long heading wraps into even lines instead of leaving one word alone, and
   the scheme after it is a lighter line of its own: running on after a dot it
   split the body's name ("Approving body not / named · National approval"). */
#view-training-detail .mh-training-detail__acc > .mh-training-detail__acc-scheme--long {
  text-wrap: balance;
}

#view-training-detail .mh-training-detail__acc-scheme--long > .mh-training-detail__acc-kind {
  display: block;
  font-weight: 600;
}

#view-training-detail .mh-training-detail__acc-scheme--long .mh-training-detail__acc-dot {
  display: none;
}

/* Phone, e-mail and source links were 16-30px tall to a thumb. Ten pixels of
   padding above and below, taken back by the margins, give a 36px hit area
   without moving a pixel of layout. */
html #view-training-detail.mh-training-dir a.mh-training-detail__phone-value,
html #view-training-detail.mh-training-dir a.mh-training-source-link,
html #view-training-detail.mh-training-dir a.mh-training-detail__acc-link,
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course .mh-training-course__aside a.mh-training-course__source {
  display: inline-block !important;
  padding-block: 11px !important;
  margin-block: -11px !important;
  min-height: 36px !important;
  box-sizing: border-box;
}

/* The snapshot strip is off the list (owner's third pass, 2026-09-20): the element
   keeps its attributes for the contracts, and the display rules above must not
   paint it while it carries [hidden]. */
html #view-training.mh-training-dir .mh-training-status[hidden],
html #view-training.mh-training-dir.mh-stage3-training .mh-training-status.mh-catalog-status[hidden],
#view-training .mh-catalog-status[hidden] {
  display: none !important;
}

/* -- Owner's sweep, 2026-09-20: reset button and narrow price column ---------- */
/* Under 400px the sticky reset shows a cross instead of the word, so the four
   picks and the way out of a filter share the row without covering each other. */
@media (max-width: 400px) {
  #view-training .mh-training-filter-reset {
    width: 40px;
    min-width: 40px;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #view-training .mh-training-filter-reset::before {
    content: "\2715";
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
  }
}

/* At 320px the price column keeps two-line chips but gives the title more room. */
@media (max-width: 360px) {
  #view-training-detail .mh-training-course__aside {
    min-width: 104px;
    max-width: 44%;
  }

  html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course__aside .mh-training-chip {
    font-size: 10.5px !important;
  }
}

/* -- TRN-13 / TRN-17 (2026-09-20) --------------------------------------------- */
#view-training-detail .mh-training-detail__hero-scheme--more {
  opacity: 0.85;
}

/* "On request" and "Price not published" now lead somewhere: a mail to the centre
   with the course in the subject, drawn like the source link beside it. */
#view-training-detail .mh-training-course__ask {
  color: var(--mh-tr-price);
  font-weight: 750;
}

/* -- Training QA walk, 2026-10-11 ------------------------------------------------
   Measured over all 268 centres at 320 and 390 px (list card + profile). */

/* The profile hero held a fixed 16:10 box with overflow hidden, so a long name pushed its own
   top lines - the city line and then the title - out of the box: at 320 px the "Photo from the
   centre website" badge sat over the city line of eight centres, and with large text the title
   was cut off at the bottom of the picture. The 16:10 shape is now a spacer in the same grid
   cell as the copy: the box is never smaller than before and grows when the copy needs it, and
   the photo variant keeps the badge's band free above the copy. The box size does not depend on
   the picture, so a slow or failed photo moves nothing. */
#view-training-detail .mh-training-detail__hero {
  aspect-ratio: auto;
  max-height: none;
}

#view-training-detail .mh-training-detail__hero::before {
  content: "";
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 320px;
}

#view-training-detail .mh-training-detail__hero-content {
  grid-area: 1 / 1;
}

#view-training-detail .mh-training-detail__hero--photo .mh-training-detail__hero-content {
  padding-top: 44px;
}

/* A centre's name is shown whole on its card: three lines clipped five names at 390 px
   ("Training and Certifying Centre of Seafarers, NU OMA"). Six lines hold the longest. */
#view-training .mh-training-card__name,
html #view-training.mh-stage3-training.mh-training-dir .ref-rc-company-card__name {
  -webkit-line-clamp: 6;
}

/* A pill wider than the text column ("All courses from 3,600 DKK", "Education ministry" at
   320 px) ran past the card edge and was cut; it wraps inside its pill instead. */
#view-training .mh-training-card__signal,
#view-training .mh-training-card__scheme {
  max-width: 100%;
  white-space: normal;
}

/* Source, "Ask the centre", register and "Show all courses" controls were 37-40 px tall. Each is
   a full 44 px target now, without negative margins, so two stacked links never share a hit area. */
html #view-training-detail.mh-training-dir a.mh-training-source-link,
html #view-training-detail.mh-training-dir a.mh-training-detail__acc-link,
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course .mh-training-course__aside a.mh-training-course__source {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  padding-block: 0 !important;
  margin-block: 0 !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__course-more {
  min-height: 44px !important;
}

/* Text at 200 %: the shared directory rule (directory-family.css, overflow-wrap: anywhere) broke a
   long word anywhere on the card ("Internation / al"). A word now breaks only when it cannot fit
   the column, with a hyphen (html lang="en"). */
html #view-training.mh-stage3-training.mh-training-dir .ref-rc-company-card__name,
html #view-training.mh-training-dir .mh-training-card__name {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Large text (owner, 2026-10-11): at 200 % text on a phone the name column beside the photo was
   142 px wide and a word like "International" could not fit, so it broke mid-word (hyphenation is
   not available in every engine). When the text is large for the list width, the picture moves
   above the name and the text gets the card's full width.
   The threshold is in rem, so it follows the text size: 18rem is 288 px at the normal size, below
   the 296 px list at a 320 px screen, so the normal layout never changes (#759-style density);
   at 200 % it is 576 px, so phones and small tablets get the stacked card. */
#view-training #training-list {
  container-type: inline-size;
  container-name: mh-training-list;
}

@container mh-training-list (max-width: 18rem) {
  /* The row pins its columns with !important (base rule and the <=359 px rule, 88px | 1fr | 12px),
     so the stacked layout repeats that specificity and !important; it applies only inside this
     large-text query. */
  html #view-training.mh-stage3-training.mh-training-dir .mh-training-card--v2 {
    grid-template-columns: minmax(0, 1fr) 12px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "media media"
      "body chev" !important;
    align-items: start !important;
    row-gap: 10px !important;
  }

  html #view-training.mh-stage3-training.mh-training-dir .mh-training-card--v2 .mh-training-card__media {
    grid-area: media;
    justify-self: start;
  }

  html #view-training.mh-stage3-training.mh-training-dir .mh-training-card--v2 .mh-training-card__body {
    grid-area: body;
    min-width: 0;
  }

  html #view-training.mh-stage3-training.mh-training-dir .mh-training-card--v2 .ref-rc-company-card__chev {
    grid-area: chev;
    align-self: center;
  }
}


/* Audit 2 (2026-10-11): Phone and Email sit on adjacent 22 px lines and each link reached 11 px
   above and below its line for a 44 px target, so the two boxes overlapped by 22 px and the
   e-mail link, painted later, took the lower half of the phone number: a tap on the number
   opened the mail app. When both rows are there, 6 px of air separates them and each link
   reaches only half of it towards the other: two 36 px targets (the project's floor) that
   meet without overlapping. A single row keeps its 44 px reach. */
#view-training-detail .mh-training-detail__phone--paired + .mh-training-detail__email {
  margin-top: 6px;
}

html #view-training-detail.mh-training-dir .mh-training-detail__phone--paired a.mh-training-detail__phone-value {
  padding-block: 11px 3px !important;
  margin-block: -11px -3px !important;
}

html #view-training-detail.mh-training-dir .mh-training-detail__phone--paired + .mh-training-detail__email a.mh-training-detail__phone-value {
  padding-block: 3px 11px !important;
  margin-block: -3px -11px !important;
}

/* Audit 2: an accreditation's detail line was cut at three lines with an ellipsis and nothing
   on the profile led to the rest ("Approved training institution for STCW special and..."). The
   line is short print under its heading; it is shown whole. */
#view-training-detail .mh-training-detail__acc-status,
#view-training-detail .mh-training-detail__acc-list li:only-child .mh-training-detail__acc-status {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
}

/* Audit 2 (2026-10-11): the tab bar sits above the filter sheet, so scrolled to the bottom the
   last option ran under it - "United Kingdom" (51 centres) showed 12 px above the bar and could
   not be tapped reliably. Medical's sheet already ended above the bar; Training's list now
   reserves the same height the shell keeps for the bar. */
#view-training .mh-training-picker-sheet__list {
  padding-bottom: calc(
    var(--mh-bottom-nav-h, var(--nav-height, 56px)) +
      max(
        var(--mh-safe-bottom, var(--safe-bottom, 0px)),
        var(--tg-safe-area-inset-bottom, 0px),
        var(--tg-content-safe-area-inset-bottom, 0px)
      ) + 12px
  );
}

/* Audit 2 (2026-10-11), root font-size 200 %: on a phone the profile hero kept the 58 px logo
   column beside the name, so the name had 194 px and broke inside its words ("Internation / al
   Maritime"). The list cards already restack at large text (#1064); the hero does the same: the
   logo sits above the name and the name gets the hero's width, breaking only a word that cannot
   fit, with a hyphen where the engine has one.
   18rem is 271 px at the normal size, under the 294 px hero of a 320 px screen, so the normal
   hero never changes; at 200 % it is 541 px. */
#view-training-detail .mh-training-detail__hero {
  container-type: inline-size;
  container-name: mh-training-hero;
}

@container mh-training-hero (max-width: 18rem) {
  #view-training-detail .mh-training-detail__hero .mh-training-detail__hero-content {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  #view-training-detail .mh-training-detail__hero .mh-training-detail__hero-copy {
    justify-self: stretch;
  }

  #view-training-detail .mh-training-detail__hero .mh-training-detail__title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
}

/* Audit 2 (2026-10-11): the shared directory header rule (saved-parity.css) sets
   align-items: flex-start !important for Training and Medical, so on Training the title sat
   at the top of the 44 px Back button, 12 px above where Medical and Recruiters put theirs
   (centred on it; Medical overrides the rule in its own sheet). Training's list and profile
   headers centre the title on Back the same way. A title too long for the row still wraps
   onto its own line (flex-wrap is unchanged). */
html[data-theme] #view-training.mh-training-dir .mj-recruiter-topbar,
html[data-theme] #view-training-detail.mh-training-dir .mj-recruiter-topbar {
  align-items: center !important;
}

/* -- Owner's pass, 2026-10-11: logo plate, no-photo hero, course rows, actions -----------------
   Measured on a local build at 320/390/430 px and 200 % root text (dark and light). */

/* The profile logo sat in a 48 px tile that mobile-visual-qa-498.css paints #2a2d33 with
   !important (it loads before this sheet but outranks the plate rule), framed by the 1 px border
   of directory-family.css, with the mark in a 4 px ring inside it: a small logo boxed twice. The
   mark now fills one plate - the logo's own edge colour when it has one (data-plate-sampled),
   white otherwise, the dark ground only for a light-on-transparent mark - with an even 4 px
   inset and no second frame. */
html #view-training-detail .mh-training-detail__mark.mh-training-detail__mark--logo {
  width: 56px !important;
  height: 56px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--mh-plate-bg, #ffffff) !important;
  box-shadow: 0 6px 16px rgba(6, 9, 14, 0.38) !important;
}

html #view-training-detail .mh-training-detail__mark.mh-training-detail__mark--logo.is-dark:not([data-plate-sampled]) {
  background: #161c25 !important;
  box-shadow: 0 6px 16px rgba(6, 9, 14, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}

html #view-training-detail .mh-training-detail__mark--logo .mh-training-detail__mark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* The badge on a list photograph: one plate, an even 3 px inset. */
html #view-training .mh-training-card__badge-logo {
  width: 40px;
  height: 40px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 10px;
}

/* A centre that publishes no usable photograph kept the 16:10 photo frame: an empty gradient
   band above the name (Bollard, Varna). The designed header is as tall as what it says. */
#view-training-detail .mh-training-detail__hero--designed {
  min-height: 0;
}

#view-training-detail .mh-training-detail__hero--designed::before {
  aspect-ratio: auto;
  height: 0;
}

#view-training-detail .mh-training-detail__hero--designed .mh-training-detail__hero-content {
  padding: 18px 14px 16px;
}

/* Course rows were ~180 px tall: "Ask the centre" and "Official source" were two full 44 px
   targets stacked in the price column (gap 6 px), and the price note and the "Price checked"
   chip squeezed the title into a ribbon ("Posebni / program / obrazovanja"). The price column
   now holds the sum alone - the euro amount, the published figure, the unit - and stays narrow;
   the title takes the rest of the row; terms, the chip and the links go on a line under it, the
   two links side by side, each still a full 44 px target. */
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course.mh-training-course {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "body aside" "foot foot";
  column-gap: 12px !important;
  row-gap: 2px !important;
  padding: 10px 12px !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course.mh-training-course:has(.mh-training-course__links) {
  padding-bottom: 0 !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__body {
  grid-area: body;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__aside {
  grid-area: aside;
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 1px;
  min-width: 0;
  max-width: 10rem;
  padding-top: 1px;
  text-align: right;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__aside .mh-training-course__price {
  white-space: nowrap;
}

#view-training-detail .mh-training-course__published,
#view-training-detail .mh-training-course > .mh-training-course__aside .mh-training-course__unit {
  color: var(--mh-tr-muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  padding-top: 4px;
  text-align: left;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__foot > :is(.mh-training-course__conditions, .mh-training-course__alternates, .mh-training-course__wording) {
  flex: 1 1 100%;
  text-align: left;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__foot > .mh-training-chip {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: 100%;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  box-sizing: border-box;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--mh-tr-line) 40%, transparent) !important;
  color: var(--mh-tr-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: normal;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__foot > .mh-training-chip::before {
  content: none !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__foot > .mh-training-chip--stale {
  background: rgba(232, 184, 74, 0.18) !important;
  color: #f2d38a !important;
}

/* The links' 44 px boxes carry their own air; the row pulls them up by the part of it that
   would read as a gap. Nothing else in the row is tappable, so no hit area is shared. */
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course > .mh-training-course__foot > .mh-training-course__links {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  column-gap: 20px;
  margin-top: -8px;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-course .mh-training-course__links a.mh-training-course__source {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  padding-block: 0 !important;
  margin-block: 0 !important;
  font-size: 12px !important;
}

/* Action tiles were 58-80 px icon-over-label cards in a grid of four, the fifth alone on a
   second row. They are pills now: icon beside a 13 px label, 40 px drawn, wrapping in a row so
   five sit in two rows at 390 px. Each keeps a 44 px target: the pill is drawn inside a 2 px
   transparent border (background and outline clipped to the padding box). */
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions.ref-rc-detail__actions.ref-rc-detail__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 4px !important;
  margin: 8px 0 6px !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions .mh-training-detail__action.mh-button.mh-button,
html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__map-actions .mh-training-detail__action.mh-button.mh-button {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px var(--ap-glass-border, color-mix(in srgb, var(--mh-tr-line) 90%, transparent)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__actions .mh-training-detail__action.mh-button.mh-button > span:not(.ref-rc-detail__action-icon) {
  white-space: nowrap !important;
  text-align: left;
}

html #view-training-detail.mh-training-dir.mh-stage3-training-detail .mh-training-detail__action .ref-rc-detail__action-icon svg {
  width: 16px;
  height: 16px;
}