aside#sidebar {
	background-color: var(--dark-bg);
	display: flex;
	flex-direction: column;
	height: 100vh;
	flex: 0 0 243px;
	align-self: flex-start;
	position: sticky;
	top: 0;
}

.sidebar__logo {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sidebar__content {
	margin-top: auto;
}

/* Equity pages (desktop ≥768px): the content fills the space under the logo and
   the controls group (collapse + percentile) is centred in the gap above the
   PDF/support buttons, which stay pinned to the bottom. Below 768px the sidebar
   is hidden / a floating pill, so this is scoped out there. */
@media (min-width: 768px) {
	body.has-equity-universes .sidebar__content {
		margin-top: 0;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	/* JS measures the thead's vertical offset and sets
	   --sidebar-controls-margin-top so the group sits at the column-header
	   height (the sticky sidebar then keeps it there as the page scrolls).
	   When the var is unset (no table, viewport too short, etc.) margin-top:
	   auto re-centres the group between the logo and the bottom buttons. */
	body.has-equity-universes .sidebar_controls_wrapper {
		margin-top: var(--sidebar-controls-margin-top, auto);
		margin-bottom: auto;
	}

	/* Percentile is the last item in the group; its bottom gap (to the PDF
	   buttons) is now handled by the centring / auto-margin, so drop it for
	   a tight group. */
	body.has-equity-universes .sidebar_controls_wrapper .percentile_toggle_wrapper {
		margin-bottom: 0;
	}
}

body.admin-bar aside#sidebar {
	height: calc(100vh - var(--wp-admin--admin-bar--height));
	top: var(--wp-admin--admin-bar--height);
}

.sidebar__logo img {
	display: block;
	/* Logo at 80% — zoom on the image only (no vh height) is safe here. */
	zoom: 0.8;
}

.sidebar__logo-compact {
	display: none;
}

.sidebar__logo-compact img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	zoom: 0.8;
	margin: auto;
}

body.sidebar-collapsed .sidebar__logo > a:not(.sidebar__logo-compact) {
	display: none !important;
}

body.sidebar-collapsed .sidebar__logo-compact {
	display: block;
	background: white;
}

.sidebar__content {
	box-sizing: border-box;
	padding: 18px 19px;
	background-color: var(--dark-bg);
	width: 100%;
}

.trial_countdown {
	font-size: 11px;
	line-height: 18px;
	font-weight: 500;
	gap: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--surface-page);
	padding: 6px;
}

.trial_countdown_number {
	font-size: 26px;
	line-height: 34px;
	color: var(--text-headings);
	font-weight: 600;
}

body.has-equity-universes .trial_countdown {
	display: none;
}

