/**
 * ON1 Plus Forums
 *
 * Every bbPress screen, all routed through bbpress.php: the ON1 Plus gate, the
 * forum index, a single forum, a topic, the Latest / Unanswered / New Topic
 * views, search, topic tags, and member profiles. Rebuilt on base.css tokens
 * for 2027, per the Oct 9, 2026 handoff - it replaces legacy/forums.css and
 * bbPress's own bbpress.min.css, which on1_forums_scripts() dequeues.
 *
 * The page is the dark base and the cards and side panels are the lifted
 * --bg-800, which goes white on the light theme the way the Photo RAW
 * Project's do. Post bodies are .post-prose (prose.css); only what a post
 * needs on top of that is here.
 *
 * @copyright   2026, ON1
 */

/* !- Gate */
#forums-gate {
	padding: 3rem 0 5rem;
}

#forums-gate .plus-gate {
	margin-top: 0;
}

/* !- Header band
 *
 * Breadcrumb, the Plus Forums mark, search, and the tabs. Same on every
 * member screen.
 */
#forums-head {
	border-bottom: 1px solid var(--bg-700);
}

/*
 * Breadcrumb to brand and brand to tab text are both 1.25rem - the bottom
 * padding here, the tabs' own 0.75rem top padding, and the few pixels of
 * leading above the tab text.
 */
#forums-head .forums-head-top {
	padding: 1.75rem 0 0.3125rem;
}

.forums-crumbs {
	color: var(--text-400);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-mini);
	gap: 0.375rem;
	margin-bottom: 1.25rem;
}

.forums-crumbs a {
	color: var(--text-300);
	text-decoration: none;
}

.forums-crumbs a:hover {
	color: var(--link-alt);
	text-decoration: underline;
}

/* The whole mark + title block links to the forum index */
.forums-brand {
	align-items: center;
	display: inline-flex;
	gap: 0.875rem;
	text-decoration: none;
}

/* The ON1 Plus app icon, same as the ON1 Plus item in the site nav */
.forums-mark {
	flex: none;
	height: 2.5rem;
	width: 2.5rem;
}

.forums-brand-title {
	color: var(--text-50);
	display: block;
	font-size: var(--text-base);
	font-weight: 800;
	line-height: 1.25;
}

.forums-brand-sub {
	color: var(--text-400);
	display: block;
	font-size: var(--text-mini);
	line-height: 1.4;
	margin-top: 0.25rem;
}

.forums-search {
	position: relative;
}

.forums-search .forums-search-icon {
	color: var(--text-400);
	font-size: var(--text-sm);
	left: 0.875rem;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.forums-search .form-control {
	font-size: var(--text-sm);
	height: 2.75rem;
	padding-left: 2.5rem;
}

.forums-search .form-control:focus {
	border-color: var(--blue-500);
	box-shadow: 0 0 0 3px var(--blue-transparent);
}

@media (min-width: 768px) {
	.forums-search {
		width: 22rem;
	}
}

/*
 * Scrolls sideways on a phone rather than wrapping. Pulled left by a tab's
 * own side padding so the first tab's text lines up with the breadcrumb and
 * the mark above it.
 */
.forums-tabs {
	align-items: center;
	display: flex;
	gap: 0.25rem;
	margin-left: -0.875rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.forums-tabs::-webkit-scrollbar {
	display: none;
}

.forums-tabs > a:not(.btn) {
	border-bottom: 2px solid transparent;
	color: var(--text-300);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.75rem 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}

.forums-tabs > a:not(.btn):hover {
	color: var(--text-50);
}

.forums-tabs > a.active {
	border-bottom-color: var(--blue-500);
	color: var(--text-50);
}

.forums-tabs .count {
	background: var(--bg-700);
	border-radius: 1rem;
	color: var(--text-300);
	font-size: var(--text-micro);
	font-weight: 700;
	margin-left: 0.375rem;
	padding: 0.0625rem 0.4375rem;
}

/* !- Layout */
#forums-body {
	padding: 2.25rem 0 5rem;
}

#forums-body .btn:not(.btn-sm) {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

#forums-body .btn-sm {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
	padding: 0.4375rem 0.875rem;
}

/* The neutral button - Follow, Save, Copy link, See all */
.forum-btn {
	background: var(--bg-700);
	border: 1px solid var(--bg-700);
	color: var(--text-100);
}

.forum-btn:hover,
.forum-btn:focus-visible {
	background: var(--bg-600);
	border-color: var(--bg-600);
	color: var(--text-50);
}

.forum-btn[aria-pressed="true"] {
	background: var(--blue-transparent);
	border-color: transparent;
	color: var(--blue-300);
}

[data-theme="light"] .forum-btn[aria-pressed="true"] {
	color: var(--blue-800);
}

.forum-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	overflow: hidden;
}

[data-theme="light"] .forum-card,
[data-theme="light"] .forum-tile,
[data-theme="light"] .side-panel {
	background-color: var(--white);
}

.forums-section {
	margin-top: 3rem;
}

.forums-section-head {
	margin-bottom: 1rem;
}

.forums-section-head h1 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
}

.forums-section-head h2 {
	color: var(--text-50);
	font-size: var(--text-xl);
	font-weight: 800;
	margin: 0;
}

