/**
 * Community Chat (bbPress + Youzify) restyle.
 *
 * Enqueued from inc/forum-actions.php at wp_enqueue_scripts priority 110, with
 * declared dependencies on main-custom-css and youzify-bbpress so it always
 * loads after both, and versioned by filemtime() so it can never go stale
 * behind Cloudflare the way a hand-typed version string can.
 *
 * WHY THIS EXISTS. Youzify's stock forum CSS is the entire baseline here, since
 * it dequeues bbPress's own. It is a float-based table layout at a 12px root
 * size, and most of its text fails WCAG 1.4.3: the author name and topic title
 * at #898989 are 3.50:1, the topic meta at #9e9e9e is 2.68:1, the reply
 * permalink at #ccc is 1.61:1, and the admin links, which is where bbPress puts
 * the Reply control, are #bbb at 1.92:1. That last one is why a member told us
 * they struggle to reply: the primary action on the page is the least visible
 * element on it.
 *
 * THE HOUSE RULE: every rule out-specifies its target rather than relying on
 * load order. WP-Optimize can combine and reorder stylesheets, and a dependency
 * is a convention, not a guarantee. The universal prefix `body #bbpress-forums`
 * is (1,0,1), which beats every class-only Youzify rule and its own (1,0,0)
 * root. The highest bar on the topic view is #bbpress-forums li.bbp-header
 * .bbp-reply-content at (1,2,1); the card selectors below land at (1,2,3).
 *
 * THE TRAP, and how it is closed. loop-replies.php reuses .bbp-reply-author and
 * .bbp-reply-content inside li.bbp-header and li.bbp-footer, the grey bars above
 * and below the list. A bare .bbp-reply-author rule restyles those too. The
 * discriminator is structural and holds in every rendering mode: in the bars
 * those divs are direct children of an li; in a real post they are direct
 * children of the post div. So card rules are always `div:is(.reply, .topic) >`.
 * The bars' copies are also hidden outright below, so a sloppy selector cannot
 * reach them.
 *
 * WHY `:is(.reply, .topic)` AND NOT JUST `.reply`. The post div is written by
 * bbp_reply_class(), which runs its classes through get_post_class(), which adds
 * the POST TYPE as a class. bbp_show_lead_topic() is off here, so the opening
 * post renders inside the reply loop through the same template, and its div
 * therefore reads `topic type-topic hentry`, with no `.reply` on it anywhere. A
 * card rule keyed on `div.reply` silently skips the opening post and leaves it
 * in the old float layout while every reply around it is a card.
 *
 * THE ONE PLACE !important IS CORRECT HERE. Youzify prints a dynamic
 * colour-scheme block INLINE in the page head, after this file, and it is built
 * with !important, so no amount of specificity in a stylesheet can reach it:
 *
 *   body #bbpress-forums li.bbp-header,
 *   body #bbpress-forums li.bbp-footer,
 *   body .youzify-forums-forum-item .youzify-forums-forum-icon i,
 *   body .youzify-forums-topic-item .youzify-forums-topic-icon i,
 *   body div.bbp-submit-wrapper button,
 *   body .bbp-pagination .page-numbers.current {
 *       background-color: var(--yzfy-scheme-color) !important;
 *       color: var(--yzfy-scheme-text-color) !important; }
 *
 * That is what kept the red "Author | Posts" slab and the solid red icon
 * circles after the first deploy. Every declaration below marked !important is
 * answering that block and nothing else; do not copy the habit anywhere else in
 * this file. Note the colour half only reaches children by inheritance, so a
 * child with its own declared colour (the column labels) was never affected.
 *
 * ONE THING TO KNOW ABOUT THREADING. BBP_Walker_Reply emits a bare "<li>" while
 * li.bbp-body is still open, so the HTML parser closes li.bbp-body immediately
 * and every reply is a sibling of it, not a child. Youzify's own
 * @media (max-width:480px) reply stack is scoped to .bbp-body and therefore
 * stopped applying the day threading was switched on. The mobile block at the
 * foot of this file is ours for that reason; do not assume Youzify's is helping.
 * (li.bbp-body does survive on the topic and room lists, where the rows are uls.)
 */

/* ------------------------------------------------------------------ 1. tokens
 * Declared on the forum wrapper, not :root, so nothing leaks into LearnPress or
 * WooCommerce. No var(--tad-*) references: those live in general-style.css,
 * which is loaded from a remote host and is not in this repo, so a failed
 * request would resolve them to unset. Literals only.
 *
 * Contrast is computed against the background each colour actually sits on.
 * #d93a43, the site's secondary red, is deliberately absent: it carries white
 * at only 4.53:1, which passes AA by 0.03 and is too thin to build on.
 */
