/**
 * Plus Community Gallery
 *
 * The archive, its tag and category pages, gallery search, My Photos, Seeking
 * Critique, and the single photo. Rebuilt on base.css tokens on 2026-10-06 and
 * taken out of on1_legacy_stylesheets(), so it follows the site's light/dark
 * toggle - nothing here should be a hard-coded color, except where something
 * sits on top of a photo (arrows, tile stats, the lightbox) and has to read
 * against the photo, not the page.
 *
 * Loaded with prose.css, which styles the comment thread and the ON1 Plus gate
 * non-members see.
 *
 * @copyright   2026, ON1
 */

/* !- Gallery nav bar
   A full-width band, black like the photo backdrop, in both themes. It's
   pinned data-theme="dark" in the templates so its text stays light. */
#gallery-navigation {
	background: var(--black);
}

#gallery-navigation h3 {
	font-size: var(--text-lg);
}

#gallery-navigation h3 a {
	color: var(--text-100);
	font-weight: 500;
	text-decoration: none;
}

#gallery-navigation h3 strong {
	font-weight: 900;
}

#gallery-navigation .nav a {
	color: var(--text-300);
	font-size: var(--text-sm);
	text-decoration: none;
}

#gallery-navigation .nav a:hover {
	color: var(--text-100);
}

#gallery-navigation .nav a.active {
	color: var(--text-50);
	font-weight: 700;
}

/* base.css gives list items a bottom margin, which lifts the links off
   the title's center line */
#gallery-navigation .nav .nav-item {
	margin-bottom: 0;
}

#gallery-navigation .nav .nav-item:last-child a {
	padding-right: 0;
}

#gallery-navigation .back-link {
	color: var(--text-100);
	font-size: var(--text-sm);
	text-decoration: none;
}

#gallery-navigation .back-link:hover {
	color: var(--text-300);
}

#gallery-navigation .back-link + .back-link {
	margin-left: 1.5rem;
}

/* !- Slim sticky title bar (single photo)
   Holds only the title and the back link - prev/next lives on the photo as
   overlay arrows, so the bar stays short and doesn't push the photo down. */
.on1pg-sticky-nav {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: color-mix(in srgb, var(--black) 92%, transparent);
	position: sticky;
	top: 0;
	z-index: 50;
}

.on1pg-sticky-nav h3 {
	margin: 0;
}

.on1pg-sticky-nav a:hover {
	text-decoration: underline;
}

/* !- Browse by / Sort by dropdowns
   The same treatment as the header nav's dropdowns in base.css. */
.gallery-dropdowns .dropdown-toggle {
	color: var(--text-100);
	font-weight: 500;
	text-decoration: none;
}

.gallery-dropdowns .dropdown-toggle::after {
	border: none;
	content: '\f107';
	font-family: var(--fa-family-classic);
	font-size: var(--text-sm);
	line-height: 1;
	margin-left: 0.313rem;
	margin-top: -0.125rem;
	vertical-align: middle;
}

.gallery-dropdowns .dropdown-menu {
	background: var(--bg-800);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-sm);
	padding: 0.5rem 0;
}

