/**
 * #681 — Global Mini App button system (Saved / Daily Alerts family).
 *
 * Loads last among product styles so one semantic family wins over
 * screen-specific CTA color/radius copies. Layout-only rules elsewhere
 * stay. Do not apply this family to bottom nav, chips, tabs, inputs,
 * badges, directory/job cards, or inline text links.
 *
 * Size is contextual: compact / standard / content / paired / segmented /
 * full-width-primary. No default width:100%, flex:1, or grid stretch.
 */

/* Re-assert Saved geometry so later screen sheets cannot drift. */
.mh-button,
a.mh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-height: var(--mh-btn-h, 44px);
  min-width: var(--mh-tap-min, 44px);
  padding: 8px var(--mh-btn-pad-x, 18px);
  border-radius: var(--mh-btn-radius, 999px);
  border-width: 1.5px;
  border-style: solid;
  font-family: var(--mh-font);
  font-size: var(--mh-type-button);
  font-weight: var(--mh-btn-weight, 750);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  writing-mode: horizontal-tb;
  flex: 0 0 auto;
  justify-self: start;
  align-self: start;
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Size classes: design DNA is shared; sizing is explicit and contextual.
   Default is content-width. Never inherit width:100% / flex:1 / grid stretch. */
.mh-button--size-compact {
  min-height: var(--mh-btn-h-compact, 44px);
  padding: 6px var(--mh-btn-pad-x-compact, 12px);
  font-size: 0.82rem;
}

.mh-button--size-standard,
.mh-button--size-content {
  width: auto;
  flex: 0 0 auto;
}

.mh-button--size-paired {
  width: auto;
  flex: 0 1 auto;
}

.mh-button--size-full,
.mh-button--block {
  width: 100%;
  flex: 0 0 auto;
  justify-self: stretch;
  align-self: stretch;
}

.mh-button:focus-visible,
a.mh-button:focus-visible,
button.mj-btn-primary:focus-visible,
button.mj-btn-secondary:focus-visible {
  outline: 2px solid var(--mh-focus);
  outline-offset: 2px;
}

.mh-button--primary,
.mh-button.mh-button--primary,
#daily-alert-save.mh-button--primary,
#daily-alert-save.mj-btn-secondary.mh-button--primary {
  background: var(--mh-btn-primary-bg, var(--mh-accent));
  color: var(--mh-btn-primary-fg, #fff);
  border-color: var(--mh-btn-primary-border, transparent);
  box-shadow: none;
}

.mh-button--secondary,
.mh-button--outline,
.mh-button.mh-button--secondary,
.mh-button.mh-button--outline {
  background: var(--mh-btn-secondary-bg, transparent);
  color: var(--mh-btn-secondary-fg, var(--mh-text));
  border-color: var(--mh-btn-secondary-border, var(--mh-border-subtle));
  box-shadow: none;
}

.mh-button--text,
.mh-button--ghost,
.mh-button--tertiary {
  background: transparent;
  color: var(--mh-accent);
  border-color: transparent;
  box-shadow: none;
}