body #bbpress-forums {
	/* Youzify's own knobs, re-pointed. Custom properties resolve at use time and
	   a declaration here beats one inherited from :root, so this fixes roughly
	   35 of its font sizes with no specificity contest at all. */
	--yzfy-primary-font-size: .8125rem;
	--yzfy-big-font-size: 1rem;
	--yzfy-card-bg-color: #fff;
	--yzfy-card-secondary-bg-color: #f1f3f5;

	/* colour */
	--cc-ink: #333;             /* 12.63:1 on #fff */
	--cc-muted: #666;           /*  5.74:1 on #fff */
	--cc-red: #CC0000;          /*  5.89:1 on #fff, and white on it is 5.89:1 */
	--cc-red-ink: #a30000;      /*  8.21:1 on #fff, hover text only */
	--cc-on-red: #fff;
	--cc-badge-ink: #444b52;    /*  7.95:1 on #f1f3f5 */
	--cc-badge-bg: #f1f3f5;
	--cc-author-ink: #8a1c1c;   /*  7.99:1 on #ffe9e9 */
	--cc-author-bg: #ffe9e9;
	--cc-focus: #CC0000;

	/* surface and line */
	--cc-surface: #fff;
	--cc-surface-sunken: #f8f9fa;
	--cc-surface-accent: #fff5f5;
	--cc-line: #e6e6e6;         /* decorative hairline, never a sole state cue */
	--cc-line-strong: #8c8c8c;  /*  3.36:1 on #fff, meets 1.4.11 for a control border */
	--cc-thread: #c9ced4;       /* nesting is also carried by indent */

	/* type */
	--cc-fs-body: 1rem;
	--cc-fs-title: 1.0625rem;
	--cc-fs-name: .9375rem;
	--cc-fs-meta: .8125rem;
	--cc-fs-badge: .75rem;
	--cc-fs-label: .75rem;
	--cc-lh-body: 1.7;
	--cc-measure: 66ch;         /* mid of the 50 to 75 character band */

	/* space */
	--cc-1: .25rem;
	--cc-2: .5rem;
	--cc-3: .75rem;
	--cc-4: 1rem;
	--cc-5: 1.25rem;
	--cc-6: 1.5rem;
	--cc-8: 2rem;
	/* The breadcrumb's box. The sidebar column is offset by exactly this plus
	   the gap below it, so the two columns' first white boxes start on the
	   same line. Change this and the sidebar follows. */
	--cc-crumb-h: 2.5rem;
	--cc-gap: 1.25rem;
	--cc-indent: 1.25rem;
	--cc-avatar: 56px;
	--cc-author-col: 112px;
	--cc-tap: 40px;             /* clears the 24px floor of SC 2.5.8 */

	/* shape, matching assessment.css */
	--cc-r-sm: 8px;
	--cc-r: 14px;
	--cc-r-lg: 16px;
	--cc-r-pill: 999px;
	--cc-shadow: 0 6px 20px rgba(0, 0, 0, .06);
	--cc-shadow-lg: 0 8px 30px rgba(0, 0, 0, .05);
}

@media (max-width: 640px) {
	body #bbpress-forums {
		--cc-indent: .75rem;
		--cc-avatar: 40px;
		--cc-gap: 1rem;
	}
}

@media (max-width: 420px) {
	body #bbpress-forums {
		--cc-indent: .5rem;
	}
}

/* -------------------------------------------------------- 2. root and globals
 */

/* Page frame. The forum starts hard against the sticky menu, and there is no
 * theme container above it to inherit spacing from: this child theme's
 * header.php never opens GeneratePress's #page / #content wrappers, and on the
 * forum views GeneratePress's own #primary / #right-sidebar columns are not in
 * the markup at all. Youzify prints its whole forum page AFTER the document's
 * </body></html> as
 *
 *   .youzify.youzify-page.youzify-forum
 *     > main.youzify-page-main-content
 *         > .youzify-main-column  (#bbpress-forums)
 *         > .youzify-sidebar-column
 *
 * so that outer wrapper is the only element that holds both columns. Owner
 * request, 15 September 2026: 50px of air under the menu.
 *
 * .youzify-forum keeps this off the member profile, which uses the same
 * .youzify-page wrapper and is the other place this stylesheet loads. Padding,
 * not margin: the wrapper is a direct child of body, where a top margin would
 * collapse through and move the header down with it instead of opening a gap
 * beneath it. It also carries the grey page background, so the gap is that grey
 * and not a white band.
 */
body .youzify-page.youzify-forum {
	padding-top: 50px;
}

/* Sidebar top alignment. The forum sidebar's first widget is GamiPress
 * Achievements, and for a guest, or for any member who has not earned one, it
 * renders an empty <div id="gamipress-achievements-container"> inside a
 * .widget-content that still carries Youzify's card background and bottom
 * margin. The box has no visible content and no obvious height, so what it looks
 * like on screen is the whole sidebar starting lower than the forum beside it.
 * The GamiPress Points widget at the foot of the sidebar is empty the same way
 * and leaves dead space above the footer.
 *
 * Hiding them only while empty keeps both widgets working for a member who does
 * have points or achievements to show: :has() re-evaluates when GamiPress fills
 * the container, including its AJAX refresh.
 */
