/* Nov 1 Savings Phase 2 iPad/iPhone QA — strictly scoped overlays, layout and shared header fixes. */

/* One system for Finance child-page headers on iPhone: center title against viewport,
   align left back and right add buttons on the same row without moving account content. */
@media(max-width:600px){
 #app .finance-full-shell:has(.finance-full-top.u4sg-header) > .finance-full-top,
 #app .finance-full-shell:has(.finance-full-top.u4acct-overview-top) > .finance-full-top,
 #app .finance-full-shell:has(.finance-full-top.u4fw-wallet-top) > .finance-full-top{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  min-height:68px!important;padding:9px 0!important;grid-template-columns:none!important;
 }
 #app .finance-full-shell .finance-full-top:is(.u4sg-header,.u4acct-overview-top,.u4fw-wallet-top) > .finance-full-heading{
  position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  width:auto!important;min-width:0!important;text-align:center!important;margin:0!important;pointer-events:none!important;
 }
 #app .finance-full-shell .finance-full-top:is(.u4sg-header,.u4acct-overview-top,.u4fw-wallet-top) > .finance-back{
  margin:0!important;flex:0 0 42px!important;align-self:center!important;
 }
 #app .finance-full-shell .finance-full-top:is(.u4sg-header,.u4acct-overview-top,.u4fw-wallet-top) > button:is(.u4sg-add-button,.u4acct-add-top,.u4fw-wallet-add){
  position:relative!important;inset:auto!important;transform:none!important;margin:0 0 0 auto!important;
  justify-self:auto!important;align-self:center!important;flex:0 0 auto!important;
 }
}
/* Savings: simplify the sorting selector. It is a custom button, not a native select. */
#app .u4sg-page .u4sg-tools.u4sg-sort-fixed{grid-template-columns:minmax(0,1fr) 137px!important;gap:10px!important}
#app .u4sg-page .u4sg-tools .u2-choice-trigger{
 min-width:0!important;width:100%!important;max-width:100%!important;height:50px!important;min-height:50px!important;
 padding:0 12px!important;gap:6px!important;white-space:nowrap!important;border-radius:16px!important;
 font-size:12px!important;
}
#app .u4sg-page .u4sg-tools .u2-choice-trigger .u2-choice-selected-icon{display:none!important}
#app .u4sg-page .u4sg-tools .u2-choice-trigger .u2-choice-selected-label{
 white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;
}
#app .u4sg-page .u4sg-tools .u2-choice-trigger .u2-choice-chevron{font-size:16px!important;margin-left:0!important}
@media(max-width:540px){
 #app .u4sg-page .u4sg-tools.u4sg-sort-fixed{grid-template-columns:minmax(0,1fr) 118px!important;gap:8px!important}
 #app .u4sg-page .u4sg-tools .u2-choice-trigger{font-size:11px!important;padding:0 10px!important}
 #app .u4sg-page .u4sg-list>.u4sg-card{min-height:0!important;padding:14px 15px!important;gap:8px!important;border-radius:20px!important}
 #app .u4sg-page .u4sg-card-top{gap:9px!important}
 #app .u4sg-page .u4sg-card-symbol{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:12px!important}
 #app .u4sg-page .u4sg-card-money{gap:3px!important;margin-top:0!important}
 #app .u4sg-page .u4sg-card-money strong{font-size:20px!important}
 #app .u4sg-page .u4sg-goal-rail{gap:8px!important;margin-top:3px!important}
 #app .u4sg-page .u4sg-card-foot{gap:7px!important}
 #app .u4sg-page .u4sg-list{gap:11px!important}
}
/* Wallet stack: correct aspect ratio for mobile cards without altering iPad stack. */
@media(max-width:520px){
 #app #u2w-root .u2w-landing .u2w-stack-card{
  height:clamp(190px,calc((100vw - 36px) / 1.68),235px)!important;
 }
 #app #u2w-root .u2w-landing .u2w-stack{
  padding-bottom:0!important;box-sizing:content-box!important;
 }
}
/* Finance pair: no clipped Reports title; make salary secondary date/countdown subtle. */
#app main.u4-finance-home .u4fw-utility-pair .u4-finance-reports>button>b{
 overflow:visible!important;text-overflow:clip!important;white-space:normal!important;
 min-width:0!important;line-height:1.24!important;align-self:center!important;
}
#app main.u4-finance-home .u4fw-utility-pair .u4-finance-reports>button{
 grid-template-rows:auto auto!important;align-content:center!important;
}
#app main.u4-finance-home .u4fw-utility-pair .u4-salary-banner>b{
 font-size:10px!important;font-weight:500!important;opacity:.75!important;color:var(--muted,#748094)!important;
 -webkit-text-fill-color:var(--muted,#748094)!important;
}
@media(max-width:480px){
 #app main.u4-finance-home .u4fw-utility-pair .u4-finance-reports>button>b{font-size:11px!important;letter-spacing:-.015em!important}
 #app main.u4-finance-home .u4fw-utility-pair .u4-finance-reports>button>small{font-size:9px!important}
}
/* Plain notifications should also be centered inside their glass pill;
   when Undo is present, preserve the approved left/right label + Undo layout. */
body #action-undo-toast.undo-toast.u4sg-centered-action-toast:not(:has(button)){
 justify-content:center!important;gap:0!important;padding:10px 20px!important;text-align:center!important;
}
body #action-undo-toast.undo-toast.u4sg-centered-action-toast:not(:has(button))>span{
 flex:0 1 auto!important;text-align:center!important;margin:auto!important;
}
@media(max-width:480px){
 /* Reports needs its entire title; secondary copy is already available on opening. */
 #app main.u4-finance-home .u4fw-utility-pair .u4-finance-reports>button>small{display:none!important}
 #app main.u4-finance-home .u4fw-utility-pair .u4-finance-reports>button>b{
  grid-row:1/3!important;align-self:center!important;display:block!important;
 }
}