/* 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;
}

/* ------------------------------------------------------------ recruiters */
/* Recruiters geometry pass, 2026-10-11 (list, company profile, contacts).
   Measured over all 98 company profiles at 320 and 390 px, plus the 200% text
   and 200% page-zoom readings (evidence: D:/mh_evidence/recruiters/ui). The
   look is unchanged; these rules only stop content from being cut off, pushed
   off the screen or made too small to tap. Selectors carry the real DOM path
   for the same reason as the rest of this file: the rules they answer sit in
   saved-parity.css and company-profile-premium.css behind !important.

   1. A named recruiter's address and number were cut with an ellipsis on 465
      cards at 320 px ("kerstin.michels@osm-..."). The value takes its own
      line above its Copy button; an address wraps at any character, a
      number stays on one line, so the whole value is readable and selectable.
   2. The role line under a recruiter's name wraps instead of clipping.
   3. Contact rows wrap their buttons under the value when the row is narrow,
      and a phone number never breaks in the middle ("+38(050)39294 / 49").
   4. "All jobs" links in the vacancies block were 16 px tall: 44 px rows now.
      The recruiter search field was 40 px: 44 px.
   5. "open vacancies" on the bright primary pill was the muted grey of the
      dark surface (unreadable); it takes the pill's own ink.
   6. The list's letter sections may shrink to the screen (a flex item's
      min-width: auto pushed every card 85 px off a 188 px viewport). */
html body.mj-app #view-recruiter-detail .ref-rc-person-card__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-person-card__name,
html body.mj-app #view-recruiter-detail .ref-rc-person-card__role {
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-person-card__value {
  flex-wrap: wrap !important;
  row-gap: 4px !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-person-card__value > span {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-person-card__value[data-person-phone] > span {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-person-card__value .ref-rc-person-card__copy {
  min-height: 44px !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-contact-row {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-contact-row__value {
  flex: 1 1 14ch !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-contact-row[data-contact-kind="phone"] .ref-rc-contact-row__value {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-contact-row__actions {
  flex-wrap: wrap !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-detail__jobs-all {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-directory__search-input {
  min-height: 44px !important;
}

html body.mj-app #view-recruiter-detail .ref-rc-detail__vacancies[data-view-vacancies] .ref-rc-detail__vacancies-badge::after,
html body.mj-app #view-recruiter-detail .ref-rc-detail__vacancies[data-view-vacancies]::after {
  color: inherit !important;
  opacity: 0.82;
}

html body.mj-app #view-recruiter-detail .ref-rc-detail__vacancies--pending > .ref-rc-detail__vacancies-pending {
  display: inline !important;
}

html body.mj-app #view-recruiters .ref-rc-list,
html body.mj-app #view-recruiters .ref-rc-list > .ref-rc-section,
html body.mj-app #view-recruiters .ref-rc-section__cards,
html body.mj-app #view-recruiters .ref-rc-company-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.mj-app #view-recruiters .ref-rc-company-card__name,
html body.mj-app #view-recruiter-detail .ref-rc-detail__name {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

html body.mj-app #view-recruiters .ref-rc-company-card__content {
  min-width: 0 !important;
}

html body.mj-app #view-recruiters .ref-rc-company-card__meta {
  overflow-wrap: anywhere !important;
}

/* The company profile could not be loaded: a card with the reason and, unless
   the company is gone (404), a way to try again. It used to be a bare line of
   text under the Back button. */
html body.mj-app #view-recruiter-detail .ref-rc-detail-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--mh-border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: var(--mh-geo-surface, 17px);
  background: var(--mh-surface, transparent);
}

html body.mj-app #view-recruiter-detail .ref-rc-detail-state__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mh-text, inherit);
}

html body.mj-app #view-recruiter-detail .ref-rc-detail-state__hint {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--mh-text-muted, inherit);
}

html body.mj-app #view-recruiter-detail .ref-rc-detail-state__retry {
  min-height: 44px;
  padding: 0 18px;
}

/* On a tablet or desktop frame the hero was 120 px tall across 720 px: a 6:1
   strip that cut the top and bottom off every banner. 300 px (about 2.4:1 on
   the 720 px frame) keeps the banner's own lettering on screen. Phones keep the #656 reserved height. */
@media (min-width: 720px) {
  html body.mj-app #view-recruiter-detail .ref-rc-detail[data-company-layout="premium-v1"] .ref-rc-detail__hero,
  html body.mj-app #view-recruiter-detail .ref-rc-detail[data-company-layout="premium-v1"] .recruiter-hero,
  html body.mj-app #view-recruiter-detail .ref-rc-detail[data-company-layout="premium-v1"] .recruiter-hero img.hero-bg {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  html body.mj-app #view-recruiter-detail .ref-rc-detail[data-company-layout="premium-v1"] .recruiter-hero img.hero-bg:not([data-hero-fit="contain"]) {
    object-position: center 35% !important;
  }
}

/* --------------------------------------------------------------- app bar */
/* App-bar brand at large text (200% reading, 2026-10-11). The brand block had
   no min-width, so "Wakehelm" kept its full width and ran under the TEST badge
   and the bell on a 320 px screen. It now shrinks inside the bar's centre slot
   and ends in an ellipsis; the actions keep their 44 px targets. Applies to
   every section (the bar is shared). */
html body.mj-app .mh-appbar .mh-appbar__center,
html body.mj-app .mh-appbar .mh-brand,
html body.mj-app .mh-appbar .mh-brand > div:not(.mh-logo) {
  min-width: 0;
}

html body.mj-app .mh-appbar .mh-brand > .mh-logo {
  flex: 0 0 auto;
}

