/* TK Media Playlist — a wall of worship-video artwork with per-item download.
   Sized for a landscape tablet and for fingers, not mice.

   The default card is a PICTURE and nothing else. Song names and file sizes are
   in the markup but hidden, because a teacher choosing worship music before a
   lesson recognises the cover art, and a grid of file names reads like a folder
   listing. Both come back on via data-tk-mpl-names / -sizes on the wrapper. */

.tk-mpl { margin: 18px 0; position: relative; }

.tk-mpl-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	min-height: 32px;
}
.tk-mpl-title { margin: 0; font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; }

/* ------------------------------------------------------------- "..." menu */

/* Everything that is not "tap a video to play it" hides behind one quiet dot
   row. Deliberately understated until touched: a prominent Download-all sitting
   over the artwork is a mis-tap that costs the teacher gigabytes. */
.tk-mpl-menu { margin-left: auto; position: relative; }

.tk-mpl-menubtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 34px;
	height: 30px;
	padding: 0 9px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 180ms, background 180ms;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.tk-mpl-menubtn:hover,
.tk-mpl-menubtn:focus-visible,
.tk-mpl-menubtn[aria-expanded="true"] {
	opacity: 1;
	background: rgba(0, 0, 0, 0.58);
	outline: none;
}
.tk-mpl-menudots { font-size: 17px; line-height: 1; letter-spacing: 1px; }

/* Progress lives on the button itself, so a teacher who closes the menu can
   still see the set downloading. */
.tk-mpl-menubadge { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.9; }
.tk-mpl-menubadge:empty { display: none; }
.tk-mpl-menu.is-busy .tk-mpl-menubtn { opacity: 1; background: rgba(0, 0, 0, 0.62); }
.tk-mpl-menu.is-busy .tk-mpl-menudots { animation: tk-mpl-pulse 1.1s ease-in-out infinite; }

.tk-mpl-menupop {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	min-width: 260px;
	padding: 6px;
	border-radius: 14px;
	background: #22222c;
	color: #fff;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}
.tk-mpl-menupop[hidden] { display: none; }

.tk-mpl-menuitem {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.tk-mpl-menuitem[hidden] { display: none; }
.tk-mpl-menuitem:hover,
.tk-mpl-menuitem:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; }
.tk-mpl-menuicon {
	flex: 0 0 20px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	opacity: 0.85;
}
.tk-mpl-menutext { display: block; min-width: 0; }
.tk-mpl-menutext strong { display: block; font-size: 13px; font-weight: 600; }
.tk-mpl-menutext small { display: block; font-size: 11px; opacity: 0.62; margin-top: 1px; }

@keyframes tk-mpl-pulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }

/* ----------------------------------------------------------------- grid */

.tk-mpl-grid {
	display: grid;
	grid-template-columns: repeat(var(--tk-mpl-cols, 3), minmax(0, 1fr));
	gap: var(--tk-mpl-gap, 14px);
}

.tk-mpl-card { position: relative; }

