/* #759 Medical Centres — Recruiter-family chrome. Consumes directory-family tokens. */
#view-medical.mh-stage3-medical,
#view-medical-detail.mh-stage3-medical-detail {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  /* Bottom-nav lives outside .app-main; only need small scroller inset + device safe-area.
     Do not add --mh-safe-bottom here (Telegram 34px) — that double-counts and creates empty tail. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

html[data-theme] body.mj-app #view-medical #medical-unavailable[hidden],
html[data-theme] #view-medical #medical-unavailable[hidden],
html[data-theme] #view-medical .mh-coming-soon-card[hidden],
html[data-theme] body.mj-app #view-medical.mh-medical-dir--ready #medical-unavailable,
html[data-theme] #view-medical.mh-medical-dir--ready #medical-unavailable,
html[data-theme] body.mj-app #view-medical #medical-empty[hidden],
html[data-theme] #view-medical #medical-empty[hidden],
html[data-theme] body.mj-app #view-medical #medical-error[hidden],
html[data-theme] #view-medical #medical-error[hidden],
html[data-theme] body.mj-app #view-medical #medical-loading[hidden],
html[data-theme] #view-medical #medical-loading[hidden],
html[data-theme] body.mj-app #view-medical #medical-filter-row[hidden],
html[data-theme] #view-medical #medical-filter-row[hidden],
html[data-theme] body.mj-app #view-medical #medical-list[hidden],
html[data-theme] #view-medical #medical-list[hidden],
html[data-theme] body.mj-app #view-medical #medical-result-note[hidden],
html[data-theme] #view-medical #medical-result-note[hidden],
html[data-theme] #view-medical .mh-empty[hidden],
html[data-theme] #view-medical #medical-az-rail[hidden],
html[data-theme] #view-medical #medical-alpha-row[hidden],
html[data-theme] #view-medical #medical-freshness-banner[hidden] {
  display: none !important;
}

#view-medical #medical-page-lead {
  display: none;
}

#view-medical .mj-recruiter-topbar {
  margin-bottom: 0;
}

#view-medical .mh-medical-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  padding: 4px 8px;
  min-width: 0;
  max-height: none;
}

#view-medical .mh-medical-status__line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--mh-text-muted, inherit);
}

#view-medical .mh-medical-status__kicker {
  display: block;
  font-weight: 700;
  color: var(--mh-accent, #8a7348);
}

#view-medical .mh-medical-status__details {
  flex: 0 0 auto;
  font-size: 0.72rem;
  /* Holds the tap target's width without letting it squeeze the status line (#884). */
  min-width: 36px;
}

/* The banner's "Details" toggle keeps its plain look, but the box you tap is finger-sized:
   it measured 30 x 9 px, under the project's own 36 px floor (#884, audit 2026-09-22 UX-002).
   The rest of this rule strips the button chrome and used to strip the size with it.

   The padding is cancelled by the negative margins, so the box grows and the banner does not.
   Sizing this control by layout instead cost 18 px above the list: the first clinic fell to
   391 px (contract: 380) and only one card was left above the fold at 320 px (contract: 2) -
   the #759 and #773 gates caught it. The box reaches upward, into the banner and the header
   space above it, and only 4 px down, so it never covers the search field below. */
#view-medical .mh-medical-status__details summary,
#view-medical .mh-medical-status__more,
#view-medical .mh-medical-status__more.mh-button {
  cursor: pointer;
  list-style: none;
  color: var(--mh-accent, #8a7348) !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  min-width: 36px !important;
  max-width: none !important;
  padding: 24px 0 6px !important;
  margin: -24px 0 -6px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  justify-self: start !important;
  align-self: center !important;
}

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

#view-medical .mh-medical-status__details[open] {
  position: relative;
}

#view-medical .mh-medical-status__details p {
  margin: 6px 0 0;
  max-width: 42ch;
}

#view-medical .mh-medical-toolbar,
#view-medical .mh-provider-toolbar {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#view-medical.mh-medical-dir--filters .mh-medical-toolbar,
#view-medical.mh-medical-dir--filters .mh-provider-toolbar,
#view-medical.mh-medical-dir--primary-filters .mh-medical-toolbar {
  gap: 6px;
}

#view-medical.mh-medical-dir--filters .mh-medical-status,
#view-medical.mh-medical-dir--primary-filters .mh-medical-status {
  margin: 0;
}

#view-medical.mh-medical-dir--filters .mh-medical-filter-row:not([hidden]),
#view-medical.mh-medical-dir--primary-filters .mh-medical-filter-row {
  margin: 0;
  padding: 0;
}

/* #773: keep A–Z visible as secondary control while primary filters stay open. */
#view-medical.mh-medical-dir--filters .mh-medical-az-rail,
#view-medical.mh-medical-dir--filters .mh-medical-az-rail:not([hidden]),
#view-medical.mh-medical-dir--primary-filters .mh-medical-az-rail:not([hidden]) {
  display: block;
}

#view-medical.mh-medical-dir--filters #medical-result-note:not([hidden]),
#view-medical.mh-medical-dir--primary-filters #medical-result-note:not([hidden]) {
  margin: 0;
}

#view-medical.mh-medical-dir--filters .mh-dir-group-label,
#view-medical.mh-medical-dir--filters .mh-provider-group-label,
#view-medical.mh-medical-dir--primary-filters .mh-dir-group-label,
#view-medical.mh-medical-dir--primary-filters .mh-provider-group-label {
  margin: 0;
  padding: 0 2px 2px;
}

#view-medical .mh-medical-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  min-height: 44px;
}

#view-medical .mh-medical-search__input::-webkit-search-cancel-button,
#view-medical .mh-medical-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}


#view-medical .mh-medical-filter-row,
#view-medical .mh-medical-filter-row:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

#view-medical .mh-medical-filter-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#view-medical .mh-medical-filter-label__text {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-text-muted, inherit);
}

#view-medical .mh-medical-filter,
#view-medical .mh-medical-search__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#view-medical .mh-medical-filter {
  min-height: 44px;
  height: 44px;
  padding: 0 22px 0 8px;
  font-size: 0.78rem;
  line-height: 1.15;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--mh-surface-inset, var(--mh-card-surface, #fff));
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a7348' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8 L6 6.2 L10.5 1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 10px 8px;
}

#view-medical .mh-medical-search__input {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

#view-medical .mh-medical-az-rail:not([hidden]) {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 2px 0 4px;
}

#view-medical .mh-medical-alpha:not([hidden]) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#view-medical .mh-medical-alpha:not([hidden])::-webkit-scrollbar {
  display: none;
}

#view-medical .mh-medical-alpha__letter,
#view-medical .mj-recruiter-az-letter.mh-medical-alpha__letter,
html[data-theme] body.mj-app #view-medical .mh-medical-alpha__letter.mh-saved-segment,
html[data-theme] #view-medical .mh-medical-alpha__letter.mh-saved-segment {
  flex: 0 0 44px !important;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 44px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

html[data-theme] body.mj-app #view-medical .mh-medical-alpha__letter.mh-saved-segment[aria-label="All letters"],
html[data-theme] #view-medical .mh-medical-alpha__letter.mh-saved-segment[aria-label="All letters"],
#view-medical .mh-medical-alpha__letter[aria-label="All letters"] {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
}

#view-medical .mh-medical-alpha__letter.is-active {
  background: var(--mh-accent-soft, #efe6d6);
  color: inherit;
}

#view-medical .mh-medical-alpha__letter:disabled {
  opacity: 0.38;
}

#view-medical .mh-medical-az-cue {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 100%;
  min-height: 44px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--mh-bg, #f6f3ec) 88%, transparent) 70%
  );
}

#view-medical .mh-medical-az-rail[data-az-can-scroll-end="true"] .mh-medical-az-cue {
  opacity: 1;
}

#view-medical .mh-medical-az-cue::after {
  content: "›";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--mh-accent, #8a7348);
}

#view-medical #medical-result-note:not([hidden]) {
  margin: 0 0 4px;
  font-size: 0.7rem;
}

#view-medical .mh-dir-group-label,
#view-medical .mh-provider-group-label {
  margin: 2px 0 0;
  font-size: 0.68rem;
}

#view-medical #medical-list:not([hidden]),
#view-medical .mh-medical-list:not([hidden]) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#view-medical .mh-medical-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 70%, transparent);
  border-radius: 14px;
  background: var(--mh-card-surface, #fff);
}

#view-medical .mh-medical-card .ref-rc-logo--list,
#view-medical .mh-medical-card .mh-provider-logo,
#view-medical .mh-medical-logo {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(155deg, #1c2430 0%, #2a3344 100%);
  color: #f4efe4;
  overflow: hidden;
}

#view-medical .mh-medical-logo--branded .mh-medical-logo__mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f4efe4;
}

#view-medical .mh-medical-logo__img {
  position: absolute;
  inset: 4px;
  z-index: 1;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  background: transparent;
  border-radius: 9px;
  opacity: 0;
  transition: opacity 140ms ease;
}

#view-medical .mh-medical-logo--branded .mh-medical-logo__mark--loading,
#view-medical .mh-medical-logo--loading-media .mh-medical-logo__mark--loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background: var(--mh-id-bg, #1c2b36);
  color: var(--mh-id-fg, #e8eef2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#view-medical .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__img,
#view-medical .mh-medical-logo--loading-media[data-hero-loaded="1"] .mh-medical-card__hero-thumb {
  opacity: 1;
}

#view-medical .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__mark--loading,
#view-medical .mh-medical-logo--loading-media[data-hero-loaded="1"] .mh-medical-logo__mark--loading {
  opacity: 0;
}

#view-medical .mh-medical-card__media--hero {
  background: #1c2430;
}

#view-medical .mh-medical-card__hero-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mh-hero-object-position, 50% 45%);
  display: block;
  opacity: 0;
  transition: opacity 140ms ease;
}

#view-medical .mh-medical-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#view-medical .mh-medical-card__name,
#view-medical .mh-medical-card__place,
#view-medical .mh-medical-card__types,
#view-medical .mh-medical-card__status {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}


#view-medical .mh-medical-card__types,
#view-medical .mh-medical-card__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--mh-text-muted, inherit);
}

#view-medical .mh-medical-card__verified {
  font-size: 0.68rem;
  color: var(--mh-text-muted, inherit);
}


#view-medical .mh-medical-chip--price-yes {
  background: color-mix(in srgb, #2f6b4f 18%, transparent);
}

#view-medical .mh-medical-chip--price-no,
#view-medical .mh-medical-chip--contact,
#view-medical .mh-medical-chip--more {
  background: color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 40%, transparent);
}

#view-medical-detail .mh-medical-detail__phone {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mh-accent-soft, #efe6d6) 70%, transparent);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#view-medical-detail .mh-medical-detail__phone-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-detail__phone-value {
  color: inherit;
  text-decoration: none;
}

#view-medical-detail .mh-medical-compact-missing,
#view-medical-detail .mh-medical-meta--secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 8px;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-compact-missing span + span::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.7;
}

#view-medical-detail .mh-medical-detail__canvas {
  min-width: 0;
  padding-bottom: 8px;
}

#view-medical-detail .mh-medical-detail__disclaimer {
  margin: 8px 0 0;
  padding: 0;
  border: none;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-detail__disclaimer > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-detail__disclaimer > summary::-webkit-details-marker {
  display: none;
}

#view-medical-detail .mh-medical-detail__disclaimer > p {
  margin: 4px 0 0;
}

#view-medical-detail .mh-medical-detail__hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(155deg, #1c2430 0%, #243044 62%, #2f3b4d 100%);
  color: #f4efe4;
  border: 1px solid color-mix(in srgb, #1c2430 70%, #8a7348);
}

#view-medical-detail .mh-medical-detail__hero .mh-medical-detail__title,
#view-medical-detail .mh-medical-detail__hero .mh-medical-detail__place,
#view-medical-detail .mh-medical-detail__hero .mh-medical-detail__honesty {
  color: inherit;
}

#view-medical-detail .mh-medical-detail__hero .mh-provider-logo,
#view-medical-detail .mh-medical-detail__hero .ref-rc-logo,
#view-medical-detail .mh-medical-detail__mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, #f4efe4 16%, transparent);
  color: #f4efe4;
}

#view-medical-detail .mh-medical-detail__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

#view-medical-detail .mh-medical-detail__place,
#view-medical-detail .mh-medical-detail__honesty,
#view-medical-detail .mh-medical-detail__source {
  margin: 4px 0 0;
  font-size: 0.8rem;
}

#view-medical .mh-medical-chip,
#view-medical-detail .mh-medical-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#view-medical-detail .mh-medical-chip {
  margin-top: 0;
}


#view-medical-detail .mh-medical-detail__honesty,
#view-medical-detail .mh-medical-detail__source {
  margin: 0;
}


#view-medical-detail .mh-medical-detail__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: 0.78rem;
}

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

#view-medical-detail .mh-medical-detail__facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-detail__facts dd {
  margin: 2px 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-medical-detail .mh-medical-detail__actions,
#view-medical-detail .mh-medical-detail__actions.ref-rc-detail__actions,
#view-medical-detail .mh-medical-detail__actions.action-grid,
#view-medical-detail .mh-medical-detail__actions[data-action-count="4"],
#view-medical-detail .mh-medical-detail__actions[data-action-count="6"],
#view-medical-detail .mh-medical-detail__actions--v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mh-surface, #fff) 88%, var(--mh-accent, #8a7348));
  border: 1px solid var(--mh-border-subtle, #d8d2c6);
}