.sidebar__content hr {
	height: 2px;
	width: 100%;
	background: linear-gradient(89deg, #090F75 -19.85%, #0D1581 -7.47%, #141E91 2.42%, #1C2BA8 12.32%, #1F2EAE 14.8%, #2252B2 24.69%, #2AAFBE 49.44%, #2EDAC4 59.34%, #2BC3BF 64.29%, #1D51A6 91.5%, #18249C 103.88%, #080E73 145.94%, #070D71 200.38%);
	border: none;
	margin: 16px 0;
}

.sidebar_divider {
	margin-top: 23px;
}

.sidebar_buttons_wrapper {
	display: none;
	border: 2px solid var(--surface-action);
	border-radius: 13px;
	padding: 16px 15px;
	flex-direction: column;
	gap: 8px;
}

body.has-equity-universes .sidebar_buttons_wrapper {
	display: flex;
}

.sidebar_toggle_wrapper {
	display: none;
	margin-bottom: 0;
	justify-content: flex-end;
}

body.has-equity-universes .sidebar_toggle_wrapper {
	display: flex;
}

/* Percentile view toggle — sits 11px below the collapse button on
   equity-universes pages. Step 1: toggles its own on/off state only;
   the table changes hook in later. */
.percentile_toggle_wrapper {
	display: none;
	align-items: center;
	justify-content: center;
	/* All dimensions scaled to 80% of spec */
	gap: 12.8px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 12.8px;
	padding: 9.6px;
	border: 1.6px solid var(--surface-action);
	border-radius: 12.8px;
	cursor: pointer;
}

body.has-equity-universes .percentile_toggle_wrapper {
	display: flex;
}

.percentile_toggle_label {
	/* 80% of the 16px spec */
	font-size: 12.8px;
	font-weight: 700;
	letter-spacing: 0.8px;
	color: #fff;
	text-align: center;
}

/* Compact (collapsed sidebar) shows this short label above the switch instead
   of the full one; toggled on in the collapsed/<=991px rules below. */
.percentile_toggle_label--compact {
	display: none;
	line-height: 0;
}

.percentile_toggle_label--compact svg {
	display: block;
}

.percentile_switch {
	position: relative;
	flex-shrink: 0;
	box-sizing: border-box;
	/* All dimensions scaled to 80% of spec */
	width: 44px;
	height: 24.8px;
	padding: 0;
	border: none;
	border-radius: 24px;
	/* Off = grey, on = green (see .is-on below). */
	background: var(--gray-300);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.percentile_switch__circle {
	position: absolute;
	top: 50%;
	left: 2.4px;
	transform: translateY(-50%);
	width: 21.6px;
	height: 21.6px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.3s ease;
}

/* Neutralise the global button:hover (white bg) — keep the grey/green track so
   the white circle stays visible. */
.percentile_switch:hover {
	background: var(--gray-300);
	border-color: transparent;
	box-shadow: none;
}

.percentile_switch.is-on,
.percentile_switch.is-on:hover {
	background: var(--primary-500);
}

.percentile_switch.is-on .percentile_switch__circle {
	/* Track width − circle (21.6) − inset (2.4). Width-agnostic so it works for
	   both the fixed 44px switch (expanded) and the full-width switch (compact). */
	left: calc(100% - 21.6px - 2.4px);
}

/* Compact (collapsed sidebar): stack the short label above the switch, and let
   the card break out to the full sidebar width (same negative-margin trick as
   the PDF buttons below) so the full-width switch has room. */
body.sidebar-collapsed .percentile_toggle_wrapper {
	flex-direction: column;
	gap: 8px;
	width: auto;
	margin-left: -10px;
	margin-right: -10px;
	padding: 10px;
	border-width: 2px;
	border-radius: 16px;
}

body.sidebar-collapsed .percentile_switch {
	width: 100%;
}

body.sidebar-collapsed .percentile_toggle_label--full {
	display: none;
}

body.sidebar-collapsed .percentile_toggle_label--compact {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar_toggle_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	padding: 10px;
	border: none;
	border-radius: 6px;
	background: var(--dark-bg);
	color: white;
	cursor: pointer;
	transition: transform 0.3s ease;
}

body.sidebar-collapsed .sidebar_toggle_btn svg {
	transform: rotate(180deg);
}

body.sidebar-collapsed .sidebar__content {
	width: 100%;
	padding: 18px 19px;
}

body.sidebar-collapsed .sidebar_buttons_wrapper {
	margin-left: -10px;
	margin-right: -10px;
	padding: 16px 8px;
}

body.sidebar-collapsed .sidebar_buttons_wrapper .button {
	gap: 0;
}

body.sidebar-collapsed aside#sidebar {
	flex: 0 0 80px;
}

body.sidebar-collapsed .support_btn.button,
body.sidebar-collapsed .sidebar_buttons_wrapper .button {
	font-size: 0;
	/* letter-spacing isn't zeroed by font-size:0, so the hidden label text would
	   still occupy ~0.8px per character and shove the icon off-centre. */
	letter-spacing: 0;
	padding: 10px 11px;
	gap: 0;
	line-height: 1;
	justify-content: center;
}

body.sidebar-collapsed .support_btn.button svg,
body.sidebar-collapsed .sidebar_buttons_wrapper .button svg {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
}

.sidebar__button-icon--collapsed {
	display: none;
}

body.sidebar-collapsed .sidebar__button-icon--expanded {
	display: none;
}

body.sidebar-collapsed .sidebar__button-icon--collapsed {
	display: inline-block;
}

body.sidebar-collapsed .sidebar__button-icon--collapsed svg {
	width: 19px;
	height: 19px;
}

/* Prevent label from taking space when collapsed so the icon stays centered */
body.sidebar-collapsed .sidebar_buttons_wrapper .button .sidebar__button-label {
	width: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.sidebar_buttons_wrapper .button {
	justify-content: center;
}

/* Sidebar buttons scaled to 80% of the global .button sizing (general.css):
   padding 14px 18px, gap 10px, radius 8px, font-size 16px, svg 24px. */
.sidebar_buttons_wrapper .button,
.support_btn.button {
	padding: 11px 14px;
	gap: 8px;
	border-radius: 6px;
	font-size: 13px;
}

.sidebar_buttons_wrapper .button svg,
.support_btn.button svg,
.sidebar_toggle_btn svg {
	width: 19px;
	height: 19px;
}

/* ===========================================================================
   Force the collapsed sidebar from 991px and down, on every page.
   These mirror the body.sidebar-collapsed rules above but apply regardless of
   the body class, so resizing or the JS toggle can't expand the sidebar here.
   ========================================================================= */
@media (max-width: 991px) {
	aside#sidebar {
		flex: 0 0 80px;
	}

	/* Logo swap: hide the full logo, show the compact mark */
	.sidebar__logo > a:not(.sidebar__logo-compact) {
		display: none !important;
	}

	.sidebar__logo-compact {
		display: block;
		background: white;
	}

	/* The toggle is meaningless when collapse is forced — hide it */
	body.has-equity-universes .sidebar_toggle_wrapper {
		display: none;
	}

	/* Percentile toggle: compact layout (label above switch) once collapse is
	   forced, regardless of the JS body class. Mirrors the body.sidebar-collapsed
	   rules above. */
	body.has-equity-universes .percentile_toggle_wrapper {
		flex-direction: column;
		gap: 8px;
		width: auto;
		margin-left: -10px;
		margin-right: -10px;
		padding: 10px;
		border-width: 2px;
		border-radius: 16px;
	}

	body.has-equity-universes .percentile_switch {
		width: 100%;
	}

	body.has-equity-universes .percentile_toggle_label--full {
		display: none;
	}

	body.has-equity-universes .percentile_toggle_label--compact {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sidebar__content {
		width: 100%;
		padding: 18px 19px;
	}

	.sidebar_buttons_wrapper {
		margin-left: -10px;
		margin-right: -10px;
		padding: 16px 8px;
	}

	/* Buttons collapse to icon-only */
	.support_btn.button,
	.sidebar_buttons_wrapper .button {
		font-size: 0;
		letter-spacing: 0;
		padding: 10px 11px;
		gap: 0;
		line-height: 1;
		justify-content: center;
	}

	.support_btn.button svg,
	.sidebar_buttons_wrapper .button svg {
		width: 19px;
		height: 19px;
		flex-shrink: 0;
	}

	.sidebar__button-icon--expanded {
		display: none;
	}

	.sidebar__button-icon--collapsed {
		display: inline-block;
	}

	.sidebar__button-icon--collapsed svg {
		width: 19px;
		height: 19px;
	}

	/* Keep the icon centered by collapsing the label */
	.sidebar_buttons_wrapper .button .sidebar__button-label {
		width: 0;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}

	/* Equity-universes pages: hide the sidebar until a downloadable row is
	   selected (JS toggles body.equity-row-selected). That keeps the table
	   full-width, then reveals the compact sidebar so the PDF buttons are
	   reachable; deselecting hides it again. The body-class selectors outrank
	   the plain <=767px hide rule below, so this governs on equity pages. */
	body.has-equity-universes aside#sidebar {
		display: none;
	}

	body.has-equity-universes.equity-row-selected aside#sidebar {
		display: flex;
	}
}

