/* R41 · wallet presentation only. Navigation and account facts stay with app/account. */
.phone .route-panel:has(>.account-page[data-account-view="wallet"]) {
 --wallet-panel-side:22px;
 --wallet-topbar-height:68px;
 --wallet-topbar-safe-top:env(safe-area-inset-top,0px);
 --wallet-topbar-bg-alpha:0.6;
 padding-top:0;
 scroll-padding-top:calc(var(--wallet-topbar-height) + var(--wallet-topbar-safe-top) + 12px);
}

/* Start at the app's visible top, including tablet-sized centered phone shells. */
.product-body:has(>.phone>#routePanel:not([hidden])>.account-page[data-account-view="wallet"])>.phone {
 height:100dvh;
 max-height:none;
 align-self:start;
}

.phone .route-panel:has(>.account-page[data-account-view="wallet"])>.route-top {
 position:sticky;
 top:0;
 z-index:3;
 display:grid;
 grid-template-columns:minmax(56px,1fr) minmax(0,2fr) minmax(56px,1fr);
 align-items:center;
 gap:8px;
 min-height:calc(var(--wallet-topbar-height) + var(--wallet-topbar-safe-top));
 margin:0 calc(-1 * var(--wallet-panel-side)) 18px;
 padding:calc(12px + var(--wallet-topbar-safe-top)) var(--wallet-panel-side) 12px;
 border:0;
 background:rgb(16 17 18 / var(--wallet-topbar-bg-alpha));
 color:#f4f4f4;
 -webkit-backdrop-filter:blur(var(--ui-glass-blur,13px)) saturate(var(--ui-glass-saturation,1.12));
 backdrop-filter:blur(var(--ui-glass-blur,13px)) saturate(var(--ui-glass-saturation,1.12));
 box-shadow:inset 0 -1px #ffffff12;
 isolation:isolate;
}
.phone .route-panel:has(>.account-page[data-account-view="wallet"])>.route-top::before,
.phone .route-panel:has(>.account-page[data-account-view="wallet"])>.route-top::after {content:none;background:none;}
.phone .route-panel:has(>.account-page[data-account-view="wallet"])>.route-top>:first-child {justify-self:start;text-align:left;}
.phone .route-panel:has(>.account-page[data-account-view="wallet"])>.route-top>:nth-child(2) {
 min-width:0;
 max-width:100%;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 text-align:center;
 font-size:16px;
 font-weight:600;
 line-height:1.6;
}
.phone .route-panel:has(>.account-page[data-account-view="wallet"])>.route-top>:last-child {justify-self:end;}
.phone .route-panel:has(>.account-page[data-account-view="wallet"])>.route-top>button:first-child {
 min-width:56px;
 min-height:44px;
 max-width:100%;
 padding:10px 0;
 color:inherit;
 font-size:14px;
 line-height:1.7;
}

/* A wallet opened inside the account dock stays attached to that panel's top. */
.phone .route-panel.dock-route:has(>.account-page[data-account-view="wallet"]) {
 --wallet-panel-side:20px;
 --wallet-topbar-height:72px;
 --wallet-topbar-safe-top:0px;
}
@media (max-width:350px) {
 .phone .route-panel.dock-route:has(>.account-page[data-account-view="wallet"]) {--wallet-panel-side:16px;}
}
@media (max-height:600px) {
 .phone .route-panel.dock-route:has(>.account-page[data-account-view="wallet"]) {--wallet-topbar-height:64px;}
 .phone .route-panel.dock-route:has(>.account-page[data-account-view="wallet"])>.route-top {padding-top:10px;padding-bottom:10px;}
}