/* ==========================================================================
   PassTheBar Community

   Every rule in this file begins with #pbcm-root. Nothing here can reach any
   other part of the site, and nothing Avada does to the page around it needs
   to be fought.

   Two decisions worth stating:

   Bodies are set in a serif. Long reading is the primary activity here, the
   subject is a profession that reads on paper, and it separates a discussion
   from the sans-serif interface around it at a glance. Titles and interface
   text stay in a tight sans so the two roles never blur.

   The amber signal colour is reserved exclusively for moderation states. It
   appears nowhere else, so "held for review" can never be mistaken for an
   ordinary piece of interface.
   ========================================================================== */

#pbcm-root {
	/* PassTheBar navy, taken from the mark in the header rather than
	   inherited from the exam tools. The community should look like part of
	   the site somebody already bought from, not like a bolted on forum. */
	--pbcm-accent: #26406e;
	--pbcm-accent-deep: #1a2d4f;
	--pbcm-accent-soft: rgba(38, 64, 110, 0.08);
	--pbcm-accent-line: rgba(38, 64, 110, 0.18);

	--pbcm-ink: #16203a;
	--pbcm-ink-soft: #5b6780;
	--pbcm-line: #dfe4ec;

	/* Three surfaces, not one. A single flat white is what made this read as
	   empty: with nothing sitting on anything, there is no depth for the eye
	   to use and every block has the same weight. */
	--pbcm-page: #f4f6fa;
	--pbcm-surface: #ffffff;
	--pbcm-surface-alt: #eef1f7;

	--pbcm-signal: #a1550a;
	--pbcm-signal-soft: #fdf5e9;
	--pbcm-radius: 12px;
	--pbcm-measure: 68ch;

	--pbcm-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pbcm-serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;

	color: var(--pbcm-ink);
	font-family: var(--pbcm-sans);
	font-size: 16px;
	line-height: 1.55;
	max-width: 1120px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}

/*
   The tint sits on the container itself.
   
   The first attempt used an absolutely positioned pseudo element at z-index
   minus one, on a container that was never position relative. So it anchored
   to some arbitrary ancestor and painted itself behind the theme's own
   background, where nothing could see it. The page stayed white. A background
   on the element needs no positioning context and cannot fail that way.
*/
#pbcm-root {
	background: var(--pbcm-page);
	border-radius: 16px;
	padding: 4px 26px 44px;
	margin-top: 18px;
	margin-bottom: 40px;
}

#pbcm-root *,
#pbcm-root *::before,
#pbcm-root *::after {
	box-sizing: border-box;
}

#pbcm-root a {
	color: var(--pbcm-accent);
	text-decoration: none;
}

#pbcm-root a:hover {
	text-decoration: underline;
}

/* Keyboard focus is visible everywhere, without exception. */
#pbcm-root a:focus-visible,
#pbcm-root button:focus-visible,
#pbcm-root [tabindex]:focus-visible {
	outline: 2px solid var(--pbcm-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ------------------------------------------------------------ cycle band */
/* The signature element. The sitting is a fixed point and the present moves
   toward it, which is the one thing everybody reading this page is thinking
   about and the one thing a general purpose forum could not draw. */

#pbcm-root .pbcm-cycleband {
	margin: 0 -26px 30px;
	padding: 18px 26px 20px;
	background: linear-gradient(180deg, var(--pbcm-accent) 0%, var(--pbcm-accent-deep) 100%);
	border-radius: 16px 16px 0 0;
	color: #ffffff;
}

#pbcm-root .pbcm-cycleband .pbcm-cycleband-label,
#pbcm-root .pbcm-cycleband .pbcm-cycleband-days {
	color: rgba(255, 255, 255, 0.78);
}

#pbcm-root .pbcm-cycleband .pbcm-cycleband-days strong {
	color: #ffffff;
}

#pbcm-root .pbcm-cycleband .pbcm-cycleband-track {
	background: rgba(255, 255, 255, 0.22);
}

#pbcm-root .pbcm-cycleband .pbcm-cycleband-fill {
	background: #ffffff;
}

#pbcm-root .pbcm-cycleband .pbcm-cycleband-marker {
	background: var(--pbcm-accent-deep);
	border-color: #ffffff;
}

#pbcm-root .pbcm-cycleband-text {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
}

#pbcm-root .pbcm-cycleband-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pbcm-ink-soft);
}

#pbcm-root .pbcm-cycleband-days {
	font-size: 14px;
	color: var(--pbcm-ink-soft);
}

#pbcm-root .pbcm-cycleband-days strong {
	font-size: 19px;
	font-weight: 650;
	color: var(--pbcm-ink);
	font-variant-numeric: tabular-nums;
}

#pbcm-root .pbcm-cycleband-track {
	position: relative;
	height: 3px;
	background: var(--pbcm-line);
	border-radius: 2px;
}

#pbcm-root .pbcm-cycleband-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--pbcm-accent);
	border-radius: 2px;
}

#pbcm-root .pbcm-cycleband-marker {
	position: absolute;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	background: var(--pbcm-surface);
	border: 2.5px solid var(--pbcm-accent);
	border-radius: 50%;
	transform: translateY(-50%);
}

/* ---------------------------------------------------------------- layout */

#pbcm-root .pbcm-shell {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

@media (min-width: 900px) {
	#pbcm-root .pbcm-shell {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 48px;
	}
}

/* ------------------------------------------------------------ typography */

#pbcm-root .pbcm-title {
	font-family: var(--pbcm-sans);
	font-size: 27px;
	font-weight: 650;
	letter-spacing: -0.017em;
	line-height: 1.22;
	margin: 0 0 8px;
	color: var(--pbcm-ink);
}

#pbcm-root .pbcm-lede {
	color: var(--pbcm-ink-soft);
	margin: 0 0 4px;
	max-width: var(--pbcm-measure);
}

#pbcm-root .pbcm-group-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pbcm-ink-soft);
	margin: 0 0 3px;
}