.forums-section-head p {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin: 0.25rem 0 0;
}

.forums-home-head p {
	font-size: var(--text-base);
}

/* The forum cards follow the intro directly, with no heading of their own */
.forums-home-head + .forums-section {
	margin-top: 2rem;
}

.side-link {
	align-items: center;
	color: var(--link-alt);
	display: inline-flex;
	font-size: var(--text-sm);
	font-weight: 600;
	gap: 0.375rem;
	text-decoration: none;
	white-space: nowrap;
}

.side-link:hover {
	text-decoration: underline;
}

/* A post on a phone gets 16px from the screen edge and the button
   bottom-right. Pulled up off the footer's guarantee strip by the padding
   on #forums-body. */
.forums-fab {
	border-radius: 2rem;
	bottom: 1rem;
	box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.35);
	display: none;
	position: fixed;
	right: 1rem;
	z-index: 1020;
}

@media (max-width: 991.98px) {
	.forums-fab {
		align-items: center;
		display: inline-flex;
		gap: 0.5rem;
	}
}

/* !- Avatars
 *
 * A photo, or initials on one of seven *-800 steps - white clears 5:1 on every
 * one of them in both themes, so they don't flip. The color is picked from the
 * user ID so a member is the same color everywhere.
 */
.forum-avatar {
	--avatar-size: 2.5rem;
	align-items: center;
	border-radius: 50%;
	color: var(--white);
	display: inline-flex;
	flex: none;
	font-size: calc(var(--avatar-size) * 0.38);
	font-weight: 700;
	height: var(--avatar-size);
	justify-content: center;
	letter-spacing: 0.02em;
	line-height: 1;
	object-fit: cover;
	width: var(--avatar-size);
}

.forum-avatar-xs {
	--avatar-size: 1.375rem;
	font-size: 0.5625rem;
}

.forum-avatar-sm {
	--avatar-size: 1.75rem;
}

.forum-avatar-lg {
	--avatar-size: 4rem;
}

.forum-avatar-xl {
	--avatar-size: 7rem;
}

.avatar-color-1 {
	background: var(--blue-800);
}

.avatar-color-2 {
	background: var(--legacy-purple-800);
}

.avatar-color-3 {
	background: var(--green-800);
}

.avatar-color-4 {
	background: var(--orange-800);
}

.avatar-color-5 {
	background: var(--teal-800);
}

.avatar-color-6 {
	background: var(--magenta-800);
}

.avatar-color-7 {
	background: var(--red-800);
}

/* !- Forum cards (the index) */
.forum-tile {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.375rem 1.375rem 1.125rem;
	position: relative;
}

.forum-tile:hover {
	background: var(--bg-700);
}

[data-theme="light"] .forum-tile:hover {
	background-color: var(--bg-950);
}

.forum-tile-top {
	align-items: flex-start;
	display: flex;
	gap: 0.875rem;
	margin-bottom: 0.75rem;
}

.forum-tile-icon {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--link-alt);
	display: flex;
	flex: none;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.forum-tile-icon-lg {
	font-size: var(--text-xl);
	height: 3.25rem;
	width: 3.25rem;
}

/* A step under a forum page's own title (.forum-head h1, --text-3xl) */
.forum-tile h3 {
	font-size: var(--text-2xl);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
}

/* base.css sets every link to 500, which would beat the heading's weight */
.forum-tile h3 a {
	color: var(--text-50);
	font-weight: inherit;
	text-decoration: none;
}

/* The whole card is the link; the sub-forum chips sit above it */
.forum-tile h3 a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.forum-tile h3 a:hover {
	color: var(--link-alt);
}

.forum-tile-desc {
	color: var(--text-300);
	font-size: var(--text-xs);
	line-height: 1.55;
	margin: 0.25rem 0 0;
}

.forum-tile-stats {
	color: var(--text-400);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-mini);
	gap: 0.25rem 1rem;
	margin: 0 0 0.75rem;
}

.forum-tile-stats strong {
	color: var(--text-50);
}

.forum-tile-subs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 0.875rem;
	position: relative;
	z-index: 1;
}

.forum-tile-subs a {
	background: var(--bg-700);
	border-radius: 1.25rem;
	color: var(--text-300);
	font-size: var(--text-mini);
	padding: 0.25rem 0.625rem;
	text-decoration: none;
}

.forum-tile-subs a:hover {
	color: var(--link-alt);
}

/* A hovered card turns --bg-700, the chips' own color - step them up so they
   don't disappear into it */
.forum-tile:hover .forum-tile-subs a {
	background: var(--bg-600);
}

.forum-tile-last {
	align-items: center;
	border-top: 1px solid var(--bg-700);
	color: var(--text-400);
	display: flex;
	font-size: var(--text-mini);
	gap: 0.5rem;
	margin: auto 0 0;
	padding-top: 0.75rem;
}

.forum-tile-last strong {
	color: var(--text-300);
	font-weight: 600;
}

/* !- Sub-forum grid
 *
 * On a main forum and each of its sub-forums: All topics, then every
 * sub-forum. Three across from 1200px, two below. The current one is
 * outlined in #086BD4 with the blue tint.
 */