.gallery-dropdowns .dropdown-menu .dropdown-item {
	color: var(--text-300);
	font-size: var(--text-sm);
	padding: 0.5rem 1.125rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.gallery-dropdowns .dropdown-menu .dropdown-item:focus,
.gallery-dropdowns .dropdown-menu .dropdown-item:hover {
	background: var(--bg-700);
	color: var(--text-100);
}

/* The current sort */
.gallery-dropdowns .dropdown-menu .dropdown-item.active,
.gallery-dropdowns .dropdown-menu .dropdown-item:active {
	background: var(--bg-700);
	color: var(--text-100);
	font-weight: 600;
}

.gallery-dropdowns .dropdown-menu .dropdown-header {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 900;
	letter-spacing: 0.1em;
	margin: 0.5rem 0;
	padding-bottom: 0;
	padding-left: 1.125rem;
	text-transform: uppercase;
}

.gallery-dropdowns .dropdown-menu .dropdown-divider {
	background: var(--bg-700);
	border: 0;
	height: 1px;
	margin: 0.375rem 0;
	opacity: 1;
}

.gallery-dropdowns .dropdown-menu .dropdown-item i {
	color: var(--text-500);
	margin-right: 0.25rem;
}

/* Browse by: All Photos and Seeking Critique on top, then the categories
   in three columns - wide enough for the longest name in each */
@media (min-width: 768px) {
	.gallery-dropdowns .on1pg-browse-menu {
		width: 40rem;
	}
}

/* !- Browse by / Sort by labels and fields
   Both read as the video library's sort select - a label, then a
   .form-select field - but are Bootstrap dropdowns dressed as one, so their
   menus match each other when open. */
.on1pg-control-label {
	color: var(--text-100);
	font-weight: 500;
	margin-right: 0.5rem;
	white-space: nowrap;
}

.gallery-dropdowns .on1pg-browse-toggle {
	display: inline-block;
	font-size: var(--text-sm);
	text-align: left;
	width: auto;
}

/* !- "My Photos" header
   Its own header for the personal view instead of the Browse by / Sort by /
   Search row every other listing shares. */
.on1pg-my-photos-count {
	color: var(--text-400);
}

/* !- Page spacing
   5rem between the gallery nav bar and the content, and between the end of
   the content and the section below it, on every gallery page. */
#gallery-wrapper,
#gallery-photo,
#gallery-form {
	padding: 5rem 0;
}

/* The listing pages start closer to the nav bar */
#gallery-wrapper {
	padding-top: 3rem;
}

/* The photo starts right under the nav bar, so the nav and the photo's
   backdrop - both black - run together as one band */
#gallery-photo {
	padding-top: 0;
}

/* !- ON1 Plus gate
   prose.css boxes it in and spaces it off the article above; here it sits
   straight under the nav bar, 3rem down like the listings' content. */
#gallery-wrapper .plus-gate,
#gallery-photo .plus-gate {
	border: 0;
	margin: 0;
}

/* #gallery-photo has no top padding (the photo backdrop meets the nav) */
#gallery-photo .plus-gate {
	margin-top: 3rem;
}

/* !- Masonry grid
   CSS multi-column masonry: each photo keeps its real aspect ratio (portrait
   stays tall, landscape stays wide) instead of every tile being cropped to the
   same shape. Uses the 'on1pg-masonry' image size (600px wide, soft crop)
   registered in the on1-plus-gallery mu-plugin. */
.on1pg-masonry {
	column-count: 4;
	column-gap: 1rem;
}

.on1pg-masonry-item {
	-webkit-column-break-inside: avoid;
	border-radius: var(--border-radius);
	break-inside: avoid;
	display: block;
	margin-bottom: 1rem;
	overflow: hidden;
	position: relative;
}

.on1pg-masonry-item img {
	display: block;
	height: auto;
	transition: transform 0.2s ease;
	width: 100%;
}

.on1pg-masonry-item:hover img {
	transform: scale(1.02);
}

@media (max-width: 991px) {
	.on1pg-masonry {
		column-count: 3;
	}
}

@media (max-width: 767px) {
	.on1pg-masonry {
		column-count: 2;
		column-gap: 0.5rem;
	}

	.on1pg-masonry-item {
		margin-bottom: 0.5rem;
	}
}

@media (max-width: 479px) {
	.on1pg-masonry {
		column-count: 1;
	}
}

/* !- Like + comment stats on grid tiles
   Grouped bottom-right and hidden until the tile is hovered or focused, with a
   soft gradient fading up behind them - Patrick: a pill sitting over the photo
   "takes away from the photo." Always shown on touch devices, which have no
   hover. These sit on the photo, so they stay white on black in both themes. */
.on1pg-tile-gradient {
	background: linear-gradient(to top, color-mix(in srgb, var(--black) 55%, transparent) 0%, transparent 45%);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.15s ease;
}

.on1pg-tile-stats {
	align-items: center;
	bottom: 0.5rem;
	color: var(--white);
	display: inline-flex;
	font-size: var(--text-mini);
	gap: 0.75rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0.65rem;
	text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 85%, transparent);
	transition: opacity 0.15s ease;
	z-index: 2;
}

.on1pg-tile-stat {
	align-items: center;
	display: inline-flex;
	gap: 0.3rem;
}

.on1pg-tile-stat .fa-heart {
	color: var(--red-500);
}