#pbcm-root .pbcm-group-desc {
	font-size: 14px;
	color: var(--pbcm-ink-soft);
	margin: 0;
}

#pbcm-root .pbcm-group {
	margin-bottom: 34px;
}

#pbcm-root .pbcm-group-head {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pbcm-line);
	margin-bottom: 4px;
}


/* ----------------------------------------------------------- identity marks */
/*
   Ten colours, each holding contrast against white at this size, and each
   distinguishable from its neighbours for the most common forms of colour
   blindness. Colour is never the only signal: the initials and the name are
   always there too, so nothing is lost if the colour is not perceived.
*/

#pbcm-root .pbcm-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	font-family: var(--pbcm-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
	background: #64748b;
	user-select: none;
}

#pbcm-root .pbcm-byline .pbcm-avatar,
#pbcm-root .pbcm-reply-head .pbcm-avatar {
	width: 34px;
	height: 34px;
	font-size: 12.5px;
	border-radius: 9px;
}

#pbcm-root .pbcm-thread-meta .pbcm-avatar,
#pbcm-root .pbcm-recent-item .pbcm-avatar {
	width: 24px;
	height: 24px;
	font-size: 9.5px;
	border-radius: 7px;
}

#pbcm-root .pbcm-c0 { background: #26406e; }
#pbcm-root .pbcm-c1 { background: #146b63; }
#pbcm-root .pbcm-c2 { background: #8a4b1f; }
#pbcm-root .pbcm-c3 { background: #6b3f8f; }
#pbcm-root .pbcm-c4 { background: #1f6390; }
#pbcm-root .pbcm-c5 { background: #9c3a52; }
#pbcm-root .pbcm-c6 { background: #4a6320; }
#pbcm-root .pbcm-c7 { background: #3d5a8a; }
#pbcm-root .pbcm-c8 { background: #7a4436; }
#pbcm-root .pbcm-c9 { background: #2f6b56; }

#pbcm-root .pbcm-avatar.is-staff {
	background: var(--pbcm-accent);
	box-shadow: 0 0 0 2px rgba(38, 64, 110, 0.18);
}

/* Anonymous posts all share one mark. A distinct colour would let you follow
   one anonymous author from post to post, which defeats the point of it. */
#pbcm-root .pbcm-avatar.is-anon {
	background: #9aa3b2;
}

/* ---------------------------------------------------------------- boards */

#pbcm-root .pbcm-boards {
	list-style: none;
	margin: 0;
	padding: 0;
}

#pbcm-root .pbcm-board {
	margin-bottom: 10px;
}

#pbcm-root .pbcm-board-link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	color: var(--pbcm-ink);
	text-decoration: none;
	background: var(--pbcm-surface);
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

#pbcm-root a.pbcm-board-link:hover {
	text-decoration: none;
	border-color: var(--pbcm-accent-line);
	box-shadow: 0 2px 10px rgba(22, 32, 58, 0.07);
	transform: translateY(-1px);
}

/* The category mark. Emoji rather than an icon font: it loads nothing, it
   works everywhere, and it gives each board a shape you recognise before you
   have read the name. */
#pbcm-root .pbcm-board-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	line-height: 1;
	background: var(--pbcm-surface-alt);
	border-radius: 10px;
}

#pbcm-root .pbcm-board-stats {
	flex: 0 0 auto;
	text-align: right;
	line-height: 1.25;
}

#pbcm-root .pbcm-board-count {
	display: block;
	font-size: 19px;
	font-weight: 650;
	color: var(--pbcm-accent);
	font-variant-numeric: tabular-nums;
}

#pbcm-root .pbcm-board-count-label,
#pbcm-root .pbcm-board-when {
	display: block;
	font-size: 12px;
	color: var(--pbcm-ink-soft);
}

#pbcm-root .pbcm-board-when {
	margin-top: 3px;
}

#pbcm-root .pbcm-home-head {
	margin-bottom: 22px;
}

#pbcm-root a.pbcm-board-link:hover .pbcm-board-name {
	color: var(--pbcm-accent);
}

#pbcm-root .pbcm-board-text {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

#pbcm-root .pbcm-board-name {
	font-weight: 600;
	display: block;
	font-size: 16.5px;
	letter-spacing: -0.006em;
}

#pbcm-root .pbcm-board-desc {
	display: block;
	font-size: 13.5px;
	color: var(--pbcm-ink-soft);
	line-height: 1.4;
	margin-top: 2px;
	max-width: 56ch;
}

#pbcm-root .pbcm-board-meta {
	font-size: 13px;
	color: var(--pbcm-ink-soft);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- threads */

#pbcm-root .pbcm-threads {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

#pbcm-root .pbcm-thread-row {
	padding: 15px 18px;
	background: var(--pbcm-surface);
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	margin-bottom: 9px;
	transition: border-color 0.14s ease;
}

#pbcm-root .pbcm-thread-row:hover {
	border-color: var(--pbcm-accent-line);
}

#pbcm-root .pbcm-thread-row.is-pinned {
	border-left: 3px solid var(--pbcm-accent);
}

#pbcm-root .pbcm-thread-primary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 5px;
}

#pbcm-root .pbcm-thread-title {
	font-size: 17px;
	font-weight: 550;
	color: var(--pbcm-ink);
	letter-spacing: -0.008em;
}

#pbcm-root .pbcm-thread-title:hover {
	color: var(--pbcm-accent);
	text-decoration: none;
}

#pbcm-root .pbcm-thread-meta {
	font-size: 13px;
	color: var(--pbcm-ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: baseline;
}

#pbcm-root .pbcm-thread-author {
	font-weight: 550;
	color: var(--pbcm-ink-soft);
}

#pbcm-root .pbcm-dot {
	opacity: 0.5;
}

/* ------------------------------------------------------------------ tags */

#pbcm-root .pbcm-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 4px;
	background: var(--pbcm-surface-alt);
	color: var(--pbcm-ink-soft);
	border: 1px solid var(--pbcm-line);
	white-space: nowrap;
}

