/**
 * Learn hub
 *
 * The hub page at /learn/, plus the chrome its four sub-pages share with it -
 * the video library, the courses archive, the video and course pages, and the
 * bookshelf all render partials/library-nav.php.
 *
 * It lives here rather than in base.css because base.css loads on every page
 * on the site and this nav is on six templates, and rather than in videos.css
 * because the bookshelf would then depend on the video sheet. Same reasoning
 * as #page-navigation living in free.css.
 *
 * @copyright   2026, ON1
 */

#library-navigation {
	background: var(--bg-800);
	border-bottom: 1px solid var(--bg-700);
	/* Matches #page-navigation on the free pages, so the two subnav strips read alike */
	font-size: var(--text-xs);
}

#library-navigation .nav {
	column-gap: 2.5rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

#library-navigation .nav::-webkit-scrollbar {
	display: none;
}

/*
 * li carries a 0.25rem bottom margin site-wide, which here floats the active
 * tab's underline off the strip's own bottom border instead of letting the two
 * sit together. #site-header .nav-item does the same for the main nav.
 */
#library-navigation .nav-item {
	margin-bottom: 0;
}

#library-navigation .nav-link {
	border-bottom: 2px solid transparent;
	color: var(--text-400);
	font-weight: 600;
	padding: 1rem 0;
	text-decoration: none;
	white-space: nowrap;
}

#library-navigation .nav-link:hover {
	color: var(--text-50);
}

#library-navigation .nav-link.active {
	border-bottom-color: var(--blue-500);
	color: var(--text-50);
}

/*==============================================================================
 * HUB PAGE
 =============================================================================*/

/* !- Hero
 *
 * The scrim is the same centred ellipse the product and company heroes use: the
 * bottom half of this photograph is lit cloud, and white text needs the help.
 *
 * background-color is the literal hex rather than var(--bg-950) because the
 * text over it is always white, and the token flips to near-white under
 * [data-theme="light"].
 */
#learn-hero {
	align-items: center;
	background-color: #141414;
	background-image: image-set(url(https://ononesoft.cachefly.net/images/learn/v3/hero-bg.jpg) 1x, url(https://ononesoft.cachefly.net/images/learn/v3/hero-bg@2x.jpg) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	margin-top: 0;
	max-width: 100%;
	min-height: 420px;
	padding-bottom: 4rem;
	padding-top: 4rem;
	position: relative;
}

@media (min-width: 992px) {
	/* Same proportion and floor as the free LUTs and Lightroom presets heroes, so the three match */
	#learn-hero {
		aspect-ratio: 2880 / 1067;
		min-height: 480px;
		padding-bottom: 5rem;
		padding-top: 5rem;
	}
}

#learn-hero::before {
	background: radial-gradient(ellipse 62% 85% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 72%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

#learn-hero .container {
	position: relative;
	z-index: 2;
}

#learn-hero h1 {
	color: var(--white);
	margin-bottom: 0.75rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

#learn-hero .learn-hero-intro {
	color: var(--white);
	font-size: var(--text-lg);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* !- The four destinations */
#learn-hub-cards {
	padding-bottom: 2.5rem;
	padding-top: 5rem;
}

/*
 * The surface is --bg-800 rather than --bg-850, with a border: against the
 * body's --bg-900 the 850 step is four hex points under [data-theme="light"],
 * which reads as white on white. The border is a resting edge only - hover
 * lifts the whole surface a step instead of drawing attention to the outline,
 * the same move .resource-card makes with its scrim.
 */
.hub-card {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.875rem 1.25rem;
	text-decoration: none;
	transition: background-color 0.15s;
}

.hub-card:hover {
	background: var(--bg-700);
}

/*
 * Hover lifts the surface toward light in both themes. Under [data-theme="light"]
 * that means going up past the page rather than down: the step below the resting
 * --bg-800 is --bg-700, four hex points away, which reads as no change at all.
 */
[data-theme="light"] .hub-card:hover {
	background: var(--bg-950);
}

.hub-card-icon {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	font-size: var(--text-lg);
	height: 2.75rem;
	justify-content: center;
	margin-bottom: 1rem;
	width: 2.75rem;
}