.subforum-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 0 1px var(--bg-700);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	min-height: 5.25rem;
	padding: 0.875rem 1rem;
	text-decoration: none;
}

[data-theme="light"] .subforum-card {
	background: var(--white);
}

.subforum-card:hover {
	box-shadow: inset 0 0 0 1px var(--text-400);
}

.subforum-card[aria-current="page"] {
	background: var(--blue-transparent);
	box-shadow: inset 0 0 0 2px var(--blue-600);
}

.subforum-card-name {
	color: var(--text-50);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.3;
}

.subforum-card-all .subforum-card-name {
	color: var(--link-alt);
}

.subforum-card-counts {
	color: var(--text-300);
	font-size: var(--text-mini);
}

.subforum-card-last {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-top: auto;
}

/* "← Using ON1 Apps" above a sub-forum's title */
.forum-parent-link {
	align-items: center;
	color: var(--link-alt);
	display: inline-flex;
	font-size: var(--text-xs);
	font-weight: 600;
	gap: 0.375rem;
	margin-bottom: 0.5rem;
	text-decoration: none;
}

.forum-parent-link:hover {
	text-decoration: underline;
}

/* A topic row's sub-forum, on a main forum's All topics list. Above the row's
   full-row title link, like the other links in the meta line. */
#bbpress-forums .topic-meta .topic-subforum-tag {
	background: var(--blue-transparent);
	border-radius: 0.25rem;
	color: var(--blue-300);
	font-size: var(--text-micro);
	font-weight: 700;
	padding: 0.0625rem 0.4375rem;
	position: relative;
	text-decoration: none;
	z-index: 1;
}

[data-theme="light"] #bbpress-forums .topic-meta .topic-subforum-tag {
	color: var(--blue-800);
}

#bbpress-forums .topic-meta .topic-subforum-tag:hover {
	text-decoration: underline;
}

/* !- Single forum header */
.forum-head {
	padding: 1.625rem 1.75rem;
}

.forum-head h1 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
}

.forum-head-desc {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin: 0.375rem 0 0;
}

.forum-head .forum-tile-stats {
	margin: 0.875rem 0 0;
}

.forum-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.forum-sort {
	align-items: center;
	color: var(--text-300);
	display: flex;
	font-size: var(--text-xs);
	gap: 0.625rem;
}

.forum-sort .form-select {
	width: 11.5rem;
}

/* !- Topic list
 *
 * Bootstrap rows. The title link's ::after covers the row so the row is the
 * click target; the author and forum links sit above it with z-index.
 */
.topic-list-head,
.topic-row {
	margin: 0;
	padding: 1rem 0.625rem;
}

.topic-list-head {
	border-bottom: 1px solid var(--bg-700);
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
	text-transform: uppercase;
}

.topic-row {
	border-bottom: 1px solid var(--bg-700);
	position: relative;
}

.topic-row:last-child {
	border-bottom: 0;
}

.topic-row:hover {
	background: var(--bg-850);
}

[data-theme="light"] .topic-row:hover {
	background: var(--bg-950);
}

.topic-count {
	color: var(--text-50);
	font-size: var(--text-sm);
	font-weight: 600;
	text-align: center;
	width: 5.5rem;
}

.topic-list-head .topic-count,
.topic-list-head .topic-last {
	color: var(--text-400);
	font-size: var(--text-micro);
}

.topic-last {
	align-items: center;
	color: var(--text-300);
	font-size: var(--text-mini);
	gap: 0.625rem;
	line-height: 1.4;
	width: 12rem;
}

.topic-last strong {
	color: var(--text-50);
	display: block;
	font-weight: 600;
}

@media (max-width: 1199.98px) {
	.topic-count {
		width: 4.5rem;
	}

	.topic-last {
		width: 10.5rem;
	}
}

.topic-main {
	align-items: flex-start;
	display: flex;
	gap: 0.875rem;
	min-width: 0;
}

.topic-text {
	min-width: 0;
}

.topic-title {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.topic-title::after {
	content: "";
	inset: 0;
	position: absolute;
}

.topic-title:hover {
	color: var(--link-alt);
}

.topic-meta {
	color: var(--text-400);
	font-size: var(--text-mini);
	line-height: 1.5;
	margin: 0.25rem 0 0;
}

.topic-meta a {
	color: var(--text-300);
	position: relative;
	text-decoration: none;
	z-index: 1;
}

.topic-meta a:hover {
	color: var(--link-alt);
}

.topic-mobile {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0.375rem 0 0;
}

.unread-dot {
	background: var(--blue-500);
	border-radius: 50%;
	display: inline-block;
	height: 0.5rem;
	margin-right: 0.5rem;
	vertical-align: 0.125rem;
	width: 0.5rem;
}

.topic-pill {
	align-items: center;
	border-radius: 1.25rem;
	display: inline-flex;
	font-size: var(--text-micro);
	font-weight: 700;
	gap: 0.3125rem;
	margin-left: 0.5rem;
	padding: 0.125rem 0.5625rem;
	vertical-align: 0.125rem;
	white-space: nowrap;
}

.pill-pinned {
	background: var(--blue-transparent);
	color: var(--blue-300);
}

[data-theme="light"] .pill-pinned {
	color: var(--blue-800);
}

.pill-closed {
	background: var(--bg-700);
	color: var(--text-300);
}

/* gd-bbpress-attachments' sprite paperclip before a title - the plugin's
   rule is ID-scoped, so this one is too */
#bbpress-forums .topic-text .bbp-attachments-count {
	display: none;
}

