/* The page beside a panel snapped to a side (Explore since 2026-10-08; the
   Write-up popup joined it the same day). TMB.pageShift
   (scripts/tmb-common.js) sets body.tmb-shift and --tmb-shift-left /
   --tmb-shift-right, the width taken on each side: the page gives the panel
   its column and is covered nowhere. The body's margin moves everything in
   the flow; what is fixed or sized off the screen is moved here, one rule
   each:
   - .header stays the full width of the screen (a panel starts under it).
     It has no `left` of its own, so without one it would start where the
     body now does.
   - the footer bar and the sport bar span the page's room, not the screen.
     The sport bar is "100vw, pulled out to the screen's edges" in front.css:
     the same sum with the panels' widths taken off. The page's content
     column is centred in the room left, so the pull-out is half the two
     widths together, whichever side each panel is on.
   - the slide-out menu and its flyout open beside a panel snapped left, not
     behind it (their own `left` is 0 and 310px: the same with no shift).
   New page chrome that is position: fixed or sized in vw gets a rule here,
   or it sits under the panel. Desktop only: the scripts set none of this
   below the phone breakpoint. Loaded once a page (TMB_PAGE_SHIFT_CSS) by
   includes/explore-dock.php and admin/bet/includes/bet-writeup-modal.php. */
body.tmb-shift { margin-left: var(--tmb-shift-left, 0px); margin-right: var(--tmb-shift-right, 0px); }
body.tmb-shift .header { left: 0; }
body.tmb-shift footer, body.tmb-shift .footer { width: auto; left: var(--tmb-shift-left, 0px); right: var(--tmb-shift-right, 0px); }
body.tmb-shift .tmb-sport-bar {
    width: calc(100vw - var(--tmb-shift-left, 0px) - var(--tmb-shift-right, 0px));
    margin-left: calc(-50vw + 50% + (var(--tmb-shift-left, 0px) + var(--tmb-shift-right, 0px)) / 2);
    margin-right: calc(-50vw + 50% + (var(--tmb-shift-left, 0px) + var(--tmb-shift-right, 0px)) / 2);
}
body.tmb-shift #sidebarMenu { left: var(--tmb-shift-left, 0px); }
body.tmb-shift #sbFlyout { left: calc(310px + var(--tmb-shift-left, 0px)); }
/* A partner's menu DOCKED beside the page (includes/sidebar.php, owner
   'sidebar'): the room on the left is its own, so it sits at the edge and
   its sub-menu right beside it. */
body.tmb-shift #sidebarMenu.sb-docked { left: 0; }
body.tmb-shift #sidebarMenu.sb-docked ~ #sbFlyout { left: 310px; }
#sidebarMenu.sb-no-anim { transition: none !important; }
/* "Always open" on a wide screen: nothing to close it with. */
html.sb-always .sidebarIconToggle { display: none !important; }

/* The Bootstrap grid follows the page's ROOM, not the screen (since
   2026-10-10). Bootstrap's col-lg-* / col-xl-* are media queries on the
   screen: beside a snapped panel a 1680px screen still laid the matchup
   page's stat tables out four across (col-xl-3) in 1000px of room, one over
   the next. TMB.pageShift sets body.tmb-room-lg (room 992 to 1199px) or
   body.tmb-room-md (under 992px), one at most, and a column whose class
   belongs to a tier the room has not reached takes the width of its next
   tier down: col-md-N, else col-sm-N, else col-N, else the full row (the
   order of the lines below; a later line wins, all of one specificity
   within a tier's block). Page content only (.content-wrapper): the panels
   are never re-laid. A page rule written as @media (max-width: 991px / 1199px)
   gets its twin at the foot, or it still reads the screen; a rule in a
   .tmb-cq-root @container already follows the room. */
body.tmb-room-lg .content-wrapper [class*="col-xl-"] { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-3 { flex: 0 0 25%; max-width: 25%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-6 { flex: 0 0 50%; max-width: 50%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-9 { flex: 0 0 75%; max-width: 75%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-12 { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-3 { flex: 0 0 25%; max-width: 25%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-6 { flex: 0 0 50%; max-width: 50%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-9 { flex: 0 0 75%; max-width: 75%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-sm-12 { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-3 { flex: 0 0 25%; max-width: 25%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-6 { flex: 0 0 50%; max-width: 50%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-9 { flex: 0 0 75%; max-width: 75%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-md-12 { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-3 { flex: 0 0 25%; max-width: 25%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-6 { flex: 0 0 50%; max-width: 50%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-9 { flex: 0 0 75%; max-width: 75%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
body.tmb-room-lg .content-wrapper [class*="col-xl-"].col-lg-12 { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]) { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-3 { flex: 0 0 25%; max-width: 25%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-6 { flex: 0 0 50%; max-width: 50%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-9 { flex: 0 0 75%; max-width: 75%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-12 { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-3 { flex: 0 0 25%; max-width: 25%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-6 { flex: 0 0 50%; max-width: 50%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-9 { flex: 0 0 75%; max-width: 75%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-sm-12 { flex: 0 0 100%; max-width: 100%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-3 { flex: 0 0 25%; max-width: 25%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-6 { flex: 0 0 50%; max-width: 50%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-9 { flex: 0 0 75%; max-width: 75%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
body.tmb-room-md .content-wrapper :is([class*="col-lg-"], [class*="col-xl-"]).col-md-12 { flex: 0 0 100%; max-width: 100%; }
/* twins of the page's own (max-width: 991px) rules */
body.tmb-room-md .content-wrapper .table-sm td { padding: 0.25rem; }  /* layout-matchup-sections.css */