@media (min-width: 390px) {
  #view-medical-detail .mh-medical-detail__actions--v2,
  #view-medical-detail .mh-medical-detail__actions[data-action-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#view-medical-detail .mh-medical-detail__action,
#view-medical-detail a.mh-medical-detail__action.ref-rc-detail__action,
#view-medical-detail a.mh-medical-detail__action.action-card,
#view-medical-detail a.mh-medical-detail__action.action-btn,
#view-medical-detail span.mh-medical-detail__action {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  max-height: 44px;
  height: 44px;
  padding: 0 4px;
  border-radius: 10px;
  font-size: 0.62rem;
  line-height: 1;
  box-shadow: none;
}

#view-medical-detail .mh-medical-detail__action--disabled {
  opacity: 0.42;
  pointer-events: none;
}

#view-medical-detail .mh-medical-detail__source {
  margin: 0 0 8px;
}

#view-medical-detail .mh-medical-source-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
}

#view-medical-detail .mh-medical-detail__hero .mh-medical-chip {
  background: color-mix(in srgb, #f4efe4 18%, transparent);
  color: #f4efe4;
}

#view-medical .mh-medical-card__name {
  font-size: 0.95rem;
  font-weight: 750;
}

#view-medical-detail .mh-medical-service-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 10px;
  padding: 8px 10px;
  margin: 0 0 6px;
  border: 1px solid var(--mh-card-edge, var(--mh-border-subtle));
  border-radius: 12px;
  background: var(--mh-card-surface, var(--mh-surface));
  min-width: 0;
}

#view-medical-detail .mh-medical-service-card__title {
  margin: 0 0 4px;
  font-size: 0.88rem;
  font-weight: 700;
}

#view-medical-detail .mh-medical-service-card__facts {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
}

#view-medical-detail .mh-medical-service-card__facts dt {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-service-card__facts dd {
  margin: 0 0 2px;
  font-size: 0.72rem;
  line-height: 1.25;
}

#view-medical-detail .mh-medical-meta--secondary,
#view-medical-detail .mh-medical-service-card__missing {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-service-card__missing span + span::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.7;
}

#view-medical #medical-loading,
#view-medical #medical-empty,
#view-medical #medical-error {
  margin: 12px 0;
}

@media (max-width: 360px) {
  #view-medical .mh-catalog-status__limits,
  #view-medical .mh-medical-card__desc,
  #view-medical-detail .mh-medical-detail__desc {
    display: none;
  }

  #view-medical .mh-medical-status {
    margin: 0 0 2px;
  }

  #view-medical .mh-medical-filter-label__text {
    font-size: 0.62rem;
    line-height: 1.1;
  }

  #view-medical .mh-medical-filter-row,
  #view-medical .mh-medical-filter-row:not([hidden]) {
    gap: 4px;
  }

  /* Keep ≥44×44 interactive controls; do not regress to 40px (#773). */
  #view-medical .mh-medical-filter {
    min-height: 44px;
    height: 44px;
    font-size: 0.74rem;
  }

  #view-medical .mh-medical-search-wrap {
    min-height: 44px;
    margin-bottom: 2px;
  }

  #view-medical .mh-medical-az-rail:not([hidden]) {
    margin: 0 0 2px;
  }

  #view-medical #medical-list:not([hidden]),
  #view-medical .mh-medical-list:not([hidden]) {
    gap: 4px;
  }

  /* Restore accepted #736 Medical card inset 10×12 at 320px; keep gap at 12px for #736 parity. */
  #view-medical .mh-medical-card {
    padding: 10px 12px;
    gap: 12px;
  }

  #view-medical .mh-medical-card .ref-rc-logo--list,
  #view-medical .mh-medical-card .mh-provider-logo,
  #view-medical .mh-medical-logo {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  #view-medical .mh-medical-logo--branded .mh-medical-logo__mark {
    font-size: 0.72rem;
  }

  #view-medical .mh-medical-card__name {
    font-size: 0.84rem;
    line-height: 1.15;
  }

  #view-medical .mh-medical-card__place {
    font-size: 0.66rem;
    line-height: 1.15;
  }

  /* Compact status row — keep approval, price, contact, +N, verified date visible. */
  #view-medical .mh-medical-card__status,
  #view-medical .mh-medical-card__types {
    gap: 2px;
    font-size: 0.62rem;
  }

  #view-medical .mh-medical-chip {
    padding: 0 5px;
    font-size: 0.6rem;
    line-height: 1.3;
    min-height: 18px;
  }

  #view-medical .mh-medical-card__verified {
    font-size: 0.58rem;
    line-height: 1.2;
  }

  #view-medical .mh-medical-card__body {
    gap: 1px;
  }

  #view-medical .mh-medical-toolbar--primary-filters {
    gap: 2px;
  }

  #view-medical #medical-result-note:not([hidden]) {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.2;
  }

  #view-medical .mh-dir-group-label,
  #view-medical .mh-provider-group-label {
    margin: 0;
    padding: 0 2px 0;
    font-size: 0.6rem;
    line-height: 1.1;
  }

  #view-medical-detail .mh-medical-detail__hero {
    margin: 0 0 6px;
    padding: 8px 10px;
  }

  #view-medical-detail .mh-medical-detail__phone {
    margin: 0 0 6px;
    padding: 8px 10px;
    font-size: 0.86rem;
  }

  #view-medical-detail .mh-medical-detail__actions--v2,
  #view-medical-detail .mh-medical-detail__actions[data-action-count="6"] {
    gap: 4px;
    margin: 0 0 6px;
    padding: 4px;
  }

  #view-medical-detail .mh-medical-detail__facts {
    margin: 4px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-medical *,
  #view-medical-detail * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

html[data-theme="dark"] #view-medical .mh-medical-card,
html[data-theme="dark"] #view-medical-detail .mh-medical-service-card {
  background: var(--mh-card-surface, #16181d);
}

html[data-theme="dark"] #view-medical .mh-medical-filter {
  background-color: var(--mh-surface-inset, var(--mh-card-surface, #16181d));
}

html[data-theme="dark"] #view-medical .mh-medical-az-cue {
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--mh-bg, #0c0d0f) 88%, transparent) 70%
  );
}

/* —— #776 Medical Centres v3: identity, cards, hero, filters —— */
#view-medical .mh-medical-logo--designed,
#view-medical-detail .mh-medical-logo--designed {
  background: var(--mh-id-bg, #1c2b36) !important;
  color: var(--mh-id-fg, #e8eef2) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mh-id-accent, #8a7348) 70%, transparent);
}

#view-medical .mh-medical-logo--designed .mh-medical-logo__mark,
#view-medical-detail .mh-medical-logo--designed .mh-medical-logo__mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--mh-id-fg, #e8eef2);
}

#view-medical .mh-medical-card--v3 {
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
}

#view-medical .mh-medical-card--v3 .mh-medical-card__quiet {
  display: block;
  margin-top: 0;
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--mh-text-muted, inherit);
}

@media (max-width: 360px) {
  #view-medical .mh-medical-card--v3 {
    gap: 12px;
    padding: 10px 12px;
    align-items: center;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__body {
    gap: 0;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__quiet,
  #view-medical .mh-medical-card--v3 .mh-medical-card__exams {
    display: none !important;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__name {
    font-size: 0.82rem;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__place {
    font-size: 0.64rem;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__footer {
    gap: 2px 8px;
    margin-top: 0;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__price,
  #view-medical .mh-medical-card--v3 .mh-medical-card__contact {
    font-size: 0.66rem;
    line-height: 1.15;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__footer .mh-medical-card__contact {
    display: none;
  }

  #view-medical .mh-medical-card--v3 .ref-rc-company-card__chev,
  #view-medical .mh-medical-card--v3 .mh-dir-row__chev {
    display: none;
  }

  #view-medical .mh-medical-filter-row--v3 {
    gap: 3px;
    margin-bottom: 2px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  /* Beat .mh-button height/padding so pickers stay exactly 44×44. */
  #view-medical .mh-medical-filter-pick,
  #view-medical .mh-medical-filter-pick.mh-button {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 3px 4px !important;
    overflow: hidden;
  }

  #view-medical .mh-medical-filter-pick__label {
    font-size: 0.62rem;
    line-height: 1.05;
  }

  #view-medical .mh-medical-filter-pick__label-full {
    display: none !important;
  }

  #view-medical .mh-medical-filter-pick__label-short {
    display: inline !important;
  }

  #view-medical .mh-medical-filter-pick__value {
    font-size: 12px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    min-width: 0;
  }

  html[data-theme] body.mj-app #view-medical #medical-filter-reset.mh-button:not([hidden]),
  html[data-theme] #view-medical #medical-filter-reset.mh-button:not([hidden]),
  #view-medical .mh-medical-filter-reset:not([hidden]),
  #view-medical .mh-medical-filter-reset.mh-button:not([hidden]) {
    display: inline-flex !important;
    box-sizing: border-box;
    width: auto !important;
    min-width: 44px !important;
    max-width: 3.75rem !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html[data-theme] body.mj-app #view-medical #medical-filter-reset.mh-button[hidden],
  html[data-theme] #view-medical #medical-filter-reset.mh-button[hidden],
  #view-medical .mh-medical-filter-reset[hidden],
  #view-medical .mh-medical-filter-reset.mh-button[hidden] {
    display: none !important;
  }

  #view-medical .mj-recruiter-topbar {
    margin-bottom: 0;
    min-height: 36px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #view-medical .mh-medical-status {
    margin: 0 0 2px;
    padding: 2px 6px;
  }

  #view-medical .mh-medical-status__line {
    font-size: 0.64rem;
  }

  #view-medical .mh-medical-status__more {
    font-size: 0.62rem !important;
  }

  #view-medical .mh-medical-search-wrap {
    min-height: 44px;
    margin-bottom: 2px;
  }

  #view-medical .mh-medical-search__input {
    min-height: 44px;
    font-size: 0.86rem;
  }

  #view-medical #medical-freshness-banner:not([hidden]) {
    margin: 0 0 2px;
    padding: 2px 6px;
  }

  #view-medical .mh-medical-card--v3 .mh-medical-card__footer .mh-medical-card__contact {
    display: none;
  }

  #view-medical .mh-catalog-status__meta {
    font-size: 0.64rem;
    white-space: nowrap;
  }

  #view-medical #medical-result-note:not([hidden]) {
    margin: 0 0 2px;
    font-size: 0.62rem;
    line-height: 1.15;
    max-height: 14px;
    overflow: hidden;
  }

  #view-medical .mh-dir-group-label,
  #view-medical .mh-provider-group-label {
    display: none;
  }

  #view-medical .mj-recruiter-topbar__title {
    font-size: 0.92rem;
    line-height: 1.15;
  }

  #view-medical .mh-medical-az-rail:not([hidden]) {
    margin: 0;
  }

  #view-medical .mh-medical-toolbar--primary-filters {
    gap: 2px;
    margin: 0;
  }

  #view-medical .mh-medical-card .ref-rc-logo--list,
  #view-medical .mh-medical-card .mh-provider-logo,
  #view-medical .mh-medical-logo {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  #view-medical .mh-medical-logo--designed .mh-medical-logo__mark {
    font-size: 0.72rem;
  }

  #view-medical .mh-medical-card__name {
    font-size: 0.86rem;
    line-height: 1.2;
  }

  #view-medical .mh-medical-card__place {
    font-size: 0.68rem;
    line-height: 1.2;
  }
}

#view-medical .mh-medical-card--v3 .mh-medical-card__exams {
  display: block;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--mh-text-muted, inherit);
  overflow-wrap: anywhere;
}

#view-medical .mh-medical-card--v3 .mh-medical-card__more {
  font-weight: 700;
  color: var(--mh-accent, #8a7348);
}

#view-medical .mh-medical-card--v3 .mh-medical-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 2px;
}

#view-medical .mh-medical-card--v3 .mh-medical-card__price {
  font-size: 0.78rem;
  font-weight: 750;
  color: inherit;
}

#view-medical .mh-medical-card--v3 .mh-medical-card__price--request {
  font-weight: 600;
  color: var(--mh-text-muted, inherit);
}

#view-medical .mh-medical-card--v3 .mh-medical-card__contact {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--mh-accent, #8a7348);
}

#view-medical .mh-medical-card--v3 .mh-medical-card__types,
#view-medical .mh-medical-card--v3 .mh-medical-card__status {
  display: none;
}

#view-medical .mh-medical-filter-row--v3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}

#view-medical .mh-medical-filter-pick,
#view-medical .mh-medical-filter-pick.mh-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 2px;
  /* Beat saved-parity content-width button lock so picks fill the filter grid. */
  width: 100% !important;
  min-width: 44px !important;
  max-width: none !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  padding: 6px 8px !important;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 80%, transparent);
  background: var(--mh-surface-inset, var(--mh-card-surface, #fff));
  text-align: left;
  color: inherit;
  box-shadow: none !important;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.15;
  white-space: normal !important;
  overflow: hidden;
  box-sizing: border-box;
}

#view-medical .mh-medical-filter-pick__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-text-muted, inherit);
  line-height: 1.15;
}

#view-medical .mh-medical-filter-pick__label-short {
  display: none;
}

#view-medical .mh-medical-filter-pick__value {
  display: block;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
}

html[data-theme] body.mj-app #view-medical #medical-filter-reset.mh-button:not([hidden]),
html[data-theme] #view-medical #medical-filter-reset.mh-button:not([hidden]),
#view-medical .mh-medical-filter-reset:not([hidden]),
#view-medical .mh-medical-filter-reset.mh-button:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 4 / 5;
  grid-row: 1;
  align-self: stretch !important;
  justify-self: end !important;
  box-sizing: border-box;
  width: auto !important;
  min-width: 44px !important;
  max-width: 4.25rem !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

html[data-theme] body.mj-app #view-medical #medical-filter-reset.mh-button[hidden],
html[data-theme] #view-medical #medical-filter-reset.mh-button[hidden],
#view-medical .mh-medical-filter-reset[hidden],
#view-medical .mh-medical-filter-reset.mh-button[hidden],
#view-medical #medical-filter-reset[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#view-medical .mh-medical-filter-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#view-medical .mh-medical-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, #0c0d0f 48%, transparent);
}

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