.hub-card-icon-green {
	background: color-mix(in srgb, var(--green-500) 15%, transparent);
	color: var(--green-500);
}

.hub-card-icon-blue {
	background: color-mix(in srgb, var(--blue-500) 15%, transparent);
	color: var(--blue-500);
}

.hub-card-icon-purple {
	background: color-mix(in srgb, var(--purple-500) 18%, transparent);
	color: var(--purple-400);
}

.hub-card-icon-orange {
	background: color-mix(in srgb, var(--orange-500) 15%, transparent);
	color: var(--orange-500);
}

.hub-card-title {
	color: var(--text-50);
	display: block;
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.625rem;
}

.hub-card-blurb {
	color: var(--text-400);
	display: block;
	font-size: var(--text-mini);
	line-height: 1.5;
	margin-bottom: 1rem;
}

.hub-card-cta {
	color: var(--link-alt);
	display: block;
	font-size: var(--text-micro);
	font-weight: 700;
	margin-top: auto;
}

/* !- Intro */
#learn-intro {
	padding-bottom: 3.5rem;
	padding-top: 1rem;
}

#learn-intro h2 {
	font-size: var(--text-2xl);
	margin-bottom: 0.75rem;
}

#learn-intro p {
	font-size: var(--text-sm);
	line-height: 1.7;
}

/* !- Rows */
.learn-row {
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}

.learn-row.theme-inverted {
	padding-bottom: 3.5rem;
	padding-top: 3.5rem;
}

.learn-row .section-head {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.learn-row .section-title {
	align-items: center;
	display: flex;
	font-size: var(--text-xl);
	gap: 0.625rem;
	margin-bottom: 0;
}

.learn-row.theme-inverted .section-title {
	color: var(--text-100);
}

.learn-row .section-view-all {
	color: var(--link-alt);
	font-size: var(--text-mini);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.learn-row .section-view-all:hover {
	text-decoration: underline;
}

.section-dot {
	border-radius: 50%;
	flex-shrink: 0;
	height: 0.5rem;
	width: 0.5rem;
}

.section-dot-green {
	background: var(--green-500);
}

.section-dot-blue {
	background: var(--blue-500);
}

.section-dot-orange {
	background: var(--orange-500);
}

.section-dot-purple {
	background: var(--purple-500);
}

.section-dot-red {
	background: var(--red-500);
}

.section-dot-teal {
	background: var(--teal-500);
}

.section-dot-gold {
	background: var(--gold-500);
}

.section-dot-magenta {
	background: var(--magenta-500);
}

/* !- Cards */

.learn-thumb {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: block;
	margin-bottom: 0.75rem;
	overflow: hidden;
	position: relative;
}

.learn-thumb-landscape {
	aspect-ratio: 16 / 9;
}

.learn-thumb-portrait {
	aspect-ratio: 4 / 5;
	box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--black) 35%, transparent);
}

.learn-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.learn-thumb .play-badge {
	align-items: center;
	background: color-mix(in srgb, var(--black) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
	border-radius: 50%;
	color: var(--white);
	display: flex;
	font-size: var(--text-mini);
	height: 2.5rem;
	justify-content: center;
	left: 50%;
	padding-left: 0.1875rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: background 0.15s;
	width: 2.5rem;
}

.learn-thumb:hover .play-badge {
	background: var(--blue-500);
	border-color: var(--blue-500);
}

.learn-card-title {
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

.learn-card-title a {
	color: var(--text-100);
	text-decoration: none;
}

.learn-card-title a:hover {
	color: var(--link);
}

.learn-card-tag {
	background: color-mix(in srgb, var(--orange-500) 15%, transparent);
	border-radius: var(--border-radius);
	color: var(--accent-orange);
	display: inline-block;
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.1875rem 0.5rem;
	text-transform: uppercase;
}

/* The light band's own shadow, since the dark one disappears on white */
.learn-row.theme-inverted .learn-thumb-portrait {
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--black) 15%, transparent);
}

/* !- Resource cards */
#learn-resources {
	padding-bottom: 4rem;
	padding-top: 2.5rem;
}