html body.mj-app .mh-appbar .mh-title,
html body.mj-app .mh-appbar .mh-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* Recruiter detail contacts (owner, 2026-10-11).
   1. Company phone rows: the number with its owner above it (company · country from the
      dialling code) on the left, Call and Copy number pushed to the right edge. When the row
      is too narrow the buttons drop to their own line and stay on the right.
   2. Recruiter contact cards sit on a plate like the phone rows; Copy is on the right of the
      address, not under it.
   3. The people search is one field: the input no longer paints its own box inside the pill.
   4. The filter sheet is compact: 14 px selects, 40 px rows.
   Buttons draw 34 px at normal text (2.125rem, so they grow with large text); a transparent
   ::after keeps the 44 px tap area. */
html[data-theme] body #view-recruiter-detail .ref-rc-contact-row--phone {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 6px !important;
  padding: 8px 8px 8px 12px !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-contact-row--phone .ref-rc-contact-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

html[data-theme] body #view-recruiter-detail .ref-rc-contact-row__owner {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mh-text-secondary, var(--mh-muted, #8a909a));
  overflow-wrap: anywhere;
}

html[data-theme] body #view-recruiter-detail .ref-rc-contact-row--phone .ref-rc-contact-row__value {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-contact-row__actions {
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

html[data-theme] body #view-recruiter-detail :is(.ref-rc-contact-row__actions .mh-button, .ref-rc-person-card__copy) {
  position: relative;
  min-height: 2.125rem !important;
  height: auto !important;
  padding: 0 12px !important;
  font-size: 0.8125rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html[data-theme] body #view-recruiter-detail :is(.ref-rc-contact-row__actions .mh-button, .ref-rc-person-card__copy)::after {
  content: "";
  position: absolute;
  inset: -5px -2px;
}

html[data-theme] body #view-recruiter-detail#view-recruiter-detail .ref-rc-person-card {
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 10px 12px 12px !important;
  border: 1px solid var(--mh-border, rgba(127, 127, 127, 0.22)) !important;
  border-radius: 14px !important;
  background: var(--mh-surface, #1b212b) !important;
  color: var(--mh-text, inherit) !important;
}

/* Grid with the body's lines as its items: name and role beside the avatar, the mail button
   and chevron on the right, and the address line across the full width so Copy reaches the
   right edge. */
html[data-theme] body #view-recruiter-detail#view-recruiter-detail .ref-rc-person-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-items: center !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card::after {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__body {
  display: contents !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__body > * {
  grid-column: 2;
  min-width: 0;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__body > .ref-rc-person-card__value {
  grid-column: 1 / -1;
  margin-top: 6px !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__value {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__value > span {
  flex: 1 1 10ch !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-person-card__value .ref-rc-person-card__copy {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-directory__search-input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-directory__search:focus-within {
  box-shadow: 0 0 0 2px var(--mh-gold, #c9a227) !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-directory__sheet {
  gap: 8px !important;
  padding: 12px !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-directory__sheet-title {
  margin: 0 !important;
  font-size: 0.875rem !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-directory__field {
  gap: 4px !important;
  font-size: 0.75rem !important;
}

html[data-theme] body #view-recruiter-detail .ref-rc-directory__field select {
  min-height: 2.5rem !important;
  height: auto !important;
  padding: 0 32px 0 12px !important;
  font-size: 0.875rem !important;
}

html[data-theme] body #view-recruiter-detail :is(.ref-rc-directory__sheet-clear, .ref-rc-directory__sheet-apply) {
  min-height: 2.5rem !important;
  height: auto !important;
  font-size: 0.875rem !important;
}


/* Date fields (owner, 2026-10-11): see enhanceDateFields in app.js.
   The real <input type="date"> keeps its box (same border, inset and height as every other field)
   and opens the system calendar; its own text is hidden and the English line is drawn over it.
   Width: WebKit gives the native date box an intrinsic minimum width; appearance:none and
   min-width:0 on the input and on its date-and-time part let it follow the card, so Issued and
   Expires fit without any overflow being hidden. */
.mh-date {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

html body .mh-date > input.mh-date__input {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-align: left;
  padding-right: 40px !important;
}

.mh-date > input.mh-date__input::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
  opacity: 0;
}

.mh-date > input.mh-date__input::-webkit-datetime-edit {
  opacity: 0;
}

/* The whole field opens the picker on desktop browsers too; iOS opens it on tap anyway. */
.mh-date > input.mh-date__input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mh-date__text {
  position: absolute;
  inset: 0 40px 0 0;
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--mh-date-ink, var(--mh-text, #f4f1ea));
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  /* Above the field: some screens lift their inputs (z-index 1) and a translucent field fill
     would otherwise grey the line out. */
  z-index: 2;
}

.mh-date__text.is-empty {
  color: var(--mh-text-secondary, var(--mh-muted, #8a909a));
}

.mh-date__clear {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mh-text-secondary, #8a909a);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.mh-date__clear::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.mh-date__clear[hidden] {
  display: none;
}

.mh-date.is-disabled .mh-date__text {
  opacity: 0.7;
}

/* Two dates side by side only while both fit: under ~22rem of row (narrow phone, large text)
   Issue/Expiry and Start/End stack, so neither runs past the card. */
#view-profile.mh-stage3-profile .mh-profile-field-grid > * {
  min-width: 0;
}

@container mh-app-main (max-width: 30rem) {
  #view-profile.mh-stage3-profile .mh-profile-field-grid:has(.mh-date) {
    grid-template-columns: 1fr;
  }
}

/* "Never expires" / "Current": the box sat 12 px below its words; box and words share a centre. */
#view-cv-builder .mh-cv-check {
  align-items: center !important;
  gap: 10px;
}

#view-cv-builder .mh-cv-check > input {
  margin: 0 !important;
  flex: 0 0 auto;
}