.on1pg-masonry-item:hover .on1pg-tile-gradient,
.on1pg-masonry-item:hover .on1pg-tile-stats,
.on1pg-masonry-item:focus-within .on1pg-tile-gradient,
.on1pg-masonry-item:focus-within .on1pg-tile-stats {
	opacity: 1;
}

@media (hover: none) {
	.on1pg-tile-gradient,
	.on1pg-tile-stats {
		opacity: 1;
	}
}

/* !- Pagination
   Same markup and treatment as the blog's .blog-pagination (blog.css), which
   this page doesn't load. */
.gallery-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}

.gallery-pagination .page-numbers {
	align-items: center;
	background: var(--bg-900);
	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;
}

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

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

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

/* The solid fill takes the deeper step in light theme so white text on it
   clears AA - same as the blog */
[data-theme="light"] .gallery-pagination .page-numbers.current {
	background: var(--blue-600);
	border-color: var(--blue-600);
}

/* !- Empty states
   "Nothing here" copy sits plainly in the page, no card. */
#gallery-wrapper .on1pg-empty {
	padding-top: 2rem;
}

#gallery-wrapper .on1pg-empty h2 {
	color: var(--text-100);
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

#gallery-wrapper .on1pg-empty p {
	color: var(--text-300);
	margin-bottom: 1.5rem;
}

#gallery-wrapper .on1pg-empty h2 + .btn {
	margin-top: 0.75rem;
}

#gallery-wrapper .on1pg-empty .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Single photo: the photo
   The frame breaks out of the .container to the full viewport width, so a
   short, wide photo's backdrop spans the page instead of stopping at the
   column edge. max-height keeps a tall portrait from running a screen and a
   half before the details below it are visible (Patrick: reduced from 80vh by
   about 15%). Clicking opens the lightbox, which is unaffected. */
.on1pg-image-frame {
	align-items: center;
	/* Black in both themes on purpose - a viewing backdrop for the photo */
	background: var(--black);
	cursor: zoom-in;
	display: flex;
	justify-content: center;
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-height: calc(68vh + 6rem);
	max-width: 100vw;
	overflow: hidden;
	/* Room in the black band above and below the photo, so it doesn't sit
	   right up against the nav bar's divider */
	padding: 3rem 0;
	position: relative;
	right: 50%;
	width: 100vw;
}