#view-medical .mh-medical-picker-sheet__panel {
  width: min(100%, 480px);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px calc(12px + var(--mh-safe-bottom, env(safe-area-inset-bottom, 0px)));
  border-radius: 18px 18px 0 0;
  background: var(--mh-card-surface, #fff);
  color: inherit;
  box-shadow: 0 -8px 28px color-mix(in srgb, #0c0d0f 22%, transparent);
}

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

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

#view-medical .mh-medical-picker-sheet__search {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 80%, transparent);
  background: var(--mh-surface-inset, transparent);
  color: inherit;
}

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

#view-medical .mh-medical-picker-option {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  color: inherit;
  font-weight: 600;
}

#view-medical .mh-medical-picker-option.is-active {
  border-color: color-mix(in srgb, var(--mh-accent, #8a7348) 55%, transparent);
  background: color-mix(in srgb, var(--mh-accent-soft, #efe6d6) 70%, transparent);
}

#view-medical-detail .mh-medical-detail--v3 .mh-medical-detail__hero--full {
  position: relative;
  display: block;
  grid-template-columns: none;
  width: calc(100% + 24px);
  margin: 0 -12px 10px;
  padding: 0;
  min-height: 156px;
  border-radius: 0;
  border: none;
  overflow: hidden;
  color: var(--mh-id-fg, #f4efe4);
  background: var(--mh-id-bg, #1c2b36);
}


#view-medical-detail .mh-medical-detail__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mh-hero-object-position, 50% 45%);
}

#view-medical-detail .mh-medical-detail__hero--split {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--mh-id-bg, #14202b);
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 112px;
  overflow: hidden;
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-img {
  position: absolute;
  inset: 0;
  /* Typography-heavy clinic artwork: contain on a dark plate so wordmarks stay intact at 320. */
  object-fit: contain;
  object-position: center center;
  background: #0c0d0f;
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-media-shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, #0c0d0f 55%, transparent));
  pointer-events: none;
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-textpanel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 12px 14px 14px;
  color: var(--mh-text, #14202b);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-surface, #f7f4ee) 92%, #e8e2d6) 0%, var(--mh-surface, #f7f4ee) 100%);
  border-top: 1px solid color-mix(in srgb, var(--mh-id-accent, #8a7348) 28%, transparent);
}

html[data-theme="dark"] #view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-textpanel,
body.theme-dark #view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-textpanel,
#view-medical-detail[data-theme="dark"] .mh-medical-detail__hero--split .mh-medical-detail__hero-textpanel {
  color: #f4efe4;
  background:
    linear-gradient(180deg, color-mix(in srgb, #101820 92%, #243447) 0%, #101820 100%);
  border-top-color: color-mix(in srgb, #c9a46a 35%, transparent);
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__mark--hero {
  display: none;
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__title,
#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__place,
#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-kicker {
  text-shadow: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__title {
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
  line-height: 1.2;
  margin: 0;
}

#view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__place {
  margin: 4px 0 0;
  opacity: 0.92;
}

@media (max-width: 360px) {
  #view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-media {
    height: 96px;
  }

  #view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__hero-textpanel {
    padding: 10px 12px 12px;
  }

  #view-medical-detail .mh-medical-detail__hero--split .mh-medical-detail__title {
    font-size: 1.05rem;
    line-height: 1.25;
  }
}

#view-medical .mh-medical-logo--branded,
#view-medical-detail .mh-medical-logo--branded {
  background: var(--mh-id-bg, #1c2b36);
}

#view-medical .mh-medical-logo__img,
#view-medical-detail .mh-medical-logo__img {
  position: absolute;
  inset: 4px;
  z-index: 1;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  object-position: center;
  /* The tile around this image already draws the plate: a border, a radius and a fill. Drawing a
     second one here, in a different shade, is the frame-inside-a-frame the audit saw (#842,
     MED-07). The mark sits on the tile's plate now. */
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-sizing: border-box;
  opacity: 0;
}

#view-medical .mh-medical-logo--branded:not([data-logo-loaded="1"]) .mh-medical-logo__img,
#view-medical-detail .mh-medical-logo--branded:not([data-logo-loaded="1"]) .mh-medical-logo__img {
  background: transparent;
}

#view-medical-detail .mh-medical-logo--branded .mh-medical-logo__mark--loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background: var(--mh-id-bg, #1c2b36);
  color: var(--mh-id-fg, #e8eef2);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#view-medical-detail .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__img {
  opacity: 1;
}

#view-medical-detail .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__mark--loading {
  opacity: 0;
}

#view-medical-detail .mh-medical-detail__hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  min-height: 156px;
  padding: 18px 14px 16px;
}

#view-medical-detail .mh-medical-detail__hero-content--overlay {
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(180deg, transparent 10%, color-mix(in srgb, #0c0d0f 72%, transparent) 100%);
}

#view-medical-detail .mh-medical-detail__hero-content--solo,
#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content--solo {
  grid-template-columns: minmax(0, 1fr);
}

#view-medical-detail .mh-medical-detail__hero-content--solo .mh-medical-detail__copy {
  padding-bottom: 2px;
}

#view-medical-detail .mh-medical-detail__mark--hero {
  width: 72px !important;
  height: 72px !important;
  border-radius: 18px !important;
}

#view-medical-detail .mh-medical-detail__mark--designed .mh-medical-logo__mark {
  font-size: 1.35rem !important;
  letter-spacing: 0.04em;
}

#view-medical-detail .mh-medical-detail__hero-kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.86;
}

#view-medical-detail .mh-medical-detail__hero-exams {
  margin: 6px 0 0;
  font-size: 0.76rem;
  line-height: 1.35;
  opacity: 0.92;
}


#view-medical-detail .mh-medical-detail__actions--primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}


#view-medical-detail .mh-medical-detail__map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

#view-medical-detail .mh-medical-service-card--v3 {
  padding: 10px 12px;
  border-radius: 14px;
}


#view-medical-detail .mh-medical-service-card__price {
  margin: 6px 0 0;
  font-size: 0.86rem;
  font-weight: 750;
}


#view-medical-detail .mh-medical-detail__appointment-note,
#view-medical-detail .mh-medical-detail__fee-guidance,
#view-medical-detail .mh-medical-detail__media-prov {
  margin: 4px 0 0;
  font-size: 0.68rem;
  color: var(--mh-text-muted, inherit);
}

#view-medical-detail .mh-medical-detail__fee-guidance {
  font-weight: 650;
}

#view-medical-detail .mh-medical-detail__provenance {
  margin-top: 6px;
}

#view-medical-detail .mh-medical-detail__sources {
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 80%, transparent);
  background: color-mix(in srgb, var(--mh-card-surface, #fff) 88%, transparent);
}

#view-medical-detail .mh-medical-detail__sources summary {
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
}

#view-medical-detail .mh-medical-detail__sources p {
  margin: 4px 0 0;
  font-size: 0.68rem;
}

#view-medical-detail .mh-medical-source-link {
  color: var(--mh-accent, #8a7348);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}


@media (max-width: 360px) {
  #view-medical-detail .mh-medical-detail--v3 .mh-medical-detail__hero--full {
    min-height: 148px;
  }

  #view-medical-detail .mh-medical-detail__hero-content {
    min-height: 148px;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #view-medical-detail .mh-medical-detail__mark--hero {
    width: 64px !important;
    height: 64px !important;
  }
}

html[data-theme="dark"] #view-medical .mh-medical-filter-pick,
html[data-theme="dark"] #view-medical .mh-medical-picker-sheet__panel {
  background: var(--mh-card-surface, #16181d);
}

/* #778 Medical Centres v4 — product hierarchy after live owner QA. */
#view-medical .mh-medical-filter-pick {
  border-radius: 12px !important;
  font-size: 0.94rem !important;
}

#view-medical .mh-medical-section-head {
  display: grid;
  gap: 2px;
  margin: 10px 2px 2px;
  padding: 0;
}

#view-medical .mh-medical-section-head--featured {
  margin-top: 6px;
}

#view-medical .mh-medical-section-head--directory {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 70%, transparent);
}

#view-medical .mh-medical-section-head__eyebrow,
#view-medical .mh-medical-section-head__title,
#view-medical .mh-medical-section-head__copy {
  margin: 0;
}


#view-medical .mh-medical-section-head__title {
  font-size: 1.06rem;
  line-height: 1.2;
}


#view-medical .mh-medical-card--v4 {
  position: relative;
  align-items: center;
  min-height: 94px;
  padding: 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mh-card-surface, #fff) 96%, var(--mh-accent, #8a7348)) 0%, var(--mh-card-surface, #fff) 74%);
}

#view-medical .mh-medical-card--v4.mh-medical-card--featured {
  border-color: color-mix(in srgb, var(--mh-accent, #8a7348) 46%, var(--mh-border-subtle, #d8d2c6));
  box-shadow: 0 8px 24px color-mix(in srgb, #0c0d0f 12%, transparent);
}

#view-medical .mh-medical-card--v4 .mh-medical-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 2px;
}


#view-medical .mh-medical-card--v4 .mh-medical-card__name {
  font-size: 0.96rem;
  line-height: 1.2;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__place,
#view-medical .mh-medical-card--v4 .mh-medical-card__exams {
  font-size: 0.72rem;
  line-height: 1.28;
}

#view-medical .mh-medical-card__exam-label {
  min-width: 0;
}

#view-medical .mh-medical-card__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

#view-medical .mh-medical-card__signal {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--mh-text-muted, inherit);
  background: color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 42%, transparent);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

#view-medical .mh-medical-card__signal--price,
#view-medical .mh-medical-card__signal--booking,
#view-medical .mh-medical-card__signal--maps,
#view-medical .mh-medical-card__signal--evidence {
  color: inherit;
  background: color-mix(in srgb, var(--mh-accent-soft, #efe6d6) 74%, transparent);
}


#view-medical .mh-medical-card--v4 .mh-medical-card__quiet {
  margin-top: 1px;
  font-size: 0.6rem;
}

#view-medical .mh-medical-picker-sheet {
  z-index: 1000;
}

#view-medical .mh-medical-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#view-medical .mh-medical-picker-option__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

#view-medical .mh-medical-picker-option__count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--mh-text-muted, inherit);
  background: color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 45%, transparent);
  font-size: 0.68rem;
  font-weight: 750;
}