/* !- Pagination */
.forum-pager {
	align-items: center;
	border-top: 1px solid var(--bg-700);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	padding: 1rem 1.375rem;
}

.forum-pager-count {
	color: var(--text-400);
	font-size: var(--text-xs);
	margin: 0;
}

.forum-pager-links {
	display: flex;
	gap: 0.25rem;
}

.forum-pager-links .page-numbers {
	align-items: center;
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: inline-flex;
	font-size: var(--text-xs);
	font-weight: 600;
	height: 2.125rem;
	justify-content: center;
	min-width: 2.125rem;
	padding: 0 0.5rem;
	text-decoration: none;
}

.forum-pager-links a.page-numbers:hover {
	background: var(--bg-700);
	color: var(--text-50);
}

.forum-pager-links .page-numbers.current {
	background: var(--blue-500);
	color: var(--white);
}

/* Same as the gallery and the blog - the deeper step so white clears AA */
[data-theme="light"] .forum-pager-links .page-numbers.current {
	background: var(--blue-600);
}

@media (max-width: 519.98px) {
	.forum-pager-links .page-numbers:not(.current):not(.next) {
		display: none;
	}
}

/* !- Sidebar */
.forums-side .side-panel + .side-panel {
	margin-top: 1.25rem;
}

@media (min-width: 992px) {
	.forums-side-sticky {
		position: sticky;
		top: calc(var(--forums-offset, 5rem) + 1.5rem);
	}
}

.side-panel {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	padding: 1.375rem;
}

.side-panel h2 {
	color: var(--text-400);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.875rem;
	text-transform: uppercase;
}

.side-panel p {
	color: var(--text-300);
	font-size: var(--text-xs);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.side-list {
	margin: 0;
}

.side-list li {
	align-items: flex-start;
	border-top: 1px solid var(--bg-700);
	color: var(--text-300);
	display: flex;
	font-size: var(--text-xs);
	gap: 0.625rem;
	line-height: 1.5;
	padding: 0.5rem 0;
}

.side-list li:first-child {
	border-top: 0;
	padding-top: 0;
}

.side-list a {
	color: var(--text-50);
	font-weight: 600;
	text-decoration: none;
}

.side-list a:hover {
	color: var(--link-alt);
}

.side-list li > .fa-solid {
	color: var(--link-alt);
	margin-top: 0.25rem;
	width: 1rem;
}

.side-list strong {
	color: var(--text-50);
}

.side-list .side-meta {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0;
}

.side-panel .side-list + .side-link {
	margin-top: 0.75rem;
}

.side-tips {
	margin-top: 1.125rem;
}

.topic-stats {
	margin: 0;
}

.topic-stats li {
	border-top: 1px solid var(--bg-700);
	color: var(--text-300);
	display: flex;
	font-size: var(--text-xs);
	justify-content: space-between;
	padding: 0.5rem 0;
}

.topic-stats li:first-child {
	border-top: 0;
	padding-top: 0;
}

.topic-stats strong {
	color: var(--text-50);
}

.topic-voices {
	display: flex;
	margin-top: 0.875rem;
}

.topic-voices .forum-avatar {
	box-shadow: 0 0 0 2px var(--bg-800);
	margin-right: -0.375rem;
}

[data-theme="light"] .topic-voices .forum-avatar {
	box-shadow: 0 0 0 2px var(--white);
}

/* !- Topic header */
.topic-head {
	padding: 1.75rem 1.875rem;
}

.topic-head h1 {
	color: var(--text-50);
	font-size: var(--text-4xl);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0.75rem 0 0.875rem;
	overflow-wrap: anywhere;
}

.forum-chip {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: 1.25rem;
	color: var(--blue-300);
	display: inline-flex;
	font-size: var(--text-mini);
	font-weight: 700;
	gap: 0.375rem;
	padding: 0.25rem 0.6875rem;
	text-decoration: none;
}

[data-theme="light"] .forum-chip {
	color: var(--blue-800);
}

.topic-head-meta {
	align-items: center;
	color: var(--text-400);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-xs);
	gap: 0.5rem 1.125rem;
	margin: 0;
}