#pbcm-root .pbcm-tag-question {
	background: var(--pbcm-accent-soft);
	color: var(--pbcm-accent);
	border-color: transparent;
}

#pbcm-root .pbcm-answered {
	font-size: 12px;
	font-weight: 600;
	color: var(--pbcm-accent);
}

#pbcm-root .pbcm-locked {
	font-size: 12px;
	color: var(--pbcm-ink-soft);
}

/* ----------------------------------------------------------- breadcrumbs */

#pbcm-root .pbcm-crumbs {
	font-size: 13.5px;
	color: var(--pbcm-ink-soft);
	padding: 20px 0 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: baseline;
}

#pbcm-root .pbcm-crumb-sep {
	opacity: 0.45;
}

/* ------------------------------------------------------------- a thread */

#pbcm-root .pbcm-op {
	padding-bottom: 26px;
	border-bottom: 1px solid var(--pbcm-line);
}

#pbcm-root .pbcm-op-head .pbcm-tag {
	margin-bottom: 11px;
}

#pbcm-root .pbcm-byline {
	font-size: 13.5px;
	color: var(--pbcm-ink-soft);
	margin: 0 0 20px;
	display: flex;
	gap: 7px;
	align-items: baseline;
	flex-wrap: wrap;
}

#pbcm-root .pbcm-byline-author,
#pbcm-root .pbcm-reply-author {
	font-weight: 600;
	color: var(--pbcm-ink);
}

/* The reading surface. */
#pbcm-root .pbcm-body {
	font-family: var(--pbcm-serif);
	font-size: 17.5px;
	line-height: 1.66;
	max-width: var(--pbcm-measure);
	color: var(--pbcm-ink);
}

#pbcm-root .pbcm-body p {
	margin: 0 0 1em;
}

#pbcm-root .pbcm-body p:last-child {
	margin-bottom: 0;
}

#pbcm-root .pbcm-body ul,
#pbcm-root .pbcm-body ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

#pbcm-root .pbcm-body blockquote {
	margin: 0 0 1em;
	padding-left: 16px;
	border-left: 2px solid var(--pbcm-line);
	color: var(--pbcm-ink-soft);
}

#pbcm-root .pbcm-body code,
#pbcm-root .pbcm-body pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--pbcm-surface-alt);
	border-radius: 4px;
}

#pbcm-root .pbcm-body code {
	padding: 1px 5px;
}

#pbcm-root .pbcm-body pre {
	padding: 12px 14px;
	overflow-x: auto;
}

/* --------------------------------------------------------------- replies */

#pbcm-root .pbcm-replies {
	margin-top: 30px;
}

#pbcm-root .pbcm-replies-head {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pbcm-ink-soft);
	margin: 0 0 4px;
	font-variant-numeric: tabular-nums;
}

#pbcm-root .pbcm-reply {
	padding: 20px 0;
	border-bottom: 1px solid var(--pbcm-line);
}

#pbcm-root .pbcm-reply.is-accepted {
	background: var(--pbcm-accent-soft);
	border-bottom-color: transparent;
	border-radius: var(--pbcm-radius);
	padding: 18px 20px;
	margin: 8px 0 12px;
}

#pbcm-root .pbcm-accepted-flag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pbcm-accent);
	margin: 0 0 8px;
}

#pbcm-root .pbcm-reply-head {
	font-size: 13.5px;
	color: var(--pbcm-ink-soft);
	margin-bottom: 10px;
	display: flex;
	gap: 7px;
	align-items: baseline;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------ the gate */

#pbcm-root .pbcm-gate {
	margin: 22px 0 8px;
	padding: 26px 24px;
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	background: var(--pbcm-surface-alt);
	text-align: center;
}

#pbcm-root .pbcm-gate-head {
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.012em;
	margin: 0 0 5px;
	color: var(--pbcm-ink);
}

#pbcm-root .pbcm-gate-proof {
	font-size: 13.5px;
	color: var(--pbcm-ink-soft);
	margin: 0 0 12px;
}

#pbcm-root .pbcm-gate-body {
	margin: 0 auto 18px;
	max-width: 44ch;
	color: var(--pbcm-ink-soft);
	font-size: 15px;
}

/* --------------------------------------------------------------- panels */

#pbcm-root .pbcm-panel {
	padding: 20px;
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	margin-bottom: 20px;
	background: var(--pbcm-surface);
}

#pbcm-root .pbcm-panel-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pbcm-ink-soft);
	margin: 0 0 13px;
}

#pbcm-root .pbcm-panel-join {
	background: var(--pbcm-surface-alt);
}

#pbcm-root .pbcm-panel p {
	font-size: 14.5px;
	color: var(--pbcm-ink-soft);
	margin: 0 0 12px;
}

#pbcm-root .pbcm-recent {
	list-style: none;
	margin: 0;
	padding: 0;
}

#pbcm-root .pbcm-recent-item {
	padding: 9px 0;
	border-bottom: 1px solid var(--pbcm-line);
	font-size: 14.5px;
	line-height: 1.4;
}

#pbcm-root .pbcm-recent-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

#pbcm-root .pbcm-recent-meta {
	display: block;
	font-size: 12.5px;
	color: var(--pbcm-ink-soft);
	margin-top: 2px;
}

/* -------------------------------------------------------------- notices */
/* Amber appears here and nowhere else in the plugin. */

#pbcm-root .pbcm-notice {
	padding: 13px 16px;
	border-radius: var(--pbcm-radius);
	font-size: 14.5px;
	margin: 0 0 22px;
	border: 1px solid transparent;
}

#pbcm-root .pbcm-notice-archive {
	background: var(--pbcm-signal-soft);
	border-color: rgba(161, 85, 10, 0.22);
	color: var(--pbcm-signal);
}

/* -------------------------------------------------------------- buttons */

#pbcm-root .pbcm-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
}

#pbcm-root .pbcm-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 7px;
	border: 1px solid var(--pbcm-line);
	background: var(--pbcm-surface);
	color: var(--pbcm-ink);
	font-size: 14.5px;
	font-weight: 550;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.14s ease, border-color 0.14s ease;
}