html[data-theme] body.mj-app[data-active-view="medical-detail"] .bottom-nav,
html[data-theme] body.mj-app[data-active-view="medical-detail"] #bottom-nav,
body.mj-app[data-active-view="medical-detail"] .bottom-nav,
body[data-active-view="medical-detail"] .bottom-nav,
body[data-active-view="medical-detail"] #bottom-nav {
  display: none !important;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__canvas {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 14px;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--v4 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 176px;
  max-height: 280px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--mh-id-accent, #8a7348) 45%, transparent);
  border-radius: 18px;
  box-shadow: 0 12px 30px color-mix(in srgb, #0c0d0f 18%, transparent);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-img {
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.04);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--split .mh-medical-detail__hero-img {
  object-fit: contain;
  filter: none;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--split .mh-medical-detail__hero-media-shade {
  inset: auto 0 0;
  height: 42%;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, #081018 52%, transparent) 0%, color-mix(in srgb, #081018 22%, transparent) 42%, transparent 72%),
    linear-gradient(180deg, transparent 38%, color-mix(in srgb, #081018 58%, transparent) 100%);
}

#view-medical-detail .mh-medical-detail__hero--google .mh-medical-detail__hero-media-shade {
  background:
    linear-gradient(180deg, color-mix(in srgb, #081018 12%, transparent) 0%, color-mix(in srgb, #081018 18%, transparent) 42%, color-mix(in srgb, #081018 66%, transparent) 100%);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: end;
  min-width: 0;
  min-height: 176px;
  padding: 16px;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content--overlay {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 82px;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content--solo {
  grid-template-columns: minmax(0, 1fr);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__mark--hero {
  width: 58px !important;
  height: 58px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px color-mix(in srgb, #0c0d0f 32%, transparent);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__title {
  font-size: clamp(1.08rem, 1.24rem, 1.38rem);
  line-height: 1.16;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

#view-medical-detail .mh-medical-detail__hero--google .mh-medical-detail__title,
#view-medical-detail .mh-medical-detail__hero--official:not(.mh-medical-detail__hero--split) .mh-medical-detail__title {
  text-shadow: 0 1px 12px color-mix(in srgb, #081018 70%, transparent);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-exams {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 5px;
}

#view-medical-detail .mh-medical-detail__phone--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
}

#view-medical-detail .mh-medical-detail__phone--inline .mh-medical-detail__phone-label {
  margin: 0;
}

#view-medical-detail .mh-medical-detail__phone--inline .mh-medical-detail__phone-value {
  font-size: 0.94rem;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__actions--primary {
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__availability {
  margin: 0 2px;
  color: var(--mh-text-muted, inherit);
  font-size: 0.68rem;
  line-height: 1.3;
}

#view-medical-detail .mh-medical-detail__offline-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--mh-warning, #e8b84a) 46%, transparent);
  border-radius: 12px;
  color: var(--mh-warning-text, #76530a);
  background: color-mix(in srgb, var(--mh-warning, #e8b84a) 16%, transparent);
  font-size: 0.72rem;
  line-height: 1.35;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__checked {
  margin: 0 2px;
  color: var(--mh-text-muted, inherit);
  font-size: 0.7rem;
  font-weight: 650;
}

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

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__intro {
  display: block;
  font-size: 0.76rem;
  line-height: 1.42;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__facts {
  margin: 6px 0 0;
}

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

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__section-head h2 {
  margin: 0;
}

#view-medical-detail .mh-medical-detail__section-count {
  flex: 0 0 auto;
  color: var(--mh-text-muted, inherit);
  font-size: 0.66rem;
  font-weight: 700;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card--v3 {
  margin: 0;
  padding: 9px 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 62%, transparent);
  border-radius: 0;
  background: transparent;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card--v3:first-of-type {
  border-top: none;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__body,
#view-medical-detail .mh-medical-detail--v4 .mh-dir-course-row__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
  gap: 3px 12px;
  align-items: baseline;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__title,
#view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__price {
  margin: 0;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__price {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__extra {
  grid-column: 1 / -1;
  margin: 0;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__appointment-note {
  margin-top: 8px;
  line-height: 1.35;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__fee-guidance {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  color: inherit;
  background: color-mix(in srgb, var(--mh-accent-soft, #efe6d6) 66%, transparent);
  font-size: 0.68rem;
  line-height: 1.35;
}

#view-medical-detail .mh-medical-detail__fee-source {
  max-width: 100%;
  color: inherit;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__sources {
  padding: 10px 12px;
  border-radius: 14px;
}

#view-medical-detail .mh-medical-detail__source-list {
  display: grid;
  gap: 5px;
  margin: 8px 0;
  padding-left: 18px;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

#view-medical-detail .mh-medical-detail__source-list a {
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  body[data-active-view="medical"] .app-main {
    padding-top: 2px;
  }

  /* Collapse audit chrome into one truthful line. This recovers viewport
     space structurally while keeping coverage and Details available. */
  #view-medical #medical-freshness-banner:not([hidden]) {
    min-height: 16px;
    margin: 0 0 2px;
    padding: 0 2px;
  }

  #view-medical #medical-freshness-banner .mh-catalog-status__kicker {
    display: none;
  }

  #view-medical #medical-freshness-banner .mh-medical-status__line {
    flex: 1 1 auto;
    gap: 0;
    font-size: 0.6rem;
    line-height: 1;
    white-space: nowrap;
  }

  #view-medical #medical-freshness-banner .mh-medical-status__details,
  #view-medical #medical-freshness-banner .mh-medical-status__more {
    flex: 0 0 auto;
    margin-left: 4px;
    font-size: 0.6rem !important;
    line-height: 1 !important;
  }

  #view-medical.mh-medical-dir--primary-filters .mh-medical-toolbar {
    gap: 1px;
  }

  /* #778: filters are primary, but A–Z remains a visible, horizontal 44px
     navigation rail at the narrowest supported viewport. */
  #view-medical #medical-az-rail:not([hidden]) {
    display: block !important;
    margin: 0 0 2px;
  }

  #view-medical #medical-alpha-row:not([hidden]) {
    display: flex !important;
  }

  #view-medical .mh-medical-card--v4 {
    min-height: 80px;
    gap: 10px;
    padding: 8px 10px;
  }

  #view-medical #medical-list:not([hidden]) {
    gap: 4px;
  }

  #view-medical #medical-list.mh-medical-list--featured:not([hidden]) {
    gap: 4px;
    margin: 0 !important;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__body {
    gap: 1px;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__signals {
    margin-top: 1px;
  }

  #view-medical .mh-medical-section-head--featured {
    margin-top: 0;
  }

  #view-medical .mh-medical-section-head {
    margin-bottom: 0;
  }

  #view-medical .mh-medical-section-head__title {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.86rem;
    line-height: 1;
    white-space: nowrap;
  }

  #view-medical .mh-medical-section-head__count {
    color: var(--mh-text-muted, inherit);
    font-size: 0.68rem;
    font-weight: 650;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.84rem;
    overflow: hidden;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__exams,
  #view-medical .mh-medical-card--v4 .mh-medical-card__signals {
    display: flex !important;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__exams {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__exam-label {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__more {
    display: none;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__exam-badge:nth-child(n + 3) {
    display: none;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__signal:nth-child(n + 3) {
    display: none;
  }

  #view-medical .mh-medical-card__signal {
    min-height: 18px;
    padding: 1px 6px;
    font-size: 0.6rem;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--v4,
  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content {
    min-height: 164px;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__mark--hero {
    width: 52px !important;
    height: 52px !important;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__actions--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__body,
  #view-medical-detail .mh-medical-detail--v4 .mh-dir-course-row__body {
    gap: 3px 8px;
  }

  /* Keep a visible profile-open affordance at 320px. The v3 compact pass hid
     recruiter-family chevrons; v4 cards must still read as tappable rows. */
  #view-medical .mh-medical-card--v4 .ref-rc-company-card__chev,
  #view-medical .mh-medical-card--v4 .mh-dir-row__chev {
    display: grid !important;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    min-height: 44px;
    margin: 0;
    color: var(--mh-accent, #8a7348);
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.92;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-logo,
  #view-medical .mh-medical-card--v4 .mh-provider-logo,
  #view-medical .mh-medical-card--v4 .ref-rc-logo--list {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__photo {
    flex-basis: 92px;
    width: 92px;
    height: 72px;
    border-radius: 12px;
  }

  #view-medical .mh-medical-filter-pick__value {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* #778 final product pass — real-shell mobile polish. */
#view-medical .mh-medical-filter-native {
  pointer-events: none !important;
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--v4 {
  width: 100% !important;
  margin: 0 !important;
}

#view-medical .mh-medical-card--v4:focus,
#view-medical .mh-medical-card--v4:focus-visible,
#view-medical .mh-medical-filter-pick:focus-visible,
#view-medical .mh-medical-search__input:focus-visible,
#view-medical .mh-medical-alpha__letter:focus-visible,
#view-medical .mh-medical-picker-option:focus-visible,
#view-medical .mh-medical-picker-sheet__search:focus-visible,
#view-medical .mh-medical-picker-sheet__head .mh-button:focus-visible,
#view-medical-detail .mh-medical-detail__action:focus-visible,
#view-medical-detail .mh-medical-source-link:focus-visible,
#view-medical-detail .mh-medical-detail__fee-source:focus-visible,
#view-medical-detail .mh-medical-detail__phone-value:focus-visible,
#view-medical-detail [data-back-to="medical"]:focus-visible {
  outline: 2px solid var(--mh-accent, #8a7348);
  outline-offset: 2px;
}

#view-medical a,
#view-medical-detail a {
  color: inherit;
}

#view-medical-detail a.mh-medical-source-link,
#view-medical-detail a.mh-medical-detail__fee-source,
#view-medical-detail a.mh-medical-detail__phone-value {
  color: var(--mh-accent, #8a7348);
}

@media (prefers-reduced-motion: reduce) {
  #view-medical .mh-medical-logo__img,
  #view-medical .mh-medical-card__hero-thumb,
  #view-medical-detail .mh-medical-logo__img,
  #view-medical-detail .mh-medical-detail__hero-img {
    transition: none;
  }
}

/* #778 v5 — photographic directory cards and honest unresolved media. */
#view-medical .mh-medical-card--v4 {
  align-items: stretch;
  gap: 12px;
  min-height: 104px;
  padding: 10px 12px 10px 10px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo {
  position: relative;
  flex: 0 0 128px;
  width: 128px;
  min-width: 128px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--mh-id-bg, #1c2b36) 88%, #0c0d0f);
}

.mh-medical-media-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  box-sizing: border-box;
  max-width: calc(100% - 16px);
  padding: 3px 5px;
  border-radius: 4px;
  background: #15212b;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  pointer-events: none;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mh-hero-object-position, 50% 45%);
  display: block;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity .mh-medical-card__photo-logo {
  position: static;
  width: 58px !important;
  height: 58px !important;
  min-height: 58px;
  flex-basis: 58px;
  box-shadow: none;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity img {
  object-fit: contain;
}

/* Scoped to the photograph. Unscoped, this rule's `left: 8px; bottom: 8px`
   also reached the plate that holds a clinic's mark on its own, which the mark
   placement makes `position: relative` - so the plate shifted eight pixels
   right and eight up inside its tile, and the mark with it. Forty-three cards
   were drawing their logo sixteen pixels off centre. */
#view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px;
  flex-basis: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px color-mix(in srgb, #0c0d0f 35%, transparent);
  z-index: 2;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--google-pending::after {
  content: "";
  position: absolute;
  inset: auto 10px 10px 10px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-id-fg, #e8eef2) 42%, transparent);
}

#view-medical .mh-medical-card--v4 .mh-medical-card__google-credit {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, #0c0d0f 64%, transparent);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 750;
  line-height: 1.1;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__monogram {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__body {
  align-content: center;
  min-height: 96px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__exam-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-border-subtle, #d8d2c6) 55%, transparent);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A sum that belongs to the clinic's other examinations is not the answer to the medical type
   the reader chose, and the line saying so has to be readable rather than grey filler. */
/* The sentence behind a missing price sits under it and wraps: "the clinic asks you to call"
   and "nobody could read the page" are different answers and both are worth reading. */
#view-medical-detail /* A price's conditions: VAT, a deposit, a package's contents, or which charge on the page
   the sum is not. Set below the price, quieter than it, never mistakable for it (#842). */
.mh-medical-service-card__price-note {
  margin: 2px 0 0;
  color: var(--mh-text-muted, #9aa4b2);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mh-medical-service-card__price-reason {
  margin: 2px 0 0;
  color: var(--mh-text-muted, #9aa4b2);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

#view-medical .mh-medical-card__price-note {
  display: block;
  margin-top: 1px;
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--mh-text-muted, #9aa4b2);
  white-space: normal;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__from-price {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--mh-accent, #8a7348);
}

#view-medical-detail .mh-medical-detail__hero--unresolved {
  min-height: 168px;
  display: grid;
  place-items: end start;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-id-bg, #1c2b36) 70%, transparent), #1c2430);
}

#view-medical-detail .mh-medical-detail__hero--unresolved .mh-medical-detail__hero-content {
  grid-template-columns: 52px minmax(0, 1fr);
}

#view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 52px !important;
  height: 52px !important;
  z-index: 3;
}

#view-medical-detail .mh-medical-service-group {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

#view-medical-detail .mh-medical-service-group__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
}

#view-medical-detail .mh-medical-service-card details {
  margin: 0;
}

#view-medical-detail .mh-medical-service-card__facts {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 0.78rem;
}

#view-medical-detail .mh-medical-service-more {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

#view-medical-detail .mh-medical-service-more summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  border-radius: 12px;
  padding: 0 12px;
  color: var(--mh-accent, #8a7348);
  background: color-mix(in srgb, var(--mh-accent-soft, #efe6d6) 58%, transparent);
  font-size: 0.82rem;
  font-weight: 800;
  list-style: none;
}

#view-medical-detail .mh-medical-service-more summary::-webkit-details-marker {
  display: none;
}

#view-medical-detail .mh-medical-service-more summary span {
  color: var(--mh-text-muted, #6b645c);
  font-size: 0.72rem;
  font-weight: 750;
}

html[data-theme="dark"] #view-medical-detail .mh-medical-detail__hero--unresolved {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-id-bg, #1c2b36) 82%, #000), #12181f);
  color: #edf1f4;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__google-credit {
  opacity: 0;
}

#view-medical .mh-medical-card--v4 [data-hero-loaded="1"] .mh-medical-card__google-credit {
  opacity: 1;
}

#view-medical-detail .mh-medical-detail__media-source {
  display: block;
  max-width: 100%;
  margin: -2px 2px 2px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--mh-text-muted, #6b645c);
  overflow-wrap: anywhere;
}

#view-medical-detail .mh-medical-detail__media-source-link {
  color: inherit;
  text-decoration: underline;
}

#view-medical-detail .mh-medical-detail__prices,
#view-medical-detail .mh-medical-detail__prep {
  margin: 12px 0 0;
}

#view-medical-detail .mh-medical-detail__price-list {
  margin: 0;
  padding-left: 1.1em;
}

#view-medical-detail .mh-medical-detail__prices--unpublished {
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mh-surface-2, #f4f1ea) 82%, transparent);
}

/* The approved sheet keeps data-theme="light" on the html element with dark
   tokens, so the paper rule above painted a cream panel under near-white
   buttons (owner's sweep, 2026-09-20). Under the approved sheet the panel is
   the dark inset surface, like the rest of the profile. */
html[data-theme="dark"] #view-medical-detail .mh-medical-detail__prices--unpublished,
html.mh-approved #view-medical-detail .mh-medical-detail__prices--unpublished {
  background: color-mix(in srgb, var(--mh-card-surface, #1f2d42) 94%, #ffffff 6%);
  color: var(--mh-text, #eef2f6);
}

#view-medical-detail .mh-medical-detail__price-unpublished {
  margin: 0 0 8px;
  font-weight: 650;
}

#view-medical-detail .mh-medical-detail__price-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#view-medical-detail .mh-medical-detail__action {
  min-height: 44px;
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-theme="dark"] #view-medical-detail .mh-medical-detail__price-actions .mh-medical-detail__action,
html[data-theme="dark"] #view-medical-detail .mh-medical-detail__actions--primary .mh-medical-detail__action {
  border-color: color-mix(in srgb, var(--mh-link, #4d9de0) 58%, transparent);
  color: var(--mh-text, #eef2f6);
  background: color-mix(in srgb, var(--mh-link, #4d9de0) 16%, transparent);
}

@media (max-width: 320px) {
  #view-medical .mh-medical-card--v4 {
    min-height: 86px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__photo {
    flex-basis: 96px;
    width: 96px;
    min-width: 96px;
    height: 74px;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__body {
    min-height: 74px;
    gap: 2px;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__place {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: clip;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__name {
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__signals {
    display: none !important;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content {
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 12px;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__mark--hero {
    width: 50px !important;
    height: 50px !important;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__actions--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__body,
  #view-medical-detail .mh-medical-detail--v4 .mh-dir-course-row__body {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-card__price {
    text-align: left;
  }
}

/* #778 V15 corrective geometry gate: provider identity is primary content.
   Keep long centre names readable instead of clipping them on narrow screens. */
#view-medical .mh-medical-card--v4 .mh-medical-card__name {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

@media (max-width: 340px) {
  #view-medical .mh-medical-card--v4 {
    align-items: flex-start;
    min-height: 96px;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__body {
    align-content: start;
    min-height: 0;
  }

  #view-medical .mh-medical-card--v4 .mh-medical-card__name {
    font-size: 0.82rem;
    line-height: 1.18;
  }
}

/* Keep full provider names and a useful photo within a 320px card. */
@media (max-width: 320px) {
  #view-medical .mh-medical-card--v4 {
    gap: 8px;
  }
  #view-medical .mh-medical-card--v4 .mh-medical-card__photo {
    flex-basis: 80px;
    width: 80px;
    min-width: 80px;
    min-height: 74px;
  }
}

#view-medical .mh-medical-card__identity-note {
  font-size: 0.625rem;
  line-height: 1.2;
  color: var(--mh-text-muted, #56616b);
}
#view-medical-detail .mh-medical-detail__identity-source {
  margin: 8px 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--mh-text-muted, #56616b);
}

/* ==========================================================================
   #778 — premium pass: identity, geometry and press feedback
   --------------------------------------------------------------------------
   Live QA called the section "an administrative register rendered as UI".
   Three things caused that, and this block addresses those three.

   1. Nothing in the section reacted to touch. There was not one :active rule
      in 2,969 lines, while the design system has carried --mh-press-scale and
      --mh-press-ms from the start and every other screen uses them.
   2. Clinic marks were drawn at 30-58px inside a 128x96 tile, so a real logo
      and a drawn fallback were indistinguishable at arm's length, and a white
      mark on the dark theme read as a hole cut in the card.
   3. "Logo source unverified" sat directly under the clinic name on most
      cards, which made provenance the loudest thing on the screen.

   Appended last on purpose: the file carries three generations of markup
   (--v2, --v3, --v4) and 163 !important declarations, and unpicking that is a
   separate job. Ordering wins here without adding to the pile.
   ========================================================================== */

/* -- 1. Touch feedback ----------------------------------------------------
   One curve for everything that can be pressed, so the section behaves like
   the rest of the app rather than like a list of links. */

#view-medical .mh-medical-card--v4,
#view-medical .mh-medical-filter-pick,
#view-medical .mh-medical-alpha__letter,
#view-medical .mh-medical-picker-option,
#view-medical .mh-medical-filter-reset,
#view-medical-detail .mh-medical-detail__action,
#view-medical-detail .mh-medical-source-link,
#view-medical-detail [data-back-to="medical"] {
  transition:
    transform var(--mh-press-ms, 160ms) cubic-bezier(0.2, 0.7, 0.3, 1),
    background-color var(--mh-press-ms, 160ms) ease,
    border-color var(--mh-press-ms, 160ms) ease,
    box-shadow var(--mh-press-ms, 160ms) ease;
  -webkit-tap-highlight-color: transparent;
}

#view-medical .mh-medical-card--v4:active {
  transform: scale(var(--mh-press-scale, 0.988));
  background: var(--mh-surface-raised, var(--mh-surface-elevated));
}

#view-medical .mh-medical-filter-pick:active,
#view-medical .mh-medical-picker-option:active,
#view-medical .mh-medical-filter-reset:active,
#view-medical-detail .mh-medical-detail__action:active,
#view-medical-detail .mh-medical-source-link:active,
#view-medical-detail [data-back-to="medical"]:active {
  transform: scale(0.97);
}

/* The alphabet is a row of small targets; a scale that small reads as a
   twitch, so the letter takes the accent instead. */
#view-medical .mh-medical-alpha__letter:active {
  background: color-mix(in srgb, var(--mh-accent) 18%, transparent);
  color: var(--mh-accent);
}

/* -- 2. Clinic identity ---------------------------------------------------
   A mark that fills its tile, on a plate that keeps a white logo from cutting
   a hole in the dark theme. */

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity {
  padding: 10px;
  background: var(--mh-surface-inset, var(--mh-surface-muted));
  border: 1px solid var(--mh-border-subtle, var(--mh-border));
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity > .mh-medical-logo,
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity > .mh-provider-logo,
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity .mh-medical-card__photo-logo {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  flex-basis: auto;
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
  box-shadow: none;
}

/* A photographed or supplied mark sits on a near-white plate in both themes.
   Clinic logos are drawn for paper - a navy wordmark on a dark tile
   disappears - and one plate colour keeps the column reading as a set rather
   than as a row of different accidents. */
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity > .mh-medical-logo:not(.mh-medical-logo--designed),
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity > .mh-provider-logo:not(.mh-medical-logo--designed) {
  background: #f4f2ee;
}

/* A drawn fallback keeps the colour assigned to that clinic, and gets a
   monogram sized for the tile it now fills. It should read as a mark somebody
   chose, not as a logo that failed to load. */
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity > .mh-medical-logo--designed {
  padding: 0;
  border-radius: 12px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity > .mh-medical-logo--designed .mh-medical-logo__mark {
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The mark that sits over a photograph stays a badge, but a legible one. */
#view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px;
  flex-basis: 40px;
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--mh-surface-standard, #ffffff) 92%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, #0c0d0f 42%, transparent);
}

/* -- 3. What the card says, in the order it should say it -----------------
   Provenance is a caveat, not a headline. It keeps its place on the card and
   loses the weight it had directly under the clinic name. */

#view-medical .mh-medical-card--v4 .mh-medical-card__name {
  order: 1;
  font-weight: 650;
  line-height: 1.22;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__place { order: 2; }
#view-medical .mh-medical-card--v4 .mh-medical-card__exams { order: 3; }
#view-medical .mh-medical-card--v4 .mh-medical-card__from-price { order: 4; }
#view-medical .mh-medical-card--v4 .mh-medical-card__price-note { order: 5; }
#view-medical .mh-medical-card--v4 .mh-medical-card__signals { order: 5; }

#view-medical .mh-medical-card--v4 .mh-medical-card__identity-note {
  order: 6;
  margin-top: 2px;
  font-size: 0.66rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--mh-text-muted) 82%, transparent);
}

/* Examination types are the reason a seafarer is on this screen: give them a
   shape you can scan down a column. */
#view-medical .mh-medical-card--v4 .mh-medical-card__exams {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__exam-badge,
#view-medical .mh-medical-card--v4 .mh-medical-card__more {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: var(--mh-radius-sm, 8px);
  background: color-mix(in srgb, var(--mh-accent) 12%, transparent);
  color: color-mix(in srgb, var(--mh-text) 88%, transparent);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  /* Most exam names sit on one line, but a few are a sentence:
     "ENG1-equivalent Dutch seafarer medical" is 38 characters, and as an
     unbreakable chip it pushed the OmniHealth card 11px past the screen. A long
     name wraps inside its chip rather than widening the card. */
  max-width: 100%;
  overflow-wrap: break-word;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__more {
  background: transparent;
  color: var(--mh-text-muted);
  font-weight: 500;
  padding-inline: 2px;
}

/* Call / Maps / Book state what the clinic offers; nothing happens if you
   touch them. They are drawn as marks rather than as buttons, so the card
   does not promise an action it cannot perform. */
#view-medical .mh-medical-card--v4 .mh-medical-card__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__signal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--mh-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__signal::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mh-accent) 70%, transparent);
}

/* -- 4. The header says what this is, not how it was assembled ------------- */

/* The snapshot line is .mh-medical-status in the markup. An earlier version of
   this rule guessed .mh-medical-banner and therefore styled nothing at all -
   which is exactly what the selector-usage sweep was written to catch. */
#view-medical .mh-medical-status__line {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--mh-text-muted);
}

#view-medical .mh-medical-status__kicker {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--mh-text) 72%, transparent);
}


/* The alphabet scrolled under a hard edge, so the last letters read as
   disabled rather than as out of view. */
#view-medical .mh-medical-alpha {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}

#view-medical .mh-medical-alpha::-webkit-scrollbar { display: none; }

/* -- 5. Geometry ----------------------------------------------------------
   The detail hero declared 16/9 and a 176px floor together. At 390px the ratio
   wins and the box is right; at 320px the floor wins, the ratio is silently
   dropped, and the --split variant letterboxes. The floor goes: the ratio is
   what was actually intended. */

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--v4 {
  min-height: 0;
}

/* The ratio describes a photograph. A hero with no photograph is a block of
   text, and holding it to 16/9 clipped the longest clinic names at 320px -
   "Worldwise Travellers Health Centre — Dr Marc Shaw" needs 178px inside a box
   the ratio had fixed at 162. Those heroes size to what they hold. */
#view-medical-detail .mh-medical-detail__hero--unresolved.mh-medical-detail__hero,
#view-medical-detail .mh-medical-detail__hero--designed.mh-medical-detail__hero {
  aspect-ratio: auto;
  height: auto;
  min-height: 164px;
}

@media (max-width: 360px) {
  #view-medical .mh-medical-card--v4 .mh-medical-card__photo {
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    height: 88px;
  }
}

/* Anything that can be tapped is at least 44px in the direction it is small. */
#view-medical-detail .mh-medical-detail__action,
#view-medical-detail .mh-medical-source-action,
#view-medical-detail [data-back-to="medical"],
#view-medical .mh-medical-filter-pick {
  min-height: 44px;
}

/* -- 6. The hero overlay is one column ------------------------------------
   The overlay variant has a single child - the copy - because the clinic mark
   is positioned over the photograph rather than placed in a column beside it.
   The grid kept a two-column template anyway, so that single child landed in a
   50px track: every word wrapped onto its own line and the block grew to 268px
   inside a 162px hero. That is the "oversized marks and letterboxing" the live
   QA recorded, and it is worst at 320px where the track is narrowest.

   One column, and the copy is laid over the photograph rather than sized
   against it, so the hero keeps the ratio it declares. */

/* The compound selector is deliberate. A @media (max-width: 320px) rule sets a
   two-column template on .mh-medical-detail__hero-content with one id and two
   classes; matching that weight is what makes this apply at the width where the
   defect is worst. */
#view-medical-detail .mh-medical-detail__hero-content--overlay.mh-medical-detail__hero-content,
#view-medical-detail .mh-medical-detail__hero-content--solo.mh-medical-detail__hero-content {
  grid-template-columns: minmax(0, 1fr);
}

#view-medical-detail .mh-medical-detail__hero-content--overlay.mh-medical-detail__hero-content {
  position: absolute;
  inset: 0;
  min-height: 0;
  align-content: end;
  padding: 14px;
}

