/* Shared sidebar burger toggler (component.BurgerButton). */
.burger-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	/* min-width + no shrink: main.css fixes .left-content at 30px wide, which
	   would otherwise squash the button into a vertical pill. */
	flex: 0 0 auto;
	width: 42px;
	min-width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	cursor: pointer;
	transition: all 0.2s ease;
}
.burger-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.burger-btn .burger-line {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--cd-ink, #1e293b);
	transition: all 0.25s ease;
}
.burger-btn.show .burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger-btn.show .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.show .burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Dark theme: match the other header pills instead of staying a white square. */
html[data-theme="dark"] .burger-btn {
	background: var(--tt-surface, #111a2e);
	border-color: var(--tt-line, #263450);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .burger-btn:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .burger-btn .burger-line {
	background: var(--tt-ink, #e6ebf5);
}

/* Let the header's left slot grow to fit the button instead of clipping at
   the 30px base width from main.css. */
.header .header-content .left-content:has(.burger-btn) {
	width: auto;
}