@charset "UTF-8";

#sidebarMenu {
	height: 100%;
	position: fixed;
	left: 0;
	width: 310px;
	margin-top: 70px;
	transform: translateX(-310px);
	transition: transform 250ms ease-in-out;
	background: linear-gradient(180deg, var(--tmb-sidebar-top) 0%, var(--tmb-sidebar-bottom) 100%);
	overflow: scroll;
	z-index: 99;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-font-smoothing: subpixel-antialiased !important;
}

#sidebarMenu::-webkit-scrollbar { 
    display: none;
}

.sidebarMenuInner {
	position: relative;
	margin: 0;
	padding: 0 0 100px 0;
	border-top: 1px solid var(--tmb-white-10);
}

.sidebarMenuInner li {
	list-style: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	padding: 20px;
	border-bottom: 1px solid var(--tmb-white-10);
}

.sidebarMenuInner li span.menu-title {
	color: #fff;
	font-size: 21px;
	display: block;
	padding: 0 0 15px 0;
}

.sidebarMenuInner li span {
	display: block;
	font-size: 18px;
	padding: 5px;
	color: var(--tmb-white-50);
}

.sidebarMenuInner li span a {
    color: var(--tmb-white-50);
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease !important;
}

.sidebarMenuInner li span a:hover {
	color: white;
	padding-left: 6px;
}

/* Sport-first nav (TMB_NAV_SPORT_FIRST): highlight the currently-selected sport */
.sidebarMenuInner li span a.sport-active {
	color: #fff;
	padding-left: 6px;
}

/* ------------------------------------------------------------------
   Sport sub-menu (second level of the sport-first nav)

   Desktop: slides out to the RIGHT of the sidebar on hover/focus.
   Mobile:  slides OVER the sidebar when a sport is tapped, with a back button.
   Lives OUTSIDE #sidebarMenu (which is overflow:scroll and would clip it).
   ------------------------------------------------------------------ */

/* The hovered/open sport gets a lighter block that runs flush to the sidebar's
   right edge, so it visually joins the panel that flew out next to it. Hence the
   negative right margin (cancels the li's 20px padding) and the left-only radius.
   Its word sits where a plain link's does (Zach, 2026-11-04: every link the same
   indent from its heading): the plain span's 5px on top of the 8px the block
   reaches out by. */
.sidebarMenuInner li span.sb-sport-row {
	margin-left: -8px;
	margin-right: -20px;
	padding-left: 13px;
	padding-right: 20px;
	border-radius: 4px 0 0 4px;
	transition: background-color 0.2s ease;
}

.sidebarMenuInner li span.sb-sport-row:hover,
.sidebarMenuInner li span.sb-sport-row.sb-open {
	background-color: var(--tmb-sidebar-hover, var(--tmb-white-10));   /* a partner's own on a light menu (Sites page) */
}

.sidebarMenuInner li span.sb-sport-row a {
	display: block;
	position: relative;
	padding-right: 18px;
}

/* The block itself is now the hover cue — the extra text nudge every other
   sidebar link does would just make it look like it's shifting inside the block. */
.sidebarMenuInner li span.sb-sport-row a:hover {
	padding-left: 0;
}

.sidebarMenuInner li span.sb-sport-row a.sport-active:hover {
	padding-left: 6px;
}