.tk-mpl-play {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.tk-mpl-art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	border-radius: var(--tk-mpl-radius, 14px);
	background: #1c1c25;
	overflow: hidden;
	transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.tk-mpl-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tk-mpl-play:hover .tk-mpl-art,
.tk-mpl-play:focus-visible .tk-mpl-art { transform: translateY(-3px); }

/* Over artwork the play mark needs its own contrast, not the picture's. */
.tk-mpl-badge {
	position: relative;
	font-size: 26px;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}
.tk-mpl-card:has(.tk-mpl-img) .tk-mpl-badge { opacity: 0.82; }

.tk-mpl-name {
	display: none;
	margin-top: 7px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.tk-mpl[data-tk-mpl-names="1"] .tk-mpl-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------- download pill */

.tk-mpl-get {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.42);
	color: #fff;
	font-size: 11px;
	cursor: pointer;
	/* Rest visibility is the operator's choice (the block's "Download button
	   visibility" slider, default 40%). Touch always brightens to full. */
	opacity: var(--tk-mpl-getop, 0.4);
	transition: opacity 180ms, background 180ms;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.tk-mpl-get:hover,
.tk-mpl-get:focus-visible { opacity: 1; background: rgba(0,0,0,0.66); outline: none; }
.tk-mpl-get.is-busy { opacity: 1; cursor: progress; }
.tk-mpl-get.is-busy .tk-mpl-get-icon { animation: tk-mpl-pulse 1.1s ease-in-out infinite; }

/* Sizes are off by default. The figure stays in the button's title attribute
   either way, so the amber ring below always has an explanation for anyone who
   goes looking for one. */
.tk-mpl-get-size { display: none; }
.tk-mpl[data-tk-mpl-sizes="1"] .tk-mpl-get-size { display: inline; }

/* Already on the device: the size is no longer useful, a tick is. */
.tk-mpl-get.is-saved { background: rgba(26,127,55,0.82); opacity: 0.92; cursor: default; }
.tk-mpl-get.is-saved .tk-mpl-get-icon { font-size: 0; }
.tk-mpl-get.is-saved .tk-mpl-get-icon::before { content: '✓'; font-size: 11px; }
.tk-mpl-get.is-saved .tk-mpl-get-size { display: none; }

/* Very large files earn a warning ring — reading one into memory is heavy on an
   older tablet. */
.tk-mpl-card[data-tkpl-huge="1"] .tk-mpl-get { box-shadow: 0 0 0 1px rgba(255,213,74,0.85); }

/* Without the PWA cache there is nothing to download INTO, so don't offer it. */
.tk-mpl[data-tk-mpl-nocache="1"] .tk-mpl-get,
.tk-mpl[data-tk-mpl-nocache="1"] .tk-mpl-menu { display: none; }

.tk-mpl-empty { opacity: 0.7; font-style: italic; }

/* Narrow CONTAINERS step down from whatever was chosen, never up. Container
   queries, not viewport ones: the same playlist lives on full pages and in a
   ~400px sidebar, and the viewport knows nothing about that. The media-query
   pair below stays as the fallback for engines without @container. */
.tk-mpl { container-type: inline-size; }
@media (max-width: 900px) { .tk-mpl-grid { grid-template-columns: repeat(min(var(--tk-mpl-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .tk-mpl-grid { grid-template-columns: repeat(var(--tk-mpl-cols-narrow, 1), minmax(0, 1fr)); } }
@container (max-width: 640px) { .tk-mpl-grid { grid-template-columns: repeat(min(var(--tk-mpl-cols, 3), 2), minmax(0, 1fr)); } }
@container (max-width: 360px) { .tk-mpl-grid { grid-template-columns: repeat(min(var(--tk-mpl-cols, 3), 1), minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
	.tk-mpl-art, .tk-mpl-get, .tk-mpl-menubtn { transition: none; }
	.tk-mpl-menu.is-busy .tk-mpl-menudots,
	.tk-mpl-get.is-busy .tk-mpl-get-icon { animation: none; }
}

/* ------------------------------------------------------- confirm sheet */

/* Downloading is the only irreversible thing on this page (TkMediaCache has no
   delete), and on a wall of pictures the download pill sits millimetres from
   the picture the teacher meant to tap. So it asks first — in the page, where
   it can name the video and state the size, rather than through
   window.confirm() whose buttons come out in the device's OS language. */
.tk-mpl-ask {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.tk-mpl-ask[hidden] { display: none; }

.tk-mpl-ask-card {
	width: min(420px, 100%);
	padding: 22px 22px 16px;
	border-radius: 18px;
	background: #22222c;
	color: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	text-align: center;
}
.tk-mpl-ask-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.tk-mpl-ask-sub { margin: 0 0 18px; font-size: 13px; line-height: 1.45; opacity: 0.68; }
.tk-mpl-ask-sub:empty { display: none; }

.tk-mpl-ask-btns { display: flex; gap: 10px; }
.tk-mpl-ask-btns button {
	flex: 1 1 0;
	min-height: 46px;          /* a finger, not a mouse */
	padding: 10px 14px;
	border: 0;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.tk-mpl-ask-no  { background: rgba(255,255,255,0.14); color: #fff; }
.tk-mpl-ask-yes { background: #1a7f37; color: #fff; }
.tk-mpl-ask-no:hover  { background: rgba(255,255,255,0.22); }
.tk-mpl-ask-yes:hover { background: #17702f; }
.tk-mpl-ask-btns button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* One big picture: the art carries the whole width, so let the play mark and
   the name grow with it rather than sitting like a thumbnail's. */
.tk-mpl[data-tk-mpl-oneup="1"] .tk-mpl-grid { gap: var(--tk-mpl-gap, 18px); }
.tk-mpl[data-tk-mpl-oneup="1"] .tk-mpl-badge { font-size: 44px; }
.tk-mpl[data-tk-mpl-oneup="1"] .tk-mpl-name { font-size: 16px; }
.tk-mpl[data-tk-mpl-oneup="1"] .tk-mpl-get { top: 12px; right: 12px; padding: 7px 12px; font-size: 13px; }

/* ---------------------------------------------------- download progress */

/* While a set downloads, the menu stops being a list of choices and becomes the
   progress report: which song, how far, how many left. The same information a
   teacher gets when a LESSON downloads, because it is the same worry. */
.tk-mpl-prog { padding: 10px 10px 12px; }
.tk-mpl-prog[hidden] { display: none; }
.tk-mpl-prog-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 13px;
}
.tk-mpl-prog-head strong { font-weight: 600; }
.tk-mpl-prog-head span { font-variant-numeric: tabular-nums; opacity: 0.75; }

.tk-mpl-prog-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	overflow: hidden;
}
.tk-mpl-prog-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: #2ea043;
	transition: width 220ms linear;
}

.tk-mpl-prog-sub {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 7px 0 0;
	font-size: 11px;
	opacity: 0.66;
}
.tk-mpl-prog-sub > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tk-mpl-prog-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tk-mpl-prog-note { margin: 7px 0 0; font-size: 11px; line-height: 1.4; opacity: 0.6; }
.tk-mpl-prog-note[hidden] { display: none; }

/* ------------------------------------------------------- rearrange mode */

/* Press and hold a picture and the wall goes soft — the same signal a tablet
   home screen gives when icons become movable.

   The jiggle lives on the INNER element, never the card: a CSS animation of
   transform outranks an inline transform, and the FLIP slide that moves
   neighbours aside is exactly that — with the jiggle on the card the slide
   never rendered and cards teleported. */
.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-card {
	touch-action: none;               /* the finger is dragging, not scrolling */
}
.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-card .tk-mpl-play { animation: tk-mpl-jiggle 0.32s ease-in-out infinite alternate; }
.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-card:nth-child(2n) .tk-mpl-play { animation-delay: -0.11s; }
.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-card:nth-child(3n) .tk-mpl-play { animation-delay: -0.21s; }
.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-play { cursor: grab; }
.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-get  { opacity: 0; pointer-events: none; }

@keyframes tk-mpl-jiggle {
	from { transform: rotate(-0.7deg); }
	to   { transform: rotate(0.7deg); }
}

/* The gap the dragged picture came out of. */
.tk-mpl-card.is-source { opacity: 0.22; }
.tk-mpl-card.is-source .tk-mpl-play { animation: none; }

/* The picture riding under the finger. */
.tk-mpl-ghost {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483001;
	margin: 0;
	pointer-events: none;
	animation: none;
	will-change: transform;
	transform-origin: center;
	filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55));
}
.tk-mpl-ghost .tk-mpl-art { transform: scale(1.05); }
.tk-mpl-ghost .tk-mpl-get { display: none; }

/* Fixed to the bottom of the screen, NOT inserted above the grid.
   An in-flow bar appearing as arrange mode opens pushes the whole wall down by
   its own height — so the picture the teacher is still holding slides out from
   under their finger at the exact moment they start to drag it. Floating it
   costs nothing and keeps "Done" reachable however far they have scrolled. */
.tk-mpl-donebar {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 2147483002;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100vw - 32px);
	padding: 10px 12px 10px 18px;
	border-radius: 999px;
	background: #22222c;
	color: #fff;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}
.tk-mpl-donebar[hidden] { display: none; }
.tk-mpl-donehint {
	font-size: 13px;
	opacity: 0.8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tk-mpl-done {
	flex: 0 0 auto;
	min-height: 38px;
	padding: 8px 20px;
	border: 0;
	border-radius: 999px;
	background: #1a7f37;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.tk-mpl-done:hover { background: #17702f; }

@media (prefers-reduced-motion: reduce) {
	.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-card .tk-mpl-play { animation: none; }
	.tk-mpl[data-tk-mpl-arrange="1"] .tk-mpl-card { outline: 2px dashed rgba(127,127,127,0.6); outline-offset: 3px; }
	.tk-mpl-prog-fill { transition: none; }
}

/* Picture-size chooser: a row, not a button — buttons cannot nest. */
.tk-mpl-menurow { cursor: default; }
.tk-mpl-menurow:hover { background: none; }
.tk-mpl-sizebtns { display: inline-flex; gap: 6px; margin: 5px 0 2px; }
.tk-mpl-sizebtns button {
	min-width: 36px;
	height: 32px;
	border: 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.tk-mpl-sizebtns button:hover { background: rgba(255, 255, 255, 0.22); }
.tk-mpl-sizebtns button[aria-pressed="true"] { background: #1a7f37; }

/* ------------------------------------------------------- advanced sheet */

/* Below the confirm sheet (z 2147483000) on purpose: deleting asks, and the
   question must land on top of the panel that raised it. */
.tk-mpl-adv {
	position: fixed;
	inset: 0;
	z-index: 2147482990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.tk-mpl-adv[hidden] { display: none; }

.tk-mpl-adv-card {
	display: flex;
	flex-direction: column;
	width: min(460px, 100%);
	max-height: min(84vh, 640px);
	border-radius: 18px;
	background: #22222c;
	color: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.tk-mpl-adv-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.tk-mpl-adv-head strong { font-size: 15px; font-weight: 700; }
.tk-mpl-adv-onthis { font-size: 11px; opacity: 0.55; }
.tk-mpl-adv-x {
	margin-left: auto;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}
.tk-mpl-adv-x:hover { background: rgba(255, 255, 255, 0.2); }

.tk-mpl-adv-body { overflow-y: auto; padding: 6px 16px 16px; }
.tk-mpl-adv-sec { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.tk-mpl-adv-sec:last-child { border-bottom: 0; }
.tk-mpl-adv-sec h4 {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
}

.tk-mpl-adv-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
	font-size: 13px;
	/* The sheet lives in <body> once portaled, so the THEME's label/span
	   colours apply to it — Astra paints labels near-black, invisible on this
	   dark card. Scoped + !important, per the standing lesson about themes
	   reaching into plugin form fields. */
	color: #fff !important;
}
.tk-mpl-adv-row span { flex: 1 1 auto; color: #fff !important; }
.tk-mpl-adv-row input[type="range"] { flex: 0 0 46%; accent-color: #2ea043; }

.tk-mpl-adv-toggle {
	margin-top: 4px;
	padding: 8px 14px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.tk-mpl-adv-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.tk-mpl-adv-toggle[aria-pressed="true"] { background: #1a7f37; }

.tk-mpl-adv-sum { margin: 0 0 8px; font-size: 13px; opacity: 0.8; }

.tk-mpl-adv-list { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.tk-mpl-adv-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 12px;
}
.tk-mpl-adv-item:hover { background: rgba(255, 255, 255, 0.06); }
.tk-mpl-adv-item-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tk-mpl-adv-item-size { flex: 0 0 auto; opacity: 0.55; font-variant-numeric: tabular-nums; }
.tk-mpl-adv-item-del {
	flex: 0 0 auto;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(229, 83, 75, 0.16);
	color: #ff8a80;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}
.tk-mpl-adv-item-del:hover { background: rgba(229, 83, 75, 0.32); color: #fff; }

.tk-mpl-adv-danger,
.tk-mpl-adv-reset {
	margin-top: 10px;
	padding: 9px 16px;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.tk-mpl-adv-danger { background: rgba(229, 83, 75, 0.18); color: #ff8a80; }
.tk-mpl-adv-danger:hover { background: #c93c34; color: #fff; }
.tk-mpl-adv-danger[hidden] { display: none; }
.tk-mpl-adv-reset { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tk-mpl-adv-reset:hover { background: rgba(255, 255, 255, 0.2); }
.tk-mpl-adv-note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; opacity: 0.55; }

/* ------------------------------------------------ teacher-chosen columns */

/* An EXPLICIT tap on 1 / 2 / 3 in the menu outranks the narrow-container
   step-down above. min(cols, 2) silently ate the "3" button in the ~400px
   lesson sidebar — the tap set the variable and the clamp threw it away,
   which reads as "the button does nothing". The clamp still governs every
   untouched device (the attribute only appears once a teacher has chosen). */
.tk-mpl[data-tk-mpl-usercols="1"] .tk-mpl-grid {
	grid-template-columns: repeat(var(--tk-mpl-cols, 3), minmax(0, 1fr));
}

/* -------------------------------------------------- single ↔ matrix view */

/* The head's view toggle. Both labels are in the markup; CSS shows the one
   you would switch TO, so the button renames itself with zero JS. */
.tk-mpl-viewbtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	height: 30px;
	padding: 0 11px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 180ms, background 180ms;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.tk-mpl-viewbtn:hover,
.tk-mpl-viewbtn:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.58); outline: none; }
.tk-mpl-viewbtn small { font-size: 10px; font-weight: 400; opacity: 0.7; margin-left: 3px; }
/* The toggle takes over the head's right edge; the "..." docks beside it. */
.tk-mpl-viewbtn + .tk-mpl-menu { margin-left: 0; }
.tk-mpl-view-to-wall { display: none; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-view-to-single { display: none; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-view-to-wall { display: inline; }

/* Single view: only the chosen slot card(s), full width, big-picture scale
   (same numbers as data-tk-mpl-oneup). order pins slot 1 above slot 2
   regardless of where those cards sit in the teacher's arranged grid. */
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-card { display: none; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-card[data-tk-mpl-slot] { display: block; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-card[data-tk-mpl-slot="1"] { order: -2; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-card[data-tk-mpl-slot="2"] { order: -1; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-grid {
	grid-template-columns: 1fr;
	gap: var(--tk-mpl-gap, 18px);
}
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-badge { font-size: 44px; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-name { font-size: 16px; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-get { top: 12px; right: 12px; padding: 7px 12px; font-size: 13px; }
/* One column has no use for a picture-size row, and rearranging a wall you
   cannot see only confuses — both come back with the matrix. */
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-menurow,
.tk-mpl[data-tk-mpl-view="single"] [data-tk-mpl-movebtn] { display: none; }

/* The slot's swap corner (top-LEFT; the download pill owns the top-right). */
.tk-mpl-swap { display: none; }
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-card[data-tk-mpl-slot] .tk-mpl-swap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 12px;
	left: 12px;
	min-width: 34px;
	height: 30px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.42);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	opacity: var(--tk-mpl-getop, 0.4);
	transition: opacity 180ms, background 180ms;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-card[data-tk-mpl-slot] .tk-mpl-swap:hover,
.tk-mpl[data-tk-mpl-view="single"] .tk-mpl-card[data-tk-mpl-slot] .tk-mpl-swap:focus-visible {
	opacity: 1; background: rgba(0, 0, 0, 0.66); outline: none;
}

/* The "one or two if need be" placeholder under the single video. */
.tk-mpl-addslot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	order: 1;
	min-height: 64px;
	border: 1px dashed rgba(255, 255, 255, 0.28);
	border-radius: var(--tk-mpl-radius, 14px);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	font: inherit;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 180ms, background 180ms;
}
.tk-mpl-addslot[hidden] { display: none; }
.tk-mpl-addslot:hover,
.tk-mpl-addslot:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.08); outline: none; }
.tk-mpl-addslot-plus { font-size: 20px; line-height: 1; }
.tk-mpl-addslot-text { font-size: 13px; font-weight: 600; }
.tk-mpl-addslot-text small { display: block; font-size: 11px; font-weight: 400; opacity: 0.62; }

/* ------------------------------------------------------ the video picker */

/* Same sheet family as the download confirm: in-page, dimmed, centred. */
.tk-mpl-pick {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.tk-mpl-pick[hidden] { display: none; }
.tk-mpl-pick-card {
	width: min(440px, 94vw);
	max-height: min(78vh, 620px);
	display: flex;
	flex-direction: column;
	padding: 14px;
	border-radius: 16px;
	background: #22222c;
	color: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.tk-mpl-pick-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 2px 10px;
}
.tk-mpl-pick-head strong { font-size: 15px; }
.tk-mpl-pick-head strong small { font-size: 11px; font-weight: 400; opacity: 0.62; margin-left: 6px; }
.tk-mpl-pick-x {
	border: 0;
	border-radius: 999px;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
}
.tk-mpl-pick-x:hover { background: rgba(255, 255, 255, 0.22); }
.tk-mpl-pick-remove {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.tk-mpl-pick-remove[hidden] { display: none; }
.tk-mpl-pick-remove:hover { background: rgba(255, 255, 255, 0.18); }
.tk-mpl-pick-remove small { display: block; font-size: 11px; font-weight: 400; opacity: 0.62; }
.tk-mpl-pick-list { overflow-y: auto; display: grid; gap: 6px; }
.tk-mpl-pick-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.tk-mpl-pick-item:hover,
.tk-mpl-pick-item:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; }
.tk-mpl-pick-item.is-current { background: rgba(26, 127, 55, 0.28); }
.tk-mpl-pick-thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 40px;
	border-radius: 6px;
	object-fit: cover;
	background: #1c1c25;
}
.tk-mpl-pick-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tk-mpl-pick-tick { margin-left: auto; font-size: 13px; opacity: 0.85; }