#pbcm-root .pbcm-btn:hover {
	border-color: var(--pbcm-accent);
	color: var(--pbcm-accent);
	text-decoration: none;
}

#pbcm-root .pbcm-btn-primary {
	background: var(--pbcm-accent);
	border-color: var(--pbcm-accent);
	color: #ffffff;
}

#pbcm-root .pbcm-btn-primary:hover {
	background: var(--pbcm-accent-deep);
	border-color: var(--pbcm-accent-deep);
	color: #ffffff;
}

/* ------------------------------------------------------- empty and pager */

#pbcm-root .pbcm-empty-state {
	padding: 44px 24px;
	text-align: center;
	border: 1px dashed var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	margin: 24px 0;
}

#pbcm-root .pbcm-empty-head {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--pbcm-ink);
}

#pbcm-root .pbcm-empty-state p {
	color: var(--pbcm-ink-soft);
	margin: 0 auto 14px;
	max-width: 46ch;
}

#pbcm-root .pbcm-empty {
	color: var(--pbcm-ink-soft);
	font-size: 14.5px;
	margin: 0;
}

#pbcm-root .pbcm-pager {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 24px 0 0;
}

#pbcm-root .pbcm-page {
	min-width: 34px;
	padding: 6px 9px;
	text-align: center;
	border: 1px solid var(--pbcm-line);
	border-radius: 6px;
	font-size: 14px;
	color: var(--pbcm-ink-soft);
	font-variant-numeric: tabular-nums;
}

#pbcm-root a.pbcm-page:hover {
	border-color: var(--pbcm-accent);
	color: var(--pbcm-accent);
	text-decoration: none;
}

#pbcm-root .pbcm-page.is-current {
	background: var(--pbcm-accent);
	border-color: var(--pbcm-accent);
	color: #ffffff;
}


/* ------------------------------------------------------------- threading */
/* Indentation is a rail, not a margin. A left border keeps the eye on the
   chain while costing far less of the reading column than padding would,
   which is what matters at 380px. */


/*
   The label that answers "who is this aimed at".
   
   It used to appear only once indentation ran out, which meant the majority of
   replies showed nothing at all and you had to trace the rail upward to work
   out who was being answered. Naming the parent on every nested reply is the
   difference between reading a conversation and decoding one.
*/
#pbcm-root .pbcm-replying-to {
	font-size: 12px;
	font-weight: 550;
	color: var(--pbcm-accent);
	background: var(--pbcm-accent-soft);
	border-radius: 20px;
	padding: 2px 9px;
	white-space: nowrap;
}

#pbcm-root .pbcm-replying-to::before {
	content: "\21B3";
	margin-right: 4px;
	opacity: 0.7;
}


/* ---------------------------------------------------------------- badges */

#pbcm-root .pbcm-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--pbcm-surface-alt);
	color: var(--pbcm-ink-soft);
	border: 1px solid var(--pbcm-line);
	vertical-align: 1px;
}

#pbcm-root .pbcm-badge-staff {
	background: var(--pbcm-accent);
	border-color: var(--pbcm-accent);
	color: #ffffff;
}

#pbcm-root .pbcm-badge-op {
	background: var(--pbcm-accent);
	border-color: var(--pbcm-accent);
	color: #ffffff;
}

/* The person who started it, wherever they appear again further down. */
#pbcm-root .pbcm-reply.is-op {
	border-left: 3px solid var(--pbcm-accent);
}


/* ------------------------------------------------------------------ forms */

#pbcm-root .pbcm-compose {
	margin: 22px 0 8px;
}

#pbcm-root .pbcm-form {
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	padding: 18px;
	margin: 14px 0 8px;
	background: var(--pbcm-surface);
}

#pbcm-root .pbcm-form-reply {
	background: var(--pbcm-surface-alt);
}

#pbcm-root .pbcm-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pbcm-ink-soft);
	margin: 0 0 5px;
}

#pbcm-root .pbcm-input {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pbcm-line);
	border-radius: 7px;
	background: var(--pbcm-surface);
	color: var(--pbcm-ink);
	font-family: var(--pbcm-sans);
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
	line-height: 1.5;
	margin: 0 0 16px;
}

#pbcm-root .pbcm-textarea {
	font-family: var(--pbcm-serif);
	font-size: 17px;
	line-height: 1.6;
	resize: vertical;
	min-height: 110px;
}

#pbcm-root .pbcm-input:focus {
	outline: none;
	border-color: var(--pbcm-accent);
	box-shadow: 0 0 0 3px var(--pbcm-accent-soft);
}

#pbcm-root .pbcm-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--pbcm-ink-soft) 50%),
		linear-gradient(135deg, var(--pbcm-ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 38px;
}

#pbcm-root .pbcm-check {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 13.5px;
	color: var(--pbcm-ink-soft);
	margin: 0 0 16px;
	line-height: 1.45;
	cursor: pointer;
}

#pbcm-root .pbcm-check input {
	margin-top: 2px;
	flex: 0 0 auto;
}

#pbcm-root .pbcm-form-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* The honeypot. Off screen rather than display none, because some bots skip
   anything hidden and a visitor using a screen reader is told to leave it. */
#pbcm-root .pbcm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#pbcm-root .pbcm-cancel {
	border-color: transparent;
	color: var(--pbcm-ink-soft);
}

/* ---------------------------------------------------------- live warning */
/* Amber, the moderation colour, and nowhere else in the interface. */

#pbcm-root .pbcm-warn {
	background: var(--pbcm-signal-soft);
	border: 1px solid rgba(161, 85, 10, 0.28);
	color: var(--pbcm-signal);
	border-radius: 7px;
	padding: 11px 13px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}

/* ------------------------------------------------------------ post actions */

#pbcm-root .pbcm-post-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 10px;
}

#pbcm-root .pbcm-link-btn {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--pbcm-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--pbcm-ink-soft);
	cursor: pointer;
}