.sb-chevron {
	display: inline-block !important;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	padding: 0 !important;
	/* the colour of its row's text, not faded under it (Zach, 2026-11-04:
	   at 0.45 over the text's own 50% white it could not be seen) */
	opacity: 1;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* `.sidebarMenuInner li span` (50% white) matched the arrow's own span, so it
   stayed white on a partner's dark-text menu: it takes its row's text colour,
   or a partner's arrow colour (Sites page, 2026-11-04). */
.sidebarMenuInner li span.sb-chevron {
	color: inherit;
}

.sidebarMenuInner li span.sb-sport-row a:hover .sb-chevron,
.sidebarMenuInner li span.sb-sport-row a[aria-expanded="true"] .sb-chevron {
	opacity: 1;
	transform: translateY(-50%) translateX(3px);
}

/* Admin Only (admins alone): a row that opens its panel like a sport row
   (so it shares .sb-sport-row and the chevron), drawn as a section heading. */
.sidebarMenuInner li span.sb-admin-row {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 8px;   /* a heading: flush with the others, not indented like a link */
}
.sidebarMenuInner li span.sb-admin-row a {
	color: #fff;
	font-size: 21px;
}
/* a heading stays flush with SPORTS and TOOLS when it is the current section
   (an /admin/ page) or hovered: no link nudge (Zach, 2026-11-04) */
.sidebarMenuInner li span.sb-admin-row a.sport-active,
.sidebarMenuInner li span.sb-admin-row a:hover {
	padding-left: 0;
}

/* My Dashboards block at the foot of each sport panel: a hairline separating it
   from that sport's normal pages, then the user's own dashboards indented under
   the "My Dashboards" link.

   padding MUST be zeroed, and the selector MUST out-specify `.sb-sub span`
   below. This is a <span>, so it picks up that rule's `padding: 5px`, and
   background-color paints the padding box — so a 1px rule rendered as an 11px
   translucent slab instead of a hairline. `.sb-sub-divider` alone (0,1,0) LOSES
   to `.sb-sub span` (0,1,1), so it has to be qualified like this to win. */
.sb-sub span.sb-sub-divider {
	display: block;
	height: 1px;
	padding: 0;
	margin: 10px 0 8px;
	background-color: var(--tmb-black-30);   /* dark lines in the flyout (Zach, 2026-11-04) */
}

/* Indentation alone marks these as children — deliberately NO smaller font and
   no dimmer colour, so a dashboard reads as an equal peer of the pages above
   it, just nested. */
.sb-sub .sb-sub-dash a {
	padding-left: 16px;
}

.sb-sub .sb-sub-dash a:hover {
	/* Every other sidebar link nudges 6px on hover; start from the indent so
	   these shift by the same amount rather than jumping back to flush. */
	padding-left: 22px;
}

/* "Dashboards" and "Player Level": headings over Matchup with the member's
   dashboards, and over the player pages, each indented under it at the
   dashboards' 16px (2026-10-17). */
.sb-sub span.sb-sub-group {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--tmb-white-50);
	padding: 14px 5px 4px;
	cursor: default;
}

.sb-sub .sb-sub-child a {
	padding-left: 16px;
}

.sb-sub .sb-sub-child a:hover,
.sb-sub .sb-sub-child a.page-active,
.sb-sub .sb-sub-dash a.page-active {
	padding-left: 22px;
}

#sbFlyout {
	position: fixed;
	top: 70px;
	left: 310px;
	width: 320px; /* 260 until 2026-10-17: the page labels wrapped */
	height: calc(100% - 70px);
	overflow-y: auto;
	/* The menu's own colour (Zach, 2026-11-04): its gradient over the menu's
	   height. Both start under the header, and the menu runs a whole window
	   tall from there (#sidebarMenu: margin-top 70px, height 100%), the flyout
	   70px less, so the gradient runs 70px past the flyout's foot and the two
	   are the same green at every height. A dark line separates them. */
	background: linear-gradient(180deg, var(--tmb-sidebar-top) 0%, var(--tmb-sidebar-bottom) 100%);
	background-size: 100% calc(100% + 70px);
	background-position: 0 0;
	border-left: 1px solid var(--tmb-black-30);
	/* On the right edge alone (Zach, 2026-11-04: all round, it ringed the panel on a light
	   menu): the negative spread keeps it off the left, top and bottom. */
	box-shadow: 12px 0 16px -8px var(--tmb-black-20);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-font-smoothing: subpixel-antialiased !important;
}

#sbFlyout::-webkit-scrollbar {
	display: none;
}

#sbFlyout.open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* The sub-menu can never outlive the drawer that owns it. */
input[type="checkbox"].openSidebarMenu:not(:checked) ~ #sbFlyout {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
}

.sb-sub {
	display: none;
	padding: 20px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
}

.sb-sub.active {
	display: block;
}

.sb-sub span {
	display: block;
	font-size: 18px;
	padding: 5px;
	color: var(--tmb-white-50);
}

.sb-sub span a {
	color: var(--tmb-white-50);
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition: color 0.3s ease, padding-left 0.3s ease;
}

.sb-sub span a:hover {
	color: #fff;
	padding-left: 6px;
}

.sb-sub span a.page-active {
	color: #fff;
	padding-left: 6px;
}

.sb-sub-head {
	padding: 0 0 15px 0;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--tmb-black-30);
}

.sb-sub-title {
	color: #fff !important;
	font-size: 21px;
	display: block;
	padding: 0 !important;
}

/* Back button is a mobile affordance — on desktop the flyout is dismissed by
   moving the mouse away, so showing it there would just be noise. */
/* front.css sets a blanket `button { background-color: #edeced !important }`,
   so every reset here has to shout back at it. */