.topic-head-meta > span {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

.topic-head-meta strong {
	color: var(--text-50);
	font-weight: 600;
}

.topic-tags {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0.75rem 0 0;
}

.topic-tags a {
	color: var(--text-300);
}

.topic-closed-note {
	color: var(--text-300);
	font-size: var(--text-xs);
	margin: 1rem 0 0;
}

.topic-head-actions {
	border-top: 1px solid var(--bg-700);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

/* !- Posts */
.topic-posts-card {
	margin-top: 1.25rem;
}

.topic-posts,
.topic-posts .bbp-replies-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Between posts only - not the lists inside one (its text, the ... menu) */
.topic-posts > li + li,
.topic-posts .bbp-threaded-replies > li {
	border-top: 1px solid var(--bg-700);
}

/* Threaded answers step in under the post they answer */
.topic-posts .bbp-threaded-replies {
	border-top: 1px solid var(--bg-700);
	list-style: none;
	margin: 0 0 0 3.5rem;
	padding: 0;
}

@media (max-width: 767.98px) {
	.topic-posts .bbp-threaded-replies {
		margin-left: 1.25rem;
	}
}

.topic-post {
	display: flex;
	gap: 1.125rem;
	padding: 1.625rem 1.875rem;
	scroll-margin-top: calc(var(--forums-offset, 5rem) + 1rem);
}

/* The topic's own post gets a blue bar down its left edge */
.topic-post.is-lead {
	box-shadow: inset 3px 0 0 var(--blue-transparent);
}

.post-main {
	flex: 1;
	min-width: 0;
}

.post-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.post-name {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	text-decoration: none;
}

.post-name:hover {
	color: var(--link-alt);
}

.post-tag {
	background: var(--blue-transparent);
	border-radius: 0.25rem;
	color: var(--blue-300);
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-left: 0.5rem;
	padding: 0.125rem 0.4375rem;
	text-transform: uppercase;
	vertical-align: 0.0625rem;
}

[data-theme="light"] .post-tag {
	color: var(--blue-800);
}

.post-role {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-left: 0.5rem;
}

.post-time {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0;
}

.post-time a {
	color: inherit;
	text-decoration: none;
}

.post-time a:hover {
	color: var(--link-alt);
}

.post-body {
	color: var(--text-100);
	max-width: 72ch;
	overflow-wrap: anywhere;
}

.post-body p {
	margin-bottom: 0.75rem;
}

/* gd-bbpress-tools quotes */
.post-body blockquote {
	border-left-color: var(--bg-600);
	color: var(--text-300);
	font-size: var(--text-sm);
	margin: 1rem 0;
}

.post-body .d4p-bbt-quote-title {
	border-bottom: 0;
	color: var(--text-50);
	font-size: var(--text-xs);
}

.post-body pre,
.post-body code {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-xs);
}

[data-theme="light"] .post-body pre,
[data-theme="light"] .post-body code {
	background: var(--bg-800);
}

.post-body pre {
	padding: 0.75rem 1rem;
	white-space: pre-wrap;
}

/* gd-bbpress-attachments' list under a post */
.post-body .bbp-attachments {
	border-top: 1px solid var(--bg-700);
	font-size: var(--text-xs);
}

.post-body .bbp-attachments h6 {
	color: var(--text-400);
}

.post-body .bbp-signature {
	border-top-color: var(--bg-700);
	color: var(--text-400);
	font-size: var(--text-xs);
}

.post-body .bbp-reply-revision-log,
.post-body .bbp-topic-revision-log {
	color: var(--text-400);
	font-size: var(--text-mini);
	list-style: none;
	padding: 0;
}

.post-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 1rem 0 0 -0.75rem;
}

.post-actions > a,
.post-action {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--border-radius);
	color: var(--text-400);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--text-xs);
	font-weight: 600;
	gap: 0.375rem;
	height: 2.125rem;
	padding: 0 0.75rem;
	text-decoration: none;
}

.post-actions > a:hover,
.post-action:hover,
.post-action[aria-expanded="true"] {
	background: var(--bg-700);
	color: var(--text-50);
}

.post-more {
	margin-left: auto;
}

.post-more .dropdown-menu {
	--bs-dropdown-bg: var(--bg-850);
	--bs-dropdown-border-color: var(--bg-700);
	--bs-dropdown-divider-bg: var(--bg-700);
	--bs-dropdown-link-active-bg: var(--blue-500);
	--bs-dropdown-link-color: var(--text-100);
	--bs-dropdown-link-hover-bg: var(--bg-700);
	--bs-dropdown-link-hover-color: var(--text-50);
	font-size: var(--text-xs);
}

[data-theme="light"] .post-more .dropdown-menu {
	--bs-dropdown-bg: var(--white);
}

/* bbPress's moderator links can't take a class, so they're dressed here */
.post-more .dropdown-menu li > a {
	color: var(--text-100);
	display: block;
	padding: 0.25rem 1rem;
	text-decoration: none;
}

.post-more .dropdown-menu li > a:hover,
.post-more .dropdown-menu li > a:focus-visible {
	background: var(--bg-700);
	color: var(--text-50);
}

.post-more .dropdown-item-text {
	color: var(--text-400);
}

@media (max-width: 767.98px) {
	.topic-head {
		padding: 1.375rem 1.125rem;
	}

	.topic-head h1 {
		font-size: var(--text-3xl);
	}

	.topic-post {
		gap: 0.75rem;
		padding: 1.25rem 1rem;
	}

	.topic-post .forum-avatar-lg {
		--avatar-size: 2.25rem;
	}

	.post-head {
		display: block;
		margin-bottom: 0.625rem;
	}

	.post-role {
		display: none;
	}

	.post-actions > a,
	.post-action {
		padding: 0 0.625rem;
	}
}

/* !- Compose (new topic, reply, and the reply form threaded under a post) */
.forum-compose {
	margin-top: 1.25rem;
	padding: 1.625rem 1.875rem;
	scroll-margin-top: calc(var(--forums-offset, 5rem) + 1rem);
}