/* Mobile (<=767px): hide the sidebar entirely until the mobile menu is designed */
@media (max-width: 767px) {
	aside#sidebar {
		display: none;
	}

	/* Equity pages on a small screen: when a downloadable row is selected, we
	   don't want the in-flow sidebar pushing the whole (already narrow) view
	   sideways. Instead, lift the existing sidebar out of the flex flow with
	   position:fixed and reduce it to a small floating pill in the bottom-right
	   that holds just the PDF buttons. Reuses the same markup — nothing is
	   duplicated, and the content keeps its full width (no shift). */
	body.has-equity-universes.equity-row-selected aside#sidebar {
		display: flex;
		position: fixed;
		top: auto;
		left: auto;
		right: 16px;
		bottom: 16px;
		width: auto;
		height: auto;
		flex: none;
		z-index: 80;
		background: transparent;
	}

	/* Show only the PDF buttons; hide the logo links, toggle, divider and
	   support. NOTE: .sidebar__content is nested *inside* .sidebar__logo in the
	   markup, so we must hide the logo's <a> children — not .sidebar__logo
	   itself — or the buttons (inside .sidebar__content) disappear too. */
	body.has-equity-universes.equity-row-selected aside#sidebar .sidebar__logo > a,
	body.has-equity-universes.equity-row-selected aside#sidebar .sidebar_controls_wrapper,
	body.has-equity-universes.equity-row-selected aside#sidebar .sidebar_toggle_wrapper,
	body.has-equity-universes.equity-row-selected aside#sidebar .percentile_toggle_wrapper,
	body.has-equity-universes.equity-row-selected aside#sidebar .sidebar_divider,
	body.has-equity-universes.equity-row-selected aside#sidebar .support_btn_wrapper {
		display: none;
	}

	body.has-equity-universes.equity-row-selected aside#sidebar .sidebar__content {
		width: auto;
		margin: 0;
		padding: 0;
		background: transparent;
	}

	/* The buttons wrapper becomes the visible pill: row layout, solid surface,
	   a little shadow so it floats above the table. */
	body.has-equity-universes.equity-row-selected aside#sidebar .sidebar_buttons_wrapper {
		flex-direction: row;
		margin: 0;
		padding: 8px 10px;
		gap: 8px;
		background-color: var(--dark-bg);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	}
}