body .youzify-forum-sidebar .widget-content.gamipress_achievements_widget:not(:has(#gamipress-achievements-container > *)),
body .youzify-forum-sidebar .widget-content.gamipress_user_points_widget:not(:has(.gamipress-user-points > *)) {
	display: none;
}

body #bbpress-forums {
	font-size: var(--cc-fs-body);   /* the 12px root is why everything read tiny */
	line-height: var(--cc-lh-body);
	color: var(--cc-ink);
	display: flow-root;             /* contains floats without clipping */
	overflow: visible;              /* Youzify's overflow:hidden clipped shadows and focus rings */
	margin-bottom: var(--cc-8);
}

/* Youzify supplies no focus styling anywhere on the forum. */
body #bbpress-forums :focus-visible {
	outline: 3px solid var(--cc-focus);
	outline-offset: 2px;
	border-radius: 4px;
	box-shadow: none;
}

/* Opt in to motion rather than switching it off in a reduce block. */
@media (prefers-reduced-motion: no-preference) {
	body #bbpress-forums .tad-act,
	body #bbpress-forums li.bbp-body > ul.topic,
	body #bbpress-forums li.bbp-body > ul.forum {
		transition: border-color .2s, box-shadow .2s, background-color .2s, color .2s, transform .1s;
	}
}

/* Containers lose their chrome; the rows inside become the cards. */
body #bbpress-forums ul.bbp-topics,
body #bbpress-forums ul.bbp-forums,
body #bbpress-forums ul.bbp-lead-topic,
body #bbpress-forums ul.bbp-replies,
body #bbpress-forums ul.bbp-search-results {
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	font-size: inherit;
	margin-bottom: var(--cc-8);
}

/* ------------------------------------------------- 3. the bars above and below
 * On the reply list the bar is the red "Author | Posts" slab. Those are column
 * headings for a table layout this file deletes, so they go; the bar survives
 * only as a toolbar for Subscribe, which lives nowhere else.
 */
body #bbpress-forums ul.bbp-replies > li.bbp-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--cc-3);
	/* !important answers Youzify's inline scheme block, see the file header. */
	background: transparent !important;
	color: var(--cc-muted) !important;
	padding: 0 0 var(--cc-3);
	margin-bottom: var(--cc-4);
	border-bottom: 1px solid var(--cc-line);
}

body #bbpress-forums ul.bbp-replies > li.bbp-header > div.bbp-reply-author,
body #bbpress-forums ul.bbp-replies > li.bbp-header .youzify-single-topic-lead-title {
	display: none;
}

body #bbpress-forums ul.bbp-replies > li.bbp-header > div.bbp-reply-content {
	margin: 0 0 0 auto;
	padding: 0;
	color: var(--cc-muted);
	font-size: var(--cc-fs-meta);
	display: flex;
	align-items: center;
	gap: var(--cc-3);
}

/* The duplicate of the bar at the foot of the list has nothing left to say. */
body #bbpress-forums li.bbp-footer {
	display: none;
}

/* Subscribe, kept, as a pill that meets the target-size floor. */
body #bbpress-forums #subscription-toggle a {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-2);
	min-height: var(--cc-tap);
	padding: 0 var(--cc-4);
	border: 1px solid var(--cc-line-strong);
	border-radius: var(--cc-r-pill);
	background: var(--cc-surface);
	color: var(--cc-ink);
	font-size: var(--cc-fs-meta);
	font-weight: 600;
	text-decoration: none;
}

body #bbpress-forums #subscription-toggle a:hover {
	border-color: var(--cc-red);
	color: var(--cc-red);
}

body #bbpress-forums #subscription-toggle .is-subscribed a {
	background: var(--cc-red);
	border-color: var(--cc-red);
	color: var(--cc-on-red);
}

/* Favourites is removed in PHP (inc/forum-actions.php). This is the belt to that
   braces: two IDs, so it beats Youzify's own #favorite-toggle rules outright if
   the filter is ever lost. display:none also takes it out of the tab order. */
body #bbpress-forums #favorite-toggle {
	display: none;
}

/* On the topic and room lists the bar carries real column labels for a real
   multi-column list, so it stays, demoted from a brand slab to a hairline. */
/* The "Chat Room | Topics | Posts | Freshness" row is retired on both lists.
   It is four plain <li>s of text, not links and never sortable: a column
   heading for a table layout that no longer exists once the rows are cards.
   Left visible it labelled nothing, since the headings sat at the far left
   while the numbers they described sat at the far right of each card, and the
   uppercase treatment made inert text read as a row of controls. The labels
   move onto the numbers instead, below. */
body #bbpress-forums ul.bbp-topics > li.bbp-header,
body #bbpress-forums ul.bbp-forums > li.bbp-header {
	display: none;
}

/* ------------------------------------------------------------ 4. the post card
 * There is no per-post wrapper to style, so the card is built from the two
 * adjacent siblings: div.bbp-reply-header is its top half and div:is(.reply, .topic) its
 * bottom half. This holds whether or not threading is on.
 */
body #bbpress-forums div.bbp-reply-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cc-2);
	background: var(--cc-surface);
	border: 1px solid var(--cc-line);
	border-bottom: 0;
	border-radius: var(--cc-r) var(--cc-r) 0 0;
	padding: var(--cc-3) var(--cc-5) var(--cc-2);
	margin: 0;
	overflow: visible;
	clear: none;
	font-size: var(--cc-fs-meta);
	color: var(--cc-muted);
	scroll-margin-top: 6rem;   /* #post-N is a :target; keep it off the sticky header */
}