#view-medical-detail .mh-medical-detail__hero-content--overlay .mh-medical-detail__copy {
  min-width: 0;
}

#view-medical-detail .mh-medical-detail__hero-content--overlay .mh-medical-detail__title,
#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content--overlay .mh-medical-detail__title {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.16;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#view-medical-detail .mh-medical-detail__hero-content--overlay .mh-medical-detail__hero-kicker {
  margin: 0 0 4px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

/* These wrap rather than truncate: #759 forbids clipping a clinic name or its
   place with an ellipsis, because the hidden part is the part that tells two
   clinics apart. The single-column hero has the width for it now. */
#view-medical-detail .mh-medical-detail__hero-content--overlay .ref-rc-detail__category,
#view-medical-detail .mh-medical-detail__hero-content--overlay .mh-medical-detail__hero-exams {
  margin: 3px 0 0;
  font-size: 0.76rem;
  line-height: 1.3;
}

/* The mark is only repositioned where the copy is laid over a photograph. On a
   hero without one the content is an ordinary two-column grid and the mark
   belongs in its column - moving it there put it on top of the clinic name. */
#view-medical-detail .mh-medical-detail__hero:has(.mh-medical-detail__hero-content--overlay) .mh-medical-detail__identity-logo,
#view-medical-detail .mh-medical-detail__hero:has(.mh-medical-detail__hero-content--overlay) .mh-medical-detail__mark--hero {
  top: 12px;
  left: 12px;
  bottom: auto;
}

@media (prefers-reduced-motion: reduce) {
  #view-medical .mh-medical-card--v4,
  #view-medical .mh-medical-filter-pick,
  #view-medical .mh-medical-alpha__letter,
  #view-medical .mh-medical-picker-option,
  #view-medical .mh-medical-filter-reset,
  #view-medical-detail .mh-medical-detail__action,
  #view-medical-detail .mh-medical-source-link,
  #view-medical-detail [data-back-to="medical"] {
    transition: none;
  }

  #view-medical .mh-medical-card--v4:active,
  #view-medical .mh-medical-filter-pick:active,
  #view-medical .mh-medical-picker-option:active,
  #view-medical .mh-medical-filter-reset:active,
  #view-medical-detail .mh-medical-detail__action:active,
  #view-medical-detail .mh-medical-source-link:active,
  #view-medical-detail [data-back-to="medical"]:active {
    transform: none;
  }
}

/* -- 8. Three price states, told apart at a glance ------------------------
   A fee the clinic publishes, guidance from an authority that is not this
   clinic's fee, and nothing published at all. The first two were already
   distinct in copy; the third rendered as empty space, which reads as an
   oversight rather than as a fact. */

#view-medical-detail .mh-medical-service-card__price {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

/* Compound, to outweigh the service-card rule that sets the weight and size on
   every price line. */
#view-medical-detail .mh-medical-service-card__price--guidance.mh-medical-service-card__price {
  font-weight: 500;
  color: var(--mh-text-muted);
}

#view-medical-detail .mh-medical-service-card__price--absent.mh-medical-service-card__price {
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--mh-text-muted) 80%, transparent);
}

