/* CashComp V68 — header / logo stability hotfix.
   Visual only + safe UX smoothing for the drawer brand click. */

html,body{overflow-x:clip}

/* Header: one continuous shell, no segment tearing, no hover jitter. */
.topbar{
  contain:layout paint style!important;
  isolation:isolate!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:auto!important;
}
.topbar,.topbar *{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

/* Absolutely no inherited bounce / float / glow inside the header or logo. */
.topbar *,
.top-brand,.top-brand *,
.brand,.brand *{
  animation:none!important;
}
.top-brand,
.top-brand:hover,
.top-brand:focus,
.top-brand:active,
.brand,
.brand:hover,
.brand:focus,
.brand:active{
  transform:none!important;
  filter:none!important;
  text-decoration:none!important;
  outline:none!important;
}
.top-brand::before,.top-brand::after,
.topnav::before,.topnav::after,
.cashcomp-wordmark::before,.cashcomp-wordmark::after{
  content:none!important;
  display:none!important;
}

.cashcomp-wordmark,
.top-wordmark,
.sidebar-wordmark,
.cashcomp-wordmark-img{
  transform:none!important;
  filter:none!important;
  transition:none!important;
  animation:none!important;
}
.top-wordmark{
  width:230px!important;
  max-width:min(230px,22vw)!important;
}
.cashcomp-wordmark-img{
  object-fit:contain!important;
  object-position:left center!important;
}

/* Buttons/links in header must never move the shell. */
.top-link,
.top-link:hover,
.top-link:focus,
.top-link:active,
.top-actions button,
.top-actions button:hover,
.top-actions button:focus,
.top-actions button:active{
  transform:none!important;
}
.top-link{
  font-weight:760!important;
  line-height:1!important;
  white-space:nowrap!important;
  transition:background-color .16s ease,color .16s ease,opacity .16s ease,box-shadow .16s ease!important;
}
.top-link.active,
.top-link:hover,
.top-link:focus,
.top-link:active{
  font-weight:760!important;
}
.top-link::after{
  left:50%!important;
  right:auto!important;
  width:36px!important;
  bottom:8px!important;
  transform:translateX(-50%)!important;
  opacity:0!important;
  transition:opacity .16s ease!important;
}
.top-link:hover::after,
.top-link:focus::after,
.top-link.active::after{opacity:1!important}
.top-link::before,
.top-link:hover::before,
.top-link:focus::before,
.top-link.active::before{display:none!important;content:none!important}

.top-actions{flex-wrap:nowrap!important}
.top-actions .circle,
.top-actions .mobile-menu,
.top-actions .login,
.top-actions .signup,
.top-actions .account-chip{
  transform:none!important;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,filter .16s ease!important;
}

/* Desktop / tablet: override the V66 split bars with a single smooth bar. */
@media(min-width:901px){
  .topbar,
  body.v66-home-route .topbar,
  body.v66-inner-route .topbar{
    position:sticky!important;
    top:12px!important;
    z-index:70!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    width:min(1560px,calc(100vw - 40px))!important;
    max-width:calc(100vw - 40px)!important;
    min-height:72px!important;
    height:auto!important;
    margin:12px auto 0!important;
    padding:11px 18px!important;
    gap:14px!important;
    border:1px solid rgba(76,112,165,.11)!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(247,251,255,.88))!important;
    box-shadow:0 15px 44px rgba(50,78,120,.10),inset 0 1px 0 rgba(255,255,255,.98)!important;
    backdrop-filter:blur(22px) saturate(1.06)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.06)!important;
  }

  .top-brand,
  body.v66-home-route .top-brand,
  body.v66-inner-route .top-brand{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .topnav,
  body.v66-home-route .topnav,
  body.v66-inner-route .topnav{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .top-link,
  body.v66-home-route .top-link,
  body.v66-inner-route .top-link{
    height:44px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px!important;
    font-size:11px!important;
    color:#172131!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .top-link:hover,
  .top-link:focus{
    background:rgba(238,245,255,.72)!important;
    color:#2364dd!important;
  }
  .top-link.active{
    color:#172131!important;
    background:rgba(235,244,255,.52)!important;
  }

  .top-actions,
  body.v66-home-route .top-actions,
  body.v66-inner-route .top-actions{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    margin:0!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  .top-actions .circle,.top-actions .mobile-menu,.top-actions .login,.top-actions .signup,.top-actions .account-chip{
    height:44px!important;
    min-height:44px!important;
  }
}

/* Mobile keeps one single shell too, without squeeze artefacts. */
@media(max-width:900px){
  .topbar{
    overflow:hidden!important;
    border-radius:20px!important;
  }
  .top-brand,
  .top-brand:hover,
  .top-brand:focus,
  .top-brand:active{
    width:100%!important;
    height:auto!important;
    min-height:42px!important;
  }
  .top-wordmark{width:min(172px,100%)!important;max-width:100%!important}
}

@media(max-width:620px){
  .top-wordmark{width:min(148px,100%)!important}
}

/* If the logo is clicked/focused there should be no visual jump. */
.top-brand:focus-visible,
.brand:focus-visible{
  box-shadow:none!important;
}