/**
 * Folks TV — Save-to-playlist modal + playlist pages (1.22.350).
 */

/* ── Save-to-playlist modal ───────────────────────────────────────── */
.wpf-pl-modal[hidden] { display: none; }
.wpf-pl-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.wpf-pl-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 17, 21, 0.55);
	backdrop-filter: blur(2px);
}
.wpf-pl-modal__panel {
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
	max-width: 440px;
	width: 100%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.wpf-pl-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border, #dcdcde);
}
.wpf-pl-modal__title {
	margin: 0;
	font-family: var(--font-heading, Georgia), serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--color-text, #1e1e1e);
}
.wpf-pl-modal__close {
	background: transparent;
	border: 0;
	padding: 6px;
	border-radius: 6px;
	color: var(--color-text-secondary, #50575e);
	cursor: pointer;
	display: inline-flex;
}
.wpf-pl-modal__close:hover {
	background: var(--color-bg-secondary, #f6f7f7);
	color: var(--color-text, #1e1e1e);
}

.wpf-pl-modal__list {
	flex: 1;
	overflow-y: auto;
	padding: 6px 8px;
	min-height: 90px;
}
.wpf-pl-modal__empty {
	margin: 14px 12px;
	font-size: 14px;
	color: var(--color-text-secondary, #50575e);
}

.wpf-pl-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
}
.wpf-pl-row:hover { background: var(--color-bg-secondary, #f6f7f7); }
.wpf-pl-row.is-saving { opacity: 0.55; pointer-events: none; }
.wpf-pl-row input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: #2145e6;
	cursor: pointer;
}
.wpf-pl-row__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.wpf-pl-row__title {
	font-size: 14.5px;
	color: var(--color-text, #1e1e1e);
	font-weight: 500;
	line-height: 1.35;
}
.wpf-pl-row__sub {
	font-size: 12px;
	color: var(--color-text-secondary, #50575e);
	text-transform: capitalize;
}

.wpf-pl-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	border-top: 1px solid var(--color-border, #dcdcde);
}
.wpf-pl-modal__new {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 8px 10px;
	font-size: 14px;
	font-weight: 500;
	color: #2145e6;
	cursor: pointer;
	border-radius: 8px;
}
.wpf-pl-modal__new:hover { background: rgba(33, 69, 230, 0.08); }
.wpf-pl-modal__manage {
	font-size: 13px;
	color: var(--color-text-secondary, #50575e);
	text-decoration: none;
}
.wpf-pl-modal__manage:hover { color: var(--color-text, #1e1e1e); }

/* ── Inline create form ───────────────────────────────────────────── */
.wpf-pl-modal__create[hidden] { display: none; }
.wpf-pl-modal__create {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wpf-pl-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wpf-pl-field__label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary, #50575e);
}
.wpf-pl-field input[type="text"],
.wpf-pl-field textarea {
	font: inherit;
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid var(--color-border, #dcdcde);
	border-radius: 6px;
	background: #fff;
	color: var(--color-text, #1e1e1e);
}
.wpf-pl-field input[type="text"]:focus,
.wpf-pl-field textarea:focus {
	outline: none;
	border-color: #2145e6;
	box-shadow: 0 0 0 3px rgba(33, 69, 230, 0.15);
}

.wpf-pl-vis {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wpf-pl-vis__opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--color-border, #dcdcde);
	border-radius: 8px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.4;
}
.wpf-pl-vis__opt input { margin-top: 4px; accent-color: #2145e6; }
.wpf-pl-vis__opt:hover { background: var(--color-bg-secondary, #f6f7f7); }
.wpf-pl-vis__opt strong { margin-right: 4px; }

.wpf-pl-create__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* ── Playlists listing page ───────────────────────────────────────── */
.wpf-pl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}
.wpf-pl-card {
	background: #fff;
	border: 1px solid var(--color-border, #dcdcde);
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpf-pl-card:hover {
	border-color: #c2c4c8;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.wpf-pl-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.wpf-pl-card__title {
	margin: 0;
	font-family: var(--font-heading, Georgia), serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--color-text, #1e1e1e);
	line-height: 1.3;
}
.wpf-pl-card__title a { color: inherit; text-decoration: none; }
.wpf-pl-card__title a:hover { color: #2145e6; }
.wpf-pl-vis-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border-radius: 999px;
	color: var(--color-text-secondary, #50575e);
	background: var(--color-bg-secondary, #f6f7f7);
}
.wpf-pl-vis-badge--public { color: #0a7d2c; background: rgba(10, 125, 44, 0.08); }
.wpf-pl-vis-badge--unlisted { color: #b6701e; background: rgba(182, 112, 30, 0.08); }
.wpf-pl-vis-badge--private { color: #50575e; }

.wpf-pl-card__desc {
	font-size: 14px;
	color: var(--color-text-secondary, #50575e);
	line-height: 1.55;
	margin: 0;
}
.wpf-pl-card__count {
	font-size: 13px;
	color: var(--color-text-secondary, #50575e);
}

.wpf-pl-card__actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.wpf-pl-card__delete {
	background: transparent;
	border: 0;
	padding: 4px 6px;
	font-size: 12.5px;
	color: #b6231e;
	cursor: pointer;
	border-radius: 4px;
}
.wpf-pl-card__delete:hover { background: rgba(182, 35, 30, 0.08); }

/* ── Single playlist page ─────────────────────────────────────────── */
.wpf-pl-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 26px;
}
.wpf-pl-header__title {
	margin: 0;
	font-family: var(--font-heading, Georgia), serif;
	font-size: 30px;
	font-weight: 400;
	color: var(--color-text, #1e1e1e);
	line-height: 1.2;
}
.wpf-pl-header__meta {
	font-size: 14px;
	color: var(--color-text-secondary, #50575e);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.wpf-pl-header__desc {
	margin: 0;
	font-size: 15px;
	color: var(--color-text, #1e1e1e);
	line-height: 1.6;
}

.wpf-pl-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wpf-pl-item {
	display: flex;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--color-border, #dcdcde);
	border-radius: 10px;
	padding: 12px;
	align-items: stretch;
}
.wpf-pl-item__thumb {
	flex-shrink: 0;
	width: 168px;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
	display: block;
}
.wpf-pl-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wpf-pl-item__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wpf-pl-item__title {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text, #1e1e1e);
	line-height: 1.35;
}
.wpf-pl-item__title a { color: inherit; text-decoration: none; }
.wpf-pl-item__title a:hover { color: #2145e6; }
.wpf-pl-item__sub {
	font-size: 12.5px;
	color: var(--color-text-secondary, #50575e);
}
.wpf-pl-item__remove {
	align-self: flex-start;
	background: transparent;
	border: 0;
	padding: 6px 8px;
	font-size: 12.5px;
	color: #b6231e;
	cursor: pointer;
	border-radius: 4px;
}
.wpf-pl-item__remove:hover { background: rgba(182, 35, 30, 0.08); }

@media (max-width: 540px) {
	.wpf-pl-item { flex-direction: column; }
	.wpf-pl-item__thumb { width: 100%; }
}

/* 1.22.363 — Owner-only Remove control overlaid on each video card on
   the public single-playlist page. Pinned to the top-right of the
   thumbnail, hidden until hover so it doesn't compete with the card's
   own affordances (Watch Later bookmark, source pill). Pointer-events
   pass-through on the wrapper handled by individual rules: the button
   itself receives clicks. */
.folks-tv-card__pl-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(214, 54, 56, 0.92);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.folks-tv-card:hover .folks-tv-card__pl-remove,
.folks-tv-card:focus-within .folks-tv-card__pl-remove,
.folks-tv-card__pl-remove:focus-visible {
	opacity: 1;
	transform: translateY(0);
}
.folks-tv-card__pl-remove:hover {
	background: #b6231e;
}
.folks-tv-card__pl-remove:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Touch devices have no hover, so just show it permanently on coarse
   pointers (avoids a hidden control on mobile). */
@media (hover: none) {
	.folks-tv-card__pl-remove {
		opacity: 1;
		transform: none;
	}
}

/* 1.22.379 — Part N badge for cards rendered inside a series page.
   Sits in the top-left of the thumbnail (opposite the Watch Later
   bookmark on the top-right). Indigo-blue tinted to match the Series
   accent used elsewhere. */
.folks-tv-card__part-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(29, 78, 216, 0.92);
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	pointer-events: none;
}

/* Series header above the player on the single video page. */
.folks-tv-series-strip {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 14px 18px;
	background: linear-gradient(135deg, rgba(29, 78, 216, 0.05) 0%, rgba(29, 78, 216, 0.10) 100%);
	border: 1px solid rgba(29, 78, 216, 0.18);
	border-radius: 12px;
}
.folks-tv-series-strip__meta {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.folks-tv-series-strip__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #1d4ed8;
}
.folks-tv-series-strip__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text, #1e1e1e);
	line-height: 1.3;
}
.folks-tv-series-strip__title a {
	color: inherit;
	text-decoration: none;
}
.folks-tv-series-strip__title a:hover {
	color: #1d4ed8;
}
.folks-tv-series-strip__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.folks-tv-series-strip__nav .btn--sm {
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
}
.folks-tv-series-strip__nav .btn--disabled,
.folks-tv-series-strip__nav .btn[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* 1.22.380 — Series row on /tv/. A horizontal carousel-style strip
   that calls out multi-part walkthroughs above the main video grid.
   Cards have a stacked-thumb illusion via the __stack pseudo so they
   read as "this is a set, not a single video" at a glance. */
.folks-tv-series-row {
	margin: 0 0 36px;
	padding: 0;
}
.folks-tv-series-row__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
}
.folks-tv-series-row__title {
	margin: 0;
	font-family: var(--font-heading, Georgia), serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--color-text, #1e1e1e);
	line-height: 1.2;
}
.folks-tv-series-row__sub {
	margin: 0;
	font-size: 14px;
	color: var(--color-text-secondary, #50575e);
	line-height: 1.5;
}
.folks-tv-series-row__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}
.folks-tv-series-card {
	background: transparent;
}
.folks-tv-series-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.folks-tv-series-card__thumb-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: visible;
	margin-bottom: 24px; /* room for the stack overhang below */
}
.folks-tv-series-card__thumb {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 8px;
	background: #000;
}
.folks-tv-series-card__thumb--placeholder {
	background: linear-gradient(135deg, #c5cae9 0%, #9fa8da 100%);
}
/* Stacked-deck illusion: a translucent slab peeking out below + behind
   the main thumb so the card reads as "this is a multi-part series". */
.folks-tv-series-card__stack {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: -10px;
	height: 16px;
	background: rgba(29, 78, 216, 0.22);
	border-radius: 6px;
	z-index: 1;
}
.folks-tv-series-card__thumb-wrap::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -18px;
	height: 12px;
	background: rgba(29, 78, 216, 0.12);
	border-radius: 4px;
	z-index: 0;
}
.folks-tv-series-card__count {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(15, 17, 21, 0.78);
	border-radius: 999px;
	pointer-events: none;
}
.folks-tv-series-card__link:hover .folks-tv-series-card__thumb {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.folks-tv-series-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.folks-tv-series-card__eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #1d4ed8;
}
.folks-tv-series-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text, #1e1e1e);
	line-height: 1.35;
}
.folks-tv-series-card__link:hover .folks-tv-series-card__title {
	color: #1d4ed8;
}
.folks-tv-series-card__owner {
	font-size: 12.5px;
	color: var(--color-text-secondary, #50575e);
}