.resource-card {
	align-items: flex-end;
	border-radius: var(--border-radius);
	display: flex;
	height: 10rem;
	overflow: hidden;
	padding: 1.25rem;
	position: relative;
	text-decoration: none;
}

.resource-card-gold {
	background: linear-gradient(160deg, var(--gold-800), var(--bg-950));
}

.resource-card-blue {
	background: linear-gradient(160deg, var(--blue-800), var(--bg-950));
}

.resource-card .resource-title {
	color: var(--white);
	font-size: var(--text-lg);
	font-weight: 700;
	position: relative;
	z-index: 1;
}

.resource-card::after {
	background: color-mix(in srgb, var(--black) 25%, transparent);
	content: '';
	inset: 0;
	position: absolute;
	transition: background 0.15s;
}

.resource-card:hover::after {
	background: color-mix(in srgb, var(--black) 10%, transparent);
}

/* !- Small screens */
@media (max-width: 767.98px) {
	#learn-hero .learn-hero-intro {
		font-size: var(--text-base);
	}

	#learn-hub-cards {
		padding-top: 2.5rem;
	}

}

/*==============================================================================
 * SHARED HUB COMPONENTS
 *
 * Used by more than one hub page, so they can't sit in videos.css or
 * bookshelf.css without one sheet depending on the other.
 =============================================================================*/

/* !- Plus upsell */
#library-plus-upsell {
	padding-bottom: 1rem;
}

.plus-upsell {
	align-items: center;
	background: var(--bg-850);
	border-left: 3px solid var(--orange-500);
	border-radius: var(--border-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
}

.plus-upsell .eyebrow {
	color: var(--accent-orange);
}

.plus-upsell .plus-upsell-title {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 700;
}

.plus-upsell .plus-upsell-blurb {
	color: var(--text-400);
	font-size: var(--text-xs);
}

/* !- Promos
 *
 * Pinned dark in the markup, so these read as advertising against the light
 * rail rather than as part of the video's own information.
 */
.rail-promos {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.rail-promo {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1.875rem 1.5rem;
	text-align: center;
}

.rail-promo img {
	display: inline-block;
	margin-bottom: 0.875rem;
}

.rail-promo .rail-promo-title {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.rail-promo .rail-promo-blurb {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-bottom: 1.25rem;
}

.rail-promo-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.rail-promo-actions .btn {
	font-size: var(--text-xs);
	padding: 0.5rem 1rem;
}

/* !- Favorites grid
 *
 * Both favorites pages, so it can't sit in videos.css or creative-library.css.
 * Its own grid rather than .video-grid or .creative-grid because the grid child
 * here is a wrapper holding the card plus a remove button, and reusing either
 * would have meant putting that button inside the shared card partials, which
 * the library indexes also render.
 *
 * Column width is .video-grid's, so a favorites grid and a library grid line up
 * at the same breakpoints.
 */
.favorites-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * The card's last row: whatever tag the card already had on the left, the save
 * button hard right. margin-left carries the button right on a video card,
 * which has no tag to sit beside it.
 */
.card-action-row {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	margin-top: 0.5rem;
}

.card-action {
	margin-left: auto;
}

/*
 * The plugin prints its own markup and swaps the class on click, so this is
 * keyed on what it emits. It renders as an <a>, hence the text-decoration -
 * without it the heart carries a link underline.
 */
.card-action .simplefavorite-button {
	align-items: center;
	background: none;
	border: none;
	color: var(--text-500);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--text-sm);
	justify-content: center;
	padding: 0;
	text-decoration: none;
}

.card-action .simplefavorite-button:hover {
	color: var(--red-400);
}

.card-action .simplefavorite-button.active {
	color: var(--red-500);
}

/* !- Favorites empty and signed-out states */
.favorites-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.favorites-actions .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

@media (max-width: 991.98px) {
	.favorites-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* !- Term archive pager
 *
 * paginate_links() output, so the classes are core's rather than FacetWP's.
 * Same look as the facet pager on the video index. Shared by the video and
 * bookshelf term archives.
 */
.hub-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}

.hub-pagination .page-numbers {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 600;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

.hub-pagination a.page-numbers:hover {
	border-color: var(--blue-500);
	color: var(--text-50);
}

.hub-pagination .page-numbers.current {
	background: var(--blue-500);
	border-color: var(--blue-500);
	color: var(--white);
}

.hub-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
}

/* !- Refine link
 *
 * The nudge at the foot of a term archive, pointing at the same term filtered
 * on the library index. Shared by the video and creative library archives.
 */
.term-refine {
	font-size: var(--text-sm);
	margin-bottom: 0;
	margin-top: 2rem;
}

/*==============================================================================
 * FACETED LIBRARY INDEX
 *
 * The chrome the video library and the creative library share, which is all of
 * it bar the cards: the page head and its search, the FacetWP filter sidebar,
 * the results bar, the selections, the curated section headings, the popular
 * band, the empty state, and the pager. The two indexes are the same page with
 * a different post type behind them, so this lives here rather than being
 * written twice or having one sheet depend on the other.
 *
 * A chunk of it restyles FacetWP's own markup, which the plugin prints from PHP
 * and repaints from JavaScript: .facetwp-checkbox, .facetwp-depth,
 * .facetwp-expand, .facetwp-counter, .facetwp-search, .facetwp-sort-select,
 * .facetwp-counts, .facetwp-selections, .facetwp-pager. Those class names are
 * the plugin's contract, so they're targeted inside #library-filters or
 * #library-body rather than globally.
 =============================================================================*/

/* !- Page head */
#library-head {
	padding-bottom: 2.5rem;
	padding-top: 3rem;
}

#library-head h1 {
	margin-bottom: 0.75rem;
}