body #bbpress-forums div:is(.reply, .topic) {
	display: flex;
	align-items: flex-start;   /* not stretch, or a one-line reply stretches the avatar rail */
	gap: var(--cc-5);
	background: var(--cc-surface);   /* also cancels the even/odd zebra */
	border: 1px solid var(--cc-line);
	border-top: 0;
	border-radius: 0 0 var(--cc-r) var(--cc-r);
	box-shadow: var(--cc-shadow);
	padding: var(--cc-5);
	margin: 0 0 var(--cc-gap);
	width: auto;
	height: auto;
	float: none;
}

/* The opening post is the question everyone is answering, so it leads. */
body #bbpress-forums div:is(.reply, .topic).type-topic {
	border-color: var(--cc-line-strong);
}

body #bbpress-forums div.bbp-reply-header:has(+ div:is(.reply, .topic).type-topic) {
	border-color: var(--cc-line-strong);
	background: var(--cc-surface-sunken);
}

/* A mentor or team answer. Never colour alone: the badge says so in words. */
body #bbpress-forums div:is(.reply, .topic).forum-mod {
	border-left: 3px solid var(--cc-red);
}

/* ---- the author rail --------------------------------------------------------
 * The real structure is three deep: .bbp-reply-author > a.bbp-author-link >
 * [span.bbp-author-avatar > img, span.bbp-author-name], plus a sibling
 * div.bbp-author-role. So the identity block's own layout has to be declared on
 * a.bbp-author-link, which Youzify never styles.
 */
body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author {
	float: none;
	width: auto;
	flex: 0 0 var(--cc-author-col);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cc-2);
	text-align: center;
	color: var(--cc-muted);
	font-weight: 600;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author > a.bbp-author-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cc-2);
	text-decoration: none;
	color: inherit;
	max-width: 100%;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author a.bbp-author-link:hover .bbp-author-name {
	color: var(--cc-red);
}

/* get_avatar() is asked for 80px and carries hard width/height attributes; CSS
   beats those, and rendering 80 into 56 gives a free 2x image on retina. */
body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author img.avatar {
	width: var(--cc-avatar);
	height: var(--cc-avatar);
	max-width: none;
	margin: 0;
	float: none;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--cc-surface-sunken);
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author .bbp-author-name {
	clear: none;              /* float-era residue */
	display: block;
	margin: 0;
	color: var(--cc-ink);
	font-size: var(--cc-fs-name);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
	text-transform: none;     /* capitalize mangles McDonald and initialisms */
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author .bbp-reply-ip {
	color: var(--cc-muted);
	font-size: .6875rem;
	font-weight: 400;
	word-break: break-all;
}

/* ---- the role badge ---------------------------------------------------------
 * Youzify's white on #8fadd5 is 2.31:1, the worst contrast on the page, and it
 * is on the one element that tells a member who they are reading.
 */
body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author > div.bbp-author-role {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: .1875rem .5rem;
	border-radius: var(--cc-r-pill);
	background: var(--cc-badge-bg);
	color: var(--cc-badge-ink);
	font-size: var(--cc-fs-badge);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Order matters here, and not for cosmetic reasons. The opening post always
   carries .topic-author, since its author IS the topic author, and a mentor's
   opening post carries .forum-mod as well. Mentor is the more useful thing for a
   member to see, so it is declared second and wins at equal specificity. */
body #bbpress-forums div:is(.reply, .topic).topic-author > div.bbp-reply-author > div.bbp-author-role {
	background: var(--cc-author-bg);
	color: var(--cc-author-ink);
}

body #bbpress-forums div:is(.reply, .topic).forum-mod > div.bbp-reply-author > div.bbp-author-role {
	background: var(--cc-red);
	color: var(--cc-on-red);
}

/* ---- the meta row -----------------------------------------------------------
 * .bbp-meta has no Youzify rule at all, so only its children are contested.
 */
body #bbpress-forums div.bbp-reply-header > div.bbp-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cc-2);
	width: 100%;
	font-size: var(--cc-fs-meta);
	color: var(--cc-muted);
}

body #bbpress-forums div.bbp-meta .bbp-reply-post-date {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-1);
}

body #bbpress-forums div.bbp-meta .bbp-reply-post-date i {
	color: var(--cc-muted);
	font-size: .875em;
}

body #bbpress-forums div.bbp-reply-header a.bbp-reply-permalink {
	float: none;
	margin: 0 0 0 auto;        /* an auto margin does what float:right did */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 var(--cc-2);
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-pill);
	color: var(--cc-muted);    /* was #ccc, 1.61:1 */
	font-size: var(--cc-fs-meta);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

body #bbpress-forums div.bbp-reply-header a.bbp-reply-permalink:hover {
	border-color: var(--cc-red);
	color: var(--cc-red);
}

body #bbpress-forums div.bbp-reply-header span.bbp-admin-links {
	float: none;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cc-1);
	color: var(--cc-line-strong);
}