#pbcm-root .pbcm-link-btn:hover {
	color: var(--pbcm-accent);
	text-decoration: underline;
}

#pbcm-root .pbcm-addpost {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--pbcm-line);
}

#pbcm-root .pbcm-addpost-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pbcm-ink-soft);
	margin: 0 0 4px;
}

#pbcm-root .pbcm-compose-prompt {
	margin: 26px 0 0;
	padding: 22px;
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	background: var(--pbcm-surface-alt);
	text-align: center;
}

#pbcm-root .pbcm-compose-prompt p {
	color: var(--pbcm-ink-soft);
	margin: 0 auto 14px;
	max-width: 46ch;
	font-size: 15px;
}

/* --------------------------------------------------------- moderator bar */
/* Visually quiet. A moderator reads far more than they act, so the controls
   sit back until wanted rather than shouting over every post. */

#pbcm-root .pbcm-modbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 14px;
	padding: 8px 10px;
	border: 1px dashed var(--pbcm-line);
	border-radius: 7px;
	background: var(--pbcm-surface-alt);
	opacity: 0.72;
	transition: opacity 0.14s ease;
}

#pbcm-root .pbcm-modbar:hover,
#pbcm-root .pbcm-modbar:focus-within {
	opacity: 1;
}

#pbcm-root .pbcm-modbar-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pbcm-ink-soft);
	margin-right: 4px;
}

#pbcm-root .pbcm-mod-form {
	display: inline;
	margin: 0;
}

#pbcm-root .pbcm-mod-btn {
	font-family: var(--pbcm-sans);
	font-size: 12.5px;
	font-weight: 550;
	padding: 4px 9px;
	border: 1px solid var(--pbcm-line);
	border-radius: 5px;
	background: var(--pbcm-surface);
	color: var(--pbcm-ink-soft);
	cursor: pointer;
	line-height: 1.3;
}

#pbcm-root .pbcm-mod-btn:hover {
	border-color: var(--pbcm-accent);
	color: var(--pbcm-accent);
}

#pbcm-root .pbcm-mod-btn.is-go:hover {
	background: var(--pbcm-accent);
	border-color: var(--pbcm-accent);
	color: #ffffff;
}

#pbcm-root .pbcm-mod-btn.is-danger:hover {
	background: #b3261e;
	border-color: #b3261e;
	color: #ffffff;
}

/* --------------------------------------------------------- notice states */

#pbcm-root .pbcm-notice-success {
	background: var(--pbcm-accent-soft);
	border-color: transparent;
	color: var(--pbcm-accent);
}

#pbcm-root .pbcm-notice-info,
#pbcm-root .pbcm-notice-held,
#pbcm-root .pbcm-notice-locked {
	background: var(--pbcm-signal-soft);
	border-color: rgba(161, 85, 10, 0.22);
	color: var(--pbcm-signal);
}

#pbcm-root .pbcm-notice-error {
	background: #fdf0ef;
	border-color: rgba(179, 38, 30, 0.25);
	color: #8c1d18;
}


/* ------------------------------------------------- posts, made legible */
/*
   The complaint was that you could not tell who was saying what. Three things
   fix that, and none of them is more text:

     the identity mark gives each person a shape,
     the post sits on a surface so its boundary is visible,
     the author line is heavier than the body so it reads as a label.
*/

#pbcm-root .pbcm-op {
	background: var(--pbcm-surface);
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	padding: 24px 26px;
	margin-top: 4px;
}

#pbcm-root .pbcm-reply {
	background: var(--pbcm-surface);
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	padding: 18px 20px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--pbcm-line);
}

#pbcm-root .pbcm-reply.is-accepted {
	border: 1px solid var(--pbcm-accent-line);
	background: var(--pbcm-accent-soft);
	padding: 18px 20px;
	margin: 8px 0 14px;
}

#pbcm-root .pbcm-byline,
#pbcm-root .pbcm-reply-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--pbcm-ink-soft);
}

#pbcm-root .pbcm-byline {
	margin: 0 0 18px;
}

#pbcm-root .pbcm-reply-head {
	margin-bottom: 12px;
}

#pbcm-root .pbcm-byline-author,
#pbcm-root .pbcm-reply-author {
	font-weight: 650;
	font-size: 14.5px;
	color: var(--pbcm-ink);
	letter-spacing: -0.004em;
}

/* ------------------------------------------------------------- threading */
/*
   Making a reply visibly belong to the one above it.
   
   The previous version indented a first level reply by four pixels, which is
   invisible, so a thread read as a flat column of posts and the only way to
   work out who was answering whom was to read the names. Three things fix it,
   and they are deliberately redundant, because any one of them alone fails for
   somebody: a step large enough to see, a rail joining a reply to its parent,
   and the parent named in words on the reply itself.
   
   The steps are 34 and 68 pixels. Large enough to register at a glance, small
   enough that a third level reply still has a usable reading column.
*/

#pbcm-root .pbcm-reply {
	position: relative;
}

#pbcm-root .pbcm-depth-1,
#pbcm-root .pbcm-depth-2,
#pbcm-root .pbcm-depth-3 {
	border: 1px solid var(--pbcm-line);
	padding: 16px 18px;
	background: var(--pbcm-surface);
}

#pbcm-root .pbcm-depth-1 { margin-left: 34px; }
#pbcm-root .pbcm-depth-2 { margin-left: 68px; }
#pbcm-root .pbcm-depth-3 { margin-left: 102px; }

/*
   The rail and the elbow.
   
   A vertical line runs up the gutter to the left of a nested reply, and turns
   in towards it at the height of the author row. That corner is what says this
   post hangs off the one above rather than merely sitting below it.
*/
#pbcm-root .pbcm-depth-1::before,
#pbcm-root .pbcm-depth-2::before,
#pbcm-root .pbcm-depth-3::before {
	content: "";
	position: absolute;
	left: -18px;
	top: -11px;
	bottom: 0;
	width: 2px;
	background: var(--pbcm-line);
	border-radius: 2px;
	pointer-events: none;
}