.on1pg-image-frame img.on1pg-featured-img {
	max-height: 68vh;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.photo-copyright {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 700;
	margin-top: 0.75rem;
	text-transform: uppercase;
}

/* Prev/next overlay arrows, on the photo itself (Google Photos / Lightroom web
   style). Real links underneath, so they work without JS; the lightbox click
   handler ignores clicks that land on them. They sit on the photo, so they
   stay white on translucent black in both themes. */
.on1pg-nav-arrow {
	align-items: center;
	background: color-mix(in srgb, var(--black) 35%, transparent);
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
	display: flex;
	font-size: var(--text-lg);
	height: 3rem;
	justify-content: center;
	line-height: 1;
	opacity: 0.75;
	position: absolute;
	text-decoration: none;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.15s ease, background 0.15s ease;
	width: 3rem;
	z-index: 5;
}

.on1pg-nav-arrow:hover,
.on1pg-nav-arrow:focus {
	background: color-mix(in srgb, var(--black) 60%, transparent);
	color: var(--white);
	opacity: 1;
	text-decoration: none;
}

.on1pg-nav-prev {
	left: 1rem;
}

.on1pg-nav-next {
	right: 1rem;
}

@media (max-width: 767px) {
	/* Smaller and closer to the edge so they don't cover as much of the
	   photo; still a comfortable tap target. */
	.on1pg-nav-arrow {
		font-size: var(--text-base);
		height: 2.5rem;
		width: 2.5rem;
	}

	.on1pg-nav-prev {
		left: 0.5rem;
	}

	.on1pg-nav-next {
		right: 0.5rem;
	}
}

/* Full-size view when the frame is clicked */
.on1pg-lightbox-open {
	align-items: center;
	background: color-mix(in srgb, var(--black) 92%, transparent);
	cursor: zoom-out;
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 9999;
}

.on1pg-lightbox-open img {
	max-height: 95vh;
	max-width: 95vw;
	object-fit: contain;
}

/* Crossfade for the photo swapped in by prev/next */
.on1pg-post {
	animation: on1pgFadeIn 0.25s ease;
}

@keyframes on1pgFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.on1pg-post.on1pg-loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* !- Single photo: action bar
   Like, jump to comments, share (hidden), critique, and a "..." overflow menu
   for Flag / Report, in one row under the photo. */
.on1pg-action-bar {
	align-items: center;
	border-bottom: 1px solid var(--bg-700);
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	/* The bottom matches the 1rem (mb-3) between the line and the title */
	padding: 0.5rem 0 0.875rem;
}

.on1pg-action-item {
	align-items: center;
	background: none;
	border: none;
	color: var(--text-300);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9rem;
	gap: 0.35rem;
	padding: 0;
	text-decoration: none;
}

.on1pg-action-item:hover {
	color: var(--text-50);
}

.on1pg-action-item i {
	font-size: 1.05rem;
}

.on1pg-like-btn.active,
.on1pg-like-btn.active i {
	color: var(--red-500);
}

.on1pg-action-text {
	font-size: 0.8rem;
}

.on1pg-critique-badge {
	cursor: default;
}

.on1pg-critique-btn.active {
	color: var(--link-alt);
	pointer-events: none;
}

/* Share is hidden per Patrick - CSS only, so the button and its handler stay
   in place and it can come back by deleting this rule. */
.on1pg-share-btn {
	display: none;
}

.on1pg-more-menu {
	margin-left: auto;
	position: relative;
}

.on1pg-more-dropdown {
	background: var(--bg-800);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	display: none;
	margin-top: 0.35rem;
	min-width: 180px;
	padding: 0.35rem;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 4;
}

.on1pg-more-dropdown.open {
	display: block;
}

.on1pg-more-dropdown .on1pg-flag-btn {
	background: none;
	border: none;
	border-radius: var(--border-radius);
	color: var(--red-500);
	cursor: pointer;
	display: block;
	font-size: 0.85rem;
	padding: 0.4rem 0.5rem;
	text-align: left;
	width: 100%;
}

.on1pg-more-dropdown .on1pg-flag-btn:hover {
	background: var(--bg-700);
}

.on1pg-more-dropdown .on1pg-flag-btn[disabled] {
	cursor: default;
	opacity: 0.6;
}

/* !- Single photo: details
   Title, tags, the story, and one card holding the editing notes and EXIF -
   Patrick: three separately-headed sections felt "very disjointed." */
.on1pg-details .photo-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.on1pg-details .post-tag {
	background: var(--blue-transparent);
	border-radius: 999px;
	color: var(--link-alt);
	display: inline-block;
	font-size: 0.8rem;
	padding: 0.15rem 0.6rem;
	text-decoration: none;
}

/* Long stories collapse to 4 lines with a "Read more" toggle; the JS hides
   the toggle when nothing is actually cut off. */
.on1pg-clamp {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	display: -webkit-box;
	overflow: hidden;
}

.on1pg-clamp.expanded {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

.on1pg-read-more-toggle {
	background: none;
	border: none;
	color: var(--text-500);
	cursor: pointer;
	display: block;
	font-size: 0.8rem;
	margin: 0.25rem 0 1rem;
	padding: 0;
	text-decoration: underline;
}

.on1pg-meta-card {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
}

.on1pg-meta-notes {
	line-height: 1.5;
	margin: 0 0 0.85rem;
}

/* A small eyebrow over the editing notes rather than a heading, so the card
   reads as one card, not a new section */
.on1pg-meta-label {
	color: var(--text-500);
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}

/* One wrapping line of EXIF. Copyright isn't repeated - it's the "Photo by"
   line right under the photo. */
.on1pg-exif-strip {
	align-items: center;
	color: var(--text-300);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 0 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.on1pg-meta-notes + .on1pg-exif-strip {
	border-top: 1px solid var(--bg-700);
	padding-top: 0.85rem;
}

.on1pg-exif-strip li {
	align-items: center;
	display: flex;
	gap: 0.4rem;
	white-space: nowrap;
}

.on1pg-exif-strip i {
	color: var(--text-500);
}

/* !- Single photo: comments
   prose.css styles the thread. The legacy gallery sheet used to give it its
   top margin; this carries that over. */
#on1pg-comments-wrap .post-comments {
	margin-top: 2rem;
}

/* The flag/report control on each comment. Same
   visual language as the photo's Flag / Report, so reporting a comment reads
   as the same kind of action. */
.on1pg-comment-flag-row {
	margin: 0.35rem 0 0;
}

.on1pg-comment-flag-btn {
	background: none;
	border: none;
	color: var(--red-500);
	cursor: pointer;
	font-size: var(--text-mini);
	padding: 0;
	text-decoration: underline;
}

.on1pg-comment-flag-btn[disabled] {
	cursor: default;
	opacity: 0.6;
}

.on1pg-comment-flagged-note {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin: 0.35rem 0 0;
}

/* !- Single photo: "More by"
   Square tiles on a plain 4-column grid, with the same rounded corners and
   hover as the masonry tiles. */
#related-posts {
	padding-top: 5rem;
}

#related-posts .gallery-image a {
	border-radius: var(--border-radius);
	display: block;
	overflow: hidden;
}