#library-head .library-intro {
	color: var(--text-400);
	font-size: var(--text-sm);
}

.library-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (min-width: 992px) {
	.library-controls {
		justify-content: flex-end;
	}
}

/* !- Search
 *
 * FacetWP prints its own icon on the right of the input, where it doubles as
 * the clear button and the loading spinner, so the magnifier on the left is a
 * separate element rather than a restyle of that one.
 */
.library-search {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	flex-grow: 1;
	gap: 0.5rem;
	padding-left: 0.75rem;
}

.library-search > i {
	color: var(--text-500);
	font-size: var(--text-xs);
}

.library-search .facetwp-facet {
	flex-grow: 1;
	margin-bottom: 0;
}

.library-search .facetwp-input-wrap {
	display: block;
}

.library-search input.facetwp-search {
	background: none;
	border: none;
	color: var(--text-100);
	font-size: var(--text-sm);
	min-width: 0;
	padding: 0.625rem 2rem 0.625rem 0;
	width: 100%;
}

.library-search input.facetwp-search:focus {
	box-shadow: none;
	outline: none;
}

.library-search input.facetwp-search::placeholder {
	color: var(--text-500);
}

.library-favorites {
	align-items: center;
	display: inline-flex;
	font-size: var(--text-sm);
	gap: 0.5rem;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	white-space: nowrap;
}

/* FacetWP's icons are dark PNGs, which need flipping on a dark surface */
#library-body .facetwp-icon::before,
.library-search .facetwp-icon::before {
	filter: invert(1);
}

/* !- Body */
#library-body {
	padding-bottom: 5rem;
	padding-top: 1.5rem;
}

/* !- Filter sidebar
 *
 * --library-offset is set on the element by library-filters.js, which measures
 * the sticky site header. The fallback keeps the sidebar usable if that never
 * runs.
 */
#library-filters {
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	margin-bottom: 2rem;
	padding: 0.5rem 1.25rem 1rem;
}

@media (min-width: 992px) {
	#library-filters {
		max-height: calc(100vh - var(--library-offset, 5rem) - 2rem);
		overflow-y: auto;
		position: sticky;
		scrollbar-width: thin;
		top: calc(var(--library-offset, 5rem) + 1rem);
	}
}

#library-filters .filters-title {
	color: var(--text-500);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	padding-top: 1rem;
	text-transform: uppercase;
}

#library-filters .facetwp-facet {
	margin-bottom: 0;
}

/* Filter rows */
#library-filters .facetwp-checkbox {
	align-items: center;
	background: none;
	color: var(--text-300);
	display: flex;
	font-size: var(--text-mini);
	gap: 0.5rem;
	margin-bottom: 0;
	padding: 0.375rem 0;
	position: relative;
}

