/* Geometry unification — whole-app audit, 2026-09-18.
 *
 * Measured across all 21 views at 390px, the app had grown four corner radii on
 * surfaces that play the same role (12 / 14 / 16 / 17, plus an 18px hub panel),
 * four list rhythms (6 / 8 / 10 / 12px) and a set of disclosure summaries only
 * 18px tall. Side by side the difference reads as sloppiness rather than as a
 * decision: the Medical status panel sat at 17px while the Training one, one tap
 * away and built from the same markup, sat at 14px, and the two detail sheets
 * disagreed the same way.
 *
 * The rule, from here on:
 *   surface  17px  any card, panel, status banner, empty state or detail sheet
 *                  that sits directly on the page background (the approved
 *                  --ap-radius the design system already declares)
 *   flush    16px  media that bleeds to a surface's own edge: top corners only,
 *                  17px outer minus the 1px border, bottom corners square
 *   inner    12px  anything inset inside a surface: thumbnails, course rows,
 *                  accreditation rows, sections inside a detail sheet, selects
 *   pill    999px  untouched, for chips, round controls and the CV step rail
 *   list     10px  the vertical rhythm between cards in every list
 *
 * On specificity. The declarations this file supersedes are themselves
 * !important and sit behind selectors as strong as
 *   html[data-theme="light"] body.mj-app #view-saved #saved-empty          (2,1)
 *   #view-training.mh-stage3-training #training-list button.mh-training-card
 *     .ref-rc-company-card                                                 (2,0)
 *   html[data-theme] #view-medical #medical-filter-reset.mh-button:not(...)(2,3)
 * Rather than edit fifty such rules across seven files — several of them pinned
 * by markup contracts — every selector here spells out the real DOM path,
 * html > body.mj-app > .app-shell > .app-main > the view, and names the second
 * id wherever the rule it answers has one. Nothing artificial is added to the
 * markup. It loads immediately before approved-style.css, which keeps the last
 * slot its own contract reserves for it; the approved layer's own radii are
 * either the same 17px token or sit on controls this file does not touch.
 */

:root {
  --mh-geo-surface: 17px;
  --mh-geo-flush: 16px;
  --mh-geo-inner: 12px;
  --mh-geo-list-gap: 10px;
}

/* ------------------------------------------------- surfaces, class targets */
html:root body.mj-app .app-shell .app-main :is(#view-home, #view-jobs, #view-job-detail, #view-quick-apply, #view-saved, #view-news, #view-news-detail, #view-career, #view-profile, #view-cv-builder, #view-applications, #view-recruiters, #view-recruiter-detail, #view-cover-letter-builder, #view-training, #view-training-detail, #view-medical, #view-medical-detail, #view-vessels, #view-vessel-detail, #view-account) :is(
  .job-offer-card__open,
  .job-card-v2,
  .mh-job-card,
  .mh-saved-card,
  .mh-news-card,
  .mh-news-detail-card,
  .mj-career-card,
  .mh-career-tools,
  .mh-hub-group,
  .ref-rc-company-card,
  .ref-rc-contact-card,
  .ref-rc-vessel-card,
  .mj-empty-card,
  .mh-empty,
  .mj-info-card,
  .mj-detail-card,
  .mj-settings-list,
  .mj-account-profile,
  .mh-profile-card,
  .mh-account-section,
  .mh-cl-card,
  .mh-cl-panel,
  .mh-cv-builder-start,
  .mh-cv-photo-block,
  .mh-cv-builder-form fieldset,
  .mh-training-detail,
  .mh-training-status,
  .mh-medical-detail,
  .mh-medical-status,
  .mh-catalog-status,
  .directory-detail-card
) {
  border-radius: var(--mh-geo-surface) !important;
}

/* ---------------------------------------------------- surfaces, id targets */
/* Empty states, loading panels and the CV start card are pinned by id in the
   earlier layers, so they are only reachable with a second id here. */
html:root body.mj-app .app-shell .app-main :is(#view-jobs, #view-saved, #view-news, #view-applications, #view-medical, #view-cv-builder, #view-account) :is(
  #jobs-empty,
  #jobs-api-fallback,
  #jobs-loading,
  #saved-empty,
  #news-empty,
  #news-loading,
  #news-error,
  #applications-empty,
  #medical-unavailable,
  #cv-builder-start,
  #account-entitlement-card,
  #account-referral-card
) {
  border-radius: var(--mh-geo-surface) !important;
}