#related-posts .gallery-image img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 0.2s ease;
	width: 100%;
}

#related-posts .gallery-image a:hover img {
	transform: scale(1.02);
}

/* !- Gallery search */
#gallery-search .form-control {
	font-size: var(--text-sm);
}

/* !- Upload page
   WPForms form 2158566 in the page content. WPForms' own styling is off on
   this site, so everything the form shows is styled here. Fields are hooked by
   the on1pg-* classes set on them in the form builder; the tag picker, the
   Photo Details group and the submit note are added by
   plus-community-gallery-upload.js. The mockup's greens (selected tags, the
   critique checkbox) are the site's blue here - green has no text token that
   holds up in light theme. */
.upload-card {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	padding: 2.75rem;
}

@media (max-width: 575.98px) {
	.upload-card {
		padding: 1.75rem 1.375rem;
	}
}

.upload-card h1 {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: 1.75rem;
}

.upload-requirements {
	background: var(--blue-transparent);
	border: 1px solid color-mix(in srgb, var(--blue-500) 30%, transparent);
	border-radius: var(--border-radius);
	margin-bottom: 2.25rem;
	padding: 1.625rem 1.875rem;
}

.upload-requirements h2 {
	font-size: var(--text-base);
	margin-bottom: 0.875rem;
}

.upload-requirements ul {
	color: var(--text-200);
	font-size: var(--text-sm);
	line-height: 1.9;
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.upload-requirements a {
	font-size: var(--text-xs);
	font-weight: 600;
}

/* The honeypot has to stay out of sight, or people fill it in and WPForms
   drops their submission as spam */
#gallery-form .wpforms-field-hp {
	display: none !important;
}

#gallery-form .wpforms-label-hide {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

#gallery-form .wpforms-field {
	margin-bottom: 2rem;
	padding: 0;
}

#gallery-form .wpforms-field-label {
	color: var(--text-100);
	display: block;
	font-size: var(--text-xs);
	font-weight: 700;
	margin-bottom: 0.625rem;
}

#gallery-form .wpforms-required-label {
	color: var(--red-500);
	margin-left: 2px;
}

#gallery-form input[type="text"],
#gallery-form textarea {
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-family: inherit;
	font-size: var(--text-sm);
	padding: 0.875rem 1rem;
	transition: border-color 0.15s ease;
	width: 100%;
}

#gallery-form textarea {
	line-height: 1.6;
	min-height: 110px;
	resize: vertical;
}

#gallery-form input[type="text"]:focus,
#gallery-form textarea:focus {
	border-color: var(--blue-500);
	outline: none;
}

#gallery-form input::placeholder,
#gallery-form textarea::placeholder {
	color: var(--text-500);
}

#gallery-form .wpforms-field-limit-text {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin-top: 0.5rem;
	text-align: right;
}

#gallery-form .wpforms-field-description {
	color: var(--text-400);
	font-size: var(--text-mini);
	line-height: 1.5;
}

#gallery-form label.wpforms-error,
#gallery-form em.wpforms-error {
	color: var(--red-500);
	display: block;
	font-size: var(--text-mini);
	font-style: normal;
	font-weight: 600;
	margin-top: 0.375rem;
}

#gallery-form input.wpforms-error,
#gallery-form textarea.wpforms-error {
	border-color: var(--red-500);
}