.topic-posts .forum-compose {
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--bg-700);
	margin: 0;
}

.forum-compose h1,
.forum-compose h2 {
	color: var(--text-50);
	font-size: var(--text-xl);
	font-weight: 800;
	margin-bottom: 1.125rem;
}

.forum-compose h1 {
	font-size: var(--text-2xl);
	margin-bottom: 0.25rem;
}

.compose-lede {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin-bottom: 1.375rem;
}

.compose-notice {
	color: var(--text-300);
	font-size: var(--text-xs);
}

.compose-field {
	margin-bottom: 1.125rem;
}

.compose-field .form-label {
	color: var(--text-50);
	font-size: var(--text-xs);
	font-weight: 600;
	margin-bottom: 0.4375rem;
}

.compose-field .optional {
	color: var(--text-400);
	font-weight: 400;
}

/* Red, like every other required marker on the site */
.compose-field .required-field {
	color: var(--red-500);
	font-weight: 700;
}

.compose-field .form-text {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0.375rem 0 0;
}

.compose-field .form-control,
.compose-field .form-select {
	font-size: var(--text-sm);
	height: 2.875rem;
}

.forum-compose .form-control:focus,
.forum-compose .form-select:focus,
.forum-compose .wp-editor-area:focus {
	border-color: var(--blue-500);
	box-shadow: 0 0 0 3px var(--blue-transparent);
	outline: 0;
}

/* The WP editor bbPress prints - the quicktags toolbar over a textarea */
.forum-compose .wp-editor-wrap {
	background: none;
}

.forum-compose .wp-editor-container {
	border: 0;
}

.forum-compose .quicktags-toolbar {
	background: var(--bg-700);
	border: 1px solid var(--bg-600);
	border-bottom: 0;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
	padding: 0.375rem;
}

.forum-compose .quicktags-toolbar input.button {
	background: none;
	border: 0;
	border-radius: var(--border-radius);
	box-shadow: none;
	color: var(--text-100);
	font-size: var(--text-mini);
	font-weight: 600;
	height: 2rem;
	line-height: 2rem;
	margin: 0;
	min-height: 0;
	min-width: 2.125rem;
	padding: 0 0.5rem;
}

.forum-compose .quicktags-toolbar input.button:hover,
.forum-compose .quicktags-toolbar input.button:focus-visible {
	background: var(--bg-600);
	color: var(--text-50);
}

.forum-compose textarea.wp-editor-area {
	background: var(--bg-900);
	border: 1px solid var(--bg-600);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	color: var(--text-50);
	font-family: var(--sans-serif);
	font-size: var(--text-sm);
	line-height: 1.6;
	min-height: 11.25rem;
	padding: 0.875rem;
	resize: vertical;
	width: 100%;
}

.compose-check {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin-bottom: 1rem;
}

/* gd-bbpress-attachments' fieldset, printed on the submit-wrapper hook */
.forum-compose fieldset.bbp-form {
	border: 1px dashed var(--bg-600);
	border-radius: var(--border-radius);
	margin: 0 0 1rem;
	padding: 1rem;
}

.forum-compose fieldset.bbp-form legend {
	color: var(--text-50);
	float: none;
	font-size: var(--text-xs);
	font-weight: 600;
	margin-bottom: 0.25rem;
	padding: 0 0.375rem;
	width: auto;
}

.forum-compose fieldset.bbp-form .bbp-template-notice p,
.forum-compose .bbp-attachments-form label {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0 0 0.5rem;
}

.forum-compose .bbp-attachments-form {
	color: var(--text-300);
	font-size: var(--text-xs);
	margin: 0;
}

.forum-compose .bbp-attachments-form br {
	display: none;
}

.forum-compose .bbp-attachments-form input[type="file"] {
	display: block;
	margin-bottom: 0.5rem;
}

.forum-compose .bbp-attachments-form a {
	color: var(--link-alt);
	font-weight: 600;
}

.compose-foot {
	align-items: center;
	border-top: 1px solid var(--bg-700);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 1.375rem;
	padding-top: 1.125rem;
}

.compose-policy {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0;
}

.compose-policy a {
	color: var(--link-alt);
	font-weight: 600;
}

.compose-buttons {
	align-items: center;
	display: flex;
	gap: 1rem;
}

/* bbPress's Cancel link for a threaded reply */
.compose-buttons #bbp-cancel-reply-to-link {
	color: var(--text-300);
	font-size: var(--text-sm);
}

@media (max-width: 767.98px) {
	.forum-compose {
		padding: 1.25rem 1.125rem;
	}
}

/* bbPress's notices - "Oh bother!", errors after posting, the empty lists */
#bbpress-forums .bbp-template-notice,
.forum-notice {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin: 0 0 1.25rem;
}

#bbpress-forums .bbp-template-notice ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#bbpress-forums .bbp-template-notice.error {
	color: var(--red-300);
}

[data-theme="light"] #bbpress-forums .bbp-template-notice.error {
	color: var(--red-800);
}

/* !- Profile */
.profile-head {
	padding: 2rem;
}

.profile-head h1 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
}

.profile-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.625rem 0 0.75rem;
}

