/* Markets pages with the site chrome header (hdr, 12.10.2026): html.markets-chrome, set by portal._render_template
   on the Markets host. Only the header changes; everything below keeps the Markets layout of LIVE.

   The Markets layout offsets its contents for a FIXED top bar: #page_content_wrapper and the calendar pad by
   var(--navbar-height), the phone pages (home, news, calendar, account) by the 3rem of their own mobile top bar.
   The chrome header is therefore fixed here as well (on Aiory it is sticky; at the top of the page both look the
   same), and the offsets take its height (64 px from 1024 px on, 56 px below), so every distance below the header
   stays as it was. */
html.markets-chrome #site-header.site-header{position:fixed;left:0;right:0}

/* The old bar was 81 px high with an offset of 80 px: its 1 px bottom border lay over the first pixel row of the
   contents. The offset keeps that, so the contents keep their distance to the lower edge of the bar to the pixel.
   layout.html measures its bar into an inline --navbar-height; !important keeps this value. */
html.markets-chrome{--navbar-height:calc(var(--site-header-h) - 1px)!important}

/* Below 760 px the home, news, calendar and account (portal_dashboard.html) pages hid the old bar and placed their
   contents below their own 3rem mobile top bar (mobile-nav.css: --shared-mobile-topbar-height, #page_content_wrapper
   without padding). That bar is gone: the contents move down by the difference to the taller chrome header and keep
   their own offsets. */
@media (max-width:759px){
html.markets-chrome:is(.page--home,.page--news,.board-page,.portal-dashboard-page){--navbar-height:3rem!important}
html.markets-chrome:is(.page--home,.page--news,.board-page,.portal-dashboard-page) #page_content_wrapper{padding-top:calc(var(--site-header-h) - 3rem)!important}
}

/* 760-900 px (txl, 12.10.2026): the calendar pads by the 3rem of the old mobile bar there (board.css) while LIVE
   showed its 81 px bar above it; the contents keep LIVE's distance to the lower edge of the bar (the 56 px header
   instead of 81 px: 25 px less). 81px is a fixed LIVE measurement, not a value of the new header: the old Markets bar
   (nav.main-navbar, bottom edge 81 px on markets.aionity.app/calendar at 768-900 px; h1 4.19 px below it, measured
   12.10.2026 with Playwright, website-refactor/txl/after/hdr-probe-after.json). The header itself enters only through
   var(--site-header-h), so a change of its height moves the contents with it and keeps that distance. */
@media (min-width:760px) and (max-width:900px){
html.markets-chrome.calendar-page #calendar_main_page{padding-top:calc(var(--shared-mobile-topbar-height,3rem) + env(safe-area-inset-top,0px) + .85rem - 81px + var(--site-header-h))!important}
}

/* The server removes the old mobile top bars; this guards a template that renders one in another form */
html.markets-chrome .shared-mobile-topbar{display:none!important}