#pbcm-root .pbcm-depth-1::after,
#pbcm-root .pbcm-depth-2::after,
#pbcm-root .pbcm-depth-3::after {
	content: "";
	position: absolute;
	left: -18px;
	top: 30px;
	width: 16px;
	height: 2px;
	background: var(--pbcm-line);
	pointer-events: none;
}

/* The last reply in a run stops its rail at the elbow, so the line does not
   trail off past the end of the conversation. */
#pbcm-root .pbcm-depth-1:last-child::before,
#pbcm-root .pbcm-depth-2:last-child::before,
#pbcm-root .pbcm-depth-3:last-child::before {
	bottom: auto;
	height: 41px;
}

#pbcm-root .pbcm-depth-1:hover::before,
#pbcm-root .pbcm-depth-1:hover::after,
#pbcm-root .pbcm-depth-2:hover::before,
#pbcm-root .pbcm-depth-2:hover::after,
#pbcm-root .pbcm-depth-3:hover::before,
#pbcm-root .pbcm-depth-3:hover::after {
	background: var(--pbcm-accent);
}

/* Each level steps back one shade, so depth survives even where the rail is
   clipped or the indent is compressed on a narrow screen. */
#pbcm-root .pbcm-depth-1 { background: #fcfdfe; }
#pbcm-root .pbcm-depth-2 { background: #f9fafd; }
#pbcm-root .pbcm-depth-3 { background: var(--pbcm-surface-alt); }

/* Nested replies read slightly tighter than top level ones. */
#pbcm-root .pbcm-depth-1 .pbcm-body,
#pbcm-root .pbcm-depth-2 .pbcm-body,
#pbcm-root .pbcm-depth-3 .pbcm-body {
	font-size: 16.5px;
}

/* A top level reply is the start of a new exchange, so it gets air above it
   that a nested one does not. */
#pbcm-root .pbcm-depth-0 {
	margin-top: 18px;
}

#pbcm-root .pbcm-depth-1,
#pbcm-root .pbcm-depth-2,
#pbcm-root .pbcm-depth-3 {
	margin-top: 9px;
}

#pbcm-root .pbcm-replies-head {
	margin: 26px 0 12px;
	font-size: 13px;
}

/* The sidebar and panels sit on the page tint like everything else. */
#pbcm-root .pbcm-recent-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 11px 0;
}

#pbcm-root .pbcm-recent-text {
	min-width: 0;
}

#pbcm-root .pbcm-recent-item a {
	font-weight: 550;
	color: var(--pbcm-ink);
	display: block;
}

#pbcm-root .pbcm-recent-item a:hover {
	color: var(--pbcm-accent);
}

#pbcm-root .pbcm-group-head {
	border-bottom: 0;
	margin-bottom: 10px;
}

#pbcm-root .pbcm-crumbs {
	padding: 18px 0 14px;
}

#pbcm-root .pbcm-board-head {
	margin-bottom: 4px;
}

#pbcm-root .pbcm-form,
#pbcm-root .pbcm-panel,
#pbcm-root .pbcm-addpost {
	background: var(--pbcm-surface);
}

#pbcm-root .pbcm-addpost {
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	padding: 20px;
	margin-top: 24px;
}

#pbcm-root .pbcm-form-reply {
	background: var(--pbcm-surface-alt);
	border-color: transparent;
}

/* A reply box opened under a post sits where the reply itself will land, so
   the indent confirms what is being answered before anything is typed. */
#pbcm-root .pbcm-reply .pbcm-form-reply {
	margin-left: 34px;
	margin-top: 10px;
	border-left: 2px solid var(--pbcm-accent-line);
	border-radius: 0 var(--pbcm-radius) var(--pbcm-radius) 0;
}

#pbcm-root .pbcm-depth-1 .pbcm-form-reply,
#pbcm-root .pbcm-depth-2 .pbcm-form-reply,
#pbcm-root .pbcm-depth-3 .pbcm-form-reply {
	margin-left: 0;
}

#pbcm-root .pbcm-addpost .pbcm-form-reply {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 8px 0 0;
}

#pbcm-root .pbcm-empty-state,
#pbcm-root .pbcm-compose-prompt {
	background: var(--pbcm-surface);
}

#pbcm-root .pbcm-tag {
	background: var(--pbcm-surface-alt);
	border-color: transparent;
}

#pbcm-root .pbcm-tag-question {
	background: var(--pbcm-accent);
	color: #ffffff;
}


/* ------------------------------------------------------ the pulsing call */
/*
   A single steady pulse rather than a loop that never stops. The ring is a
   separate pseudo element so only it animates, which keeps the button itself
   crisp and the work off the main thread. It stops on hover, because once
   somebody has found the button the animation has done its job.
*/

#pbcm-root .pbcm-btn-pulse {
	position: relative;
	padding: 12px 22px;
	font-size: 15px;
	box-shadow: 0 2px 10px rgba(38, 64, 110, 0.22);
}

#pbcm-root .pbcm-btn-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 7px;
	border: 2px solid var(--pbcm-accent);
	opacity: 0;
	pointer-events: none;
	animation: pbcm-pulse 2.8s ease-out infinite;
}

#pbcm-root .pbcm-btn-pulse:hover::after,
#pbcm-root .pbcm-btn-pulse:focus-visible::after {
	animation: none;
}

@keyframes pbcm-pulse {
	0%   { transform: scale(1);    opacity: 0.55; }
	70%  { transform: scale(1.14); opacity: 0; }
	100% { transform: scale(1.14); opacity: 0; }
}

#pbcm-root .pbcm-plus {
	font-size: 17px;
	font-weight: 400;
	margin-right: 3px;
	vertical-align: -1px;
}

#pbcm-root .pbcm-home-actions,
#pbcm-root .pbcm-board-actions {
	margin: 16px 0 4px;
	display: flex;
}

#pbcm-root .pbcm-board-actions {
	justify-content: flex-end;
	margin: 0 0 6px;
}

/* ------------------------------------------------------------ share links */