#library-filters .facetwp-checkbox::before {
	border: 1px solid var(--bg-600);
	border-radius: 0.1875rem;
	content: '';
	flex-shrink: 0;
	height: 0.8125rem;
	width: 0.8125rem;
}

#library-filters .facetwp-checkbox.checked {
	color: var(--text-50);
}

#library-filters .facetwp-checkbox.checked::before {
	background: var(--blue-500);
	border-color: var(--blue-500);
}

#library-filters .facetwp-checkbox.checked::after {
	border-bottom: 1.5px solid var(--white);
	border-right: 1.5px solid var(--white);
	content: '';
	height: 0.4375rem;
	left: 0.28125rem;
	position: absolute;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	width: 0.21875rem;
}

#library-filters .facetwp-checkbox.disabled {
	cursor: default;
	opacity: 0.4;
}

#library-filters .facetwp-display-value {
	padding-right: 0;
}

#library-filters .facetwp-counter {
	color: var(--text-500);
	font-size: var(--text-tiny);
	margin-left: auto;
	padding-left: 0.5rem;
}

/*
 * A parent row collapses its group rather than filtering by the parent term,
 * which is what the design asks for and what the term is worth as a filter -
 * "Apps" matches all but a couple dozen of the posts in either library.
 * FacetWP appends .facetwp-expand to exactly the rows that have a
 * .facetwp-depth after them and already stops the click from reaching the row,
 * so stretching that span over the whole row hands the row to it. No
 * JavaScript, nothing patched.
 */
#library-filters .facetwp-checkbox:has(+ .facetwp-depth):not([data-value="on1-plus"]) {
	border-top: 1px solid var(--bg-700);
	color: var(--text-50);
	font-size: var(--text-xs);
	font-weight: 700;
	margin-top: 0.25rem;
	padding: 0.75rem 1.25rem 0.75rem 0;
}

#library-filters .facetwp-checkbox:has(+ .facetwp-depth):not([data-value="on1-plus"])::before,
#library-filters .facetwp-checkbox:has(+ .facetwp-depth):not([data-value="on1-plus"])::after {
	display: none;
}

#library-filters .facetwp-checkbox:has(+ .facetwp-depth):not([data-value="on1-plus"]) .facetwp-counter {
	font-weight: 400;
	margin-left: 0;
	margin-right: auto;
}

#library-filters .facetwp-expand {
	float: none;
	font-size: 0;
	inset: 0;
	position: absolute;
}

#library-filters .facetwp-expand::after {
	border-bottom: 1.5px solid var(--text-500);
	border-right: 1.5px solid var(--text-500);
	content: '';
	height: 0.4rem;
	position: absolute;
	right: 0.125rem;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.15s;
	width: 0.4rem;
}

#library-filters .facetwp-checkbox:has(+ .facetwp-depth.visible) .facetwp-expand::after {
	transform: translateY(-25%) rotate(-135deg);
}

#library-filters .facetwp-depth {
	padding: 0.25rem 0 0.5rem;
}

/*
 * ON1 Plus stays a filter instead of becoming a heading
 *
 * In video_library_cats it has exactly one child, so heading treatment would
 * buy nothing and would cost the "Plus content only" filter the old sidebar
 * had - hence the :not() on the rules above. In creative_library_cats it has
 * no children at all and never matches them. Orange, as Plus always is.
 */
#library-filters .facetwp-checkbox[data-value="on1-plus"] {
	color: var(--accent-orange);
	font-weight: 700;
}

#library-filters .facetwp-checkbox[data-value="on1-plus"] .facetwp-expand {
	display: none;
}

/*
 * Non-Plus is the inverse of a filter already in the list, in both taxonomies.
 * The rest of what each sidebar hides is that library's own business and lives
 * in its own sheet.
 */
#library-filters .facetwp-checkbox[data-value="non-plus"] {
	display: none;
}

/* !- Results bar */
.results-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.results-bar .facetwp-counts {
	color: var(--text-500);
	font-size: var(--text-mini);
}

.results-bar .facetwp-facet {
	margin-bottom: 0;
}