.profile-badge {
	background: var(--bg-700);
	border-radius: 1.25rem;
	color: var(--text-300);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.625rem;
	text-transform: uppercase;
}

/* ON1 Plus is orange */
.profile-badge.badge-plus {
	background: var(--orange-transparent);
	color: var(--orange-text);
}

.profile-bio {
	color: var(--text-300);
	font-size: var(--text-base);
	line-height: 1.6;
	margin: 0;
}

.profile-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin-top: 1.125rem;
}

.profile-stats p {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0;
}

.profile-stats strong {
	color: var(--text-50);
	display: block;
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.profile-actions {
		align-self: flex-start;
		flex-direction: column;
	}
}

.profile-tabs {
	border-bottom: 1px solid var(--bg-700);
	display: flex;
	gap: 0.25rem;
	margin: 2rem 0 1.25rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.profile-tabs [role="tab"] {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--text-300);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 0.75rem 0.875rem;
	white-space: nowrap;
}

.profile-tabs [role="tab"][aria-selected="true"] {
	border-bottom-color: var(--blue-500);
	color: var(--text-50);
}

.profile-tabs .count {
	background: var(--bg-700);
	border-radius: 1rem;
	color: var(--text-300);
	font-size: var(--text-micro);
	font-weight: 700;
	margin-left: 0.25rem;
	padding: 0.0625rem 0.4375rem;
}

.profile-replies {
	margin: 0;
}

.profile-replies li {
	border-bottom: 1px solid var(--bg-700);
	padding: 1.125rem 1.375rem;
}

.profile-replies li:last-child {
	border-bottom: 0;
}

.profile-reply-meta {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0 0 0.375rem;
}

.profile-reply-meta a {
	color: var(--text-50);
	font-weight: 700;
	text-decoration: none;
}

.profile-reply-meta a:hover {
	color: var(--link-alt);
}

.profile-replies li > p:last-child {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin: 0;
}

.profile-empty {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin: 0;
	padding: 2.5rem 1.375rem;
	text-align: center;
}

@media (max-width: 767.98px) {
	.profile-head {
		padding: 1.5rem 1.125rem;
	}

	.profile-head .forum-avatar-xl {
		--avatar-size: 5.25rem;
	}

	.profile-head h1 {
		font-size: var(--text-2xl);
	}
}

/* !- Search results */
.search-results {
	margin: 0;
}

.search-results > li {
	border-bottom: 1px solid var(--bg-700);
	padding: 1.125rem 1.375rem;
}

.search-results > li:last-child {
	border-bottom: 0;
}

.search-result-meta {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0 0 0.375rem;
}

.search-result-meta a {
	color: var(--text-300);
}

.search-result h2 {
	font-size: var(--text-base);
	font-weight: 700;
	margin: 0 0 0.375rem;
}

.search-result h2 a {
	color: var(--text-50);
	text-decoration: none;
}

.search-result h2 a:hover {
	color: var(--link-alt);
}

.search-result > p:last-child {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin: 0;
}

/* !- Focus and motion */
#forums :focus-visible {
	outline: 2px solid var(--link-alt);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#forums *,
	#forums *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* !- bbpress-pencil-unread
 *
 * The plugin prints "Mark all as read" on the before-single-forum hook. Kept,
 * since the unread dots are its other half - set small and against the
 * right edge, in the link color.
 */
#bbpress-forums .bbppu-mark-as-read {
	margin: 0 0 0.75rem;
	text-align: right;
}

#bbpress-forums .bbppu-mark-as-read a {
	color: var(--link-alt);
	font-size: var(--text-mini);
	font-weight: 600;
	text-decoration: none;
}

#bbpress-forums .bbppu-mark-as-read a:hover {
	text-decoration: underline;
}

#bbpress-forums .bbppu-mark-as-read .bbppu-loading {
	display: none;
}

/* !- Discussion Policy
 *
 * /plus/forums/discussion-policy/ - public, decoupled, on this sheet because
 * it's the forums' page. The "On this page" list is hidden below 992px, per
 * the handoff; forums.js lights the section in view.
 */
/* Starts the same distance under the forum header as #forums-body does */
#policy-hero {
	border-bottom: 1px solid var(--bg-700);
	padding: 2.25rem 0 2.5rem;
}

#policy-hero .eyebrow {
	margin: 0 0 0.875rem;
}

#policy-hero h1 {
	color: var(--text-50);
	font-size: var(--text-5xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

.policy-lede {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.65;
	margin: 1.125rem 0 0;
	text-wrap: pretty;
}

.policy-meta {
	color: var(--text-400);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-xs);
	gap: 0.5rem 1.125rem;
	margin: 1.375rem 0 0;
}

#policy-body {
	padding: 3rem 0 5rem;
}

.policy-toc {
	position: sticky;
	top: calc(var(--forums-offset, 5rem) + 1.5rem);
}