body #bbpress-forums div.bbp-reply-header span.bbp-admin-links a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 var(--cc-2);
	border-radius: var(--cc-r-sm);
	color: var(--cc-muted);    /* was #bbb, 1.92:1 */
	font-size: var(--cc-fs-meta);
	font-weight: 600;
	text-transform: none;
	text-decoration: none;
}

body #bbpress-forums div.bbp-reply-header span.bbp-admin-links a:hover {
	color: var(--cc-red);
	background: var(--cc-surface-accent);
}

/* The Reply link is removed from this strip in PHP and re-rendered in the action
   row. This is the safety net: if the filter is ever lost, hide the duplicate
   rather than show two Reply controls a few pixels apart. */
body #bbpress-forums div.bbp-reply-header span.bbp-admin-links a.bbp-reply-to-link,
body #bbpress-forums div.bbp-reply-header span.bbp-admin-links a.bbp-topic-reply-link {
	display: none;
}

/* ---- the content ------------------------------------------------------------ */
body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content {
	flex: 1 1 auto;
	/* min-width:0 is mandatory, not tidiness. A flex item defaults to
	   min-width:auto and refuses to shrink below its content, so one pasted URL
	   or <pre> pushes the card past the viewport. custom-style.css sets
	   body{overflow-x:hidden}, which HIDES that overflow instead of scrolling
	   it, so the right edge of every card would be silently amputated with no
	   scrollbar to reveal it. Do not remove this as redundant. */
	min-width: 0;
	margin: 0;
	padding: 0;
	max-width: var(--cc-measure);
	font-size: var(--cc-fs-body);
	line-height: var(--cc-lh-body);
	color: var(--cc-ink);
	overflow-wrap: anywhere;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content::after {
	content: none;   /* the old clearfix */
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content p {
	margin: 0 0 1em;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content p:last-child {
	margin-bottom: 0;
}

/* A grey link with no underline is indistinguishable from bold body text. */
body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content a {
	color: var(--cc-red);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: .15em;
	text-decoration-thickness: .08em;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content a:hover {
	color: var(--cc-red-ink);
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content :is(h1, h2, h3, h4, h5, h6) {
	line-height: 1.3;
	margin: 1.5em 0 .5em;
	color: var(--cc-ink);
	font-weight: 700;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content :is(ul, ol) {
	margin: 0 0 1em 1.25rem;
	padding: 0;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content :is(code, pre) {
	background: var(--cc-surface-sunken);
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-sm);
	font-size: .875em;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content pre {
	padding: var(--cc-3) var(--cc-4);
	overflow-x: auto;
	max-width: 100%;
}

body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cc-r-sm);
}

/* ---- the action row ---------------------------------------------------------
 * Injected on bbp_theme_after_reply_content, so it lands as the last child of
 * the content div and inherits its 66ch cap. That is deliberate: a Like and a
 * Reply floating far from the text they belong to read as page chrome.
 */
body #bbpress-forums div.bbp-reply-content .tad-post-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-3);          /* keeps two 40px targets clear of each other */
	margin: var(--cc-5) 0 0;
	padding-top: var(--cc-4);
	border-top: 1px solid var(--cc-line);
}

body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-2);
	min-height: var(--cc-tap);
	padding: var(--cc-2) var(--cc-4);
	border: 1px solid var(--cc-line-strong);
	border-radius: var(--cc-r-pill);
	background: var(--cc-surface);
	color: var(--cc-ink);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

body #bbpress-forums div.bbp-reply-content .tad-post-actions a.tad-act:hover,
body #bbpress-forums div.bbp-reply-content .tad-post-actions button.tad-act:hover {
	border-color: var(--cc-red);
	color: var(--cc-red);
	background: var(--cc-surface-accent);
}

body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act.is-liked,
body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act[aria-pressed="true"] {
	background: var(--cc-red);
	border-color: var(--cc-red);
	color: var(--cc-on-red);
}

/* The count is always in the DOM and simply empty at zero, so a post nobody has
   liked yet is never publicly scored at 0. */
body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act__count {
	font-variant-numeric: tabular-nums;
	opacity: .85;
	padding-left: var(--cc-1);
}

body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act__count:empty {
	display: none;
}

/* The chip a guest sees, and the one shown on your own post: a number, not a
   control, because you cannot like your own post. */
body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act--static {
	border-color: transparent;
	background: transparent;
	color: var(--cc-muted);
	padding-left: 0;
	cursor: default;
	font-weight: 500;
}

body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act:disabled,
body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act.is-busy {
	opacity: .5;
	pointer-events: none;
}

/* Youzify puts a FontAwesome glyph before every .bbp-admin-links anchor; the
   reply link keeps its class, so cancel the pseudo-element in the row. */
body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act::before {
	content: none;
}

body #bbpress-forums div.bbp-reply-content .tad-post-actions .tad-act-error {
	color: var(--cc-red-ink);
	font-size: var(--cc-fs-meta);
	font-weight: 600;
}

/* --------------------------------------------------- 5. threaded indentation
 * Youzify indents 50px a level. At depth 5 that is 250px, unusable on a phone.
 * Research on large discussion platforms finds mean depth about 1.07 with 95%
 * of comments top level, so a thread line plus a small step carries the
 * relationship without spending the screen on a case that barely occurs.
 */
body #bbpress-forums ul.bbp-threaded-replies {
	margin: 0 0 0 var(--cc-2);
	padding: 0 0 0 var(--cc-indent);
	border-left: 3px solid var(--cc-thread);
	border-radius: 0;
	list-style: none;
}