.sb-back {
	display: none;
	align-items: center;
	width: 100%;
	background: none !important;
	background-color: transparent !important;
	border: 0;
	color: var(--tmb-white-70);
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: left;
	white-space: nowrap;
	padding: 0 0 12px 0;
	margin: 0 !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

.sb-back:hover,
.sb-back:focus {
	background: none !important;
	background-color: transparent !important;
	color: #fff;
	outline: none;
}

.sb-back-icon {
	font-size: 22px;
	line-height: 1;
	margin-right: 6px;
	vertical-align: -3px;
}

.new-label {
	display: inline-block !important;
	background: var(--tmb-bad-8);
	color: #fff !important;
	font-size: 10px !important;
	font-weight: bold;
	padding: 1px 5px !important;
	border-radius: 3px;
	margin-left: 4px;
	margin-right: 4px;
	vertical-align: middle;
	position: relative;
	top: -2px;
	letter-spacing: 0.5px;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
	transform: translateX(0);
}


input[type="checkbox"].openSidebarMenu {
	transition: all 0.3s;
	box-sizing: border-box;
	display: none !important;
}

.sidebarIconToggle {
	transition: all 0.3s;
	box-sizing: border-box;
	cursor: pointer;
	position: fixed;
	z-index: 999999;
	top: 24px;
	left: 25px;
	height: 22px;
	width: 22px;
	display: block !important;
    color: var(--tmb-header-fg, #fff);
}

.spinner {
	transition: all 0.3s;
	box-sizing: border-box;
	position: absolute;
	height: 3px;
	width: 100%;
	background-color: var(--tmb-header-fg, #fff);   /* white, or a partner's header colour (Sites page) */
}

.horizontal {
	transition: all 0.3s;
	box-sizing: border-box;
	position: relative;
	float: left;
	margin-top: 3px;
}

.diagonal.part-1 {
	position: relative;
	transition: all 0.3s;
	box-sizing: border-box;
	float: left;
}

.diagonal.part-2 {
	transition: all 0.3s;
	box-sizing: border-box;
	position: relative;
	float: left;
	margin-top: 3px;
}

input[type="checkbox"]:checked ~ .sidebarIconToggle > .horizontal {
	transition: all 0.3s;
	box-sizing: border-box;
	opacity: 0;
}

input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
	transition: all 0.3s;
	box-sizing: border-box;
	transform: rotate(135deg);
	margin-top: 8px;
}

input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
	transition: all 0.3s;
	box-sizing: border-box;
	transform: rotate(-135deg);
	margin-top: -9px;
}

.sidebarMenuInner li span.sport-beta-badge {
	display: inline-block;
	font-size: 0.55em;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.03em;
	opacity: 0.75;
	margin-left: 5px;
	padding: 1px 4px;
	border: 1px solid currentColor;
	border-radius: 3px;
	vertical-align: middle;
	color: inherit;
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Add any tablet-specific styles here if needed */
}

/* Mobile styles */
@media (max-width: 767px) {
	#sidebarMenu {
		margin-top: 60px;
		width: 100%;
		max-width: 310px;
	}
	
	.sidebarIconToggle {
		top: 19px;
		left: 16px;
		position: fixed;
		z-index: 999;
	}
	
	/* Optional: Add overlay when menu is open */
	input[type="checkbox"]:checked ~ #sidebarMenu {
		box-shadow: 0 0 0 100vmax var(--tmb-black-45);
	}

	/* Sub-menu takes OVER the drawer instead of sitting beside it, sliding in
	   from the left across the sport list.

	   No page scrim here: the open drawer already paints one (see the
	   :checked ~ #sidebarMenu rule above) and the flyout stacks on top of it,
	   so a second 100vmax shadow just darkens the page twice. */
	#sbFlyout {
		top: 60px;
		left: 0;
		width: 100%;
		max-width: 310px;
		height: calc(100% - 60px);
		background-size: 100% calc(100% + 60px);   /* the menu's 60px header here */
		border-left: 0;
		box-shadow: none;
		opacity: 1;
		transform: translateX(-100%);
		transition: transform 250ms ease-in-out, visibility 250ms;
	}

	#sbFlyout.open {
		transform: translateX(0);
	}

	.sb-back {
		display: flex;
	}

	/* The chevron reads as "opens a sub-menu" — on mobile that's the only
	   thing tapping a sport does, so keep it at full strength. */
	.sb-chevron {
		opacity: 0.7;
	}
}
/* Utility links at the foot of the sidebar (Account Settings, Admin, Send Feedback, X) */
.sidebarMenuInner li span a .sb-ico {
	display: inline-block;
	width: 1.1em;
	margin-right: 8px;
	text-align: center;
}
.sidebarMenuInner li span a svg.sb-ico-x {
	height: 0.9em;
	vertical-align: -0.05em;
}