/* NAMESPACED (2026-07-28): every rule is scoped under html.zb-collapsed. Always loaded now; collapsing toggles the class on instead of swapping stylesheet links (standard.css was empty -- the old swap only ever turned this file on and off). One-frame class flip, and the rail can transition. */ html.zb-collapsed #menu-region { display: none; } /* untrap fixed descendants (scan-menu bottom sheet): the trap's clients (#menu-region etc.) are hidden in collapsed mode anyway */ html.zb-collapsed #sidebarMenu { transform: none !important; } /* Search results: desktop pins a 400px popover at left:135 (runs off a phone screen). Collapsed mode: full-width overlay under the picker row. */ html.zb-collapsed #search-results { left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; top: 92px !important; max-height: calc(100vh - 100px); overflow-y: auto; } html.zb-collapsed #sectors { left: 429px !important; top: 60px; } html.zb-collapsed .sidebarMenu-multi-scan { margin-left: 0px !important; margin-top: 5px !important; } html.zb-collapsed #sidebarMenu { margin-left: -140px; margin-top: -4px !important; } html.zb-collapsed #show-chart { /*display: none;*/ } html.zb-collapsed #donate-text { text-overflow: clip; overflow: hidden; padding-left: 14px !important; } html.zb-collapsed #market-events { left: 227px !important; top: 53px !important; } html.zb-collapsed #import { display: none; } html.zb-collapsed #user-count { display: none; } html.zb-collapsed .spinner-container-desktop { margin-left: 50px !important; } html.zb-collapsed #dark-mode-switch { left: 303px !important; position: absolute !important; top: 53px !important; width: 300px !important; z-index: 3000; } html.zb-collapsed #search-results { left: 135px; width: 300px !important; } html.zb-collapsed #search-results-clear { position: absolute !important; left: 420px !important; top: 90px !important; z-index: 2030 !important; } html.zb-collapsed .action-button-guide-mobile { display: block; color: white !important; background-color: rgba(56, 132, 255, 1) !important; z-index: 2030; } html.zb-collapsed .action-button-guide-mobile:hover { background-color: white !important; color: black !important; border-color: black !important; } html.zb-collapsed #user-guide-icon { position: relative; top: 0px; left: 1px; } html.zb-collapsed .action-button-patreon-mobile { display: block; color: white !important; border-color: #ff424d; background-color: #ff424d; z-index: 2030; } html.zb-collapsed .action-button-patreon-mobile:hover { } html.zb-collapsed .action-button-discord-mobile { display: block; color: white; border-color: hsla(227, 58%, 65%, 0.78); background-color: hsla(227, 58%, 65%, 1.0); z-index: 2030; } /* .custom-switch { left: 13px; bottom: -10px; } #switch-text { float: left; color: var(--common); font-weight: 400; font-size: 10px; cursor: pointer; margin-top: -4px; margin-left: -29px; } */ html.zb-collapsed #top-menu { display: none; } html.zb-collapsed #flip-buttons { display: none; } html.zb-collapsed #grid-heading-buttons { margin-left: 136px; } html.zb-collapsed .grid-heading-buttons-multi-scan { margin-left: -1px !important; } html.zb-collapsed #top-menu-mobile { visibility: visible !important; margin-top: 90px !important; margin-left: 1px; } html.zb-collapsed #button-add-ticker { display: none; } html.zb-collapsed #button-clear-flags { display: none; } html.zb-collapsed #button-help { display: none; } html.zb-collapsed .modal-footer { min-width: 100px; } html.zb-collapsed .filter-region-content { min-width: 200px; } html.zb-collapsed #filter-price { width: 382px !important; } html.zb-collapsed #filter-region-left-col { /*min-width: 270px;*/ width: 300px !important; } html.zb-collapsed #filter-region-right-col { width: 480px; } html.zb-collapsed #filter-intraday { width: 380px !important; } html.zb-collapsed #filter-fund { width: 380px !important; } html.zb-collapsed #filter-price { width: 380px !important; } html.zb-collapsed #filter-daily { width: 380px !important; } html.zb-collapsed #filter-sector { width: 380px !important; } html.zb-collapsed #filter-trend { width: 380px !important; } html.zb-collapsed #filter-volume { width: 380px !important; } html.zb-collapsed .filter-modal { width: 300px !important; } html.zb-collapsed .modal-content { /*width: 425px !important;*/ /*max-width: 425px !important;*/ /* Capped, not fixed: this sheet also loads on phones (viewport <= 700), where a hard 500px content box inside a 417px dialog clipped ~90px off every modal's right edge. min() keeps the desktop-collapsed sizing exactly as it was and yields to the viewport below it. (2026-07-28) */ min-width: min(500px, calc(100vw - 24px)) !important; } html.zb-collapsed .modal-dialog { width: min(417px, calc(100vw - 24px)) !important; } html.zb-collapsed .modal { /* The fixed container must span the full visible width -- at 95vw even a 100%-wide dialog stopped 5vw short of the right edge. (2026-07-28) */ width: 100%; } html.zb-collapsed #filter-intro { max-width: 500px; } html.zb-collapsed .grid-heading-text-long { } html.zb-collapsed #desktop-promo { display: none; } html.zb-collapsed .grid-heading-text { /*height: 27px !important;*/ } html.zb-collapsed .grid-heading-text-long { } /* #header-text { display: none; }*/ html.zb-collapsed #header-center-text { font-size: 11px; } /* #header-text-mobile { display: block; font-size: 14px !important; padding-top: 6px !important; color: var(--common); float: left; position: absolute; margin-left: 140px; width: 430px; top: 17px; height: 41px; vertical-align: middle; line-height: 17px; }*/ html.zb-collapsed .custom-select { } html.zb-collapsed #sector-minimized { left: 8px !important; margin-top: 21px; height: 32px !important; padding-top: 5px; width: 21px; padding-left: 4px; margin-left: 2px; background-color: var(--page-background); border: 1px solid #ced4da !important; color: var(--common); } html.zb-collapsed .sector-bar-close { } html.zb-collapsed .grid-heading-text-multiscan { margin-left: 0px; padding-bottom: 7px; } html.zb-collapsed #multi-scan-intro { padding-top: 1px; margin-left: 355px; color: var(--common); } html.zb-collapsed .warning-bar-mini-grid { margin-left: 2px !important; width: 729px !important; } html.zb-collapsed .mini-grid-search-container { display: none; } html.zb-collapsed .mini-grid-search { display: none; } html.zb-collapsed .filter-search-container { /*float:none;*/ } html.zb-collapsed #my-account { width: 89vw; margin-top: 12px; } html.zb-collapsed .account-summary { width: 86vw; } /* legacy collapsed rail override removed 2026-07-29: pinned the rail to a 520px box at 144px and cut the shaded background short; the full-width rail rules in app.css now apply in collapsed mode too. */ /* #updated { margin-top: 5px; position: absolute; z-index:1000; }*/ html.zb-collapsed #updated-time { margin-top: -14px !important; } html.zb-collapsed #logo { top: 19px !important; } /* Collapsed mode: the ticker's 40px box has no free band (it landed exactly on the picker row); <=600px already hides it -- hide at all collapsed widths. The free-tier delay label likewise overlaps What's New. */ html.zb-collapsed #market-ticker-bar { display: none !important; } html.zb-collapsed #delayed-status { display: none !important; } /* Small-view header compaction (2026-07-29): the tagline goes (the search box sat on top of it at fixed 365/78), the logo clears the 24px rail, and the picker row matches production: direction combo | wide scan combo | compact search, one grid row, with the clear-X overlaid inside the search box. */ html.zb-collapsed #header-text { display: none !important; } html.zb-collapsed #logo { display: none !important; } html.zb-collapsed #top-menu-mobile { display: grid !important; grid-template-columns: fit-content(140px) minmax(0, 1fr) minmax(64px, 90px); align-items: center; gap: 6px; /* Viewport-absolute like the rest of the header museum: flow margins kept collapsing away. 28 clears the 24px rail; the banner-state rule below shifts it like the other header pieces. */ position: absolute; top: 24px; /* .main-bg is pinned to 0 now; lands at rail bottom */ left: 0; /* cap to the header/scan column instead of stretching edge to edge on wide collapsed windows */ right: auto; width: min(100%, 700px); margin: 0 !important; padding: 0 8px 0 2px; /* NO z-index here: a stacking context would flatten the picker panels (z 1050) below the zbPanel backdrop (z 1049) and eat their clicks. */ } html.zb-collapsed #warning-bar ~ #main-content #top-menu-mobile { top: 46px; } /* flow follows: heading tucks under the row (was ~23px adrift) */ html.zb-collapsed #warning-bar ~ #main-content .main-region { margin-top: 77px !important; } /* neutralizes the desktop banner rule's 98 (2 ids outrank the collapsed base) */ /* close the dead zone between the picker row and the green heading: the desktop .main-region offset (109) assumes the full logo header */ html.zb-collapsed .main-region { margin-top: 77px !important; } html.zb-collapsed #menu-mobile-direction { grid-column: 1; grid-row: 1; float: none !important; width: auto !important; margin: 0 !important; min-width: 0; } html.zb-collapsed #menu-mobile-watchlists { grid-column: 2; grid-row: 1; float: none !important; width: auto !important; margin: 0 !important; min-width: 0; } html.zb-collapsed #mobile-ticker-search { grid-column: 3; grid-row: 1; position: static !important; left: auto !important; top: auto !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; padding-right: 22px; /* room for the overlaid clear-X */ } html.zb-collapsed #search-results-clear { /* same cell as the search input, riding its right edge (production look) */ grid-column: 3; grid-row: 1; position: static !important; left: auto !important; top: auto !important; justify-self: end; margin-right: 6px; z-index: 2; } html.zb-collapsed #mobile-direction-button, html.zb-collapsed #mobile-scan-button { padding: 4px 8px; font-size: 13px; } /* Views without a scan combo (multi-scan, alerts, account...): the middle 1fr column is empty and shoved the search to the far cap. Collapse it so the search sits right after the direction combo. */ html.zb-collapsed #top-menu-mobile:not(:has(#mobile-scan-button)) { grid-template-columns: fit-content(160px) 0 minmax(120px, 170px); }