.mh-button--danger:not(.mh-button--outline):not(.mh-button--secondary) {
  background: var(--mh-btn-danger-bg, var(--mh-danger));
  color: var(--mh-btn-danger-fg, #fff);
  border-color: var(--mh-btn-danger-bg, var(--mh-danger));
}

.mh-button--danger.mh-button--outline,
.mh-button--danger.mh-button--secondary,
.mh-account-privacy-delete.mh-button--outline {
  background: transparent;
  color: var(--mh-danger);
  border-color: color-mix(in srgb, var(--mh-danger) 45%, transparent);
}

.mh-button--danger.mh-button--primary,
[data-account-delete-confirm-go].mh-button--danger,
#view-account.mh-stage3-account [data-account-delete-confirm-go].mh-button--danger,
#view-account.mh-stage3-account .mh-account-privacy-delete.mh-button--danger:not(.mh-button--outline):not(.mh-button--secondary) {
  background: var(--mh-btn-danger-bg, var(--mh-danger));
  color: var(--mh-btn-danger-fg, #fff);
  border-color: var(--mh-btn-danger-bg, var(--mh-danger));
}

.mh-button--success,
.mh-button.is-success,
.mh-button.is-copied,
.ref-rc-contact-copy.is-copied.mh-button {
  background: var(--mh-btn-success-bg, #d1fadf);
  color: var(--mh-btn-success-fg, #037a48);
  border-color: var(--mh-btn-success-border, transparent);
}

.mh-button--sm,
.mh-button--compact {
  min-height: var(--mh-btn-h-compact, 44px);
  min-width: var(--mh-tap-min, 44px);
  padding: 6px var(--mh-btn-pad-x-compact, 12px);
  font-size: 0.82rem;
}

/* Compact nested Back: 44px tap, content-width, no filled capsule slab. */
.mh-nav-back,
.mh-nav-back.mh-button,
.mj-back-btn.mh-nav-back,
.mj-recruiter-back.mh-nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  max-width: max-content;
  min-width: var(--mh-tap-min, 44px);
  min-height: var(--mh-tap-min, 44px);
  height: auto;
  padding: 6px 10px;
  border-radius: var(--mh-radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle) 55%, transparent);
  background: transparent;
  box-shadow: none;
  color: var(--mh-text);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.mh-button--icon {
  width: var(--mh-btn-h, 44px);
  min-width: var(--mh-tap-min, 44px);
  padding: 0;
}

.mh-button.is-loading,
.mh-button--loading,
.mh-button[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.mh-button.is-loading::after,
.mh-button--loading::after,
.mh-button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--mh-text) 25%, transparent);
  border-top-color: var(--mh-text);
  animation: mh-btn-spin 0.7s linear infinite;
}

.mh-button--disabled,
.mh-button:disabled,
.mh-button[aria-disabled="true"] {
  background: var(--mh-btn-disabled-bg, var(--mh-surface-inset));
  color: var(--mh-btn-disabled-fg, var(--mh-disabled));
  border-color: var(--mh-border-subtle);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  transform: none;
  filter: none;
}

/* —— Semantic aliases (true action buttons only) —— */
button.mj-btn-primary:not(.mh-button--outline):not(.mh-button--secondary):not(.mh-button--text):not(.mh-button--danger):not(.mh-button--ghost),
a.mj-btn-primary:not(.mh-button--outline):not(.mh-button--secondary):not(.mh-button--text) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--mh-btn-h, 44px);
  min-width: var(--mh-tap-min, 44px);
  padding: 8px var(--mh-btn-pad-x, 18px);
  border-radius: var(--mh-btn-radius, 999px);
  border: 1.5px solid transparent;
  background: var(--mh-btn-primary-bg, var(--mh-accent));
  color: var(--mh-btn-primary-fg, #fff);
  font-family: var(--mh-font);
  font-size: var(--mh-type-button);
  font-weight: var(--mh-btn-weight, 750);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  width: auto;
  flex: 0 0 auto;
  max-width: 100%;
  box-shadow: none;
  cursor: pointer;
}

button.mj-btn-secondary:not(.mh-button--primary):not(.mh-button--danger):not(.mh-button--text):not(.mh-button--ghost),
a.mj-btn-secondary:not(.mh-button--primary):not(.mh-button--danger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--mh-btn-h, 44px);
  min-width: var(--mh-tap-min, 44px);
  padding: 8px var(--mh-btn-pad-x, 18px);
  border-radius: var(--mh-btn-radius, 999px);
  border: 1.5px solid var(--mh-btn-secondary-border, var(--mh-border-subtle));
  background: var(--mh-btn-secondary-bg, transparent);
  color: var(--mh-btn-secondary-fg, var(--mh-text));
  font-family: var(--mh-font);
  font-size: var(--mh-type-button);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  width: auto;
  flex: 0 0 auto;
  max-width: 100%;
  box-shadow: none;
  cursor: pointer;
}

/* Keep the in-flow Job Detail row a real ≥44px target above #bottom-nav.
   Never pin/sticky/fixed — #509 document-flow contract. */
#view-job-detail .job-detail-dock.job-detail-actions-flow {
  margin-bottom: 0;
  padding-bottom: 20px;
  scroll-margin-bottom: calc(var(--main-scroll-pad, 24px) + 16px);
}

