/* TTAJ Wallet Pro — Fix16.2 responsive polish
   Presentation-only layer. Desktop container widths are deliberately preserved. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{overflow-x:clip}
button,input,select,textarea{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold,#ffc84a);outline-offset:2px}
.sheet-card{overscroll-behavior:contain}
.address,.mono{overflow-wrap:anywhere}
svg,img{max-width:100%}

/* IMPORTANT: never override the original desktop max-width of .app/.shell here.
   Fix16 used max-inline-size:100%, which overrode the original centered desktop frames. */
@media(min-width:761px){
  .home-page .app{width:100%;max-width:1120px;margin-inline:auto}
  body:not(.home-page) .shell{margin-inline:auto}
}

/* Homepage: exact card width + four equal action cells on compact screens. */
.home-page .hero{width:100%}
.home-page .actions{align-items:start}
.home-page .action .ico{margin-inline:auto}

@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  input,select,textarea{font-size:16px} /* prevents iOS form zoom */
  .shell{max-width:100%;padding-left:max(11px,env(safe-area-inset-left));padding-right:max(11px,env(safe-area-inset-right))}
  .card{max-width:100%}
  .top-copy,.grow{min-width:0}
  .top-copy h1,.top-copy .sub{overflow-wrap:anywhere}
  .sheet-card{max-width:calc(100vw - max(env(safe-area-inset-left),env(safe-area-inset-right)));max-height:min(88dvh,760px)}

  .home-page .app{width:100%;max-width:100%;margin-inline:auto;padding-left:max(13px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right))}
  .home-page .hero{padding-inline:17px}
  .home-page .balance-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;width:100%}
  .home-page .balance{min-width:0;overflow-wrap:anywhere}
  .home-page .actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;width:100%!important;justify-content:stretch!important}
  .home-page .action{min-width:0!important;width:100%!important;padding:0!important;margin:0!important;justify-self:stretch}
  .home-page .action .ico{width:47px;height:47px}
  .home-page .asset-main{min-width:0}
  .home-page .asset-main>div:last-child{min-width:0}
  .home-page .asset-name,.home-page .network{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .swap-page .shell{padding-left:max(13px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right))}
  .swap-page .box-top>*{min-width:0}
  .swap-page .asset-btn{max-width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .swap-page .swap-settings,.swap-page .slippage{flex-wrap:wrap}
  .swap-page .amount{font-size:clamp(27px,8vw,32px)}
  .swap-page .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}

  .select-identity{grid-template-columns:42px minmax(0,1fr)!important}
  .select-logo{width:42px!important;height:42px!important}
  .review-row{align-items:flex-start}
  .review-row>*{min-width:0}
  .review-row>*:last-child{text-align:end;overflow-wrap:anywhere}
  .asset-row>*,.token>*,.market-row>*,.tx>*{min-width:0}
  .right,.amount{overflow-wrap:anywhere}
  .filters,.page-strip{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .qr-stage{max-width:100%}
}

@media(max-width:420px){
  .home-page .hero{padding:18px 14px}
  .home-page .actions{gap:2px!important}
  .home-page .action .ico{width:46px;height:46px;border-radius:16px}
  .home-page .portfolio-spark{width:100px;flex-basis:100px}
  .home-page .asset-side{gap:6px}
  .home-page .mini-chart{width:54px;flex-basis:54px}
  .summary,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:360px){
  .home-page .app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .home-page .hero{padding:17px 12px}
  .home-page .balance{font-size:32px!important}
  .home-page .portfolio-spark{width:82px!important;flex-basis:82px!important}
  .home-page .actions{gap:0!important}
  .home-page .action .ico{width:44px;height:44px;border-radius:15px}
  .home-page .mini-chart{display:none}
  .home-page .mobile-account{max-width:112px;overflow:hidden}
  .home-page .mobile-account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .summary,.metrics{grid-template-columns:1fr!important}
  .actions3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .quick{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .quick a{font-size:10px;padding-inline:1px!important}
  .tx{grid-template-columns:40px minmax(0,1fr) auto!important;gap:8px!important}
  .tx .ico{width:38px!important;height:38px!important}
  .market-row,.token,.asset-row{gap:8px!important}
}

@media(max-width:320px){
  .home-page .hero{padding-inline:10px}
  .home-page .action .ico{width:42px;height:42px}
  .home-page .portfolio-spark{width:72px!important;flex-basis:72px!important}
  .card{padding-inline:12px!important}
  .sheet-card{padding-inline:12px}
}

@media(max-height:520px) and (orientation:landscape){
  .sheet-card{max-height:94dvh}
  .auth{align-items:start;overflow:auto}
  .auth-card{margin-block:8px}
  .qr-stage{width:min(48vmin,260px)}
}


/* Fix16.2 — compact five-destination wallet strip.
   The old overflow/more control could visually exceed the card on phones. */
.page-strip{min-width:0}
.page-strip>.page-link{min-width:0}
@media(max-width:760px){
  .home-page .layout{width:100%;min-width:0}
  .home-page .layout>.card{width:100%;min-width:0;max-width:100%;overflow:hidden}
  .home-page .asset-search{width:100%;min-width:0}
  .home-page .asset-search>input{min-width:0}
  .page-strip{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px!important;
    width:100%;
    max-width:100%;
    overflow:visible!important;
    padding:8px 0 6px!important;
    margin:0 0 5px!important;
  }
  .page-strip .page-link{
    width:100%;
    min-width:0!important;
    min-height:58px;
    padding:7px 2px!important;
    border-radius:12px;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px!important;
    text-align:center;
    line-height:1.05;
    overflow:hidden;
  }
  .page-strip .page-link i{font-size:18px;line-height:1;font-style:normal}
  .page-strip .page-link span{
    display:block;
    width:100%;
    max-width:100%;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media(max-width:360px){
  .page-strip{gap:2px!important}
  .page-strip .page-link{min-height:55px;padding-inline:1px!important}
  .page-strip .page-link i{font-size:17px}
  .page-strip .page-link span{font-size:9px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}