/* ------------------------------------------------------------ directories */
/* Training rows are pinned by a two-id selector in saved-parity.css, so they
   need the second id here too. Row padding is deliberately left alone: Training
   insets at 16/14 and Medical at 10/12, and each is held by its own pinned rule
   (#736 for Training, the #773 narrow contract for Medical), so forcing either
   onto the other would mean overruling a decision, not tidying an oversight. */
html:root body.mj-app .app-shell .app-main #view-training #training-list :is(.mh-training-card, .ref-rc-company-card) {
  border-radius: var(--mh-geo-surface) !important;
}

/* The recruiter profile's contact card is held at 14px by a premium-layout rule
   carrying seven classes, so this one names the full class path it really has. */
html:root body.mj-app .app-shell .app-main #view-recruiter-detail .ref-rc-detail .ref-rc-detail__block.section.ref-rc-contact-card {
  border-radius: var(--mh-geo-surface) !important;
}

/* ------------------------------------------------------------------ flush */
/* Media that bleeds to a surface's edge shares its top corners and squares off
   where the text block begins. */
html:root body.mj-app .app-shell .app-main :is(#view-news, #view-news-detail, #view-training-detail, #view-medical-detail) :is(
  .mh-news-card__media,
  .mh-news-detail-card__media,
  .mh-training-detail__hero,
  .mh-medical-detail__hero,
  .mh-medical-detail__hero--v4
) {
  border-radius: var(--mh-geo-flush) var(--mh-geo-flush) 0 0 !important;
}

/* ------------------------------------------------------------------ inner */
html:root body.mj-app .app-shell .app-main :is(#view-jobs, #view-job-detail, #view-saved, #view-news, #view-news-detail, #view-career, #view-profile, #view-applications, #view-cover-letter-builder, #view-recruiters, #view-recruiter-detail, #view-training, #view-training-detail, #view-medical, #view-medical-detail, #view-account) :is(
  .mh-training-card__media,
  .mh-medical-card__photo,
  .mh-training-course,
  .mh-training-detail__acc,
  .mh-training-detail__section,
  .mh-training-detail__intro,
  .mh-medical-detail__section,
  .mh-medical-detail__intro,
  .mh-medical-detail__sources,
  .mh-medical-detail__fee-guidance,
  .mh-medical-service-card,
  .mh-dir-course-row,
  .mh-training-picker-option,
  .mh-medical-picker-option,
  .mh-select,
  .mh-cl-empty,
  .mj-recruiter-search__input
) {
  border-radius: var(--mh-geo-inner) !important;
}

/* ------------------------------------------------------------ list rhythm */
html:root body.mj-app .app-shell .app-main :is(#view-jobs, #view-saved, #view-news, #view-recruiters, #view-training, #view-medical, #view-vessels) :is(
  #jobs-list,
  #saved-list,
  #news-list,
  #recruiters-list,
  #training-list,
  #medical-list,
  #vessels-list
) {
  gap: var(--mh-geo-list-gap) !important;
}

html:root body.mj-app .app-shell .app-main :is(#view-recruiters, #view-recruiter-detail) .ref-rc-section__cards {
  gap: var(--mh-geo-list-gap) !important;
}

/* ---------------------------------------------------------- touch targets */
/* Standalone source links and disclosure summaries measured 16-22px tall. They
   keep their plain look and gain a finger-sized row. The course-row source link
   is deliberately left out: it is inline text inside a dense course row, and
   giving it a 30px box would loosen every row on the detail sheet. */
html:root body.mj-app .app-shell .app-main :is(#view-training, #view-training-detail, #view-medical, #view-medical-detail, #view-recruiters, #view-recruiter-detail) :is(
  .mh-training-status__more,
  .mh-training-detail__acc-link,
  .mh-training-source-link,
  .mh-training-detail__phone-value,
  .mh-medical-status__more,
  .mh-medical-source-link,
  .mh-medical-detail__phone-value,
  .mh-medical-detail__fee-source,
  .mh-dir-source-link
) {
  display: inline-flex !important;
  align-items: center;
  min-height: 30px;
}