body #bbpress-forums ul.bbp-threaded-replies:hover {
	border-left-color: var(--cc-red);
}

/* ------------------------------------------------------- 6. the reply form */
body #bbpress-forums .youzify-bbp-box {
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-lg);
	box-shadow: var(--cc-shadow-lg);
	overflow: hidden;
	margin-bottom: var(--cc-8);
	background: var(--cc-surface);
}

body #bbpress-forums .youzify-bbp-box .youzify-bbp-box-title {
	color: var(--cc-ink);
	font-size: var(--cc-fs-title);
	font-weight: 700;
	padding: var(--cc-4) var(--cc-5);
	background: var(--cc-surface-sunken);
	border-bottom: 1px solid var(--cc-line);
	display: flex;
	align-items: center;
	gap: var(--cc-3);
}

body #bbpress-forums .youzify-bbp-box .youzify-bbp-box-title i {
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	display: grid;
	place-items: center;
	margin: 0;
	background: var(--cc-surface-accent);
	color: var(--cc-red);
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
}

body #bbpress-forums .youzify-bbp-box .youzify-bbp-box-content {
	padding: var(--cc-6);
}

/* When the threaded Reply control moves the form under a post, it must not read
   as a card inside a card. */
body #bbpress-forums div:is(.reply, .topic) .bbp-reply-form .youzify-bbp-box,
body #bbpress-forums ul.bbp-threaded-replies .bbp-reply-form .youzify-bbp-box {
	box-shadow: none;
	border: 1px solid var(--cc-line);
	margin: var(--cc-4) 0 0;
}

body #bbpress-forums div.wp-editor-container {
	border: 1px solid var(--cc-line-strong);
	border-radius: var(--cc-r-sm);
	overflow: hidden;
}

body #bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
	color: var(--cc-ink);
	font-size: 1rem;   /* under 16px, mobile Safari zooms the page on focus */
	line-height: 1.6;
	padding: var(--cc-3) var(--cc-4);
	min-height: 10rem;
}

body #bbpress-forums .bbp-form .youzify-bbp-form-item-text input,
body #bbpress-forums input#bbp_topic_title,
body #bbpress-forums input#bbp_topic_tags {
	font-size: 1rem;
	color: var(--cc-ink);
	min-height: var(--cc-tap);
	border: 1px solid var(--cc-line-strong);
	border-radius: var(--cc-r-sm);
	padding: var(--cc-2) var(--cc-3);
	width: 100%;
}

body #bbpress-forums .bbp-form label {
	color: var(--cc-ink);
	font-size: var(--cc-fs-meta);
}

body #bbpress-forums div.bbp-submit-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-4);
	margin-top: var(--cc-5);
}

body #bbpress-forums div.bbp-submit-wrapper button {
	width: auto;
	min-width: 12rem;
	min-height: var(--cc-tap);
	padding: var(--cc-3) var(--cc-8);
	border: 2px solid var(--cc-red);
	border-radius: var(--cc-r-pill);
	background: var(--cc-red);
	color: var(--cc-on-red);
	font-size: 1rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: var(--cc-2);
}

/* The rest state matches Youzify's inline scheme block, so only the hover
   inversion has to fight it. See the file header. */
body #bbpress-forums div.bbp-submit-wrapper button:hover {
	background: var(--cc-surface) !important;
	color: var(--cc-red) !important;
}

body #bbpress-forums div#bbp-cancel-reply-to,
body #bbpress-forums div.bbp-reply-to {
	margin-left: 0;
	padding: 0;
	text-align: left;
}

body #bbpress-forums .bbp-reply-form {
	scroll-margin-top: 6rem;
}

body #bbpress-forums div.bbp-template-notice {
	border-radius: var(--cc-r-sm);
	border-left-width: 4px;
	background: var(--cc-surface-sunken);
	padding: var(--cc-3) var(--cc-4);
}

body #bbpress-forums div.bbp-template-notice p {
	color: var(--cc-ink);
	font-weight: 400;
}

/* ------------------------------------------ 7. topic list and chat-room list */
body #bbpress-forums li.bbp-body {
	display: flex;
	flex-direction: column;
	gap: var(--cc-3);
}

body #bbpress-forums li.bbp-body > ul.topic,
body #bbpress-forums li.bbp-body > ul.forum {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cc-4);
	background: var(--cc-surface);
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r);
	box-shadow: var(--cc-shadow);
	padding: var(--cc-5);
}

body #bbpress-forums li.bbp-body > ul.topic:hover,
body #bbpress-forums li.bbp-body > ul.forum:hover {
	border-color: var(--cc-red);
	transform: translateY(-1px);
}

body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-title {
	float: none;
	width: auto;
	flex: 1 1 20rem;
	min-width: 0;
}