#pbcm-root .pbcm-share {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pbcm-ink-soft);
	text-decoration: none;
	padding: 3px 8px;
	border-radius: 6px;
	transition: color 0.14s ease, background-color 0.14s ease;
}

#pbcm-root .pbcm-share:hover {
	color: var(--pbcm-accent);
	background: var(--pbcm-accent-soft);
	text-decoration: none;
}

#pbcm-root .pbcm-share.is-copied {
	color: var(--pbcm-accent);
	background: var(--pbcm-accent-soft);
}

#pbcm-root .pbcm-share-icon {
	flex: 0 0 auto;
}

#pbcm-root .pbcm-thread-meta .pbcm-share {
	margin-left: auto;
}

#pbcm-root .pbcm-post-actions-op {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--pbcm-line);
}

/* A post arrived at from a shared link. */
#pbcm-root .is-linked {
	animation: pbcm-linked 2.6s ease-out;
}

@keyframes pbcm-linked {
	0%, 55% { box-shadow: 0 0 0 3px var(--pbcm-accent-line); }
	100%    { box-shadow: 0 0 0 3px rgba(38, 64, 110, 0); }
}

/* ---------------------------------------------------------- the composer */

#pbcm-root .pbcm-boards-pick .pbcm-board-link {
	padding: 18px;
}

#pbcm-root .pbcm-board-go {
	flex: 0 0 auto;
	color: var(--pbcm-ink-soft);
	font-size: 17px;
}

#pbcm-root a.pbcm-board-link:hover .pbcm-board-go {
	color: var(--pbcm-accent);
}

#pbcm-root .pbcm-write-head {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 6px 0 16px;
}

#pbcm-root .pbcm-write-in {
	font-size: 14px;
	color: var(--pbcm-ink-soft);
	margin: 2px 0 0;
}

#pbcm-root .pbcm-write-change {
	margin-left: 10px;
	font-size: 13px;
}

#pbcm-root .pbcm-textarea-tall {
	min-height: 300px;
}

#pbcm-root .pbcm-form-write {
	padding: 22px;
}

#pbcm-root .pbcm-form-note {
	font-size: 13px;
	color: var(--pbcm-ink-soft);
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--pbcm-line);
}

/* -------------------------------------------------------- rules and footer */

#pbcm-root .pbcm-doc {
	background: var(--pbcm-surface);
	border: 1px solid var(--pbcm-line);
	border-radius: var(--pbcm-radius);
	padding: 30px 34px 34px;
	max-width: 760px;
}

#pbcm-root .pbcm-doc-head {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--pbcm-line);
	margin-bottom: 8px;
}

#pbcm-root .pbcm-doc h2 {
	font-family: var(--pbcm-sans);
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -0.008em;
	color: var(--pbcm-ink);
	margin: 30px 0 10px;
}

#pbcm-root .pbcm-doc p {
	font-family: var(--pbcm-serif);
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--pbcm-ink);
	max-width: var(--pbcm-measure);
	margin: 0 0 14px;
}

#pbcm-root .pbcm-doc .pbcm-lede {
	font-family: var(--pbcm-sans);
	font-size: 15px;
	color: var(--pbcm-ink-soft);
	line-height: 1.55;
}

#pbcm-root .pbcm-doc-foot {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--pbcm-line);
	font-size: 13.5px;
	color: var(--pbcm-ink-soft);
	font-family: var(--pbcm-sans);
}

#pbcm-root .pbcm-footer {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--pbcm-line);
	text-align: center;
}

#pbcm-root .pbcm-footer-links {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	font-size: 13.5px;
	font-weight: 550;
}

#pbcm-root .pbcm-footer-note {
	font-size: 13px;
	color: var(--pbcm-ink-soft);
	margin: 12px auto 0;
	max-width: 56ch;
}


/* ------------------------------------------------------------- helpful marks */
/*
   Upvotes only, and no count until somebody has actually pressed it. A column
   of zeroes reads as nobody caring, which is discouraging to the people who
   wrote the posts and untrue on a board this young.
*/

#pbcm-root .pbcm-helpful-form {
	display: inline;
	margin: 0;
}

#pbcm-root .pbcm-helpful {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pbcm-sans);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pbcm-ink-soft);
	background: var(--pbcm-surface);
	border: 1px solid var(--pbcm-line);
	border-radius: 20px;
	padding: 5px 12px 5px 10px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#pbcm-root button.pbcm-helpful:hover {
	color: var(--pbcm-accent);
	background: var(--pbcm-accent-soft);
	border-color: var(--pbcm-accent-line);
}

#pbcm-root .pbcm-helpful.is-voted {
	color: #ffffff;
	background: var(--pbcm-accent);
	border-color: var(--pbcm-accent);
}

#pbcm-root button.pbcm-helpful.is-voted:hover {
	background: var(--pbcm-accent-deep);
	border-color: var(--pbcm-accent-deep);
}

#pbcm-root .pbcm-helpful.is-static {
	cursor: default;
	background: var(--pbcm-surface-alt);
}

#pbcm-root .pbcm-helpful-count {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13px;
}

#pbcm-root .pbcm-helpful-icon {
	flex: 0 0 auto;
	fill: currentColor;
	transition: transform 0.15s ease;
}

#pbcm-root button.pbcm-helpful:hover .pbcm-helpful-icon {
	transform: translateY(-2px);
}

#pbcm-root .pbcm-helpful.is-working {
	opacity: 0.6;
	pointer-events: none;
}

/*
   The two pieces of motion on a vote.
   
   The button gives one short press, and the number lifts as it changes. Both
   are brief and neither loops. They exist to confirm that something happened
   without a page reload, not to be noticed for their own sake.
*/
#pbcm-root .pbcm-helpful.is-popped {
	animation: pbcm-pop 0.34s ease-out;
}

@keyframes pbcm-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.09); }
	100% { transform: scale(1); }
}

#pbcm-root .pbcm-helpful-count.is-bumped {
	animation: pbcm-bump 0.34s ease-out;
}