/* -- 9. The identity plate is the shape of the marks it holds --------------
   Every clinic mark in the catalogue is 640x320 - a landscape wordmark, two to
   one. Held in a 58px square with object-fit: contain, such a mark renders 58
   wide and 29 tall and leaves half the plate empty, which is why the logo on a
   profile looked like a stamp lost on a card. A landscape plate of the same
   height lets the same file fill it.

   Sized against the mark rather than the grid: the hero mark also holds a
   two-letter monogram when no logo exists, and a wide plate suits that too. */

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__mark--hero {
  width: 104px !important;
  height: 56px !important;
  border-radius: 12px !important;
  padding: 7px;
  box-sizing: border-box;
}

/* The column the mark sits in has to grow with it, or the plate is drawn over
   the clinic name instead of beside it. */
#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content {
  grid-template-columns: 104px minmax(0, 1fr);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__mark--hero .mh-medical-logo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 360px) {
  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__mark--hero {
    width: 88px !important;
    height: 48px !important;
    padding: 6px;
  }

  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero-content {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

/* The overlay hero has no mark column - the plate floats over the photograph -
   so it keeps the single column set earlier. */
#view-medical-detail .mh-medical-detail__hero-content--overlay.mh-medical-detail__hero-content {
  grid-template-columns: minmax(0, 1fr);
}

/* A card tile gives the mark as much of its plate as the aspect ratio allows. */
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity {
  padding: 7px;
}

/* -- 10. The plate clips what the trim pushes outside it -------------------
   A trimmed mark is scaled up about the plate's centre and shifted, so the rest
   of the exported card moves outside the plate. Without clipping it would be
   drawn over the card next to it. */

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity,
#view-medical .mh-medical-logo,
#view-medical-detail .mh-medical-logo {
  overflow: hidden;
}

/* The plate is the positioning context for a placed mark, and clips whatever
   the placement pushes outside it. No will-change here: promoting the image to
   its own layer is what made an enlarged mark look like a blown-up thumbnail. */
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity,
#view-medical .mh-medical-logo,
#view-medical-detail .mh-medical-logo {
  position: relative;
}

#view-medical .mh-medical-logo[data-logo-trimmed="1"] .mh-medical-logo__img,
#view-medical-detail .mh-medical-logo[data-logo-trimmed="1"] .mh-medical-logo__img {
  image-rendering: auto;
}

/* -- 11. A wordmark gets the width it needs -------------------------------
   The marks in this catalogue run from square to ten times wider than tall -
   median a little over three to one. Held in one fixed column, the wide ones
   are drawn a dozen pixels tall and cannot be read; Beard Medical's is 520x56
   in its file, nine to one.

   So the shape decides the layout. Anything wider than four to one takes the
   full width of the hero, above the clinic name; everything else keeps its
   column beside it. The mark's own height is what changes, and the height is
   what makes a column of clinics look like a set. */

#view-medical-detail .mh-medical-detail__hero[data-mark-shape="wide"] .mh-medical-detail__hero-content {
  grid-template-columns: minmax(0, 1fr);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero[data-mark-shape="wide"] .mh-medical-detail__mark--hero {
  width: 100% !important;
  max-width: 260px;
  height: 34px !important;
  margin-bottom: 10px;
  padding: 5px 9px;
}

#view-medical-detail .mh-medical-detail__hero[data-mark-shape="square"] .mh-medical-detail__hero-content {
  grid-template-columns: 64px minmax(0, 1fr);
}

#view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero[data-mark-shape="square"] .mh-medical-detail__mark--hero {
  width: 64px !important;
  height: 56px !important;
}

/* -- 12. The clinic mark over a photograph it did not take ----------------
   When the photograph comes from Google the picture is explicitly not the
   clinic's, so its own mark is the only thing on the hero the clinic chose.
   It sits in the corner, clear of the name below it, on the same plate the
   mark gets everywhere else. */

#view-medical-detail .mh-medical-detail__identity-logo--over-photo {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 96px !important;
  height: 40px !important;
  border-radius: 10px;
  padding: 5px;
  box-sizing: border-box;
  background: #f4f2ee;
  box-shadow: 0 6px 18px color-mix(in srgb, #0c0d0f 45%, transparent);
}

@media (max-width: 360px) {
  #view-medical-detail .mh-medical-detail__identity-logo--over-photo {
    width: 84px !important;
    height: 36px !important;
    top: 8px;
    left: 8px;
  }
}

/* -- 13. One drawn tile, not four -------------------------------------------
   A clinic with no photograph and no mark of its own still needs something in
   the media slot, and for 59 of the 163 centres this tile is the only identity
   there is. Four generations of it had piled up and all four still applied: a
   radial blob painted over the ground by a z-index:-1 pseudo-element, a ring
   floating 12px inside the tile's own edge, a grey plate behind the letters,
   and a vignette meant for photographs. What rendered was their sum, which is
   why it read as a smudge rather than a design. This is the whole tile, here.

   It sits in a column of photographs, so it carries their weight: a pale tile
   reads as a failed image, not as a choice. The clinic's assigned colour is the
   ground, lit from the top left the way a struck plate is, with one hairline at
   the edge, the monogram small and letterspaced, and a short rule beneath it in
   the clinic's accent. Nothing here competes with a photograph, and nothing
   looks unfinished beside one. */

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--unresolved {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px;
  color: var(--mh-id-fg, #e8eef2);
  text-align: center;
  background:
    linear-gradient(157deg,
      color-mix(in srgb, var(--mh-id-bg, #1c2b36) 87%, #ffffff) 0%,
      var(--mh-id-bg, #1c2b36) 48%,
      color-mix(in srgb, var(--mh-id-bg, #1c2b36) 86%, #000000) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mh-id-fg, #e8eef2) 15%, transparent);
}

html[data-theme="dark"] #view-medical .mh-medical-card--v4 .mh-medical-card__photo--unresolved {
  background:
    linear-gradient(157deg,
      color-mix(in srgb, var(--mh-id-bg, #1c2b36) 94%, #ffffff) 0%,
      color-mix(in srgb, var(--mh-id-bg, #1c2b36) 88%, #000000) 52%,
      #11171d 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mh-id-fg, #e8eef2) 11%, transparent);
}

/* The one accent note. A grid item, not an absolutely positioned overlay, so
   it cannot drift out of the tile at any width. */
#view-medical .mh-medical-card--v4 .mh-medical-card__photo--unresolved::after {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-id-accent, #8a7348) 86%, #ffffff);
}

#view-medical .mh-medical-card--v4 .mh-medical-card__photo--unresolved .mh-medical-card__monogram {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  text-shadow: none;
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  line-height: 1;
  color: color-mix(in srgb, var(--mh-id-fg, #e8eef2) 94%, transparent);
}

/* -- 14. The mark over the photograph gets the same shape as everywhere else
   The hero already lets a wordmark take the width it needs - but only the mark
   that sits in the hero's own grid. The plate that sits over a photograph was
   left at a fixed 52x52 square, and every mark in this catalogue is a 640x320
   export. Beard Medical's ink is 520x56 inside that file: drawn contained in a
   52px square it came out four pixels tall, a white smudge in the corner of an
   otherwise finished card.

   The plate now takes its proportions from the mark, the way the rest of the
   section does. Heights are held close together across the three shapes so a
   column of clinics still reads as a set. */

/* Until the mark has loaded its shape is unknown, and a square is the wrong
   guess: every mark in this catalogue is wider than it is tall, and the square
   plate drew a 314x82 vector eleven pixels tall for as long as the file took
   to arrive. Landscape is the default; the three rules below correct it once
   the mark is there to measure. */
#view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo {
  width: 96px !important;
  height: 52px !important;
}

#view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo[data-mark-shape="wide"] {
  width: 132px !important;
  height: 46px !important;
}

#view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo[data-mark-shape="landscape"] {
  width: 96px !important;
  height: 52px !important;
}

#view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo[data-mark-shape="square"] {
  width: 56px !important;
  height: 56px !important;
}

@media (max-width: 360px) {
  #view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo[data-mark-shape="wide"] {
    width: 116px !important;
    height: 42px !important;
  }

  #view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo[data-mark-shape="landscape"] {
    width: 86px !important;
    height: 48px !important;
  }
}

/* The disclosure and the clinic's mark were both pinned to the hero's top left
   and sat on top of each other. The disclosure has to stay legible and stay on
   the image it describes, so it moves to the opposite corner - which is empty,
   because the clinic's name occupies the bottom of the hero. */
#view-medical-detail .mh-medical-detail__hero:has(.mh-medical-detail__identity-logo) .mh-medical-media-badge {
  left: auto;
  right: 8px;
  max-width: calc(100% - 152px);
}

/* -- 15. The action row -----------------------------------------------------
   The five actions on a profile were laid out in four equal columns and then
   left to sit at their own width inside them: Call 53, Email 65, Website 81,
   Book 63, each starting at a column edge with a different amount of air after
   it, and Directions - 88px of label in an 81px column - stranded on a row of
   its own. Ragged is what made the row look unfinished; the widths are not the
   clinic's data, they are the length of five English words.

   The grid is six columns now, and a button spans a share of it rather than
   standing at its own width. Three per row where three fit - the widest label
   measures 88px, and three columns clear that from 360px up - two per row
   below that. A trailing one or two take the rest of the row between them, so
   the block always ends square. The buttons stretch into their share: the
   design system's .mh-button defaults to `justify-self: start`, which is right
   for a lone button and wrong for a row of them, and an id plus two classes
   beats one class without needing !important. */

#view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions > * {
  grid-column: span 3;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  max-width: none;
}

/* A last row holding one button takes the whole width rather than a half. */
#view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions > :nth-child(2n + 1):last-child {
  grid-column: span 6;
}

@media (min-width: 360px) {
  #view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions > * {
    grid-column: span 2;
  }

  /* Two left over: half the row each. */
  #view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions > :nth-child(3n + 1):nth-last-child(2),
  #view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions > :nth-child(3n + 1):nth-last-child(2) + * {
    grid-column: span 3;
  }

  /* One left over: all of it. */
  #view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions > :nth-child(3n + 1):last-child {
    grid-column: span 6;
  }
}

/* The two map destinations are one choice, not a heading and a footnote, so
   they take equal halves instead of the width of "Google Maps" and the width
   of "Apple Maps". A grid, not a flex row: saved-parity.css pins the
   fills-its-container class to `flex: 0 0 auto !important`, which in a flex
   row makes each button a full-width row of its own. In a grid the same class
   means what it says - the width of the cell it is in. */
#view-medical-detail .mh-medical-detail__map-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

#view-medical-detail .mh-medical-detail__map-actions > .mh-medical-detail__action {
  min-width: 0;
  max-width: none;
}

/* -- 16. What a press feels like --------------------------------------------
   Pressing scaled the button and changed nothing else, which on an outline
   button a finger is covering reads as no response at all. The surface takes
   the accent for the length of the press, which is visible around the edge of
   a fingertip. */

#view-medical-detail .mh-medical-detail__action:active,
#view-medical .mh-medical-filter-pick:active {
  background: color-mix(in srgb, var(--mh-accent, #8a7348) 14%, var(--mh-surface, #fff));
  border-color: color-mix(in srgb, var(--mh-accent, #8a7348) 46%, transparent);
}

/* The tray holds pills, so its own corner follows theirs; a 12px box around
   fully round buttons leaves four wedges of background in the corners. */
#view-medical-detail .mh-medical-detail__actions--primary.mh-medical-detail__actions {
  border-radius: 18px;
  padding: 7px;
}

/* -- 17. The alphabet reads as letters --------------------------------------
   Each letter sat at 11.2px inside a 44px circle - a quarter of the target,
   which is what made the row look like placeholder chrome rather than a
   control. The target stays 44px, which is the floor for a thumb; the letter
   is drawn at a size that matches it. */

#view-medical .mh-medical-alpha__letter,
#view-medical .mj-recruiter-az-letter {
  /* The size these carry is set by `font-size: var(--mh-type-caption)
     !important` in the shared theme, because the letters are built out of the
     Saved segmented control. Raising the variable on these elements is how to
     change it: the important declaration then resolves to this value, and the
     section does not become another place that fights the theme with
     !important of its own. */
  --mh-type-caption: 0.86rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* -- 18. The badge on a card's photograph -----------------------------------
   The same mark, the same job, one size down from the profile: it names the
   clinic on a photograph the clinic did not necessarily take. It was a 40x40
   dark square holding a wordmark drawn 34x17 inside it - too dark for a dark
   mark to read against, too square for a mark three times wider than tall, and
   pushed eight pixels off the top edge of the thumbnail.

   The plate is light, so any mark reads on it, and it takes the mark's shape
   the way the profile's does. The thumbnail is 104x88, so every size here
   clears its 8px margins. */

#view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo {
  position: absolute;
  top: auto;
  left: 8px;
  bottom: 8px;
  /* !important only because directory-family.css pins every .mh-provider-logo
     in this view to a flat #2a2d33 with one of its own, and a plate that dark
     swallows the navy wordmarks most of these clinics use. Higher specificity
     settles it; nothing else here needs the flag. */
  background: color-mix(in srgb, #ffffff 94%, var(--mh-id-bg, #1c2b36)) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, #0c0d0f 38%, transparent);
}

#view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo[data-mark-shape="wide"] {
  width: 80px !important;
  height: 28px !important;
  min-height: 28px;
  flex-basis: 28px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo[data-mark-shape="landscape"] {
  width: 62px !important;
  height: 34px !important;
  min-height: 34px;
  flex-basis: 34px;
}

#view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo[data-mark-shape="square"] {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px;
  flex-basis: 38px;
}

/* -- 19. The last option in a picker ----------------------------------------
   The filter sheets cover the screen but the navigation bar sits on top of
   them, so the end of every list ran under it: scrolled to the bottom, 40px of
   the last country - and of the last city, and the last examination - was
   behind the tab bar and could not be read or reliably tapped. The list ends
   above the bar now, using the same height the shell reserves for it. */

#view-medical .mh-medical-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
  );
}