/* Tags */
#gallery-form .on1pg-tags .wpforms-field-label {
	align-items: baseline;
	display: flex;
}

#gallery-form .on1pg-tags .wpforms-field-label .on1pg-tag-count {
	margin-left: auto;
	padding-left: 0.75rem;
}

.on1pg-tag-count {
	color: var(--text-500);
	font-size: var(--text-mini);
	font-weight: 600;
	white-space: nowrap;
}

.on1pg-tag-count.at-limit {
	color: var(--link-alt);
}

.on1pg-selected-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.125rem;
}

.on1pg-selected-tags:empty {
	margin-bottom: 0;
}

.on1pg-selected-pill {
	align-items: center;
	background: var(--blue-transparent);
	border: 1px solid var(--blue-500);
	border-radius: 999px;
	color: var(--link-alt);
	display: inline-flex;
	font-size: var(--text-xs);
	font-weight: 600;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem 0.375rem 0.875rem;
}

.on1pg-selected-pill button {
	background: none;
	border: none;
	color: inherit;
	line-height: 1;
	padding: 0;
}

.on1pg-add-tags {
	align-items: center;
	background: var(--bg-900);
	border: 1.5px dashed var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: inline-flex;
	font-size: var(--text-xs);
	font-weight: 600;
	gap: 0.5rem;
	padding: 0.75rem 1.125rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.on1pg-add-tags:hover {
	border-color: var(--blue-500);
	color: var(--link-alt);
}

.on1pg-tag-note {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin-top: 0.625rem;
}

/* The Add Tags modal - the site's Bootstrap modal (see partials/image-modal.php) */
.on1pg-tag-modal .modal-content {
	border: 1px solid var(--bg-700);
	color: var(--text-300);
}

.on1pg-tag-modal .modal-header {
	border-bottom: 1px solid var(--bg-700);
	display: block;
	padding: 1.25rem 1.5rem;
}

.on1pg-tag-modal-title {
	align-items: center;
	display: flex;
	font-size: var(--text-base);
	gap: 0.625rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.on1pg-tag-search-wrap {
	position: relative;
}

.on1pg-tag-search-wrap i {
	color: var(--text-500);
	left: 0.875rem;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.on1pg-tag-modal .on1pg-tag-search {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	color: var(--text-100);
	font-size: var(--text-sm);
	padding: 0.75rem 1rem 0.75rem 2.5rem;
}

.on1pg-tag-modal .on1pg-tag-search:focus {
	border-color: var(--blue-500);
	box-shadow: none;
}

.on1pg-tag-modal .on1pg-tag-search::placeholder {
	color: var(--text-500);
}

.on1pg-tag-modal .modal-body {
	padding: 1.125rem 1.5rem 1.5rem;
}

.on1pg-tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.on1pg-tag-pill {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: 999px;
	color: var(--text-300);
	font-size: var(--text-xs);
	padding: 0.5rem 0.875rem;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.on1pg-tag-pill:hover {
	border-color: var(--blue-500);
	color: var(--text-100);
}

.on1pg-tag-pill.selected {
	background: var(--blue-transparent);
	border-color: var(--blue-500);
	color: var(--link-alt);
	font-weight: 600;
}

.on1pg-tag-pill[disabled] {
	cursor: not-allowed;
	opacity: 0.4;
}

.on1pg-tag-pill[disabled]:hover {
	border-color: var(--bg-700);
	color: var(--text-300);
}

.on1pg-tag-no-results {
	color: var(--text-500);
	font-size: var(--text-xs);
	padding: 0.5rem 0;
}

.on1pg-tag-modal .modal-footer {
	border-top: 1px solid var(--bg-700);
	padding: 1rem 1.5rem;
}

.on1pg-tag-modal .modal-footer .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* Photo Details - Describe and Tools as two sub-boxes of one box */
.on1pg-photo-details {
	margin-bottom: 2rem;
}

.on1pg-photo-details-label {
	color: var(--text-100);
	font-size: var(--text-xs);
	font-weight: 700;
	margin-bottom: 0.625rem;
}

.on1pg-photo-details-box {
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	overflow: hidden;
}

#gallery-form .on1pg-photo-details-box .wpforms-field {
	margin: 0;
	padding: 1rem 1rem 0.875rem;
}

#gallery-form .on1pg-photo-details-box .wpforms-field + .wpforms-field {
	border-top: 1px solid var(--bg-700);
}

#gallery-form .on1pg-photo-details-box .wpforms-field-label {
	color: var(--text-500);
	font-size: var(--text-micro);
	letter-spacing: 0.06em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

#gallery-form .on1pg-photo-details-box textarea {
	background: transparent;
	border: none;
	border-radius: 0;
	min-height: 80px;
	padding: 0;
}

/* Critique opt-in */
#gallery-form .on1pg-critique {
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1rem 1.125rem;
}