body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-voice-count,
body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-reply-count {
	float: none;
	width: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--cc-1);
	color: var(--cc-muted);
	font-size: var(--cc-fs-meta);
}

body #bbpress-forums li.bbp-body > ul.topic > li.youzify-bbp-freshness {
	float: none;
	width: auto;
	flex: 0 0 12rem;
}

/* The chat-room rows use a different set of child classes from the topic rows
   (bbp-forum-info / -topic-count / -reply-count / youzify-bbp-forum-freshness),
   so they need their own unfloating or the freshness block wraps onto its own
   line under the description. */
body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-info {
	float: none;
	width: auto;
	flex: 1 1 20rem;
	min-width: 0;
}

body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-topic-count,
body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-reply-count {
	float: none;
	width: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--cc-1);
	color: var(--cc-muted);
	font-size: var(--cc-fs-meta);
}

body #bbpress-forums li.bbp-body > ul.forum > li.youzify-bbp-forum-freshness {
	float: none;
	width: auto;
	flex: 0 0 12rem;
}

/* The counts say what they are, now that the heading row above them is gone.
   The word goes BEFORE the number, which keeps it grammatical at any value:
   "Topics 1" and "Topics 21" both read, where a trailing "topics" would not.
   The icon is dropped on these two cells only, since a word and a glyph saying
   the same thing is clutter. The wording is exactly what the retired heading
   row used, so nothing new is being introduced to members. */
body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-voice-count > i,
body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-reply-count > i,
body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-topic-count > i,
body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-reply-count > i {
	display: none;
}

body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-voice-count::before,
body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-reply-count::before,
body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-topic-count::before,
body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-reply-count::before {
	font-weight: 600;
	letter-spacing: .03em;
	margin-right: var(--cc-1);
	color: var(--cc-muted);
}

body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-topic-count::before {
	content: "Topics";
}

body #bbpress-forums li.bbp-body > ul.forum > li.bbp-forum-reply-count::before {
	content: "Posts";
}

body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-voice-count::before {
	content: "Voices";
}

body #bbpress-forums li.bbp-body > ul.topic > li.bbp-topic-reply-count::before {
	content: "Posts";
}

body #bbpress-forums .youzify-forums-topic-icon i,
body #bbpress-forums .youzify-forums-forum-icon i {
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	/* !important answers Youzify's inline scheme block, see the file header.
	   Without it these stay solid red circles with a white glyph, which is the
	   heaviest thing on the page and fights the card it sits in. */
	background: var(--cc-surface-accent) !important;
	color: var(--cc-red) !important;
}

/* An ID prefix outranks any number of classes, so these state variants would be
   flattened by the rule above without anyone seeing an error. Re-declared. */
body #bbpress-forums ul.sticky .youzify-forums-topic-icon i,
body #bbpress-forums ul.super-sticky .youzify-forums-topic-icon i {
	background: #fff8e1 !important;
	color: #665200 !important;   /* 7.13:1 */
}

body #bbpress-forums ul.status-closed .youzify-forums-topic-icon i {
	background: var(--cc-badge-bg) !important;
	color: var(--cc-badge-ink) !important;
}

body #bbpress-forums a.youzify-forums-topic-title,
body #bbpress-forums a.youzify-forums-forum-title {
	display: block;
	color: var(--cc-ink);      /* was #898989 at 12.5px, 3.50:1 */
	font-size: var(--cc-fs-title);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

body #bbpress-forums a.youzify-forums-topic-title:hover,
body #bbpress-forums a.youzify-forums-forum-title:hover {
	color: var(--cc-red);
	text-decoration: underline;
}

body #bbpress-forums .youzify-forums-topic-meta :is(a, .youzify-forums-topic-author, .bbp-author-name),
body #bbpress-forums .youzify-bbp-freshness-time a {
	color: var(--cc-muted);    /* was #9e9e9e, 2.68:1, the worst on the list */
	font-size: var(--cc-fs-meta);
}

body #bbpress-forums .youzify-bbp-freshness-author a {
	color: var(--cc-ink);
	font-size: var(--cc-fs-meta);
	font-weight: 600;
}

body #bbpress-forums li.bbp-topic-reply-count i,
body #bbpress-forums li.bbp-topic-voice-count i,
body #bbpress-forums li.bbp-forum-topic-count i {
	color: var(--cc-muted);
}

body #bbpress-forums .youzify-forums-forum-desc {
	color: var(--cc-muted);
	font-size: var(--cc-fs-meta);
	line-height: 1.6;
	max-width: var(--cc-measure);
	margin-top: var(--cc-2);
}

/* Sub-rooms: a grey rail and grey chips become a row of pills. */
body #bbpress-forums .bbp-forums-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-2);
	padding: 0;
	margin: var(--cc-4) 0 0;
	border-left: 0;
}

body #bbpress-forums .bbp-forums-list > li {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: var(--cc-1) var(--cc-3);
	margin: 0;
	background: var(--cc-surface-sunken);
	border: 1px solid var(--cc-line);
	border-left: 1px solid var(--cc-line);
	border-radius: var(--cc-r-pill);
}