/*
 * Two sort controls, one look: the video library has a sort facet
 * (.facetwp-type-sort), the creative library has no such facet configured and
 * uses FacetWP's older sort feature (.facetwp-sort) instead. Both selects pick
 * up .form-select from a facetwp_facet_html / facetwp_sort_html filter in the
 * theme's functions.php - see on1_library_sort_select().
 */
.results-bar .facetwp-type-sort .form-select,
.results-bar .facetwp-sort .form-select {
	font-size: var(--text-sm);
	width: auto;
}

/* !- Selections
 *
 * FacetWP renders one li per facet - a label span, then one
 * .facetwp-selection-value span per selected term - so the pill belongs on the
 * value, not on the li. On the li, a facet with two terms selected comes out as
 * a single pill holding both of them.
 *
 * Its own front.css hangs a close icon off each value as a background PNG, with
 * padding-right making room for it. A raster X can't follow the theme, so the
 * background shorthand below drops it in favour of the ::after - without that,
 * every selection carries two X's.
 */
#library-body .facetwp-selections {
	margin-bottom: 1.5rem;
}

#library-body .facetwp-selections ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#library-body .facetwp-selections li {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#library-body .facetwp-selections .facetwp-selection-label {
	color: var(--text-500);
	font-size: var(--text-mini);
}

#library-body .facetwp-selections .facetwp-selection-value {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-200);
	cursor: pointer;
	font-size: var(--text-mini);
	margin-right: 0;
	padding: 0.25rem 0.375rem 0.25rem 0.625rem;
	transition: border-color 0.15s, color 0.15s;
}

#library-body .facetwp-selections .facetwp-selection-value:hover {
	border-color: var(--bg-600);
	color: var(--text-50);
}

#library-body .facetwp-selections .facetwp-selection-value::after {
	color: var(--text-500);
	content: '\00d7';
	font-size: var(--text-base);
	line-height: 1;
	margin-left: 0.375rem;
}

/* !- Curated sections
 *
 * The dots themselves are the .section-dot set above, which the hub page
 * defines and this reuses unchanged.
 */
.library-section {
	margin-bottom: 3.25rem;
}

.library-section .section-head {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 0.375rem;
}

.library-section .section-title,
#library-popular .section-title {
	align-items: center;
	display: flex;
	font-size: var(--text-xl);
	gap: 0.625rem;
	margin-bottom: 0;
}

.library-section .section-view-all {
	color: var(--link-alt);
	font-size: var(--text-mini);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.library-section .section-view-all:hover {
	text-decoration: underline;
}

.library-section .section-blurb {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin-bottom: 1.25rem;
}

/* !- Popular band
 *
 * "Most Viewed" on the video library, "Most Popular" on the creative library.
 * Either way it's the page's one light band, which is why the cards inside it
 * read from the inverted tokens rather than needing their own colors.
 */
#library-popular {
	border-radius: var(--border-radius);
	margin-top: 3.25rem;
	padding: 1.875rem;
}

#library-popular .section-title {
	color: var(--text-100);
	margin-bottom: 1.25rem;
}

/* !- No results */
.no-results {
	color: var(--text-400);
	font-size: var(--text-sm);
}

.no-results strong {
	color: var(--text-200);
}

/* !- Pager */
#library-body .facetwp-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}

#library-body .facetwp-page {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 600;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

#library-body .facetwp-page:hover {
	border-color: var(--blue-500);
	color: var(--text-50);
}

#library-body .facetwp-page.active {
	background: var(--blue-500);
	border-color: var(--blue-500);
	color: var(--white);
}

#library-body .facetwp-page.dots {
	background: none;
	border-color: transparent;
}

/* !- Light theme
 *
 * Only the places where a token can't carry the change on its own: FacetWP's
 * own icon PNGs, which are dark to begin with, and the checkbox tick, which
 * punches a hole in its own surface color.
 */
[data-theme="light"] #library-body .facetwp-icon::before,
[data-theme="light"] .library-search .facetwp-icon::before {
	filter: none;
}

/* !- Small screens */
@media (max-width: 767.98px) {
	#library-head {
		padding-top: 2rem;
	}

	#library-popular {
		padding: 1.25rem;
	}
}