/*
 * Mobile regression fixes shared by the redesigned and legacy investor shells.
 * Keep these rules additive: page-specific layout remains in each page sheet.
 */

/* The generic drawer-link rule is more specific than `.btn--primary` and was
   replacing the mint CTA label with dark text on the blue background. */
.mnav-drawer a.btn--primary {
  color: var(--brand-green-mint, #98fb96);
}

/* Mobile-only close control injected by appShell. */
.snav__mobile-close {
  display: none;
}

@media (max-width: 980px) {
  .snav__mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px -4px 4px 0;
    border: 0;
    border-radius: 50%;
    background: var(--bg-hover, #f2f4f7);
    color: var(--fg-heading-2, #181d27);
    cursor: pointer;
  }

  .snav__mobile-close svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 768px) {
  /* The legacy affiliate header is 64px tall. The old 29px content offset
     left the onboarding badge underneath it. */
  body:has(.onboarding-container) .app-content {
    padding-top: 64px !important;
  }

  /* Comfortable mobile targets for controls that were intentionally compact
     on desktop. Inline text links remain untouched. */
  button,
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  [role="button"],
  [role="tab"],
  a.btn,
  .set-nav__link,
  .fchip,
  .iconbtn,
  .gal__action {
    min-height: 44px;
  }

  .calc__editin {
    min-width: 44px;
    min-height: 44px;
    padding-block: 8px;
  }

  .set-secrow {
    flex-wrap: wrap;
  }

  .set-secrow > .set-secrow__main {
    flex: 1 1 210px;
  }

  .set-secrow > .btn,
  .set-secrow > a.btn {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .set-secrow:has(#btn-web3-restore-connected) > .set-secrow__main {
    flex-basis: 100%;
  }

  .set-secrow:has(#btn-web3-restore-connected) > .btn,
  .set-secrow:has(#btn-web3-restore-connected) > a.btn {
    flex: 1 1 calc(50% - 7px);
  }

  a[class*="crumb"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}