#gallery-form .on1pg-critique ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#gallery-form .on1pg-critique li {
	align-items: flex-start;
	display: flex;
	gap: 0.75rem;
}

#gallery-form .on1pg-critique input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background: var(--bg-850);
	border: 1.5px solid var(--bg-600);
	/* The site radius on a 16px box reads as a circle */
	border-radius: calc(var(--border-radius) / 2);
	cursor: pointer;
	flex: 0 0 1rem;
	height: 1rem;
	margin: 0.3rem 0 0;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease;
	width: 1rem;
}

#gallery-form .on1pg-critique input[type="checkbox"]:hover {
	border-color: var(--blue-500);
}

#gallery-form .on1pg-critique input[type="checkbox"]:checked {
	background: var(--blue-500);
	border-color: var(--blue-500);
}

#gallery-form .on1pg-critique input[type="checkbox"]:checked::after {
	color: var(--white);
	content: '\f00c';
	font-family: var(--fa-family-classic);
	font-size: var(--text-tiny);
	font-weight: 900;
	inset: 0;
	line-height: 0.8125rem;
	position: absolute;
	text-align: center;
}

#gallery-form .on1pg-critique .wpforms-field-label-inline {
	color: var(--text-100);
	cursor: pointer;
	font-size: var(--text-base);
	font-weight: 600;
}

#gallery-form .on1pg-critique .wpforms-field-label-inline i {
	color: var(--link-alt);
	margin-right: 0.25rem;
}

#gallery-form .on1pg-critique .wpforms-field-description {
	font-size: var(--text-sm);
	margin: 0.25rem 0 0 1.75rem;
}

/* File upload - a compact single-row dropzone */
#gallery-form .on1pg-upload .wpforms-uploader {
	align-items: center;
	background: var(--bg-900);
	border: 2px dashed var(--bg-700);
	border-radius: var(--border-radius);
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1.25rem 1.5rem;
	transition: background 0.15s ease, border-color 0.15s ease;
}

#gallery-form .on1pg-upload .wpforms-uploader:hover,
#gallery-form .on1pg-upload .wpforms-uploader.dz-drag-hover {
	background: var(--blue-transparent);
	border-color: var(--blue-500);
}

#gallery-form .on1pg-upload .dz-message {
	align-items: center;
	color: var(--text-300);
	display: flex;
	flex-direction: row;
	font-size: var(--text-sm);
	gap: 0.75rem;
	margin: 0;
}

#gallery-form .on1pg-upload .dz-message svg {
	color: var(--blue-500);
	flex: none;
	height: 1.375rem;
	width: 1.375rem;
}

#gallery-form .on1pg-upload .modern-title span {
	color: var(--link);
	font-weight: 600;
	text-decoration: underline;
}

/* Submit */
#gallery-form .wpforms-submit-container {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 0.5rem;
}

#gallery-form .wpforms-submit {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

.on1pg-submit-note {
	color: var(--text-500);
	font-size: var(--text-mini);
}

/* After submitting - the confirmation is plain copy in the card, no box,
   with the form's {post_submission_link} button and a way back to the
   gallery. The upload heading and the requirements are no use once the
   photo is up. */
.upload-card:has(.wpforms-confirmation-container) > h1,
.upload-card:has(.wpforms-confirmation-container) .upload-requirements {
	display: none;
}

#gallery-form .wpforms-confirmation-container {
	color: var(--text-300);
}

/* Takes the place of the card's "Upload a Photo" heading, so it matches it */
#gallery-form .wpforms-confirmation-container h2 {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

#gallery-form .wpforms-confirmation-container p {
	margin-bottom: 1.5rem;
}

#gallery-form .wpforms-confirmation-container p:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0;
}

#gallery-form .wpforms-confirmation-container .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}