.job-detail-dock-btn--primary,
.mj-btn-primary.job-detail-dock-btn--primary,
#job-detail-apply-btn.mh-button--primary {
  background: var(--mh-btn-primary-bg, var(--mh-accent));
  color: var(--mh-btn-primary-fg, #fff);
  border-color: transparent;
  border-radius: var(--mh-btn-radius, 999px);
  min-height: var(--mh-btn-h, 44px);
  box-shadow: none;
}

.job-detail-dock-btn.mj-btn-secondary,
#job-detail-track-btn.mh-button {
  background: var(--mh-btn-secondary-bg, transparent);
  color: var(--mh-btn-secondary-fg, var(--mh-text));
  border: 1.5px solid var(--mh-btn-secondary-border, var(--mh-border-subtle));
  border-radius: var(--mh-btn-radius, 999px);
  min-height: var(--mh-btn-h, 44px);
  font-weight: 700;
}

.job-detail-dock-btn--icon,
#job-detail-save-btn.mh-button--icon {
  width: var(--mh-btn-h, 44px);
  min-width: var(--mh-tap-min, 44px);
  min-height: var(--mh-btn-h, 44px);
  padding: 0;
  border-radius: var(--mh-btn-radius, 999px);
  background: var(--mh-btn-secondary-bg, transparent);
  border: none;
  color: var(--mh-text-muted);
}

.job-detail-dock-btn--icon.is-saved,
#job-detail-save-btn.is-saved {
  color: var(--mh-favorite, var(--mh-accent));
  background: var(--mh-favorite-bg);
}

#daily-alert-save,
#daily-alert-save.mj-btn-secondary,
#view-saved .mh-saved-alerts #daily-alert-save,
#view-saved .mh-saved-alerts #daily-alert-save.mj-btn-secondary {
  min-height: var(--mh-btn-h, 44px);
  margin-top: 12px;
  width: 100%;
  border-radius: var(--mh-btn-radius, 999px);
  border: none;
  background: var(--mh-btn-primary-bg, var(--mh-accent));
  color: var(--mh-btn-primary-fg, #fff);
  font-weight: var(--mh-btn-weight, 750);
  font-size: var(--mh-type-button);
  box-shadow: none;
}

#view-saved .mh-saved-alerts .mj-alert-section .mj-btn-secondary:not(.mh-button--primary),
#view-saved .mh-saved-alerts .mh-button--outline {
  min-height: var(--mh-btn-h, 44px);
  margin-top: 8px;
  border-radius: var(--mh-btn-radius, 999px);
  border: 1.5px solid var(--mh-btn-secondary-border, var(--mh-border-subtle));
  background: transparent;
  color: var(--mh-btn-secondary-fg, var(--mh-text));
  font-weight: 700;
  box-shadow: none;
}

#view-saved .mh-saved-alerts .mj-info-card .mj-btn-primary,
#view-saved .mh-saved-alerts .mj-info-card .mh-button--text,
#view-saved .mh-saved-alerts .mj-info-card .mh-button--primary {
  min-height: var(--mh-btn-h, 44px);
  margin-top: 10px;
  border-radius: var(--mh-btn-radius, 999px);
  border: none;
  background: transparent;
  color: var(--mh-accent);
  font-weight: 700;
  box-shadow: none;
  padding: 8px 10px;
  justify-content: flex-start;
}

.btn-demo-cta:not(.job-offer-card__open),
.btn-demo-sheet-primary,
.btn-account-upgrade.mh-button--primary,
#view-account.mh-stage3-account .btn-account-upgrade,
#view-account.mh-stage3-account .btn-account-upgrade.mh-button--primary {
  min-height: var(--mh-btn-h, 44px);
  border-radius: var(--mh-btn-radius, 999px);
  border: none;
  background: var(--mh-btn-primary-bg, var(--mh-accent));
  color: var(--mh-btn-primary-fg, #fff);
  font-weight: var(--mh-btn-weight, 750);
  box-shadow: none;
}

