/* App chrome: a transparent top bar that sits on the page itself, and a floating bottom pill
   (Instagram-style). Pages extend underneath both; only the pill's own box is opaque. */
:root{--nav:88px;--chrome-ink:#16303f}
.topbar{position:fixed;top:0;left:0;right:0;height:var(--header);padding:10px 16px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.35) 70%,rgba(255,255,255,0))!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--chrome-ink)!important;z-index:35;pointer-events:none}
.topbar>*{pointer-events:auto}
body[data-view=news] .topbar{background:linear-gradient(180deg,rgba(236,244,250,.78),rgba(236,244,250,0))!important}
body[data-view=mine] .topbar{background:linear-gradient(180deg,rgba(238,244,249,.9),rgba(238,244,249,0))!important}
body[data-view=plan] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,0))!important}
.topbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.topbar .brand strong{font-size:1.05rem;letter-spacing:-.02em;color:var(--chrome-ink)}
.brand-symbol{width:36px;height:36px;border-radius:11px;background:#fff!important;box-shadow:0 4px 14px #1b304622;display:grid;place-items:center;overflow:hidden}.brand-symbol img{width:30px;height:30px;display:block}
.brand-label{color:#55707f!important;font-size:11px}
main{padding-top:var(--header)}
/* The planning map runs under the top bar; its controls move down to clear it. */
body[data-view=plan] main{padding-top:0}
.planning{height:calc(100dvh - var(--nav) - env(safe-area-inset-bottom))!important}
.planning .map-top{top:calc(var(--header) + 2px)!important}
.planning .map-legend,.planning .journey-flow-status{top:calc(var(--header) + 54px)!important}
.planning .journey-map-layers{top:calc(var(--header) + 100px)!important}
.planning .map-shell>.safety-card{top:calc(var(--header) + 52px)!important}
.planning:has(.journey-flow-status:not([hidden])) .journey-map-layers{top:calc(var(--header) + 150px)!important}
.live-page{min-height:100dvh;margin-top:calc(-1 * var(--header));padding-top:calc(var(--header) + 6px)}
.profile-world.product-world{margin-top:calc(-1 * var(--header))}
body[data-view=mine] #globe{top:0}
.product-world .world-title{top:calc(var(--header) + 6px)!important}
/* Floating bottom pill */
@media(max-width:999px){
 .navigation{position:fixed;left:50%;transform:translateX(-50%);right:auto;bottom:calc(14px + env(safe-area-inset-bottom));width:min(360px,calc(100% - 32px));height:64px;padding:6px!important;border-radius:32px;border:1px solid #ffffff2e!important;background:#0f1b2ae8!important;backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);box-shadow:0 14px 40px #0b182c55,inset 0 1px 0 #ffffff14;gap:4px;z-index:60}
 .navigation button{flex:1;flex-direction:row;justify-content:center;gap:8px;min-height:0;height:52px;padding:0 10px;border-radius:26px;color:#c3d1dc!important;font-size:13px;font-weight:600;background:none!important;transition:background .25s,color .25s,flex-grow .3s}
 .navigation button .ui-icon{width:22px;height:22px}
 .navigation button:not(.active) span{display:none}
 .navigation button.active{background:#ffffff1f!important;color:#fff!important;flex-grow:1.6}
 .planning .journey-summary{bottom:8px}
 .planning:has(.collapsed-sheet) #pocket-mini{bottom:calc(var(--summary-height,104px) + 68px)}
}
@media(min-width:1000px){
 .navigation{top:var(--header);background:transparent!important;border-right:0!important;padding-top:18px}
 .navigation button{color:#55707f!important;background:none!important}.navigation button.active{color:#1684ce!important;background:#1684ce14!important}
 .topbar{padding-left:24px}
}

/* Map top controls: one scrollable row, never wrapping */
.planning .map-top{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;right:56px!important}
.planning .map-top::-webkit-scrollbar{display:none}
.planning .map-top button{white-space:nowrap!important;flex:0 0 auto!important;font-size:12px!important;padding:7px 11px!important;min-height:36px!important;width:auto!important}
.planning .map-top [data-flow="preview-all"]{background:#1684ce!important;color:#fff!important;border-color:#1684ce!important}
.planning .maplibregl-ctrl-top-right{top:calc(var(--header) + 2px)}