/* 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; }

/* ── One header band with the playlist below it ─────────────────────────
   When the widget under the pin is a TK Media Playlist, the two used to
   stack: [line……lock] then a lonely "..." below-right. Reversed, the lock
   takes the LEFT end of the line, and the playlist's menu button is pulled
   up into the same band at the right — one clean row: lock, line, menu.
   Guarded by :has(), so a playlist WITH a heading (which needs its own row)
   and older browsers simply keep the stacked layout. */
.sidebar-main .tk-menu-pin { flex-direction: row-reverse; }
/* Room for BOTH head pills since the view toggle joined the "...": the band
   now reads lock, line, [เดี่ยว/ตาราง] [...]. */
.sidebar-main .tk-menu-pin:has(+ .widget_block .tk-mpl) { padding-right: 148px; }
.sidebar-main .tk-menu-pin + .widget_block { margin-top: 0; }
.sidebar-main .tk-menu-pin + .widget_block .tk-mpl:not(:has(.tk-mpl-title)) {
	margin-top: -44px; /* the pin row's own height: 18px icon + 4/10 pad + 12 */
}
.sidebar-main .tk-menu-pin + .widget_block .tk-mpl:not(:has(.tk-mpl-title)) .tk-mpl-head {
	min-height: 34px;
}