/* Route pages replace Home. Only explicitly contextual surfaces overlay it. */
.social-mode .topbar,.social-mode .ambient-backdrop,.social-mode .reel-viewport{display:none!important}
.social-screen{inset:0 0 calc(var(--tab-height) + var(--safe-bottom) + var(--keyboard));padding:calc(var(--safe-top) + 16px) calc(20px + var(--safe-right)) 20px calc(20px + var(--safe-left));background:var(--bg);z-index:18}
.social-screen.is-conversation{padding-top:calc(var(--safe-top) + 16px);background:var(--bg)}
.screen-heading{background:var(--bg)}
.bottom-nav{z-index:45}.bottom-nav button{font-size:10px;gap:3px;padding:3px 1px}.bottom-nav svg{width:24px;height:24px}
#proBtn svg{stroke-width:1.6}
.reel-poster,.reel-video,.media-stage{background:transparent!important}
.reel-page[data-orientation=portrait] .media-stage :is(.reel-video,.reel-poster){object-fit:cover;object-position:center 30%}
.reel-page[data-orientation=landscape] .media-stage :is(.reel-video,.reel-poster){object-fit:contain;object-position:center}
.reel-page[data-orientation] .media-stage{width:100%;transform:none}
.route-page-sheet{inset:0 0 calc(var(--tab-height) + var(--safe-bottom));height:auto;max-height:none;border:0;border-radius:0;background:var(--bg)!important;backdrop-filter:none;padding-top:calc(var(--safe-top) + 12px);animation:none}
.route-page-sheet .sheet-handle{display:none}.route-page-sheet .sheet-content{min-height:0;flex:1;overflow:auto;background:var(--bg)}
.route-page-sheet .sheet-header{background:var(--bg)}.sheet-header h2{flex:1}
.indicator-menu{position:absolute;z-index:30;right:12px;top:170px;width:220px;max-height:50vh;overflow:auto;padding:12px;border:0;border-radius:16px;background:var(--bg);touch-action:pan-y}
.indicator-menu h3{margin:0 0 8px;font-size:14px}.indicator-menu button{display:block;min-height:40px;width:100%;text-align:left;font-size:13px;padding:8px}
.indicator-menu [aria-pressed=true]:after{content:'✓';float:right;color:var(--accent)}.indicator-menu p{font-size:11px;line-height:1.5;color:var(--muted)}
/* Chart options belong to the plot, separate from riding and HUD resizing. */
.chart-surface>.plot-options{position:absolute;z-index:9;top:8px;right:12px;width:28px;min-width:28px;height:28px;min-height:28px;border:0;border-radius:50%;background:rgba(14,14,16,.32);touch-action:manipulation}
.chart-surface>.plot-options>svg{width:20px;height:20px}.chart-surface>.plot-options>.mini-chevron{position:absolute;width:7px;height:7px;right:1px;bottom:2px}
.trade-menu>button>svg{display:inline-block;width:17px;height:17px;vertical-align:middle;margin-right:8px}.trade-menu details{padding:0 10px}.trade-menu summary{min-height:38px;line-height:38px;font-size:13px;cursor:pointer;list-style:none}.chart-menu-ranges{display:flex;gap:4px;padding-bottom:6px}.chart-menu-ranges>button{min-height:36px;flex:1;padding:4px;font-size:12px}.chart-menu-ranges>[aria-pressed=true]{background:#FFFFFF0D;border-radius:9px}