/* -- 20. Things you tap that were not built to be tapped --------------------
   An earlier pass set a 44px floor for the buttons and missed the controls
   that do not look like buttons. Auditing every focusable element in a profile
   turned up three that a thumb has to hit and could not:

   * each examination row is a <summary> that opens the detail underneath it -
     eight of them on this profile, every one 20px tall;
   * the phone number is the clinic's primary action and a tel: link, 22px;
   * the fee-guidance link sits alone on its line at 15px.

   The inline links inside a sentence - the media source, the register source -
   are left as they are on purpose. They are part of running text, where a 44px
   block would break the paragraph, and that is the one case the target-size
   rule exempts. */

#view-medical-detail .mh-dir-course-row__body {
  min-height: 44px;
  align-items: center;
  padding-block: 6px;
}

#view-medical-detail .mh-medical-detail__phone-value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

#view-medical-detail a.mh-medical-detail__fee-source {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The sources disclosure at the foot of a profile - the same control, one more
   place it was 17px tall. The examination rows are excluded: they are also
   summaries and they lay their contents out in a grid. */
#view-medical-detail summary:not(.mh-dir-course-row__body) {
  display: flex;
  align-items: center;
  min-height: 44px;
}


/* -- Card media: the two overlays stop fighting for the same corner ----------
   A 128x96 tile carries three things: the picture, the "Source unverified" or
   "Illustration" disclosure, and the clinic's mark. The disclosure sits top
   left; the mark sat bottom left directly under it, its ring flush against the
   edge of the tile, so the left half of every photograph was covered by two
   stacked plates and the mark looked cut off. The mark moves to the opposite
   corner and keeps a real inset, which leaves the picture readable down its
   left side and gives the ring room to draw. */
html #view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo,
html #view-medical .mh-medical-card--v4 .mh-medical-card__photo.mh-medical-card__media--hero > .mh-medical-card__photo-logo {
  left: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  max-width: calc(100% - 24px);
}

/* The mark on a card is a signature, not a banner: at half the width of the
   tile it read as the subject of the picture rather than a label on it. */
html #view-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo {
  max-height: 30px;
}

/* -- Detail hero: the mark stops sitting on the kicker ----------------------
   The mark is laid out in the flow at the top of the hero and then nudged down
   twelve pixels with `top`, which moves it without reserving the room. The copy
   underneath began two pixels below its lower edge, so "Official register
   profile" ran along the bottom of the plate. A margin reserves what the nudge
   spends. The hero has nineteen pixels of slack under its last line, so the
   copy still fits. */
html #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--official .mh-medical-detail__identity-logo,
html #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--official .mh-medical-detail__mark--hero {
  margin-bottom: 10px;
}

/* -- The mark always gets a light field -------------------------------------
   The backdrop behind a clinic's mark mixed --mh-card-surface with the identity
   navy. In this theme that variable is itself dark, so the mix came out at
   #1c2430 and the plate was as dark as the tile behind it. Most marks did not
   show it because their file carries a white field of its own; ArboNed's, an SVG
   with a transparent ground and navy lettering, disappeared into it. A fixed
   light field keeps every mark legible and matches the white-field files. */
html #view-medical .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__img,
html #view-medical .mh-medical-card__photo--logo-identity .mh-medical-logo__img,
html #view-medical-detail .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__img {
  background: color-mix(in srgb, #f4efe4 92%, #1c2430);
}

/* MED-05. At 320 CSS px the overlaid copy covered 82 per cent of the hero and its shade ran
   through the doctor's portrait. On a phone the hero becomes a picture with its caption beneath
   it: the asset, the crop and the attribution line are untouched, and above 430 px the overlay
   stays as it was. */
/* 430.99, not 430: a viewport a browser reports as 430 wide is often 430-point-something,
   and `max-width: 430px` misses it while `min-width: 431px` misses it too - so the profile
   fell between the phone layout and the wide one at exactly the width the audit measured
   (#842, MED-05). */
@media (max-width: 430.99px) {
  #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--v4,
  #view-medical-detail .mh-medical-detail__hero--v4 {
    display: block !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  #view-medical-detail .mh-medical-detail__hero--v4 .mh-medical-detail__hero-img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* The shade exists to make words legible over a picture. There are no words over it now. */
  #view-medical-detail .mh-medical-detail__hero--v4 .mh-medical-detail__hero-media-shade {
    display: none !important;
  }

  /* In flow under the picture, but not under the scrim. The approved sheet
     draws a dark gradient as the hero's ::before, absolutely positioned across
     the whole hero, and lifts the caption above it with `position: relative;
     z-index: 2`. `static` here threw that away: z-index does nothing on a
     static box, so the clinic's name was painted and then a 58-90% dark
     gradient was painted over it. Relative with no offsets sits in flow
     exactly as static does, and keeps its place above the scrim. */
  #view-medical-detail .mh-medical-detail__hero-content--overlay.mh-medical-detail__hero-content {
    position: relative !important;
    inset: auto !important;
    z-index: 2;
    padding: 10px 12px 12px !important;
  }

  /* And the scrim itself has no words to hold up once the caption is under
     the picture; it only darkened a photograph nobody is reading through. */
  #view-medical-detail .mh-medical-detail__hero--v4.mh-medical-detail__hero--full::before {
    display: none !important;
  }

  /* The name can take the lines it needs once it is not sharing space with a face. */
  #view-medical-detail .mh-medical-detail__hero-content--overlay .mh-medical-detail__title {
    -webkit-line-clamp: 3;
  }
}


/* -- 21. The header, the search field and the plate a mark sits on ----------
   Measured at 430 CSS px: the title sat at the top of a 44px bar whose Back
   pill was centred, and the catalogue status, the search field and the bar
   stood edge on edge with no space between them. The search field was 50px
   tall with its magnifier loose in the gutter outside it.

   A clinic without a photograph had its mark on a plate inside a plate: a
   dark 128x96 tile, a darker 112x80 plate inset in it, and inside that the
   white canvas of the clinic's own PNG - three rectangles in three shades
   around a mark drawn 82x19. The tile is the plate now. Light once the mark
   has arrived, so a white canvas disappears into it and the navy wordmarks
   most clinics use read on it; dark with the designed monogram until then. The
   mark takes the whole tile less an 8px margin. */

html #view-medical.mh-stage3-medical .mj-recruiter-topbar,
html[data-theme] #view-medical.mh-stage3-medical.mj-recruiter-ref .mj-recruiter-topbar {
  /* !important because saved-parity.css pins this bar to flex-start with one. */
  align-items: center !important;
}

/* The air between the rows, where the 320 compaction rules do not already
   decide it. On a 320x568 screen every pixel above the first card counts. */
@media (min-width: 361px) {
  html #view-medical.mh-stage3-medical .mj-recruiter-topbar {
    margin-bottom: 8px;
  }

  html #view-medical.mh-stage3-medical .mh-medical-status {
    margin-bottom: 8px;
  }

  html #view-medical.mh-stage3-medical .mh-medical-az-rail:not([hidden]) {
    margin-top: 8px;
  }
}

html #view-medical.mh-stage3-medical .mh-medical-search-wrap {
  position: relative;
  display: block;
  height: auto;
  min-height: 0;
}

html #view-medical.mh-stage3-medical .mh-medical-search-wrap .mj-recruiter-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* approved-style.css sets min-height: 50px on this input from a selector
   worth one id, four classes and a type, and it loads last. This is worth two
   classes more, so the field is 44px without another !important in the file. */
html #view-medical.mh-stage3-medical .mh-medical-search__input,
html.mh-approved #view-medical.view.mh-stage3-medical.mj-recruiter-ref .mh-medical-search-wrap .mh-medical-search__input {
  height: 44px;
  min-height: 44px;
  padding: 0 12px 0 42px;
}

/* The plate fills the tile. !important for the same reason the badge over a
   photograph needs it: directory-family.css pins every provider logo in this
   view to a 112x80 plate in #2a2d33 with its own. */
html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity {
  padding: 0;
}

html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity .mh-medical-card__photo-logo {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  flex: 1 1 auto;
  padding: 8px !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}

html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity .mh-medical-card__photo-logo[data-logo-loaded="1"] {
  background: color-mix(in srgb, #ffffff 94%, var(--mh-id-bg, #1c2b36)) !important;
}

/* The badge over a photograph: the same 3px inset the tile's margin scales
   down to, so the mark uses the badge rather than a box inside it. */
html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo {
  padding: 3px !important;
}


/* The profile's own plate for the mark. Its size is pinned by shape above;
   the margin the mark needs inside it is this, and border-box keeps the pin. */
html #view-medical-detail .mh-medical-detail__hero--official .mh-medical-detail__identity-logo {
  box-sizing: border-box;
  padding: 4px;
}

/* -- 22. No halo around a mark (owner's pass, 2026-09-20) --------------------
   Two things drew a pale ring around a clinic's mark. The badge over a
   photograph kept the approved sheet's 0.8px light border on a near-white
   plate, and every plate mixed its white with the identity navy while the
   image inside it stood on the warm paper ground of section 18 - so a mark's
   own white canvas showed as a second, whiter rectangle inside the first.
   The plate is white once the mark has arrived, the image stands on nothing,
   the badge has no border, and the badge waits for its mark: until then the
   tile's monogram is the identity, and a second monogram on the badge was the
   same letters twice. */
html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__photo--logo-identity .mh-medical-card__photo-logo[data-logo-loaded="1"],
html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo[data-logo-loaded="1"] {
  /* --mh-plate-bg is the colour of the mark's own edge, read from its pixels
     once it has decoded; white until then and for a transparent canvas. */
  background: var(--mh-plate-bg, #ffffff) !important;
}

html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 2px 8px rgba(8, 10, 14, 0.45) !important;
}

html #view-medical.mh-stage3-medical .mh-medical-card--v4 .mh-medical-card__media--hero > .mh-medical-card__photo-logo:not([data-logo-loaded="1"]) {
  visibility: hidden;
}

html #view-medical.mh-stage3-medical .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__img,
html #view-medical.mh-stage3-medical .mh-medical-card__photo--logo-identity .mh-medical-logo__img,
html #view-medical-detail .mh-medical-logo--branded[data-logo-loaded="1"] .mh-medical-logo__img {
  background: transparent !important;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--official .mh-medical-detail__identity-logo[data-logo-loaded="1"] {
  background: var(--mh-plate-bg, #ffffff) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 2px 8px rgba(8, 10, 14, 0.45) !important;
}

/* The caption laid over a photograph is the content's only child. Section 11
   gives the content a mark column when the mark is square, for a mark that
   sits in the flow beside the copy; with the mark absolute over the picture
   that column is empty and the whole caption went into it - at 375 Club de
   Mar's name was drawn 64px wide over four lines, "Club de..." with its place
   and its examinations wrapped word by word beneath it. */
#view-medical-detail .mh-medical-detail__hero[data-mark-shape] .mh-medical-detail__hero-content--overlay.mh-medical-detail__hero-content {
  grid-template-columns: minmax(0, 1fr);
}

/* The source note for the picture and the mark sits with the other source
   notes now, and reads like them. */
html #view-medical-detail .mh-medical-detail__sources .mh-medical-detail__media-source {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* -- 23. Each examination on its own card (owner's pass, 2026-09-20) --------
   The v4 profile drew the services as a run of rows with a top hairline each,
   and the geometry sheet rounds every row 12px, so each hairline was a short
   arc and the rows read as one block. Every examination is a card again:
   an inset surface, a full border, 8px of air between. */
html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-group .mh-medical-service-card--v3 {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--mh-border-subtle, #ffffff24);
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--mh-surface-inset, #202632) 72%, transparent);
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-group .mh-medical-service-card--v3:first-of-type {
  border-top: 1px solid var(--mh-border-subtle, #ffffff24);
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-group {
  gap: 8px;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-group__title {
  margin: 4px 0 2px;
}

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

/* At 320 the facts list inside an examination's details ran 5px past the card:
   a grid child keeps its min-content width unless told otherwise. */
html #view-medical-detail .mh-medical-service-card details,
html #view-medical-detail .mh-medical-service-card__facts,
html #view-medical-detail .mh-medical-service-card__facts > div {
  min-width: 0;
  max-width: 100%;
}

html #view-medical-detail .mh-medical-service-card__facts dd,
html #view-medical-detail .mh-medical-service-card__facts dt {
  overflow-wrap: anywhere;
}

/* Phone and source links were 17-30px tall to a thumb: a 36px hit area, the
   layout untouched (padding inside, the same margin taken back outside). */
html #view-medical-detail a.mh-medical-detail__phone-value,
html #view-medical-detail a.mh-medical-source-link,
html #view-medical-detail a.mh-medical-detail__media-source-link,
html #view-medical-detail a.mh-medical-detail__fee-source {
  display: inline-block;
  padding-block: 11px !important;
  margin-block: -11px !important;
  min-height: 36px;
  box-sizing: border-box;
}

/* -- 25. T&M walk, 2026-09-24 ------------------------------------------------ */

/* A search or a filter brings the Clear button into the filter row and the three
   picks narrow. At 375-412px "Medical type" then broke onto two lines and its top
   line sat 3px from the pill's edge instead of 9px. The row already carries the
   short label the 360px layout uses; it is the one shown while Clear is there. */
@media (max-width: 429px) {
  #view-medical.mh-medical-dir--filtered .mh-medical-filter-pick__label-full {
    display: none;
  }

  #view-medical.mh-medical-dir--filtered .mh-medical-filter-pick__label-short {
    display: inline;
  }
}