.btn-demo-sheet-close,
.btn-demo-nav {
  min-height: var(--mh-btn-h, 44px);
  border-radius: var(--mh-btn-radius, 999px);
  border: 1.5px solid var(--mh-btn-secondary-border, var(--mh-border-subtle));
  background: transparent;
  color: var(--mh-btn-secondary-fg, var(--mh-text));
  font-weight: 700;
}

.btn-load-more,
#jobs-load-more.mh-button,
#recruiters-load-more,
#training-load-more {
  min-height: var(--mh-btn-h, 44px);
  border-radius: var(--mh-btn-radius, 999px);
  border: 1.5px solid var(--mh-btn-secondary-border, var(--mh-border-subtle));
  background: transparent;
  color: var(--mh-btn-secondary-fg, var(--mh-text));
  font-weight: 700;
}

.btn-copy-contact,
.btn-source-link:not(.btn-source-link--muted),
.news-detail-source-btn,
.mj-application-card__open,
.mj-application-card__remove:not(.mj-application-card__remove--primary),
.mj-application-card__browse {
  min-height: var(--mh-btn-h-compact, 44px);
  min-width: var(--mh-tap-min, 44px);
  padding: 6px var(--mh-btn-pad-x-compact, 12px);
  border-radius: var(--mh-btn-radius, 999px);
  font-weight: 700;
}

.mj-application-card__open,
.mj-application-card__browse,
.btn-source-link:not(.btn-source-link--muted) {
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--mh-accent);
}

.mj-application-card__remove:not(.mj-application-card__remove--primary) {
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--mh-text-muted);
}

.mj-application-card__remove--primary,
#view-applications .mj-application-card__remove--primary {
  min-height: var(--mh-btn-h, 44px);
  padding: 6px 12px;
  border-radius: var(--mh-btn-radius, 999px);
  border: 1.5px solid var(--mh-btn-secondary-border, var(--mh-border-subtle));
  background: transparent;
  color: var(--mh-btn-secondary-fg, var(--mh-text));
  font-weight: 750;
}

#view-applications.mh-stage3-applications .mj-application-card__open,
#view-applications.mh-stage3-applications .mj-application-card__remove,
#view-applications.mh-stage3-applications .mj-application-card__browse {
  min-height: var(--mh-btn-h-compact, 44px);
}

.ref-rc-contact-copy {
  min-height: var(--mh-btn-h-compact, 44px);
  min-width: var(--mh-tap-min, 44px);
}

/* Recruiter/training action tiles stay cards — not Saved CTAs. */
.ref-rc-detail__action,
.ref-rc-detail__action.action-card,
.ref-rc-detail__action.action-btn,
.mh-training-detail__action {
  border-radius: 14px;
}

/* Honest unavailable / coming-soon — do not look live. */
.mh-button[disabled],
.mh-button[aria-disabled="true"],
.btn-source-link--muted,
.mh-gated-panel .mh-button[disabled] {
  background: var(--mh-btn-disabled-bg, var(--mh-surface-inset));
  color: var(--mh-btn-disabled-fg, var(--mh-disabled));
  border-color: var(--mh-border-subtle);
  box-shadow: none;
  cursor: default;
}

/* Keep #491 / #663 in-flow actions above the relative bottom nav. */
.job-detail-actions-flow .mh-button,
.mh-cv-builder-actions .mh-button,
.mh-account-privacy-actions .mh-button,
.mh-qa-actions .mh-button,
.mj-empty-actions .mh-button,
.mj-empty-actions .mj-btn-primary,
#view-jobs .mj-role-panel-actions .mh-button {
  position: static;
}

#view-jobs .mj-role-panel-actions .mh-button--size-paired {
  flex: 0 1 auto;
  width: auto;
}

@media (max-width: 320px) {
  .mh-button-row,
  .job-detail-actions-row,
  .mh-account-privacy-actions,
  .mh-cv-builder-actions,
  .mh-qa-actions,
  .mj-empty-actions,
  .mj-application-card__links {
    min-width: 0;
  }

  .mh-button,
  button.mj-btn-primary,
  button.mj-btn-secondary {
    max-width: 100%;
  }
}