.policy-toc-title {
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.policy-toc a {
	border-left: 2px solid var(--bg-700);
	color: var(--text-300);
	display: block;
	font-size: var(--text-sm);
	padding: 0.4375rem 0 0.4375rem 0.875rem;
	text-decoration: none;
}

.policy-toc a:hover,
.policy-toc a.active {
	border-left-color: var(--blue-500);
	color: var(--text-50);
}

.policy-article section {
	margin-bottom: 2.75rem;
	scroll-margin-top: calc(var(--forums-offset, 5rem) + 1.5rem);
}

.policy-article h2 {
	color: var(--text-50);
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 0.875rem;
}

.policy-article p {
	color: var(--text-300);
	font-size: var(--text-base);
	line-height: 1.75;
	margin: 0;
	text-wrap: pretty;
}

.policy-article p + p {
	margin-top: 0.875rem;
}

.policy-article strong {
	color: var(--text-50);
}

.policy-article a:not(.btn) {
	color: var(--link-alt);
	font-weight: 600;
}

.prohibited-item {
	align-items: center;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	gap: 0.75rem;
	height: 100%;
	padding: 0.875rem 1rem;
}

.policy-article .prohibited-item {
	color: var(--text-50);
	font-size: var(--text-sm);
	font-weight: 600;
}

.prohibited-item .fa-xmark {
	color: var(--red-400);
}

[data-theme="light"] .prohibited-item .fa-xmark {
	color: var(--red-800);
}

.policy-callout {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1rem;
	padding: 1.5rem 1.625rem;
}

.policy-callout .fa-shield-halved {
	color: var(--link-alt);
	font-size: var(--text-xl);
	margin-top: 0.125rem;
}

.policy-steps {
	margin: 0;
}

.policy-steps li {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1rem;
	margin-bottom: 0.75rem;
	padding: 1.25rem 1.375rem;
}

.policy-step-number {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: 50%;
	color: var(--blue-300);
	display: flex;
	flex: none;
	font-size: var(--text-sm);
	font-weight: 800;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

[data-theme="light"] .policy-step-number {
	color: var(--blue-800);
}

.policy-steps h3 {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.375rem;
}

.policy-article .policy-steps p {
	font-size: var(--text-sm);
	line-height: 1.65;
}

.policy-cta {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	padding: 2rem;
}

[data-theme="light"] .prohibited-item,
[data-theme="light"] .policy-callout,
[data-theme="light"] .policy-steps li,
[data-theme="light"] .policy-cta {
	background-color: var(--white);
}

.policy-cta h2 {
	font-size: var(--text-xl);
	margin-bottom: 0.375rem;
}

.policy-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

#policy-body .policy-cta .btn {
	align-items: center;
	display: inline-flex;
	font-size: var(--text-sm);
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
}

@media (max-width: 767.98px) {
	#policy-hero {
		padding: 2.25rem 0 2rem;
	}

	#policy-hero h1 {
		font-size: var(--text-4xl);
	}

	.policy-steps li {
		padding: 1.125rem;
	}

	.policy-cta {
		padding: 1.5rem 1.25rem;
	}
}

/* !- Helpful and answers
 *
 * mu-plugins/on1-forum-answers.php. Green has no text token that flips with
 * the theme, so it's --green-500 on dark and --green-800 on light - the
 * handoff's #21CE6E / #0E703A - on the 16% green tint either way.
 */
.answer-box {
	align-items: flex-start;
	background: var(--green-transparent);
	border-radius: var(--border-radius);
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 1rem 1.125rem;
}

.answer-box .fa-circle-check {
	color: var(--green-500);
	font-size: var(--text-lg);
	margin-top: 0.125rem;
}

.answer-box p {
	color: var(--text-100);
	font-size: var(--text-sm);
	line-height: 1.55;
	margin: 0;
}

.answer-box strong {
	color: var(--text-50);
}

.answer-box a {
	color: var(--green-500);
	font-weight: 700;
}

[data-theme="light"] .answer-box .fa-circle-check,
[data-theme="light"] .answer-box a {
	color: var(--green-800);
}

.pill-answered {
	background: var(--green-transparent);
	color: var(--green-500);
}

[data-theme="light"] .pill-answered {
	color: var(--green-800);
}

/* The answer post gets a green bar down its left edge, in place of the lead's blue */
.topic-post.is-answer {
	box-shadow: inset 3px 0 0 var(--green-500);
}

[data-theme="light"] .topic-post.is-answer {
	box-shadow: inset 3px 0 0 var(--green-800);
}

.post-tag-answer {
	background: var(--green-transparent);
	color: var(--green-500);
}

[data-theme="light"] .post-tag-answer {
	color: var(--green-800);
}

/* Moderators and keymasters - gold, since blue, green and orange are taken */
.post-tag-mod,
.profile-badge.badge-mod {
	background: var(--gold-transparent);
	color: var(--gold-500);
}

[data-theme="light"] .post-tag-mod,
[data-theme="light"] .profile-badge.badge-mod {
	color: var(--gold-900);
}

.post-action[aria-pressed="true"] {
	color: var(--blue-300);
}

[data-theme="light"] .post-action[aria-pressed="true"] {
	color: var(--blue-800);
}

.post-action[data-forum-answer][aria-pressed="true"] {
	color: var(--green-500);
}

[data-theme="light"] .post-action[data-forum-answer][aria-pressed="true"] {
	color: var(--green-800);
}

.helpful-count {
	background: var(--bg-700);
	border-radius: 1rem;
	color: var(--text-200);
	font-size: var(--text-micro);
	font-weight: 700;
	padding: 0.0625rem 0.4375rem;
}