/* A picked value is shown whole. At 390px "Newcastle upon Tyne" and
   "ENG1-equivalent Dutch seafarer medical" were cut to "Newcastle upo" and
   "ENG1-equivale"; at 320px they wrapped out of the top and bottom of their
   pills. #776 wants the value on one line and never an ellipsis, so a pick
   takes the width its value needs, the row scrolls sideways when the values are
   wider than the screen (as Training's does), and Clear stays pinned to the end
   on the page colour so nothing shows through its glass. With every pick on
   "All" the three picks share the row as before. The 4px inside the row keep
   the focus ring, which sits 4px outside a pick. */
#view-medical #medical-filter-row.mh-medical-filter-row--v3 {
  grid-template-columns: repeat(3, minmax(max-content, 1fr)) auto;
  margin: -4px;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

#view-medical #medical-filter-row.mh-medical-filter-row--v3::-webkit-scrollbar {
  display: none;
}

#view-medical #medical-filter-row #medical-filter-reset:not([hidden]) {
  position: sticky;
  right: 0;
  z-index: 1;
  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;
}

/* Short phones (320px wide, iPhone SE): two clinics clear the tab bar with the snapshot line
   ("coverage incomplete · Details") kept on screen (#759/#778 density at 320x568). The picks keep
   their 44px target; a row drops to a compact card (nothing is cut: a long name or place
   wraps); and the 12px bottom margin of the A-Z row, which collapsed through
   the rail, is taken back. The shared list rhythm (geometry-unify.css) is left alone. */
@media (max-width: 360px) {
  html.mh-approved.mh-approved #view-medical #medical-filter-row .mh-medical-filter-pick {
    min-height: 44px !important;
    height: 44px !important;
    padding-block: 3px !important;
  }
  html #view-medical #medical-list .mh-medical-card--v4 {
    min-height: 0;
    gap: 10px;
    padding: 5px 10px 5px 6px;
  }
  html #view-medical #medical-list .mh-medical-card--v4 .mh-medical-card__photo {
    flex: 0 0 80px;
    width: 80px;
    min-width: 80px;
    height: 62px;
  }
  html #view-medical #medical-list .mh-medical-card--v4 .mh-medical-card__name {
    font-size: 0.97rem;
    line-height: 1.16;
  }
  html #view-medical #medical-az-rail:not([hidden]) {
    margin-bottom: 3px !important;
  }
  html #view-medical #medical-az-rail:not([hidden]) #medical-alpha-row {
    margin-bottom: 0 !important;
  }
}

/* -- 24. Overnight medical pass (2026-10-11): hero geometry, insets, rows ---
   Measured over all 163 providers the Mini App shows, at 320 and 390 CSS px
   (emulated Chromium, not a phone):

   * A clinic's name and its examinations were cut off in the profile hero. The
     overlay copy clamped the title to two lines and the examinations line to
     two, so "Internistische Gemeinschaftspraxis Travemunde" read as
     "Internistische Gemeinschaftspraxis..." and "... Offshore medical" lost its
     last item. #759 already says a clinic name is never clipped; the hero now
     wraps both, at every width.
   * A hero with no picture - no photograph sourced, or one that failed to load -
     put the mark in a 52-104px column pinned to the bottom of a 164-176px box:
     an empty band above it and a narrow column beside it, so "Seemannsambulanz"
     broke as "Seemannsambul / anz". On a phone the mark now sits above the copy,
     exactly as it does over a photograph, and the copy takes the full width;
     wider, it stays beside the copy, centred rather than dropped to the floor.
   * The phone line, the "Available" line and "Last checked" sat two pixels from
     the profile card's border, and every section card drew its border one pixel
     inside the card's own. The rows below the hero now share one inset.
   * An examination row centred nothing: a 44px target with its two lines at the
     top and nineteen empty pixels under them. */

html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero .mh-medical-detail__title,
html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero .mh-medical-detail__hero-exams {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  overflow-wrap: break-word;
  word-break: normal;
}

html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--unresolved.mh-medical-detail__hero {
  min-height: 0;
  place-items: center stretch;
}

html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--unresolved .mh-medical-detail__hero-content.mh-medical-detail__hero-content {
  width: 100%;
  min-height: 0;
  align-items: center;
}

@media (max-width: 430.99px) {
  html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero--unresolved .mh-medical-detail__hero-content.mh-medical-detail__hero-content {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start;
    gap: 10px;
  }
}

html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__canvas > :not(.mh-medical-detail__hero) {
  margin-inline: 10px;
}

html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__canvas > :is(.mh-medical-detail__phone, .mh-medical-detail__availability, .mh-medical-detail__checked, .mh-medical-detail__offline-note) {
  padding-inline: 13px;
}

html body #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__canvas > .mh-medical-detail__actions--primary {
  margin-inline: 3px;
}

html body #view-medical-detail .mh-medical-detail--v4 .mh-dir-course-row__body {
  align-items: center;
}

/* The loading line had no inset and no spinner of its own (the spinner is
   styled for Recruiters only), so "Loading centres..." sat on the border of an
   empty bar. */
html body #view-medical #medical-loading.mh-recruiters-loading:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
}

html body #view-medical #medical-loading .mh-inline-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--mh-text-muted, #8a8f98) 35%, transparent);
  border-top-color: var(--mh-accent, #c9a46a);
  border-radius: 50%;
  animation: mh-medical-spin-1011 0.8s linear infinite;
}

@keyframes mh-medical-spin-1011 {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-medical #medical-loading .mh-inline-spinner {
    animation: none;
  }
}

/* Large text (owner, 2026-10-11): at 200 % text on a phone the one-line snapshot strip ran under
   "Details", and the nowrap "Ready to contact" heading widened the list grid past the screen, so
   the cards were cut on the right. When the text is large for the screen, the strip wraps with
   "Details" on its own line, the heading wraps, and cards grow in height instead of width; every
   word stays visible (no ellipsis, no clipping).
   The threshold is in rem: 19rem is 304 px at the normal size, below a 320 px screen, so the
   normal one-line strip and the #759/#773 density are unchanged; at 200 % it is 608 px. */
#view-medical.mh-stage3-medical {
  container-type: inline-size;
  container-name: mh-medical-view;
}

@container mh-medical-view (max-width: 19rem) {
  html body #view-medical #medical-freshness-banner {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    row-gap: 4px;
  }

  html body #view-medical #medical-freshness-banner .mh-medical-status__line {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.3;
  }

  html body #view-medical #medical-freshness-banner .mh-catalog-status__meta {
    white-space: normal;
  }

  html body #view-medical #medical-freshness-banner .mh-medical-status__details {
    flex: 1 1 100%;
    margin-left: 0;
  }

  /* The toggle's 44 px box normally reaches up into the strip through negative margins (so the
     one-line strip does not grow, #884). On its own line that box would cover the snapshot text,
     so here it takes its own 44 px row instead. */
  html body #view-medical #medical-freshness-banner .mh-medical-status__more,
  html body #view-medical #medical-freshness-banner .mh-medical-status__more.mh-button {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 44px !important;
    white-space: normal !important;
  }

  html body #view-medical .mh-medical-section-head__title {
    flex-wrap: wrap;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
  }

  html body #view-medical #medical-list {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #view-medical #medical-list .ref-rc-company-card {
    min-width: 0;
    max-width: 100%;
  }

  html body #view-medical #medical-list .ref-rc-company-card__content {
    min-width: 0;
  }
}


/* -- 25. Owner's pass, 2026-10-11: filter gear, logo plate, examinations list, smaller actions --
   Measured on a local build at 320/390/430 px and 200 % root text. */

/* The filter row folds behind a 44 px gear on the right of the search field, the way Training
   and Recruiters do it; the gear carries a count while a folded filter is on. The A-Z rail is
   outside the row and stays. */
html body.mj-app #view-medical .mh-medical-search-wrap .mh-medical-filter-btn {
  position: relative;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

html body.mj-app #view-medical .mh-medical-search-wrap.mh-medical-search-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible;
}

html body.mj-app #view-medical .mh-medical-search-wrap #medical-search {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

html body.mj-app #view-medical .mh-medical-filter-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

html body.mj-app #view-medical .mh-medical-filter-btn__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--ap-accent, var(--mh-accent, #c9a45c));
  color: var(--ap-on-accent, #111318);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

html body.mj-app #view-medical .mh-medical-filter-btn__count[hidden] {
  display: none;
}

html[data-theme] body.mj-app #view-medical #medical-filter-row.is-collapsed,
html[data-theme] #view-medical #medical-filter-row.is-collapsed {
  display: none !important;
}

/* The profile mark of a clinic without a photograph sat on a translucent dark plate with a light
   border, the light field painted on the image alone: a mark in a box in a box. The plate itself
   takes the mark's edge colour (white for a transparent canvas) once the mark has loaded. */
html #view-medical-detail .mh-medical-detail--v4 .mh-medical-detail__hero .mh-medical-detail__mark--hero.mh-medical-logo[data-logo-loaded="1"] {
  background: var(--mh-plate-bg, #ffffff) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 2px 8px rgba(8, 10, 14, 0.45) !important;
}

/* Examinations offered: one plate per group, rows parted by hairlines, the price small and muted
   on the right. A bordered card per examination (80 px, 8 px apart) read as a stack of blocks. */
html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-group {
  gap: 4px !important;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-group__title {
  margin: 6px 0 0 !important;
  font-size: 12.5px;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--mh-border-subtle, #ffffff24);
  border-radius: 12px;
  background: color-mix(in srgb, var(--mh-surface-inset, #202632) 72%, transparent);
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list > .mh-medical-service-card.mh-medical-service-card--v3,
html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-group .mh-medical-service-list > .mh-medical-service-card--v3:first-of-type {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list > .mh-medical-service-card--v3 + .mh-medical-service-card--v3 {
  border-top: 1px solid var(--mh-border-subtle, #ffffff24) !important;
}

/* geometry-unify.css rounds every row 12px (1,5,2); inside the plate a row is square, or each
   hairline is drawn as a short arc. */
html:root body.mj-app .app-shell .app-main #view-medical-detail .mh-medical-service-list > .mh-medical-service-card.mh-medical-service-card--v3 {
  border-radius: 0 !important;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list .mh-medical-service-card--v3 summary.mh-dir-course-row__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: center !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list .mh-medical-service-card__title {
  grid-column: 1;
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list .mh-medical-service-card__price {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  max-width: 11rem;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-align: right !important;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list .mh-medical-service-card__price--absent,
html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list .mh-medical-service-card__price--guidance {
  color: var(--mh-text-muted, #9aa4b2) !important;
  font-weight: 600 !important;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list .mh-medical-service-card__published {
  grid-column: 2;
  margin: 0 !important;
  color: var(--mh-text-muted, #9aa4b2);
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list :is(.mh-medical-service-card__price-reason, .mh-medical-service-card__price-note) {
  grid-column: 1 / -1;
  margin: 0 !important;
  font-size: 11.5px;
  line-height: 1.35;
}

html #view-medical-detail .mh-medical-detail--v4 .mh-medical-service-list .mh-medical-service-card__facts {
  margin: 0 !important;
  padding: 0 12px 10px !important;
}

/* Profile actions and the "Contact the clinic" box: pills, 40 px drawn inside a 44 px target
   (2 px transparent border, fill clipped to the padding box), icon beside a 13 px label, wrapping
   at their own width instead of a grid of tall equal tiles. */
html #view-medical-detail .mh-medical-detail__actions.ref-rc-detail__actions.ref-rc-detail__actions,
html #view-medical-detail .mh-medical-detail__price-actions.mh-medical-detail__price-actions,
html #view-medical-detail .mh-medical-detail__map-actions.mh-medical-detail__map-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 4px !important;
  grid-template-columns: none !important;
}

html #view-medical-detail :is(.mh-medical-detail__actions, .mh-medical-detail__price-actions, .mh-medical-detail__map-actions) .mh-medical-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;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !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, var(--mh-border-subtle, #ffffff3d)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  grid-column: auto !important;
}

html #view-medical-detail :is(.mh-medical-detail__actions, .mh-medical-detail__price-actions, .mh-medical-detail__map-actions) .mh-medical-detail__action.mh-button svg {
  width: 16px;
  height: 16px;
}

html #view-medical-detail .mh-medical-detail__prices--unpublished {
  padding: 10px 12px !important;
}

html #view-medical-detail .mh-medical-detail__price-unpublished {
  margin: 0 0 4px !important;
  font-size: 12.5px !important;
}

/* Audit 2 (2026-10-11): opened, "Details" stayed a narrow flex item beside the one-line strip,
   so its paragraph was laid over "Snapshot · Global · 28 countries · coverage incomplete" and
   both were unreadable (every width, normal text). medical-directory.js marks the strip with
   data-details-open while the details are open; the strip then wraps, the snapshot line keeps
   the first row, and the details take a row of their own with the toggle on a 44 px line, so
   its upward reach no longer lies over the snapshot words. Closed, nothing changes: the
   one-line strip and the #759/#773 density stay as they are. */
html body #view-medical #medical-freshness-banner[data-details-open] {
  flex-wrap: wrap;
  row-gap: 4px;
  height: auto;
  max-height: none;
}

html body #view-medical #medical-freshness-banner[data-details-open] .mh-medical-status__line {
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal;
}

html body #view-medical #medical-freshness-banner[data-details-open] .mh-catalog-status__meta {
  white-space: normal;
}

html body #view-medical #medical-freshness-banner[data-details-open] .mh-medical-status__details {
  flex: 1 1 100%;
  min-width: 0;
  margin-left: 0;
}

html body #view-medical #medical-freshness-banner[data-details-open] .mh-medical-status__more,
html body #view-medical #medical-freshness-banner[data-details-open] .mh-medical-status__more.mh-button {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 44px !important;
}

html body #view-medical #medical-freshness-banner[data-details-open] .mh-medical-status__details p {
  margin: 0 0 4px;
  max-width: none;
}