/* v1.19.258: the top banners (.sub-banner) take their own space. --ax-bh = their total height, set by js/src/98y-r258-top-banners.js */
html{ --ax-bn-top:0px; }
html.phone{ --ax-bn-top:var(--ph-mb); }
.sub-banner{ z-index:2147483100; box-sizing:border-box; }   /* above the pages bar, which now sits below it */

/* laptop */
html.ax-bn:not(.phone) .app{ margin-top:var(--ax-bh); height:calc(100vh - var(--ax-bh)) !important; }
html.ax-bn:not(.phone) .sidebar, html.ax-bn:not(.phone) .main{ height:calc(100vh - var(--ax-bh)) !important; }
html.ax-bn:not(.phone) #ws-bar{ top:var(--ax-bh); }
html.ax-bn:not(.phone) body.ws-on:not(.ws-split) .app{ margin-top:calc(var(--ax-bh) + 34px); height:calc(100vh - 34px - var(--ax-bh)) !important; }
html.ax-bn:not(.phone) body.ws-on:not(.ws-split) .sidebar, html.ax-bn:not(.phone) body.ws-on:not(.ws-split) .main{ height:calc(100vh - 34px - var(--ax-bh)) !important; }
html.ax-bn:not(.phone) #team-preview-bar{ top:calc(var(--ax-bh) + 8px); }
html.ax-bn:not(.phone) body.ws-on #team-preview-bar{ top:calc(var(--ax-bh) + 42px); }

/* phone: below the mobile bar */
html.phone.ax-bn{ --ph-top:calc(var(--ph-mb) + var(--ph-ws, 0px) + var(--ax-bh)); }
html.phone.ax-bn #ws-bar{ top:calc(var(--ph-mb) + var(--ax-bh)); }
html.phone.ax-bn #team-preview-bar{ top:calc(var(--ph-mb) + var(--ax-bh) + 8px); }
html.phone.ax-bn body.ws-on #team-preview-bar{ top:calc(var(--ph-mb) + var(--ax-bh) + 42px); }

/* windows: their top stays clear of the banners (was a fixed 104px for preview mode only, css/06-features-ui.css) */
html.ax-bn .ax-ov{ padding-top:calc(var(--ax-bn-top) + var(--ax-bh) + 16px) !important; }

/* plan cards: the "most popular" badge sits 11px above the card; leave room so a scrolling parent does not cut it */
.spl-grid{ padding-top:12px; }