/* IK MOBILE FOLD FINAL R82
   Final isolated narrow-screen guard.
   Scope: common customer header, common bottom nav, horizontal viewport containment only.
*/
@media (max-width:430px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:clip!important;
  }
  body>.site-shell,
  .site-shell,
  #ikHeader,
  .ik-header{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Actual common header owner confirmed by R80: #ikHeader / .ik-header__inner / .ik-header-actions / .ik-menu-button */
  #ikHeader .ik-header__inner,
  .ik-header .ik-header__inner{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:4px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* Logo must shrink with viewport instead of pushing the right menu out. */
  #ikHeader .ik-header__inner>[class*="brand"],
  #ikHeader .ik-header__inner>.brand,
  #ikHeader .ik-header__inner>.ik-brand,
  .ik-header .ik-header__inner>[class*="brand"],
  .ik-header .ik-header__inner>.brand,
  .ik-header .ik-header__inner>.ik-brand{
    min-width:0!important;
    max-width:100%!important;
    width:auto!important;
    font-size:clamp(11px,4vw,18px)!important;
    line-height:1!important;
    letter-spacing:-.06em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  #ikHeader .ik-header-actions,
  .ik-header .ik-header-actions{
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    justify-self:end!important;
    gap:3px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }

  /* Notification/control buttons in action group */
  #ikHeader .ik-header-actions>button:not(.ik-menu-button),
  .ik-header .ik-header-actions>button:not(.ik-menu-button){
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    padding-left:2px!important;
    padding-right:2px!important;
    box-sizing:border-box!important;
  }

  /* Start Investing is normally the action-group anchor. */
  #ikHeader .ik-header-actions>a,
  .ik-header .ik-header-actions>a{
    min-width:0!important;
    width:auto!important;
    max-width:104px!important;
    height:32px!important;
    min-height:32px!important;
    padding:0 7px!important;
    font-size:9.5px!important;
    line-height:32px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
    flex:0 1 auto!important;
  }

  /* The right menu must always remain visible. */
  #ikHeader .ik-menu-button,
  .ik-header .ik-menu-button{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    right:auto!important;
    left:auto!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    padding:4px 1px!important;
    margin:0!important;
    box-sizing:border-box!important;
    z-index:2!important;
  }
  #ikHeader .ik-menu-button i:nth-child(1),
  #ikHeader .ik-menu-button i:nth-child(3),
  .ik-header .ik-menu-button i:nth-child(1),
  .ik-header .ik-menu-button i:nth-child(3){width:23px!important}
  #ikHeader .ik-menu-button i:nth-child(2),
  .ik-header .ik-menu-button i:nth-child(2){width:15px!important}

  /* Menu drawer can never exceed the viewport. */
  .ik-menu-panel{
    width:min(92vw,360px)!important;
    max-width:calc(100vw - 10px)!important;
    box-sizing:border-box!important;
  }

  /* Actual common bottom owner confirmed by R80. */
  .ik-bottom-nav{
    left:0!important;
    right:0!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    justify-content:stretch!important;
    padding-left:3px!important;
    padding-right:3px!important;
    overflow:hidden!important;
  }
  .ik-bottom-nav>a{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    padding-left:1px!important;
    padding-right:1px!important;
    box-sizing:border-box!important;
  }
  .ik-bottom-nav img,
  .ik-bottom-nav .ik-bottom-icon,
  .ik-bottom-nav .ik-bottom-icon img{
    width:21px!important;
    height:21px!important;
    max-width:21px!important;
    object-fit:contain!important;
  }
  .ik-bottom-nav em{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-align:center!important;
    overflow:hidden!important;
  }
  .ik-bottom-nav .ik-active-line{
    left:50%!important;
    transform:translateX(-50%)!important;
  }

  /* Prevent the common page shell itself from creating sideways scroll. */
  body>.site-shell,
  .site-shell>main,
  body>main{
    max-width:100vw!important;
    min-width:0!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:360px){
  #ikHeader .ik-header__inner,
  .ik-header .ik-header__inner{
    column-gap:2px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  #ikHeader .ik-header__inner>[class*="brand"],
  #ikHeader .ik-header__inner>.brand,
  #ikHeader .ik-header__inner>.ik-brand,
  .ik-header .ik-header__inner>[class*="brand"],
  .ik-header .ik-header__inner>.brand,
  .ik-header .ik-header__inner>.ik-brand{
    font-size:clamp(10px,3.65vw,13px)!important;
    letter-spacing:-.065em!important;
  }

  #ikHeader .ik-header-actions,
  .ik-header .ik-header-actions{gap:2px!important}

  #ikHeader .ik-header-actions>button:not(.ik-menu-button),
  .ik-header .ik-header-actions>button:not(.ik-menu-button){
    width:29px!important;
    min-width:29px!important;
    max-width:29px!important;
    height:29px!important;
    flex-basis:29px!important;
  }

  #ikHeader .ik-header-actions>a,
  .ik-header .ik-header-actions>a{
    max-width:92px!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 5px!important;
    font-size:8.2px!important;
    line-height:29px!important;
  }

  #ikHeader .ik-menu-button,
  .ik-header .ik-menu-button{
    width:29px!important;
    min-width:29px!important;
    max-width:29px!important;
    height:29px!important;
    flex-basis:29px!important;
  }
  #ikHeader .ik-menu-button i:nth-child(1),
  #ikHeader .ik-menu-button i:nth-child(3),
  .ik-header .ik-menu-button i:nth-child(1),
  .ik-header .ik-menu-button i:nth-child(3){width:21px!important}
  #ikHeader .ik-menu-button i:nth-child(2),
  .ik-header .ik-menu-button i:nth-child(2){width:14px!important}

  .ik-bottom-nav{padding-left:1px!important;padding-right:1px!important}
  .ik-bottom-nav em{font-size:9px!important}
}