body #bbpress-forums .bbp-forums-list > li a {
	color: var(--cc-red);
	font-size: var(--cc-fs-meta);
	font-weight: 600;
	text-decoration: none;
}

body #bbpress-forums .bbp-forums-list > li:hover {
	border-color: var(--cc-red);
	background: var(--cc-surface-accent);
}

/* ------------------------------- 8. breadcrumb, topic head meta, pagination */
body #bbpress-forums div.bbp-breadcrumb .bbp-breadcrumb-current {
	color: var(--cc-ink);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	margin-top: var(--cc-2);
}

body #bbpress-forums div.bbp-breadcrumb > p > a {
	color: var(--cc-muted);
	font-size: var(--cc-fs-meta);
}

body #bbpress-forums .youzify-bbp-topic-head-meta-item {
	color: var(--cc-muted);
	font-size: var(--cc-fs-meta);
}

body #bbpress-forums .youzify-bbp-head-meta-last-updated a {
	color: var(--cc-red);      /* was #03a9f4, 2.63:1 */
}

body #bbpress-forums .bbp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--cc-line-strong);
	border-radius: var(--cc-r-pill);
	color: var(--cc-ink);
	background: var(--cc-surface);
	font-size: var(--cc-fs-meta);
	font-weight: 600;
	margin-right: var(--cc-2);
}

body #bbpress-forums .bbp-pagination .page-numbers:hover {
	border-color: var(--cc-red);
	color: var(--cc-red);
}

body #bbpress-forums .bbp-pagination .page-numbers.current {
	background: var(--cc-red);
	border-color: var(--cc-red);
	color: var(--cc-on-red);
}

/* ------------------------------------------------------------- 9. narrow
 * Ours, not an override of Youzify's: its reply stack is scoped to .bbp-body,
 * which the threaded walker's bare <li> closes before any reply is inside it.
 */
@media (max-width: 640px) {
	body #bbpress-forums {
		padding-inline: var(--cc-4);   /* the 16px gutter */
	}

	body #bbpress-forums div:is(.reply, .topic) {
		flex-direction: column;
		gap: var(--cc-3);
		padding: var(--cc-4);
	}

	/* identity becomes a strip: avatar, then name, then the badge pushed right */
	body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author {
		flex: 1 1 auto;
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: var(--cc-3);
		text-align: left;
		padding-bottom: var(--cc-3);
		border-bottom: 1px solid var(--cc-line);
	}

	body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author > a.bbp-author-link {
		flex-direction: row;
		align-items: center;
		gap: var(--cc-3);
	}

	body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author img.avatar {
		margin: 0;
		float: none;   /* cancels Youzify's float:left at its own breakpoint */
	}

	body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author .bbp-author-name {
		margin: 0;
		font-size: var(--cc-fs-meta);
	}

	body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-author > div.bbp-author-role {
		margin-left: auto;
	}

	body #bbpress-forums div:is(.reply, .topic) > div.bbp-reply-content {
		width: 100%;
		max-width: none;   /* the card is already narrower than 66ch */
	}

	body #bbpress-forums div.bbp-reply-header {
		padding: var(--cc-3) var(--cc-4) var(--cc-2);
		text-align: left;
	}

	body #bbpress-forums div.bbp-meta {
		font-size: .75rem;
	}

	body #bbpress-forums div.bbp-reply-header a.bbp-reply-permalink {
		display: inline-flex;   /* Youzify hides it below 480 */
	}

	body #bbpress-forums ul.bbp-threaded-replies {
		border-left-width: 2px;
		margin-left: 0;
	}

	body #bbpress-forums li.bbp-body > ul.topic,
	body #bbpress-forums li.bbp-body > ul.forum {
		flex-direction: column;
		align-items: stretch;
		padding: var(--cc-4);
	}

	body #bbpress-forums li.bbp-body > ul.topic > li.youzify-bbp-freshness,
	body #bbpress-forums li.bbp-body > ul.forum > li.youzify-bbp-forum-freshness {
		flex: 1 1 auto;
	}

	body #bbpress-forums div.bbp-submit-wrapper button {
		width: 100%;
	}
}

/* ------------------------------- 12. the two columns start on the same line
 *
 * The breadcrumb ("Home / Community Chat") lives INSIDE .youzify-main-column,
 * above the forum list, so it pushes the forum's first white card down and the
 * sidebar's first white widget not at all. On screen the sidebar floats about
 * three quarters of an inch higher than the forum beside it.
 *
 * Rather than nudge the sidebar by a measured number that the next font change
 * invalidates, the breadcrumb is pinned to --cc-crumb-h and the sidebar is
 * offset by that plus the same gap. The two are then locked together: they can
 * only drift if someone edits one and not the variable.
 *
 * Only on the forum. The member profile shares .youzify-page and this
 * stylesheet, and has no breadcrumb to align to.
 */
body .youzify-forum #bbpress-forums div.bbp-breadcrumb {
	min-height: var(--cc-crumb-h);
	margin: 0 0 var(--cc-5);
}

@media (min-width: 768px) {
	body .youzify-forum .youzify-sidebar-column {
		margin-top: calc(var(--cc-crumb-h) + var(--cc-5));
	}
}