@keyframes pbcm-bump {
	0%   { transform: translateY(4px); opacity: 0; }
	100% { transform: translateY(0);   opacity: 1; }
}

#pbcm-root .pbcm-helpful.is-notable {
	color: var(--pbcm-accent);
	border-color: var(--pbcm-accent-line);
}

#pbcm-root .pbcm-helpful.is-notable.is-voted {
	color: #ffffff;
}

/*
   A post people found genuinely useful.
   
   The border is on the left only. A full ring competes with the accepted
   answer, which is a stronger statement and needs to stay the loudest thing in
   a discussion. This sits one step below it.
*/
#pbcm-root .pbcm-reply.is-notable {
	border-left: 3px solid var(--pbcm-accent);
	background: #fbfcfe;
}

#pbcm-root .pbcm-reply.is-notable.is-accepted {
	border-left-color: var(--pbcm-accent);
	background: var(--pbcm-accent-soft);
}

#pbcm-root .pbcm-depth-1.is-notable,
#pbcm-root .pbcm-depth-2.is-notable,
#pbcm-root .pbcm-depth-3.is-notable {
	box-shadow: inset 3px 0 0 var(--pbcm-accent);
	border-left: 1px solid var(--pbcm-line);
}

/* ------------------------------------------------------------ reply button */
/*
   Reply was a bare text link sitting among other text, so it read as part of
   the post rather than as the way to answer it. It is now a bordered control
   with an arrow, which is enough to find at a glance and still quiet enough
   that a page of replies does not turn into a page of buttons.
*/

#pbcm-root .pbcm-reply-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pbcm-sans);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pbcm-ink-soft);
	background: var(--pbcm-surface);
	border: 1px solid var(--pbcm-line);
	border-radius: 20px;
	padding: 5px 13px 5px 11px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#pbcm-root .pbcm-reply-btn:hover {
	color: var(--pbcm-accent);
	background: var(--pbcm-accent-soft);
	border-color: var(--pbcm-accent-line);
}

#pbcm-root .pbcm-reply-icon {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

#pbcm-root .pbcm-reply-btn:hover .pbcm-reply-icon {
	transform: translateX(-2px);
}

#pbcm-root .pbcm-post-actions {
	gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
	#pbcm-root .pbcm-helpful,
	#pbcm-root .pbcm-helpful-icon,
	#pbcm-root .pbcm-reply-btn,
	#pbcm-root .pbcm-reply-icon {
		transition: none;
	}

	#pbcm-root .pbcm-helpful.is-popped,
	#pbcm-root .pbcm-helpful-count.is-bumped {
		animation: none;
	}
}

/* -------------------------------------------------------------- narrow */

@media (max-width: 600px) {
	#pbcm-root {
		padding: 0 14px 48px;
	}

	#pbcm-root .pbcm-title {
		font-size: 23px;
	}

	#pbcm-root .pbcm-body {
		font-size: 17px;
	}

	#pbcm-root .pbcm-gate {
		padding: 22px 16px;
	}

	#pbcm-root .pbcm-actions .pbcm-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	/* Tighter, but never so tight that the step stops registering. The rail
	   and elbow move in with it rather than being dropped. */
	#pbcm-root .pbcm-depth-1 { margin-left: 16px; }
	#pbcm-root .pbcm-depth-2 { margin-left: 32px; }
	#pbcm-root .pbcm-depth-3 { margin-left: 48px; }

	#pbcm-root .pbcm-depth-1::before,
	#pbcm-root .pbcm-depth-2::before,
	#pbcm-root .pbcm-depth-3::before,
	#pbcm-root .pbcm-depth-1::after,
	#pbcm-root .pbcm-depth-2::after,
	#pbcm-root .pbcm-depth-3::after {
		left: -9px;
	}

	#pbcm-root .pbcm-depth-1::after,
	#pbcm-root .pbcm-depth-2::after,
	#pbcm-root .pbcm-depth-3::after {
		width: 7px;
	}

	#pbcm-root .pbcm-op { padding: 18px 16px; }
	#pbcm-root .pbcm-reply { padding: 15px 14px; }
	#pbcm-root .pbcm-board-link { padding: 13px 14px; gap: 12px; }
	#pbcm-root .pbcm-board-icon { width: 38px; height: 38px; font-size: 18px; }
	#pbcm-root .pbcm-board-desc { display: none; }
	#pbcm-root .pbcm-boards-pick .pbcm-board-desc { display: block; font-size: 12.5px; }
	#pbcm-root .pbcm-doc { padding: 20px 18px 24px; }
	#pbcm-root .pbcm-share-text { display: none; }
	#pbcm-root .pbcm-helpful-text { display: none; }
	#pbcm-root .pbcm-helpful { padding: 4px 10px; }
	#pbcm-root .pbcm-form-write { padding: 16px; }
	#pbcm-root .pbcm-home-actions .pbcm-btn,
	#pbcm-root .pbcm-board-actions .pbcm-btn { flex: 1 1 auto; text-align: center; }

	#pbcm-root .pbcm-depth-1,
	#pbcm-root .pbcm-depth-2,
	#pbcm-root .pbcm-depth-3 {
		padding: 14px;
	}

	#pbcm-root .pbcm-reply .pbcm-form-reply {
		margin-left: 0;
	}

	#pbcm-root .pbcm-form {
		padding: 14px;
	}

	#pbcm-root .pbcm-form-actions .pbcm-btn {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	#pbcm-root .pbcm-btn {
		transition: none;
	}

	/* The pulse is the one piece of motion here that could genuinely bother
	   somebody, so it is removed entirely rather than slowed. */
	#pbcm-root .pbcm-btn-pulse::after,
	#pbcm-root .is-linked {
		animation: none;
	}

	#pbcm-root .is-linked {
		box-shadow: 0 0 0 3px var(--pbcm-accent-line);
	}
}

/* ----------------------------------------------------------------- print */

@media print {
	#pbcm-root .pbcm-gate,
	#pbcm-root .pbcm-pager,
	#pbcm-root .pbcm-side {
		display: none;
	}
}