/* TK Sticky Sidebar — the left widget menu follows the reader.
   Default = FOLLOW: .sidebar-main is position:sticky, so it rides along as
   the lesson scrolls; when taller than the screen it scrolls independently
   (overflow-y) and keeps its own offset while the main content moves.
   LOCKED (body.tk-menu-locked) = plain flow: the menu stays at the top of
   the page. Toggled by the line+lock handle injected at the top of the
   sidebar (sticky-sidebar.js), saved globally in localStorage. */

/* v2: the follow is JS transform-driven (sticky-sidebar.js) — CSS sticky
   breaks under theme ancestor overflow on Android Chrome (Xiaomi). */
body.tk-dark .widget-area.secondary .sidebar-main {
	position: relative;
	will-change: transform;
	padding-right: 4px;
}

body.tk-dark.tk-menu-locked .widget-area.secondary .sidebar-main {
	transform: none !important;
}

/* ── Handle: a hairline running into a padlock ─────────────────────── */

.tk-menu-pin {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 4px 2px 10px;
	margin: 0;
	cursor: pointer;
	color: rgba(245, 233, 211, 0.45);
	touch-action: manipulation;
}
.tk-menu-pin:hover { color: rgba(245, 233, 211, 0.85); }
.tk-menu-pin .tk-menu-pin-line {
	flex: 1;
	height: 0;
	border-top: 1px solid currentColor;
}
.tk-menu-pin svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	display: block;
}
/* Locked state = gold closed padlock, so the state is readable at a glance */
body.tk-menu-locked .tk-menu-pin { color: #c9a14a; }