.bsia-forums {
	--bsia-forum-ink: #102a43;
	--bsia-forum-muted: #637083;
	--bsia-forum-line: #d8dee8;
	--bsia-forum-soft: #f4f7fa;
	--bsia-forum-blue: #144c87;
	--bsia-forum-red: #c92432;
	--bsia-forum-green: #23745b;
	color: var(--bsia-forum-ink);
	font-family: Barlow, Arial, sans-serif;
}

.bsia-forums * {
	letter-spacing: 0;
}

.bsia-forums-band {
	background: #f7f9fc;
	border-bottom: 1px solid var(--bsia-forum-line);
	padding: 42px 0 30px;
}

.bsia-forums-titlebar,
.bsia-forum-detail-hero,
.bsia-forum-card-heading,
.bsia-forum-meta,
.bsia-forum-card-actions,
.bsia-forum-actions,
.bsia-forum-post-meta,
.bsia-forum-post-stats,
.bsia-forum-post-footer,
.bsia-forum-post-actions {
	align-items: center;
	display: flex;
	gap: 16px;
}

.bsia-forums-titlebar {
	justify-content: space-between;
	margin-bottom: 24px;
}

.bsia-forums-kicker {
	color: var(--bsia-forum-red);
	font-size: 0.78rem;
	font-weight: 700;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.bsia-forums h1,
.bsia-forums h2,
.bsia-forums p {
	margin-top: 0;
}

.bsia-forums h1 {
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.05;
	margin-bottom: 0;
}

.bsia-forums-count {
	background: #fff;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	min-width: 112px;
	padding: 14px 18px;
	text-align: center;
}

.bsia-forums-count span {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
}

.bsia-forums-count small {
	color: var(--bsia-forum-muted);
	font-weight: 600;
	text-transform: uppercase;
}

.bsia-forums-filters {
	align-items: end;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.bsia-forums-filters .form-label {
	color: var(--bsia-forum-muted);
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.bsia-forums-filters .form-select {
	border-color: var(--bsia-forum-line);
	border-radius: 8px;
	min-height: 96px;
}

.bsia-forums-filter-actions {
	display: flex;
	gap: 10px;
}

.bsia-forums-results {
	padding: 34px 0 56px;
}

.bsia-forum-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bsia-forum-card {
	background: #fff;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
}

.bsia-forum-card-media {
	aspect-ratio: 16 / 9;
	background: var(--bsia-forum-soft);
	display: block;
	overflow: hidden;
}

.bsia-forum-card-media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bsia-forum-card-initial {
	align-items: center;
	color: var(--bsia-forum-blue);
	display: flex;
	font-size: 4rem;
	font-weight: 800;
	height: 100%;
	justify-content: center;
	text-transform: uppercase;
}

.bsia-forum-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
}

.bsia-forum-card-heading {
	align-items: start;
	justify-content: space-between;
}

.bsia-forum-card h2 {
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.22;
	margin: 0;
}

.bsia-forum-card h2 a {
	color: var(--bsia-forum-ink);
	text-decoration: none;
}

.bsia-forum-card h2 a:hover {
	color: var(--bsia-forum-blue);
}

.bsia-forum-card p {
	color: var(--bsia-forum-muted);
	display: -webkit-box;
	font-size: 0.98rem;
	line-height: 1.45;
	margin-bottom: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.bsia-forum-meta {
	color: var(--bsia-forum-muted);
	flex-wrap: wrap;
	font-size: 0.92rem;
	margin-top: auto;
}

.bsia-forum-meta strong {
	color: var(--bsia-forum-ink);
}

.bsia-forum-tags,
.bsia-forum-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bsia-forum-tags span,
.bsia-forum-detail-tags span {
	background: #eef4fb;
	border: 1px solid #d7e5f4;
	border-radius: 999px;
	color: var(--bsia-forum-blue);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	padding: 7px 10px;
}

.bsia-forum-tags .bsia-forum-section-tag,
.bsia-forum-detail-tags span {
	background: #eff8f5;
	border-color: #cce5dc;
	color: var(--bsia-forum-green);
}

.bsia-forum-card-actions {
	justify-content: flex-end;
}

.bsia-forums-pagination {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.bsia-forums-empty {
	background: #fff;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	padding: 36px;
	text-align: center;
}

.bsia-forums-empty h1,
.bsia-forums-empty h2 {
	font-size: 1.4rem;
	font-weight: 800;
	margin-bottom: 16px;
}

.bsia-forums-empty-small {
	padding: 24px;
}

.bsia-forum-detail-header {
	margin-bottom: 22px;
}

.bsia-forum-back {
	align-items: center;
	color: var(--bsia-forum-blue);
	display: inline-flex;
	font-weight: 700;
	gap: 8px;
	margin-bottom: 18px;
	text-decoration: none;
}

.bsia-forum-detail-hero {
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	overflow: hidden;
}

.bsia-forum-detail-copy {
	flex: 1;
	padding: 28px;
}

.bsia-forum-detail-copy h1 {
	margin: 10px 0 12px;
	max-width: 900px;
}

.bsia-forum-detail-copy p {
	color: var(--bsia-forum-muted);
	font-size: 1.06rem;
	line-height: 1.55;
	max-width: 900px;
}

.bsia-forum-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 18px;
}

.bsia-forum-detail-meta span {
	border-right: 1px solid var(--bsia-forum-line);
	color: var(--bsia-forum-muted);
	padding-right: 14px;
}

.bsia-forum-detail-meta span:last-child {
	border-right: 0;
}

.bsia-forum-detail-meta strong {
	color: var(--bsia-forum-ink);
}

.bsia-forum-detail-image {
	flex: 0 0 min(34%, 390px);
	min-height: 260px;
}

.bsia-forum-detail-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bsia-forum-alert {
	border-radius: 8px;
}

.bsia-forum-richtext {
	background: #fff;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	margin-bottom: 20px;
	padding: 24px;
}

.bsia-forum-richtext :last-child {
	margin-bottom: 0;
}

.bsia-forum-actions {
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-bottom: 18px;
}

.bsia-forum-actions .btn,
.bsia-forum-post-actions .btn {
	align-items: center;
	display: inline-flex;
	gap: 7px;
	justify-content: center;
}

/* Normalise every standard text button across the forum (top action bar,
   modal footers and composer submit) so they share identical sizing and
   casing. The global theme uppercases/bolds filled buttons only, which made
   e.g. REPORT look different from Cancel. !important is used to defeat that
   theme rule. Colours are left to each button's own variant
   (.btn-primary/.btn-danger/.btn-outline-*/.bsia-forum-submit). */
.bsia-forum-actions .btn,
.bsia-forum-modal .btn:not(.btn-close):not(.btn-link),
.bsia-forum-submit {
	border-radius: 0.375rem !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.5 !important;
	min-width: 0 !important;
	padding: 0.375rem 0.9rem !important;
	text-transform: none !important;
}

.bsia-forum-tabs {
	background: var(--bsia-forum-soft);
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	gap: 8px;
	padding: 8px;
}

.bsia-forum-tabs .nav-link {
	border-radius: 6px;
	color: var(--bsia-forum-ink);
	font-weight: 800;
}

.bsia-forum-tabs .nav-link span {
	background: rgba(16, 42, 67, 0.08);
	border-radius: 999px;
	display: inline-block;
	font-size: 0.78rem;
	margin-left: 6px;
	min-width: 28px;
	padding: 3px 8px;
}

.bsia-forum-tabs .nav-link.active {
	background: var(--bsia-forum-blue);
}

.bsia-forum-tabs .nav-link.active span {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.bsia-forum-tab-content {
	margin-top: 18px;
}

.bsia-forum-thread {
	display: grid;
	gap: 14px;
}

.bsia-forum-post {
	background: #fff;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	padding: 20px;
}

.bsia-forum-post.is-deleted {
	opacity: 0.62;
}

.bsia-forum-post.is-reported,
.bsia-forum-reply.is-reported {
	border-color: #dc3545;
}

.bsia-forum-reported-notice {
	background: #fff5f5;
	border: 1px solid #f5c2c7;
	border-radius: 6px;
	color: #842029;
	font-size: 0.85rem;
	margin-top: 12px;
	padding: 10px 14px;
}

.bsia-forum-reported-notice strong {
	display: block;
	margin-bottom: 4px;
}

.bsia-forum-post-head {
	align-items: start;
	display: flex;
	gap: 16px;
	justify-content: flex-start;
}

.bsia-forum-post-avatar {
	border-radius: 50%;
	flex-shrink: 0;
	height: 40px;
	object-fit: cover;
	width: 40px;
}

.bsia-forum-post-meta {
	color: var(--bsia-forum-muted);
	flex-wrap: wrap;
	font-size: 0.88rem;
	margin-bottom: 12px;
}

.bsia-forum-post-meta strong {
	color: var(--bsia-forum-blue);
}

.bsia-forum-status {
	background: #f9ecee;
	border: 1px solid #efc7cc;
	border-radius: 999px;
	color: var(--bsia-forum-red);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	padding: 5px 8px;
	text-transform: uppercase;
}

.bsia-forum-post-body {
	color: var(--bsia-forum-ink);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.bsia-forum-post-body :last-child {
	margin-bottom: 0;
}

.bsia-forum-post-footer {
	border-top: 1px solid var(--bsia-forum-line);
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 12px;
}

.bsia-forum-post-stats {
	color: var(--bsia-forum-muted);
	flex-wrap: wrap;
	font-size: 0.86rem;
	gap: 12px;
	margin-right: auto;
}

.bsia-forum-post-stats strong {
	color: var(--bsia-forum-ink);
}

.bsia-forum-post-actions {
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.bsia-forum-inline-form {
	display: inline-flex;
	margin: 0;
}

.bsia-forum-replies {
	border-left: 3px solid #d7e5f4;
	display: grid;
	gap: 10px;
	margin-top: 16px;
	padding-left: 16px;
}

.bsia-forum-reply {
	background: var(--bsia-forum-soft);
	border: 1px solid var(--bsia-forum-line);
	border-radius: 8px;
	padding: 16px;
}

.bsia-forum-reply.is-deleted {
	opacity: 0.62;
}

.bsia-forum-modal {
	border: 0;
	border-radius: 8px;
}

.bsia-forum-modal .modal-header,
.bsia-forum-modal .modal-footer {
	border-color: var(--bsia-forum-line);
}

.bsia-forum-modal textarea {
	border-color: var(--bsia-forum-line);
	border-radius: 8px;
	resize: vertical;
}

.bsia-forum-modal-help {
	color: var(--bsia-forum-muted);
	margin-bottom: 16px;
}

@media (max-width: 991.98px) {
	.bsia-forums-titlebar,
	.bsia-forum-detail-hero {
		align-items: stretch;
		flex-direction: column;
	}

	.bsia-forums-count {
		text-align: left;
	}

	.bsia-forums-filters,
	.bsia-forum-grid {
		grid-template-columns: 1fr;
	}

	.bsia-forums-filter-actions,
	.bsia-forum-actions {
		justify-content: flex-start;
	}

	.bsia-forum-detail-image {
		flex-basis: auto;
		min-height: 220px;
	}
}

@media (max-width: 575.98px) {
	.bsia-forums-band {
		padding: 30px 0 24px;
	}

	.bsia-forums h1 {
		font-size: 2rem;
	}

	.bsia-forum-card-body,
	.bsia-forum-detail-copy,
	.bsia-forum-post,
	.bsia-forum-reply,
	.bsia-forum-richtext {
		padding: 18px;
	}

	.bsia-forum-tabs {
		display: grid;
		grid-template-columns: 1fr;
	}

	.bsia-forum-tabs .nav-link {
		width: 100%;
	}

	.bsia-forum-post-footer,
	.bsia-forum-post-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.bsia-forum-post-actions .btn,
	.bsia-forum-inline-form,
	.bsia-forum-inline-form .btn {
		width: 100%;
	}
}

/* Legacy BSIA forum skin for the ColdBox views. */
.bsia-forums {
	--bsia-forum-blue: #002D5B;
	--bsia-forum-blue-dark: #001A35;
	--bsia-forum-red: #E31837;
	--bsia-forum-bg: #F0F2F5;
	--bsia-forum-text: #495057;
	--bsia-forum-muted: #6C757D;
	--bsia-forum-line: #E5E7EB;
	background: var(--bsia-forum-bg);
	color: var(--bsia-forum-text);
	font-family: Barlow, Arial, sans-serif;
}

.bsia-forums-results {
	background: var(--bsia-forum-bg);
	padding: 2.25rem 0 3.5rem;
}

.bsia-forum-page {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: hidden;
	width: 100vw;
}

.bsia-forum-page .container-xl {
	max-width: 1160px;
}

.bsia-forum-container {
	margin: 0 auto;
	max-width: 1160px;
	width: calc(100% - 2rem);
}

.bsia-forum-hero {
	background: linear-gradient(135deg, var(--bsia-forum-blue), var(--bsia-forum-blue-dark));
	color: #fff;
	overflow: hidden;
	padding: 3rem 0 4.6rem;
	position: relative;
}

.bsia-forum-hero::after {
	background: radial-gradient(circle, rgba(227, 24, 55, 0.16) 0%, transparent 70%);
	content: "";
	height: 210%;
	pointer-events: none;
	position: absolute;
	right: -12%;
	top: -50%;
	transform: rotate(-45deg);
	width: 52%;
}

.bsia-forum-hero .bsia-forum-container {
	position: relative;
	z-index: 1;
}

.bsia-forum-breadcrumb {
	align-items: center;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.92rem;
	gap: 0.45rem;
	margin-bottom: 0.9rem;
}

.bsia-forum-breadcrumb a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.bsia-forum-breadcrumb span:last-child {
	color: #fff;
	font-weight: 700;
}

.bsia-forum-title {
	color: #fff;
	font-size: clamp(2rem, 3vw, 2.9rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.12;
	margin: 0 0 0.75rem;
	text-transform: none;
}

.bsia-forum-meta,
.bsia-forum-meta * {
	color: rgba(255, 255, 255, 0.68);
}

.bsia-forum-meta strong {
	color: #fff;
	font-weight: 700;
}

.bsia-forum-meta {
	align-items: center;
	display: flex;
	font-size: 0.95rem;
	gap: 0.5rem;
	margin: 0;
}

.bsia-forum-hero-copy {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.98rem;
	line-height: 1.7;
	margin-top: 1.25rem;
	max-width: 860px;
}

.bsia-forum-hero-copy * {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.bsia-forum-hero-copy p {
	margin-bottom: 0.6rem;
}

.bsia-forum-hero-copy a {
	color: #fff;
	text-decoration: underline;
}

.bsia-forum-main {
	padding-bottom: 3.5rem;
}

.bsia-forum-back-row {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	align-items: center;
	margin: calc(-2.15rem - 50px) 0 1rem;
	position: relative;
	z-index: 15;
}

/*
	QA 04/09, Neil items 9 and 10: "I am not seeing this updated".

	He is right, and the markup was not the problem - the row IS inside the Info
	block now. This rule was. That negative top margin exists to lift the row up
	over the hero band, from when the row was emitted above the block loop; with
	the row inside a block it drags itself back out through the block's top edge
	and lands exactly where it always was. Measured: the row painted at y=147
	while the Info block it belongs to started at y=214.

	Inside a block the row sits in normal flow, so it moves with the block. The
	copy outside a block - emitted only when Info is hidden - keeps the lift,
	because there it is still the thing overlapping the band.
*/
.bsia-forum-block .bsia-forum-back-row {
	margin-top: 0;
}

/*
	QA 04/09, Neil items 9 and 10: "Can we move this to the bottom right like we
	had on HTML? Below the scroll box of the content".

	The row is emitted last in the Info block now, after the hero copy. It was
	already right-aligned; what it needs here is to stop borrowing the lift the
	top-of-page copy uses, and to sit clear of the scroll box above it. Margin,
	not padding, so a block set to Super compact still closes up around it.
*/
/* scoped to the block, or ".bsia-forum-block .bsia-forum-back-row" above
   outranks it and the row loses its clearance from the copy */
.bsia-forum-block .bsia-forum-back-row--footer {
	margin: 1rem 0 0;
}

.bsia-forum-bell-hero {
	align-items: center;
	background: var(--bs-secondary, #6c757d);
	border: 1px solid var(--bs-secondary, #6c757d);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	color: #fff;
	display: inline-flex;
	font-size: 1rem;
	height: 2.55rem;
	justify-content: center;
	line-height: 1;
	margin-bottom: 20px;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	width: 2.55rem;
}

.bsia-forum-bell-hero i {
	color: inherit;
	pointer-events: none;
}

.bsia-forum-bell-hero:hover,
.bsia-forum-bell-hero:focus-visible {
	background: #5c636a;
	border-color: #5c636a;
	color: #fff;
}

.bsia-forum-bell-hero.is-on {
	background: var(--bs-danger, #dc3545);
	border-color: var(--bs-danger, #dc3545);
	color: #fff;
}

.bsia-forum-bell-hero.is-on:hover,
.bsia-forum-bell-hero.is-on:focus-visible {
	background: #bb2d3b;
	border-color: #bb2d3b;
	color: #fff;
}

.bsia-forum-back {
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	color: var(--bsia-forum-blue);
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 800;
	gap: 0.35rem;
	letter-spacing: 0;
	margin-bottom: 20px;
	padding: 0.72rem 1.1rem;
	text-decoration: none;
	text-transform: uppercase;
}

.bsia-forum-back:hover,
.bsia-forum-back:focus {
	color: var(--bsia-forum-blue);
	text-decoration: none;
}

.bsia-forum-nav-container {
	align-items: center;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: -2rem 0 2.4rem;
	min-height: 5.2rem;
	padding: 1.35rem;
	position: relative;
	z-index: 10;
}

.bsia-forum-nav-btn {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-height: 2.55rem;
	padding: 0.65rem 1.2rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.bsia-forum-nav-btn.btn-outline-gray {
	background: transparent;
	border: 2px solid #E9ECEF;
	color: var(--bsia-forum-blue);
}

.bsia-forum-nav-btn.btn-primary {
	background: var(--bsia-forum-blue);
	border: 2px solid var(--bsia-forum-blue);
	box-shadow: 0 4px 12px rgba(0, 45, 91, 0.22);
	color: #fff;
}

.bsia-forum-nav-btn .badge {
	align-items: center;
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 800;
	height: 1.5rem;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0;
}

/* Section tab buttons (General Comments / Ask a Question / Start a Topic) were
   rendering as oversized uppercase pills, out of step with every other forum
   button. Bring them down to the same size and shape as the report-modal
   buttons (see the normalisation block earlier in this file) while leaving each
   variant's colour (.btn-primary / .btn-outline-gray) untouched. !important is
   needed because the global theme enlarges/uppercases filled (.btn-primary)
   buttons, which otherwise made the inactive tabs larger than the active one. */
.bsia-forums .bsia-forum-nav-btn {
	border-radius: 0.375rem !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.5 !important;
	min-height: 0 !important;
	padding: 0.375rem 0.9rem !important;
	text-transform: none !important;
}

.bsia-forum-listing {
	background: transparent;
}

.bsia-forum-listing .bsia-forums-results {
	background: transparent;
	padding-top: 0;
}

.bsia-forum-listing-search .bg-white {
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.04);
}

.bsia-forum-list-row .bg-light {
	background-color: #eef4fb !important;
}

.bsia-forum-list-image {
	background: #f8f9fa;
	display: block;
	min-height: 112px;
	overflow: hidden;
	text-decoration: none;
}

.bsia-forum-list-image img {
	height: 100%;
	max-height: 200px;
	object-fit: cover;
	width: 100%;
}

.bsia-forum-list-image-fallback {
	align-items: center;
	background: #e9ecef;
	color: var(--bsia-forum-blue);
	display: flex;
	font-size: 2.5rem;
	font-weight: 800;
	height: 100%;
	justify-content: center;
	min-height: 112px;
	text-transform: uppercase;
	width: 100%;
}

.bsia-forum-listing .text-limited {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bsia-forum-listing .tag-limited {
	overflow: hidden;
	text-overflow: ellipsis;
}

.bsia-forum-listing .btn-danger,
.bsia-forum-submit {
	background: var(--bsia-forum-red);
	border-color: var(--bsia-forum-red);
}

.bsia-forum-listing .btn-primary,
.bsia-forum-back {
	background: var(--bsia-forum-blue);
	border-color: var(--bsia-forum-blue);
}

.bsia-forum-detail-header {
	background: var(--bsia-forum-blue);
	color: #fff;
	margin: -2.25rem 0 0;
	margin-left: calc(50% - 50vw);
	padding: 3rem calc((100vw - min(1160px, calc(100vw - 2rem))) / 2) 4.6rem;
	width: 100vw;
}

.bsia-forum-back {
	align-items: center;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	color: #fff;
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 800;
	gap: 0.45rem;
	margin-bottom: 1rem;
	padding: 0.72rem 1.1rem;
	text-decoration: none;
	text-transform: uppercase;
}

.bsia-forum-back:hover,
.bsia-forum-back:focus {
	color: #fff;
}

.bsia-forum-detail-hero {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #fff;
	display: block;
	overflow: visible;
}

.bsia-forum-detail-copy {
	padding: 0;
}

.bsia-forum-detail-copy h1 {
	color: #fff;
	font-size: clamp(2rem, 3vw, 2.9rem);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 0.75rem;
	text-transform: none;
}

.bsia-forum-detail-copy p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.98rem;
	line-height: 1.7;
	max-width: 860px;
}

.bsia-forum-detail-tags {
	color: rgba(255, 255, 255, 0.72);
	gap: 0.45rem;
	margin-bottom: 0.9rem;
}

.bsia-forum-detail-tags::before {
	content: "Home / Online Forums /";
}

.bsia-forum-detail-tags span {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 0.92rem;
	padding: 0;
}

.bsia-forum-detail-meta {
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.95rem;
	gap: 0.5rem;
	margin: 0;
}

.bsia-forum-detail-meta span {
	border: 0;
	color: rgba(255, 255, 255, 0.68);
	padding: 0;
}

.bsia-forum-detail-meta span + span::before {
	content: "•";
	margin-right: 0.5rem;
}

.bsia-forum-detail-meta strong {
	color: rgba(255, 255, 255, 0.9);
}

.bsia-forum-detail-image {
	display: none;
}

.bsia-forum-richtext {
	background: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.04);
	margin: -2rem 0 2rem;
	padding: 1.35rem;
	position: relative;
	z-index: 10;
}

.bsia-forum-actions {
	display: none;
}

.bsia-forum-tabs {
	align-items: center;
	background: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
	display: flex;
	gap: 1rem;
	margin: -2rem 0 2.4rem;
	min-height: 5.2rem;
	padding: 1.35rem;
	position: relative;
	z-index: 11;
}

.bsia-forum-tabs .nav-link {
	align-items: center;
	border: 2px solid var(--bsia-forum-blue);
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 800;
	gap: 0.55rem;
	justify-content: center;
	line-height: 1;
	min-height: 2.55rem;
	padding: 0.65rem 1.2rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.bsia-forum-tabs .nav-link:not(.active) {
	background: var(--bsia-forum-blue);
	color: #fff;
}

.bsia-forum-tabs .nav-link.active {
	background: transparent;
	border-color: #E9ECEF;
	color: var(--bsia-forum-blue);
}

.bsia-forum-tabs .nav-link span,
.bsia-forum-tabs .nav-link.active span {
	align-items: center;
	background: var(--bsia-forum-red);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 800;
	height: 1.5rem;
	justify-content: center;
	margin: 0;
	min-width: 1.5rem;
	padding: 0;
}

.bsia-forum-composer {
	background: #fff;
	border-radius: 8px;
	border-top: 4px solid var(--bsia-forum-red);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.04);
	margin-bottom: 2rem;
	padding: 1.65rem;
}

.bsia-forum-composer-title {
	align-items: center;
	color: var(--bsia-forum-blue);
	display: flex;
	font-size: 1.05rem;
	font-weight: 800;
	gap: 0.5rem;
	margin-bottom: 0.95rem;
}

.bsia-forum-composer-title i {
	color: var(--bsia-forum-red);
}

.bsia-forum-composer-input {
	background: #F8F9FA;
	border: 2px solid #E9ECEF;
	border-radius: 8px;
	color: var(--bsia-forum-text);
	font-size: 0.95rem;
	margin-bottom: 0.85rem;
	min-height: 5.6rem;
	padding: 0.85rem 1rem;
	resize: vertical;
	width: 100%;
}

.bsia-forum-composer-input:focus {
	background: #fff;
	border-color: rgba(0, 45, 91, 0.32);
	outline: none;
}

.bsia-forum-composer-footer {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.bsia-forum-composer-tools {
	align-items: center;
	color: var(--bsia-forum-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.bsia-forum-submit {
	align-items: center;
	border: 0;
	border-radius: 0.375rem;
	color: #fff;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 0.4rem;
	line-height: 1.5;
	padding: 0.375rem 0.75rem;
	text-transform: none;
}

.bsia-forum-thread {
	display: block;
}

.bsia-forum-post,
.bsia-forum-reply {
	background: #fff;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	margin-bottom: 1rem;
	padding: 1.25rem 1.5rem 1rem 1.5rem;
	position: relative;
}

.bsia-forum-reply {
	background: #fafbfc;
	margin: 0.65rem 0 0;
}

.bsia-forum-post.is-deleted,
.bsia-forum-reply.is-deleted {
	opacity: 0.62;
}

.bsia-forum-post-head {
	align-items: start;
	display: flex;
	gap: 16px;
	justify-content: flex-start;
}

.bsia-forum-post-meta {
	color: var(--bsia-forum-blue);
	display: block;
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.35;
	margin-bottom: 0.45rem;
	padding-right: 1rem;
	text-transform: capitalize;
}

.bsia-forum-post-meta strong {
	color: var(--bsia-forum-blue);
}

.bsia-forum-post-meta span::before {
	content: " - ";
}

.bsia-forum-post-meta .bsia-forum-status::before {
	content: "";
}

.bsia-forum-post-body {
	color: var(--bsia-forum-text);
	font-size: 0.95rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.bsia-forum-post-body p:last-child,
.bsia-forum-post-body ul:last-child,
.bsia-forum-post-body ol:last-child {
	margin-bottom: 0;
}

.bsia-forum-post-body a {
	color: var(--bsia-forum-blue, #002D5B);
	text-decoration: underline;
	word-break: break-word;
}

.bsia-forum-post-body a:hover,
.bsia-forum-post-body a:focus {
	color: var(--bsia-forum-red, #E31837);
	text-decoration: underline;
}

.bsia-forum-post-footer {
	border: 0;
	display: block;
	margin: 0;
	padding: 0;
}

.bsia-forum-post-stats {
	display: none;
}

.bsia-forum-post-actions {
	align-items: center;
	background: #F3F4F6;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	display: inline-flex;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	z-index: 2;
}

.bsia-forum-inline-form {
	display: inline-flex;
	margin: 0;
}

.bsia-forum-post-actions .btn {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px;
	color: var(--bsia-forum-muted) !important;
	display: inline-flex;
	font-size: 0.9rem;
	gap: 0.2rem;
	height: 1.7rem;
	justify-content: center;
	line-height: 1;
	margin: 0 !important;
	min-width: 1.7rem;
	padding: 0 0.25rem !important;
	text-decoration: none;
}

.bsia-forum-post-actions .btn span:not(.bsia-forum-like-count) {
	clip: rect(0 0 0 0);
	border: 0;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Report flags must stay red inside the muted icon pill: the reporter's own
   "Reported" toggle (btn-danger) and the moderator's reported-item viewer. */
.bsia-forum-post-actions .btn-danger,
.bsia-forum-post-actions .btn[data-bs-target="#forumReportViewModal"] {
	color: var(--bsia-forum-red) !important;
}

/* Moderators also need the item ID visible on the flag ("Reported (1851)")
   so they can find it in the audit history without opening the modal. */
.bsia-forum-post-actions .btn[data-bs-target="#forumReportViewModal"] span:not(.bsia-forum-like-count) {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.bsia-forum-like-count {
	align-items: center;
	background-color: var(--bsia-forum-blue-dark);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 0.65rem;
	font-weight: 700;
	height: 1.1rem;
	justify-content: center;
	line-height: 1;
	margin-right: 0.2rem;
	padding-top: 1px;
	text-align: center;
	width: 1.1rem;
}

.bsia-forum-vote {
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	float: right;
	gap: 2px;
	margin: 0 0 8px 12px;
}

.bsia-forum-vote-btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--bsia-forum-line);
	border-radius: 6px;
	color: #6a7a8c;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.05rem;
	height: 26px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	width: 32px;
}

.bsia-forum-vote-btn:hover {
	background: #eef4fb;
	color: var(--bsia-forum-blue);
}

.bsia-forum-vote-btn.is-active.bsia-forum-vote-up {
	background: #e7f4ea;
	border-color: #2e7d32;
	color: #2e7d32;
}

.bsia-forum-vote-btn.is-active.bsia-forum-vote-down {
	background: #fbeaea;
	border-color: var(--bsia-forum-red);
	color: var(--bsia-forum-red);
}

.bsia-forum-vote-btn.is-disabled {
	cursor: default;
	opacity: 0.45;
}

.bsia-forum-vote-score {
	color: var(--bsia-forum-blue);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	min-width: 2ch;
	text-align: center;
}

.bsia-forum-answer .bsia-forum-replies {
	border-left: 3px solid #d7e5f4;
	margin-top: 12px;
	padding-left: 14px;
}

.bsia-forum-status {
	background: #f9ecee;
	border: 1px solid #efc7cc;
	border-radius: 999px;
	color: var(--bsia-forum-red);
	font-size: 0.68rem;
	margin-left: 0.35rem;
	padding: 0.25rem 0.45rem;
	text-transform: uppercase;
}

.bsia-forum-modal {
	border-radius: 8px;
}

.bsia-forum-modal .modal-header {
	border-top: 4px solid var(--bsia-forum-red);
}

.bsia-forum-modal .tox-hugerte,
.bsia-forum-modal .tox-tinymce,
.bsia-forum-composer .tox-hugerte,
.bsia-forum-composer .tox-tinymce {
	border: 2px solid #E9ECEF;
	border-radius: 8px;
	overflow: hidden;
}

.bsia-forum-modal .tox .tox-toolbar,
.bsia-forum-modal .tox .tox-toolbar__primary,
.bsia-forum-composer .tox .tox-toolbar,
.bsia-forum-composer .tox .tox-toolbar__primary {
	background: #F8F9FA;
}

.bsia-forum-modal .tox.bsia-forum-editor-invalid,
.bsia-forum-modal .tox-tinymce.bsia-forum-editor-invalid,
.bsia-forum-composer .tox.bsia-forum-editor-invalid,
.bsia-forum-composer .tox-tinymce.bsia-forum-editor-invalid {
	border-color: #dc3545;
}

.bsia-forum-editor-error {
	color: #dc3545;
	font-size: 0.82rem;
	font-weight: 600;
	margin-top: 0.45rem;
}

@media (max-width: 991.98px) {
	.bsia-forum-detail-header {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.bsia-forum-tabs {
		align-items: stretch;
		flex-direction: column;
		margin-top: -1.5rem;
	}

	.bsia-forum-post,
	.bsia-forum-reply {
		padding-right: 1.25rem;
		padding-top: 4.6rem;
	}

	.bsia-forum-post-actions {
		left: 1.25rem;
		right: auto;
		top: 1rem;
	}
}

@media (max-width: 575.98px) {
	.bsia-forum-composer-footer {
		align-items: stretch;
		flex-direction: column;
	}

	.bsia-forum-submit,
	.bsia-forum-tabs .nav-link {
		width: 100%;
	}
}

.bsia-forum-page .bsia-forum-back {
	background: #fff;
	border-color: #fff;
	color: var(--bsia-forum-blue);
	margin-bottom: 20px;
}

.bsia-forum-page .bsia-forum-back:hover,
.bsia-forum-page .bsia-forum-back:focus {
	color: var(--bsia-forum-blue);
}

@media (max-width: 575.98px) {
	.bsia-forum-nav-container {
		align-items: stretch;
		flex-direction: column;
		margin-top: -1.5rem;
	}

	.bsia-forum-nav-btn {
		width: 100%;
	}
}


/* --- Batch 1 additions (ver=10) --- */

/* Forum hero image + tags/sections badges */
.bsia-forum-hero-image {
margin: 12px 0 16px;
max-width: 320px;
}

.bsia-forum-hero-image img {
border-radius: 10px;
display: block;
max-width: 100%;
height: auto;
}

.bsia-forum-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 10px 0 0;
}

.bsia-forum-hero-badges .badge {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 6px 12px;
}

/* Hero media row (ver=39): intro copy sits to the right of the image.
   The copy column has no intrinsic height (the copy is absolutely positioned
   inside it), so the row height comes from the image alone — the copy is
   therefore capped to the image height and scrolls when it runs longer. */
.bsia-forum-hero-media {
align-items: stretch;
display: flex;
gap: 1.75rem;
margin: 12px 0 16px;
}

.bsia-forum-hero-media .bsia-forum-hero-image {
flex: 0 0 auto;
margin: 0;
}

.bsia-forum-hero-copy-col {
flex: 1 1 auto;
min-width: 0;
position: relative;
}

/* 12/09/2026, Rob: the introduction beside the hero image used to be pinned to
   the image's height and scrolled inside it, which is the same complaint as the
   block scrollers - the longest piece of prose on the page was read through the
   smallest window. It sits in flow and runs to its full length now; the media
   row is as tall as whichever of the image and the copy is taller. */
.bsia-forum-hero-media .bsia-forum-hero-copy {
margin-top: 0;
max-width: none;
position: static;
}

.bsia-forum-hero-media .bsia-forum-hero-copy:focus-visible {
border-radius: 6px;
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
}

/* Small screens: stack the image and copy again. The 18rem cap that used to
   scroll the copy here went with the desktop scroller (12/09/2026). */
@media (max-width: 767.98px) {
.bsia-forum-hero-media {
display: block;
}

.bsia-forum-hero-media .bsia-forum-hero-image {
margin: 0 0 12px;
}

.bsia-forum-hero-media .bsia-forum-hero-copy {
padding-right: 0;
position: static;
}
}

/* Read more / read less clamping (item #8) */
.bsia-forum-post-body.is-clampable {
max-height: 9.5em;
overflow: hidden;
position: relative;
}

.bsia-forum-post-body.is-clampable::after {
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
bottom: 0;
content: "";
display: block;
height: 3em;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
}

.bsia-forum-post-body.is-clampable.is-expanded {
max-height: none;
}

.bsia-forum-post-body.is-clampable.is-expanded::after {
display: none;
}

.bsia-forum-readmore-btn {
background: transparent;
border: 0;
color: var(--bsia-forum-blue);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
font-weight: 600;
margin-top: 4px;
padding: 4px 0;
}

.bsia-forum-readmore-btn:hover {
text-decoration: underline;
}

/* Reply / thread count toggle button (item #9) */
.bsia-forum-thread-toggle {
align-items: center;
background: transparent;
border: 0;
color: var(--bsia-forum-blue);
cursor: pointer;
display: inline-flex;
font: inherit;
gap: 6px;
padding: 0;
}

.bsia-forum-thread-toggle:hover {
text-decoration: underline;
}

.bsia-forum-thread-toggle strong {
font-weight: 700;
}

.bsia-forum-thread-toggle-icon {
font-size: 0.7rem;
transition: transform 0.15s ease-in-out;
}

.bsia-forum-thread-toggle[aria-expanded="true"] .bsia-forum-thread-toggle-icon {
transform: rotate(180deg);
}

/* favourite forum toggle button (Batch 2) */
.bsia-forum-fav-btn {
background: transparent;
border: 0;
padding: 0;
line-height: 1;
cursor: pointer;
transition: transform 0.15s ease, color 0.15s ease;
}
.bsia-forum-fav-btn.is-favourite { color: var(--bs-warning, ##ffc107); }
.bsia-forum-fav-btn.is-not-favourite { color: var(--bs-secondary, ##6c757d); }
.bsia-forum-fav-btn:hover { transform: scale(1.15); }
.bsia-forum-fav-btn:focus-visible { outline: 2px solid var(--bs-primary, ##0d6efd); outline-offset: 2px; border-radius: 0.25rem; }
.bsia-forum-fav-btn.is-busy { opacity: 0.5; pointer-events: none; }
/* Forum subscription bells (four notification levels) */
.bsia-forum-bell {
	align-items: center;
	background: transparent;
	border: 1px solid var(--bsia-forum-line, ##d8dee8);
	border-radius: 999px;
	color: var(--bsia-forum-muted, ##637083);
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 700;
	gap: 0.4rem;
	justify-content: center;
	line-height: 1;
	min-height: 2.55rem;
	min-width: 2.55rem;
	padding: 0.55rem 0.85rem;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.bsia-forum-bell:hover,
.bsia-forum-bell:focus-visible {
	background: transparent;
	border-color: var(--bsia-forum-ink, ##102a43);
	color: var(--bsia-forum-ink, ##102a43);
}
.bsia-forum-bell.is-on {
	background: transparent;
	border-color: var(--bs-danger, #dc3545);
	color: var(--bs-danger, #dc3545);
}
.bsia-forum-bell.is-on i { color: var(--bs-danger, #dc3545); }
.bsia-forum-bell.is-on:hover,
.bsia-forum-bell.is-on:focus-visible {
	border-color: #bb2d3b;
	color: #bb2d3b;
}
.bsia-forum-bell-wide { padding: 0.55rem 1.1rem; }

/* Item-level notification bell inside a comment-block action bundle */
.bsia-forum-bell-item {
	border: 1px solid var(--bs-secondary, #6c757d);
	color: var(--bs-secondary, #6c757d);
}
.bsia-forum-bell-item:hover,
.bsia-forum-bell-item:focus-visible {
	border-color: var(--bsia-forum-ink, #102a43);
	color: var(--bsia-forum-ink, #102a43);
}
.bsia-forum-bell-item.is-on {
	border-color: var(--bs-danger, #dc3545);
	color: var(--bs-danger, #dc3545);
}
.bsia-forum-bell-item.is-on:hover,
.bsia-forum-bell-item.is-on:focus-visible {
	border-color: #bb2d3b;
	color: #bb2d3b;
}

/* Flash highlight for the item an email deep link points at */
.bsia-forum-target-highlight {
	animation: bsiaForumTargetPulse 1.6s ease-in-out 3;
	border-radius: 8px;
	outline: 2px solid var(--bs-danger, #dc3545);
	outline-offset: 3px;
}
@keyframes bsiaForumTargetPulse {
	0%, 100% { outline-color: rgba(220, 53, 69, 1); }
	50% { outline-color: rgba(220, 53, 69, 0.15); }
}

/* Forum documents card */
.bsia-forum-docs { border: 1px solid var(--bsia-forum-line, #d8dee8); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04); }
.bsia-forum-docs-header { background: var(--bsia-forum-soft, #f4f7fa); border-bottom: 1px solid var(--bsia-forum-line, #d8dee8); padding: 0.75rem 1rem; }
.bsia-forum-docs-header h2 { color: var(--bsia-forum-ink, #102a43); font-weight: 700; letter-spacing: 0.01em; }
.bsia-forum-doc-list { margin: 0; }
.bsia-forum-doc-row { padding: 0.85rem 1rem; border-color: var(--bsia-forum-line, #d8dee8); background: #fff; }
.bsia-forum-doc-row + .bsia-forum-doc-row { border-top: 1px solid var(--bsia-forum-line, #d8dee8); }
.bsia-forum-doc-row:hover { background: var(--bsia-forum-soft, #f4f7fa); }
.bsia-forum-doc-link { color: var(--bsia-forum-ink, #102a43); }
.bsia-forum-doc-link:hover, .bsia-forum-doc-link:focus-visible { color: #0d6efd; text-decoration: underline; }
.bsia-forum-doc-meta { font-size: 0.78rem; line-height: 1.35; }
.bsia-forum-doc-filename { word-break: break-all; }
.bsia-forum-doc-delete-form .btn { border-radius: 999px; min-width: 2.25rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; }

/* Moderator email tooltips: dotted underline signals a hoverable name */
.bsia-forum-email-hint,
.bsia-forum-post-meta strong[title] {
	cursor: help;
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}

/* Documents attached to a topic */
.bsia-forum-topic-docs { margin: 0.75rem 0 0; padding: 0.6rem 0.85rem; border: 1px solid var(--bsia-forum-line, #d8dee8); border-radius: 8px; background: var(--bsia-forum-soft, #f4f7fa); }
.bsia-forum-topic-doc { padding: 0.25rem 0; }
.bsia-forum-topic-doc + .bsia-forum-topic-doc { border-top: 1px solid var(--bsia-forum-line, #d8dee8); }
.bsia-forum-topic-doc .btn { border-radius: 999px; min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.45rem; }
.bsia-forum-composer-doc { max-width: 480px; }

/* ------------------------------------------------------------------
   COL-3981: the forum page as positionable blocks.

   The layout builder (COL-3979/3980) saves each block's x, y, w and h on a
   12-column grid. This lays the forum page out from that.

   ALL FOUR ARE HONOURED (QA round 02/09, COL-3981 item 1). The first cut
   honoured only w and x and let blocks flow into auto rows in y order, which
   is not the builder's grid: a 4-row Info tile beside a 1-row Documents tile
   became one tall row, the documents card floated at the top of it, and the
   triggers stacked under it only began BELOW the hero - the "fixed height
   that exceeds the listed documents" Neil saw.

   So the rows are now the builder's rows. --fbs-row / --fbs-rows come off
   the wrapper (the only inline declarations a wrapper ever carries are
   --fbs-* custom properties) and place the block where its tile sat; the row
   unit is GridStack's cellHeight in views/common/forum-layout-editor.cfm
   (90px), so h means the same thing here as it does there.

   THE HEIGHT RULE, by kind of block:
     - LIST blocks (documents, topic shortcuts, notifications, flagged) are
       EXACTLY h rows tall and scroll inside; the wrapper carries
       .bsia-forum-block--list. That is "obey the layout height and scroll".
     - CONTENT blocks (info, discussion content, media) are EXACTLY h rows
       tall too, since 07/09 (COL-3983, Neil's "option B" - the
       .bsia-forum-block--content rules further down): the wrapper carries
       .bsia-forum-block--content and one inner .bsia-forum-block-scroll that
       scrolls whatever does not fit. Until then they were AT LEAST h rows and
       grew with their content, which is why the forum drew "fatter" than the
       layout saved for it.
     - The three TRIGGER blocks are buttons, and always one row: the view
       clamps them, whatever h the builder saved.
   The rows themselves stay minmax(unit, auto): a row can still grow, but only
   when a list block's Expand all asks it to (QA 03/09 item 7), never because
   a block's own content is taller than its tile.
   ------------------------------------------------------------------ */

.bsia-forum-blocks {
	--bsia-forum-row-unit: 90px;
	--bsia-forum-row-gap: 1rem;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(var(--bsia-forum-row-unit), auto);
	gap: var(--bsia-forum-row-gap) 1rem;
	align-items: stretch;
}

/* A block with no explicit placement still has to draw. Full width is the
   safe default - a block that silently vanished would look like data loss. */
.bsia-forum-block {
	grid-column: 1 / -1;
	grid-row-start: var(--fbs-row, auto);
	grid-row-end: span var(--fbs-rows, 1);
	min-width: 0;
}

/* Width, from the saved w. */
.bsia-forum-block-w1  { grid-column-end: span 1; }
.bsia-forum-block-w2  { grid-column-end: span 2; }
.bsia-forum-block-w3  { grid-column-end: span 3; }
.bsia-forum-block-w4  { grid-column-end: span 4; }
.bsia-forum-block-w5  { grid-column-end: span 5; }
.bsia-forum-block-w6  { grid-column-end: span 6; }
.bsia-forum-block-w7  { grid-column-end: span 7; }
.bsia-forum-block-w8  { grid-column-end: span 8; }
.bsia-forum-block-w9  { grid-column-end: span 9; }
.bsia-forum-block-w10 { grid-column-end: span 10; }
.bsia-forum-block-w11 { grid-column-end: span 11; }
.bsia-forum-block-w12 { grid-column-end: span 12; }

/* Horizontal position, from the saved x. Declared after the width rules so the
   start line wins over the shorthand above. */
.bsia-forum-block-x0  { grid-column-start: 1; }
.bsia-forum-block-x1  { grid-column-start: 2; }
.bsia-forum-block-x2  { grid-column-start: 3; }
.bsia-forum-block-x3  { grid-column-start: 4; }
.bsia-forum-block-x4  { grid-column-start: 5; }
.bsia-forum-block-x5  { grid-column-start: 6; }
.bsia-forum-block-x6  { grid-column-start: 7; }
.bsia-forum-block-x7  { grid-column-start: 8; }
.bsia-forum-block-x8  { grid-column-start: 9; }
.bsia-forum-block-x9  { grid-column-start: 10; }
.bsia-forum-block-x10 { grid-column-start: 11; }
.bsia-forum-block-x11 { grid-column-start: 12; }

/* Narrow screens: a 12-column grid is meaningless on a phone, so every block
   goes full width in layout order. This is the existing responsive behaviour
   of the page, not a new decision. */
@media (max-width: 767.98px) {
	.bsia-forum-blocks {
		grid-auto-rows: auto;
	}
	.bsia-forum-block,
	.bsia-forum-block[class*="bsia-forum-block-w"],
	.bsia-forum-block[class*="bsia-forum-block-x"] {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* The Info block used to be a full-bleed hero band ABOVE the main container.
   Now it is a block in the same flow as the others, so the band travels with it.

   This is not decoration - it is load-bearing. Every descendant of the old hero
   (breadcrumb, title, meta, intro copy) is styled white, because the hero always
   supplied a dark gradient behind them. Without the background moving too, the
   whole Info block renders white-on-white and reads as an empty gap. Caught by
   looking at it, which had not been possible on this epic until now. */
.bsia-forum-block--info {
	background: linear-gradient(135deg, var(--bsia-forum-blue), var(--bsia-forum-blue-dark));
	border-radius: 12px;
	color: #fff;
	overflow: hidden;
	padding: 2.25rem 2rem;
	position: relative;
}

/* The hero's decorative sweep, kept so the block still reads as the hero. */
.bsia-forum-block--info::after {
	background: radial-gradient(circle, rgba(227, 24, 55, 0.16) 0%, transparent 70%);
	content: "";
	height: 210%;
	pointer-events: none;
	position: absolute;
	right: -12%;
	top: -50%;
	transform: rotate(-45deg);
	width: 52%;
}

/* Keep the content above that sweep - the old rule targeted the inner container
   the hero used to have, which the block no longer carries. */
.bsia-forum-block--info > * {
	position: relative;
	z-index: 1;
}

.bsia-forum-block--info .bsia-forum-breadcrumb { margin-top: 0; }

/* ------------------------------------------------------------------
   COL-3983 / COL-3984 on the forum page.

   The .fbs-block rules in common-bs.css style .block-heading, .block-text
   and .block-accent. This maps the forum's OWN element classes onto those
   three roles, which is how the per-block typography and colours reach a
   page whose markup was never written with them in mind.

   Doing it here rather than by adding classes to the view is the point:
   COL-3981 is a containment refactor and says not to touch the insides of a
   block. A stylesheet mapping changes no markup at all.

   It also answers COL-3983 AC4, which asked for "whichever elements are
   conventionally rendered as a heading" - unusable as written, because it is
   a judgement call. THIS LIST IS THE ANSWER: these named elements are the
   heading role and everything else is text. Checkable at review time, and
   the story's own example (the bold poster name and date in a comment) is
   .bsia-forum-post-meta, which is in it.
   ------------------------------------------------------------------ */

/* EACH PROPERTY IS GATED ON ITS OWN CUSTOM PROPERTY BEING PRESENT, and that is
   not fussiness - the obvious version is wrong.

       .fbs-block .bsia-forum-title { font-size: var(--fbs-head-size, inherit); }

   reads as "use the saved size, otherwise leave it alone". It does not. This
   selector is more specific than .bsia-forum-title's own rule, so when nothing
   is saved the fallback WINS and forces the title to inherit its parent's size
   - the forum heading silently shrank to body text. There is no CSS value
   meaning "make this declaration not exist"; `inherit`, `unset` and `revert`
   all still override the element's own rule.

   So the declaration only exists when the value does. Attribute matching on the
   emitted style attribute is what makes that possible, and it is safe because
   the view writes these property names verbatim and nothing else does.

   Found by looking at the rendered page, not by reading the CSS. */

/* QA 03/09, Neil item 5 - "the font color is not pulling through as expected"
   in General Comments, Ask a Question and Start a Topic.

   The value did arrive; the LIST was too short. A role here is a list of
   element classes, and a class that is not on the list keeps whatever colour it
   already had - so a comment's body took the block's text colour while the
   poster's name, the "2 likes" line, the composer box and every .text-muted
   caption beside them did not, which is exactly what "not pulling through"
   looks like from the outside.

   So the lists below now name the ELEMENTS THAT DECLARE A COLOUR OF THEIR OWN
   inside a block, not just the obvious ones. Anything that merely inherits
   needs no entry and gets none: the block itself already carries the colour.
   Checked against every rule in this file that sets `color` on a .bsia-forum-*
   class, which is what makes the list checkable rather than a guess. */

.fbs-block[style*="--fbs-head-color"] .bsia-forum-title,
.fbs-block[style*="--fbs-head-color"] .bsia-forum-post-meta,
.fbs-block[style*="--fbs-head-color"] .bsia-forum-post-meta strong,
.fbs-block[style*="--fbs-head-color"] .bsia-forum-post-meta span,
.fbs-block[style*="--fbs-head-color"] .bsia-forum-docs-header,
.fbs-block[style*="--fbs-head-color"] .bsia-forum-docs-header h2,
.fbs-block[style*="--fbs-head-color"] .bsia-forum-composer-title,
.fbs-block[style*="--fbs-head-color"] .bsia-forum-nav-btn { color: var(--fbs-head-color); }

.fbs-block[style*="--fbs-head-font"] .bsia-forum-title,
.fbs-block[style*="--fbs-head-font"] .bsia-forum-post-meta,
.fbs-block[style*="--fbs-head-font"] .bsia-forum-docs-header,
.fbs-block[style*="--fbs-head-font"] .bsia-forum-composer-title,
.fbs-block[style*="--fbs-head-font"] .bsia-forum-nav-btn { font-family: var(--fbs-head-font); }

/* The size targets the heading ELEMENT as well as its container, because
   Bootstrap utility classes (.h6 on the documents header) set font-size on the
   element itself and would otherwise win over an inherited value. */
.fbs-block[style*="--fbs-head-size"] .bsia-forum-title,
.fbs-block[style*="--fbs-head-size"] .bsia-forum-post-meta,
.fbs-block[style*="--fbs-head-size"] .bsia-forum-docs-header,
.fbs-block[style*="--fbs-head-size"] .bsia-forum-docs-header .h6,
.fbs-block[style*="--fbs-head-size"] .bsia-forum-composer-title,
.fbs-block[style*="--fbs-head-size"] .bsia-forum-nav-btn { font-size: calc(var(--fbs-head-size) * var(--fbs-type-scale, 1)); }

/*
	QA 04/09, Neil item 12: "Heading colors for General Comments and Ask a
	Question seem to have been dropped".

	The section trigger button was on all three lists above and still ignored
	them, because it is the one heading element in this file whose own rules
	outrank a mapping rule:

	  .bsia-forums .bsia-forum-nav-btn { font-size: 0.95rem !important; }
	      an !important beats any weight the mapping rule can carry, so every
	      trigger rendered at 15.2px whatever size was chosen (measured 15.2
	      against a chosen 14).

	  .bsia-forum-nav-btn.btn-primary { color: #fff; }
	      plus the theme's own .btn-primary, which is not same-origin and so
	      cannot be read back - the INACTIVE triggers stayed white while the
	      active one, which is .btn-outline-gray, took the colour. That is why
	      General Comments looked partly right and Ask a Question did not.

	Matching the !important is the only way a user's choice can win here, so
	these three declarations carry it and nothing else in this file does.

	The FILL is the other half. An inactive trigger is filled with the theme
	blue, which is also the blue Neil chose for his headings - honouring the
	colour on top of that fill would paint the label out of existence. The fill
	is not a colour the agency user can control, so a block that sets a heading
	colour drops it: the trigger becomes bordered rather than filled, and the
	label is legible whatever colour is chosen. Active and inactive stay
	distinguishable because their borders already differ - pale on the active
	one, the theme blue on the rest.
*/
.fbs-block[style*="--fbs-head-color"] .bsia-forum-nav-btn { color: var(--fbs-head-color) !important; }
.fbs-block[style*="--fbs-head-font"] .bsia-forum-nav-btn { font-family: var(--fbs-head-font) !important; }
.fbs-block[style*="--fbs-head-size"] .bsia-forum-nav-btn { font-size: calc(var(--fbs-head-size) * var(--fbs-type-scale, 1)) !important; }
.fbs-block[style*="--fbs-head-color"] .bsia-forum-nav-btn.btn-primary {
	background: #fff !important;
	border-color: var(--fbs-head-color) !important;
	box-shadow: none;
}


.fbs-block[style*="--fbs-text-color"] .bsia-forum-post-body,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-hero-copy,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-meta,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-meta *,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-breadcrumb,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-breadcrumb a,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-breadcrumb span,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-post-stats,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-post-stats strong,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-composer-input,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-composer-tools,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-doc-link,
.fbs-block[style*="--fbs-text-color"] .bsia-forum-doc-meta { color: var(--fbs-text-color); }

/* .text-muted is Bootstrap's, and Bootstrap writes it !important - so nothing
   short of !important reaches a caption wearing it, and several of the blocks
   built for COL-3982 use it for exactly the small print an agency user is
   trying to recolour. A chosen colour outranks a utility default. */
.fbs-block[style*="--fbs-text-color"] .text-muted { color: var(--fbs-text-color) !important; }

/* Family and size stay off the breadcrumb and the meta line's children: those
   are the block's chrome rather than its copy, and a 28px breadcrumb is not
   what "text size" means to the person setting it. Colour is different - white
   chrome on a background the user has just changed is unreadable, which is the
   whole of item 8. */
.fbs-block[style*="--fbs-text-font"] .bsia-forum-post-body,
.fbs-block[style*="--fbs-text-font"] .bsia-forum-hero-copy,
.fbs-block[style*="--fbs-text-font"] .bsia-forum-meta,
.fbs-block[style*="--fbs-text-font"] .bsia-forum-post-stats,
.fbs-block[style*="--fbs-text-font"] .bsia-forum-composer-input,
.fbs-block[style*="--fbs-text-font"] .bsia-forum-doc-link,
.fbs-block[style*="--fbs-text-font"] .bsia-forum-doc-meta { font-family: var(--fbs-text-font); }

.fbs-block[style*="--fbs-text-size"] .bsia-forum-post-body,
.fbs-block[style*="--fbs-text-size"] .bsia-forum-hero-copy,
.fbs-block[style*="--fbs-text-size"] .bsia-forum-meta,
.fbs-block[style*="--fbs-text-size"] .bsia-forum-post-stats,
.fbs-block[style*="--fbs-text-size"] .bsia-forum-composer-input,
.fbs-block[style*="--fbs-text-size"] .bsia-forum-doc-link,
.fbs-block[style*="--fbs-text-size"] .bsia-forum-doc-meta { font-size: calc(var(--fbs-text-size) * var(--fbs-type-scale, 1)); }


/* COL-3984 AC8 - accent is for the interactive icons in a block (like, flag,
   the notification bell), not for body text.

   QA 03/09, Neil item 6 - "the accent is not pulling through, assuming this
   governs the bell and the color behind the count?". Two things were wrong.

   The BELL: the rule below reaches the button, and the button's icon inherits
   from it - until the bell is switched ON, when .bsia-forum-bell.is-on i sets
   the icon red directly and the accent stops at the border. So the icon and the
   border are named here too, and a bell that is on now shows the accent in both
   states rather than only when off.

   The COUNT: "the color behind" it is a BACKGROUND, and accent only ever set a
   foreground - so the red pill beside a section name, and the dark disc on the
   like button, never moved. Both are now backgrounds, which also fixes the
   nonsense the foreground rule produced on the like count: accent-coloured
   digits on a fixed dark blue disc. */
.fbs-block[style*="--fbs-accent"] .bsia-forum-post-actions .btn,
.fbs-block[style*="--fbs-accent"] .bsia-forum-bell,
.fbs-block[style*="--fbs-accent"] .bsia-forum-bell i,
.fbs-block[style*="--fbs-accent"] .bsia-forum-bell-item,
.fbs-block[style*="--fbs-accent"] .bsia-forum-bell-item i,
.fbs-block[style*="--fbs-accent"] .bsia-forum-bell-hero,
.fbs-block[style*="--fbs-accent"] .bsia-forum-thread-toggle,
.fbs-block[style*="--fbs-accent"] .bsia-forum-readmore-btn,
.fbs-block[style*="--fbs-accent"] .bsia-forum-list-toggle { color: var(--fbs-accent); }

.fbs-block[style*="--fbs-accent"] .bsia-forum-bell.is-on,
.fbs-block[style*="--fbs-accent"] .bsia-forum-bell-item.is-on { border-color: var(--fbs-accent); }

/* The counts. !important on the pill because .bg-danger is a Bootstrap utility
   and writes its own background !important. */
.fbs-block[style*="--fbs-accent"] .bsia-forum-nav-btn .badge { background-color: var(--fbs-accent) !important; }
.fbs-block[style*="--fbs-accent"] .bsia-forum-like-count { background-color: var(--fbs-accent); }

/* The Info block supplies its own dark band, so its heading and text colours
   default to white rather than to the page's ink. An agency user who sets a
   colour still wins - the var comes first either way. */
.bsia-forum-block--info.fbs-block .bsia-forum-title {
	color: var(--fbs-head-color, #fff);
}

/* QA 03/09, Neil item 8 - "on the info box it doesn't look like the text color
   is obeying what has been said in the styling", and this rule was why.

   It is not that the value never arrived: --fbs-text-color WAS on the wrapper.
   This rule and the mapping rule above it both weigh three classes, so the
   later one wins, and this one is later - so the Info block's white default
   beat the colour the agency user had chosen, on that block and no other.

   The comment above says "an agency user who sets a colour still wins". That is
   true of the TITLE, which reads the var with a fallback, and was never true of
   the copy. A default has to lose to a choice, so the default is now gated on
   no choice having been made - the same :not() idiom the whole file uses for
   "this declaration should not exist when the property is set". */
.bsia-forum-block--info.fbs-block:not([style*="--fbs-text-color"]) .bsia-forum-hero-copy,
.bsia-forum-block--info.fbs-block:not([style*="--fbs-text-color"]) .bsia-forum-meta { color: rgba(255, 255, 255, 0.82); }

/* Same for the white link colour inside the Info hero: when a text colour is
   set, links fall back to .bsia-forum-hero-copy * (inherit) and take it, rather
   than staying white on whatever background the user has chosen. */
.bsia-forum-block--info.fbs-block[style*="--fbs-text-color"] .bsia-forum-hero-copy a { color: inherit; }

/* A background set on a block has to beat the Info band's gradient, or setting
   one on Info would appear to do nothing. */
.bsia-forum-block--info.fbs-block[style*="--fbs-bg"] {
	background: var(--fbs-bg);
}

/* ------------------------------------------------------------------
   The .fbs-block CONTRACT, second copy.

   These same rules exist in views/common/css/common-bs.css, which is what the
   CRM layout builder loads. The public forum page loads only this file, so
   without a copy here the builder would preview a styled block and the forum
   would render an unstyled one - the exact "what you see is not what you get"
   failure the per-block config is supposed to avoid.

   Two files rather than a shared one because they belong to two different
   applications - the CRM admin bundle and the public site bundle - and this
   codebase already keeps parallel copies for that reason. KEEP THEM IN STEP:
   a change to one of these blocks belongs in the other.

   Consumed here by the forum's own element classes, mapped above. New blocks
   written from scratch (COL-3982's four) use .block-heading / .block-text /
   .block-accent directly, which is the canonical contract.
   ------------------------------------------------------------------ */

/* Background and border DO take a fallback chain, because each container above
   declares what it looked like before any styling - so "not set" has a real
   value to fall back to. The type properties do not have that luxury: there is
   no --fbs-head-size-default, and an `inherit` fallback would override the
   element's own rule. So they are gated on the property existing, exactly as
   the forum-class mapping above is. */
.fbs-block {
	background-color: var(--fbs-bg, var(--fbs-bg-default, transparent));
	border-color: var(--fbs-border, var(--fbs-border-default, currentColor));
}

[style*="--fbs-head-color"] .block-heading { color: var(--fbs-head-color); }
[style*="--fbs-head-font"]  .block-heading { font-family: var(--fbs-head-font); }
[style*="--fbs-head-size"]  .block-heading { font-size: calc(var(--fbs-head-size) * var(--fbs-type-scale, 1)); }

[style*="--fbs-text-color"] .block-text,
[style*="--fbs-text-color"].fbs-block { color: var(--fbs-text-color); }
[style*="--fbs-text-font"]  .block-text,
[style*="--fbs-text-font"].fbs-block { font-family: var(--fbs-text-font); }
[style*="--fbs-text-size"]  .block-text,
[style*="--fbs-text-size"].fbs-block { font-size: calc(var(--fbs-text-size) * var(--fbs-type-scale, 1)); }

[style*="--fbs-accent"] .block-accent,
[style*="--fbs-accent"] .block-accent:hover,
[style*="--fbs-accent"] .block-accent:focus { color: var(--fbs-accent); }

/* COL-3984 AC3 / AC6 / AC7 - presets, so what they measure stays here rather
   than in a CFC. Same values as the CRM copy. */
.fbs-block.fbs-radius-square  { border-radius: 0; }
.fbs-block.fbs-radius-rounded { border-radius: 0.5rem; }
/* COL-3983 QA 03/09 item 11: one step tighter than Compact, but not flush
   to the edge - text against a border reads as broken. */
.fbs-block.fbs-pad-supercompact { padding: 0.15rem; }
.fbs-block.fbs-pad-compact     { padding: 0.5rem; }
.fbs-block.fbs-pad-comfortable { padding: 1rem; }
.fbs-block.fbs-pad-spacious    { padding: 1.75rem; }
.fbs-block.fbs-shadow-on { box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15); }

/* ------------------------------------------------------------------
   QA round 02/09 - COL-3981 / COL-3982 / COL-3983 / COL-3984 on the portal.
   ------------------------------------------------------------------ */

/* COL-3984 "a red border and nothing applied". .fbs-block above sets border
   COLOUR only, so a container with no border keeps none. Right for the
   builder tile, which draws its own border; wrong for the forum wrapper and
   the discussion panels, which have none - a border colour the user set is a
   border the user expects to see. */
.fbs-block[style*="--fbs-border"] {
	border: 1px solid var(--fbs-border);
}

/* COL-3983/3984: a discussion TRIGGER's style also dresses the panel that
   trigger opens (.bsia-forum-panel, written by the view), so styling
   "General Comments" visibly changes the comments and not just one button.
   The mapping rules above match .fbs-block[style*=...] for that reason: the
   panel is an .fbs-block in its own right. Where Discussion Content and a
   section both set a property the section wins, because custom properties
   resolve from the nearest ancestor that declares them. A panel with a
   border or background gets breathing room; the density presets still win. */
.bsia-forum-tab-content > .bsia-forum-panel.fbs-block[style*="--fbs-border"],
.bsia-forum-tab-content > .bsia-forum-panel.fbs-block[style*="--fbs-bg"] {
	padding: 1rem;
}
.bsia-forum-tab-content > .bsia-forum-panel.fbs-block.fbs-pad-supercompact { padding: 0.15rem; }
.bsia-forum-tab-content > .bsia-forum-panel.fbs-block.fbs-pad-compact     { padding: 0.5rem; }
.bsia-forum-tab-content > .bsia-forum-panel.fbs-block.fbs-pad-comfortable { padding: 1rem; }
.bsia-forum-tab-content > .bsia-forum-panel.fbs-block.fbs-pad-spacious    { padding: 1.75rem; }

/* COL-3981 (2): only the selected section shows. Bootstrap says the same;
   this copy means the forum does not depend on which Bootstrap a brand's
   header happens to load. */
.bsia-forum-tab-content > .tab-pane { display: none; }
.bsia-forum-tab-content > .tab-pane.active { display: block; }

/* Inside a block the trigger container no longer overlaps whatever is above
   it - that negative margin was the pre-block hero design, and in a grid row
   it pulled the button up into the gap. */
.bsia-forum-block .bsia-forum-nav-container {
	margin: 0;
}

/*
	QA 04/09, Neil item 3.1: "there is still a lot of buffer between the edges of
	the box and the notification icon and the edge of the container - how do we
	tighten the container?"

	The density preset was only ever reaching the BLOCK. The trigger box inside
	it carries its own 1.35rem padding, a 1rem gap and a 5.2rem min-height, all
	from the pre-block hero design, and not one of the three moved when the block
	was set to Super compact. Measured on his screen: a block padded to 8px
	around a container padded to 21.6px, in a box 84px tall holding a 40px
	button. The padding he could see was almost entirely the container's.

	All three now follow the block. The min-height goes with them - a box twice
	the height of its own content reads as padding whatever the padding says -
	except under Spacious, where the roomy box is the point.
*/
.bsia-forum-block.fbs-pad-supercompact .bsia-forum-nav-container {
	gap: 0.25rem;
	min-height: 0;
	padding: 0.15rem;
}

.bsia-forum-block.fbs-pad-compact .bsia-forum-nav-container {
	gap: 0.5rem;
	min-height: 0;
	padding: 0.5rem;
}

.bsia-forum-block.fbs-pad-comfortable .bsia-forum-nav-container {
	gap: 0.75rem;
	min-height: 0;
	padding: 1rem;
}

.bsia-forum-block.fbs-pad-spacious .bsia-forum-nav-container {
	padding: 1.75rem;
}

/* ------------------------------------------------------------------
   QA 04/09, Neil's three questions about the trigger box - answered by
   measuring his own block rather than by describing CSS.

   "If these are all set to the same, why is the bottom more spacious than
   the left, top and right?" and "what can be done so that the white block
   fits exactly inside the yellow block?" are ONE thing, and it is not
   padding: measured on forum 145 at Super compact, the gaps read 3px top,
   3px right, 3px left and 57px bottom. The block is 106px tall - a height it
   gets from the row it occupies in the grid - and the trigger box is 46px.
   The 57px is not spacing, it is the block being taller than its content,
   and no spacing control can reach it.

   So the box fills the block. Then all four gaps ARE the padding, they are
   equal because they were always meant to be, and the white box fits the
   coloured one exactly. A block with no definite height (height:100% then
   resolves to auto) is left exactly as it was.
   ------------------------------------------------------------------ */
.bsia-forum-block .bsia-forum-nav-container {
	height: 100%;
}

/* "What governs the space between the notification icon and the right edge?"
   Nothing did - and that is the answer. The strip is a flex row laid out from
   the left, so with a button 40px wide in a box 400px wide the remaining 124px
   sat empty on the right and read as a gap nobody chose. The bell now takes
   that space and sits against the right edge, so the only thing between it and
   the edge is the padding the density controls set - 2.4px at Super compact. */
.bsia-forum-block .bsia-forum-nav-container .bsia-forum-bell {
	margin-left: auto;
}

/* COL-3981 (1) / COL-3982 (3, 6, 7): list blocks are exactly h rows tall and
   scroll inside. The card becomes a column so its header stays put and only
   the list moves. --fbs-rows is the saved h, off the wrapper. */
/* QA 03/09, Neil items 1 and 7. Both are the same defect seen from two sides.

   item 1  "Topic shortcuts is at a different height to the info box when they
           both have the same size box in the grid stack"
   item 7  "when I expand my notifications list this expands the media box but
           not the flagged items"

   A list block used to take a FIXED height of exactly h rows. A content block
   beside it takes AT LEAST h rows and grows with what is in it. So the moment
   anything in the row outgrew its rows - a long introduction, or another list
   being expanded - the row band grew, the content blocks grew with it, and the
   fixed-height list blocks stayed exactly where they were. Two blocks saved at
   the same size then rendered at different heights, which is what Neil saw.

   THE RULE NOW: a row of blocks is a row of EQUAL HEIGHT blocks. Whatever the
   tallest block in the band needs, every block in that band gets, and a list
   block scrolls inside however much it is given. Expanding one list therefore
   grows the whole band and pushes what is below it down, rather than leaving
   its neighbours short - which is the answer to the question in item 7.

   How, and why it is done this way: the wrapper asks for h rows as a MINIMUM
   and is otherwise free to stretch to the band (grid items stretch when their
   height is auto). The card is taken out of flow and pinned to the wrapper, so
   its own content can never push the band taller - which is the circularity
   that made a fixed height look like the only option. A grid item cannot both
   "grow to fit the row" and "not decide how tall the row is" while its content
   is in flow. */
/* SUPERSEDED 12/09/2026, Rob: "just get rid of the scroll bars". A list block
   no longer scrolls inside its tile either - it is the height its items need,
   which is what Expand all used to have to be pressed for. The card goes back
   IN flow (that is the whole mechanism: an absolutely positioned card cannot
   push the band taller, an in-flow one can), and the row grows to fit it.

   The equal-height rule from QA 03/09 items 1 and 7 still holds, and for the
   same reason - every block in a band is stretched to the tallest - so two
   blocks saved at the same size still draw at the same size. What has gone is
   the cap that made "tallest" mean "tallest tile" rather than "tallest
   content". Expand all has nothing left to do and is hidden below. */
.bsia-forum-block--list {
	display: flex;
	flex-direction: column;
	min-height: calc(var(--fbs-rows, 3) * var(--bsia-forum-row-unit, 90px) + (var(--fbs-rows, 3) - 1) * var(--bsia-forum-row-gap, 1rem));
	overflow: visible;
	position: relative;
}
/* flex rather than min-height: 100% - a percentage minimum needs a definite
   parent height to resolve against, and the wrapper's is auto until the grid
   has sized the band. As a flex child the card fills a wrapper held open by
   the row minimum, and is its own content height whenever that is taller. */
.bsia-forum-block--list > .card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-bottom: 0;
	min-height: 0;
	position: static;
}

/* An absolutely positioned child fills its container's PADDING box, so a
   density preset on a list block would be painted over rather than respected.
   The preset therefore moves inwards, onto the card, where it still measures
   the same thing. */
.bsia-forum-block--list.fbs-pad-supercompact,
.bsia-forum-block--list.fbs-pad-compact,
.bsia-forum-block--list.fbs-pad-comfortable,
.bsia-forum-block--list.fbs-pad-spacious { padding: 0; }
.bsia-forum-block--list.fbs-pad-supercompact > .card { padding: 0.15rem; }
.bsia-forum-block--list.fbs-pad-compact > .card     { padding: 0.5rem; }
.bsia-forum-block--list.fbs-pad-comfortable > .card { padding: 1rem; }
.bsia-forum-block--list.fbs-pad-spacious > .card    { padding: 1.75rem; }
.bsia-forum-block--list > .card > .card-header,
.bsia-forum-block--list > .card > .card-footer {
	flex: 0 0 auto;
}
.bsia-forum-block--list > .card > .list-group,
.bsia-forum-block--list > .card > .card-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: visible;
}

/* Expand all / Collapse (COL-3982 item 7) is now a button that cannot change
   anything - a list is always its full height - so it is hidden rather than
   left on the card doing nothing. The markup and its JS stay put: this is one
   declaration to delete if the caps ever come back. */
.bsia-forum-list-toggle {
	display: none;
}

/* ------------------------------------------------------------------
   COL-3983 QA 06/09 and 07/09, Neil: "the output is 'fatter' than the layout"
   - then, offered the choice, "ok, lets do Option B then".

   Option A (06/09) gave the builder the forum's widths and gutters, and the
   forum still drew taller: a content block was AT LEAST its rows and grew
   with what was in it, dragging every block that shared its rows along.
   Forum 148, measured: Info at 3 rows is 302px in the builder and was 508px
   on the forum, and the three 1-row triggers beside it drew at 175px because
   Info stretched their rows. Option B is the other half: a content block is
   EXACTLY its rows, and whatever does not fit scrolls inside it - the rule the
   list blocks have followed since COL-3981. The builder is then the truth, to
   the pixel at 1160px.

   How: the wrapper asks for its rows as a minimum and is otherwise free to
   stretch to the band, exactly as a list block does. contain: size is what
   stops its content bidding for more - with size containment the wrapper's
   intrinsic height is nothing, so the grid sizes the band from the min-height
   alone. The content sits in .bsia-forum-block-scroll (the one element the
   view adds around the captured markup - the block's own insides are
   untouched, per COL-3981), a flex child that shrinks to the wrapper's content
   box and scrolls. In flow rather than absolutely positioned, so the density
   preset and the per-side Spacing inside on the wrapper still frame it.

   The list blocks are not touched, and neither is Expand all: a row still
   grows when a list is expanded, and a content block sharing that row
   stretches with it (min-height, never height), so the band stays level.

   SUPERSEDED 12/09/2026, Rob: option B is reversed on the forum. The scroll
   boxes it put on every block read as "scrollbars all over it" - a page the
   reader has to work through one small window at a time - and the reading
   experience is worth more than the builder matching to the pixel. A content
   block is AT LEAST its rows again and grows with what is in it, which is
   option A, and is what the phones rule below has always done.

   What this costs, so it is not rediscovered: the builder is once more an
   approximation of a forum whose content outgrows its tiles, and a tall block
   stretches the blocks sharing its rows (the 508px-against-302px Info that
   started COL-3983). That is the trade Neil was making the other way on 07/09.
   min-height is kept, so a block is never SMALLER than the tile drawn for it
   and a short forum still looks like its layout.
   ------------------------------------------------------------------ */
.bsia-forum-block--content {
	display: flex;
	flex-direction: column;
	min-height: calc(var(--fbs-rows, 1) * var(--bsia-forum-row-unit, 90px) + (var(--fbs-rows, 1) - 1) * var(--bsia-forum-row-gap, 1rem));
}
.bsia-forum-block--content > .bsia-forum-block-scroll {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	overflow: visible;
}

/* The Info block's thin white scrollbar treatment went with the scroller it
   styled (12/09/2026 - see the reversal note above). Nothing scrolls inside a
   content block now, so there is no bar to paint. */

/* The Info block's Back to forums / bell row was asked for "bottom right,
   below the scroll box of the content" (QA 04/09 items 9 and 10). Now that the
   block is exactly its rows its content can be shorter than the block, so the
   row is pushed to the foot of the block when the content leaves room, and
   follows the content down when it does not: the auto margin absorbs the free
   space, the padding keeps the clearance either way. (The margin was 1rem; it
   is the padding now, so the older harness's margin assertion reads >= 0.) */
.bsia-forum-block--info > .bsia-forum-block-scroll {
	display: flex;
	flex-direction: column;
}
.bsia-forum-block--info .bsia-forum-back-row--footer {
	margin-top: auto;
	padding-top: 1rem;
}

/* Phones: the 12-column grid is already given up below 768px (every block
   goes full width in layout order and the rows are auto - the media query
   after .bsia-forum-block-x11), so there is no tile for a block to be the size
   of, and the row minimum is dropped so a block is purely its content.

   Growing with the content is no longer special to phones - every width does
   it since 12/09/2026 - so only min-height is left here. */
@media (max-width: 767.98px) {
	.bsia-forum-block--content {
		min-height: 0;
	}
}
.bsia-forum-list-card > .card-header {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}
.bsia-forum-list-toggle {
	background: transparent;
	border: 0;
	color: var(--bsia-forum-blue, #002d5b);
	font-size: 0.78rem;
	font-weight: 600;
	margin-left: auto;
	padding: 0 0.25rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.bsia-forum-list-toggle:hover,
.bsia-forum-list-toggle:focus {
	color: var(--bsia-forum-blue-dark, #001a35);
}
.bsia-forum-list-snippet {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* COL-3982 (1): the Media block draws its container whenever it has been
   styled or configured, media or not. The card is transparent so the block's
   own background and border are what show. */
.bsia-forum-block--media .bsia-forum-media {
	background: transparent;
	border: 0;
	height: 100%;
}
.bsia-forum-media-item {
	display: block;
	height: auto;
	max-width: 100%;
}
.bsia-forum-media-content {
	overflow-wrap: anywhere;
	padding: 0.5rem 0.25rem;
}
.bsia-forum-media-content img {
	height: auto;
	max-width: 100%;
}
/* 05/09: the content is authored with the CRM's page editor now, so it can
   carry an uploaded clip or a YouTube / Vimeo player as well as pictures. Both
   fit the block rather than overflowing it - the editor writes 560x315, and a
   block is rarely that wide. */
.bsia-forum-media-content video,
.bsia-forum-media-content iframe {
	display: block;
	max-width: 100%;
}
.bsia-forum-media-content video {
	height: auto;
}
.bsia-forum-media-content iframe {
	aspect-ratio: 16 / 9;
	height: auto;
	width: 100%;
}

/* COL-3982 (4) and COL-3981 (3): deep links and post-refresh scrolls land
   clear of the site's fixed navbar, at the TOP of the item. */
.bsia-forum-post,
.bsia-forum-reply,
.bsia-forum-block--discussionContent {
	scroll-margin-top: 6rem;
}

/* ------------------------------------------------------------------
   COL-3983 QA 03/09, Neil item 4 - "render the spaces between the blocks in
   the block attribute settings so that I can opt to have no daylight between
   left right top and bottom of a block and its corresponding block".

   The grid draws a 1rem gutter between blocks. A gutter is SHARED, so a block
   can only give up its own half of it: set None on one block and half the
   gutter closes, set it on both neighbours and they meet exactly. That is the
   whole of the model, and the Edit modal says so in as many words.

   The alternative - letting one block claim the entire gutter - closes it in
   one click and then OVERLAPS as soon as the neighbour asks for the same
   thing, hiding content. A gap you can see is better than content you cannot.

   Only the forum grid has gutters, so only the forum grid reads these classes;
   on a builder tile the class lands on an element no rule matches.
   ------------------------------------------------------------------ */
.bsia-forum-block.fbs-gap-tight { margin: calc(var(--bsia-forum-row-gap, 1rem) * -0.25); }
.bsia-forum-block.fbs-gap-none  { margin: calc(var(--bsia-forum-row-gap, 1rem) * -0.5); }

/* ------------------------------------------------------------------
   COL-3983 QA 04/09 item 2: per-side spacing.

   A preset can be a class; four independent sides cannot - five keys on four
   sides is 625 combinations for padding alone. So a side that is set arrives
   as its own custom property from forumLayoutService.getBlockStyleVars(), and
   these rules consume it.

   Each declaration is GATED on its own property being present. A bare
   var(--fbs-pad-top, ...) would outrank the preset class for every block
   whether or not a side was set - the trap that silently shrank the forum
   title on 01/09. Gated, an unset side has no declaration at all and the
   preset keeps its value.
   ------------------------------------------------------------------ */
.bsia-forum-block.fbs-block[style*="--fbs-pad-top"]    { padding-top: var(--fbs-pad-top); }
.bsia-forum-block.fbs-block[style*="--fbs-pad-right"]  { padding-right: var(--fbs-pad-right); }
.bsia-forum-block.fbs-block[style*="--fbs-pad-bottom"] { padding-bottom: var(--fbs-pad-bottom); }
.bsia-forum-block.fbs-block[style*="--fbs-pad-left"]   { padding-left: var(--fbs-pad-left); }

/* The gutter, per side. Same gating, and the same model as the preset: a block
   gives up its OWN half of a shared gutter, never its neighbour's. */
.bsia-forum-block[style*="--fbs-gap-top"]    { margin-top: var(--fbs-gap-top); }
.bsia-forum-block[style*="--fbs-gap-right"]  { margin-right: var(--fbs-gap-right); }
.bsia-forum-block[style*="--fbs-gap-bottom"] { margin-bottom: var(--fbs-gap-bottom); }
.bsia-forum-block[style*="--fbs-gap-left"]   { margin-left: var(--fbs-gap-left); }

/* ------------------------------------------------------------------
   COL-3983 QA 04/09 item 3: the forum canvas.

   The surface the blocks sit on, and so the colour that shows through every
   gutter - a block paints nothing outside its own border. Measured before
   changing anything: the portal canvas was #f0f2f5 and the builder canvas
   #f8f9fa, which is the mismatch reported.

   Gated, so a forum with no canvas colour keeps the site's own grey rather
   than inheriting white from this rule.
   ------------------------------------------------------------------ */
.bsia-forums[style*="--fbs-canvas-bg"] { background: var(--fbs-canvas-bg); }

/* ------------------------------------------------------------------
   COL-3983 QA 04/09 (15:07), Neil: "how are we handling changes in screen
   resolution? I'd prefer to just decrease the font sizes to fit as laid out
   than move items around to try keep the font sizes."

   Answering it as asked. A block's heading and text sizes are set in the
   builder as absolute values, and every rule that consumes them now multiplies
   by --fbs-type-scale, which is 1 on a full-width screen and steps down as the
   viewport narrows. The grid keeps the arrangement it was given; the type comes
   down to meet it.

   It scales only what the builder set. A block whose sizes were never chosen
   has no --fbs-head-size, so none of these rules apply to it and it renders at
   the stylesheet's own sizes exactly as before - this cannot shrink text that
   nobody asked to control.

   The steps are deliberately shallow. Halving the type at tablet width would be
   unreadable long before the layout became a problem.
   ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
	.bsia-forums { --fbs-type-scale: 0.92; }
}

@media (max-width: 991.98px) {
	.bsia-forums { --fbs-type-scale: 0.84; }
}

@media (max-width: 767.98px) {
	.bsia-forums { --fbs-type-scale: 0.76; }
}

@media (max-width: 575.98px) {
	.bsia-forums { --fbs-type-scale: 0.7; }
}
/* ------------------------------------------------------------------
   COL-3983 QA 05/09, Neil item 2: "canvas background not affecting these
   areas".

   Correct, and it never could. The canvas is the surface the blocks SIT ON -
   what shows through every gutter. Everything circled paints its own
   background on top of it. Measured on forum 145, these are all of them:

     .bsia-forum-post, .bsia-forum-composer, .bsia-forum-nav-container,
     .bsia-forum-back, .bsia-forum-docs and its rows   white
     .bsia-forum-reply                                 #fafbfc
     .bsia-forum-docs-header                           #f4f7fa
     .bsia-forum-post-actions                          #f3f4f6

   One control repaints the lot, so they cannot drift apart into five nearly
   equal greys again. Gated on the variable being SET, so a forum that has
   never been given one keeps every colour above exactly as it is.

   Deliberately NOT repainted: the rich-text editor chrome (.tox-*). That is
   the editor's own furniture, it draws its own borders against its own
   colours, and reaching into a third-party component with our variable is
   how you get a toolbar that looks broken at the edges.
   ------------------------------------------------------------------ */
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-post,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-reply,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-composer,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-nav-container,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-back,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-docs,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-doc-row,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-docs-header,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-post-actions,
/* COL-3983 QA 05/09 (Neil, forum 148, Topics tab): three more surfaces that
   paint their own grey on top of the canvas and that the first list, measured
   on a forum with no topic documents, never met - the tab strip, the documents
   box under a topic, and a card's media strip. All three take the soft grey
   from the stylesheet's own variable, so the panel colour has to reach them
   too or a white panel setting still leaves grey blocks on the page. */
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-tabs,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-topic-docs,
.bsia-forums[style*="--fbs-surface-bg"] .bsia-forum-card-media {
	background-color: var(--fbs-surface-bg);
}

/* COL-4496: the public EVENT page renders its blocks on this same grid (views/events/event.cfm). The canvas
   colour a layout carries is painted on the grid itself there - the event page has no main.bsia-forums to
   hold it - so the same custom property lands on .bsia-event-blocks. Gated on the property being set, as
   the forum rule is, so an event with no canvas colour keeps the site's own background. */
.bsia-forum-blocks.bsia-event-blocks[style*="--fbs-canvas-bg"] { background: var(--fbs-canvas-bg); padding: 12px; border-radius: 6px; }
/* COL-4500: the accent colour reaches the ticket purchase button and the social links inside a styled block. */
.bsia-forum-block[style*="--fbs-accent"] .bsia-event-accent { background-color: var(--fbs-accent); border-color: var(--fbs-accent); color: #fff; }
/* COL-4500 QA 13/09: the event blocks are .fbs-block containers now, so background, border, corners, density,
   per-side spacing and shadow follow the contract above. The accent has no forum element classes to land on
   inside an event block, so it takes the same hooks the canonical contract names plus the event page's own:
   the links, the date badges and the detail labels the block holds. */
.bsia-event-blocks .fbs-block[style*="--fbs-accent"] a:not(.btn),
.bsia-event-blocks .fbs-block[style*="--fbs-accent"] a:not(.btn):hover,
.bsia-event-blocks .fbs-block[style*="--fbs-accent"] dt { color: var(--fbs-accent); }
.bsia-event-blocks .fbs-block[style*="--fbs-accent"] .badge { background-color: var(--fbs-accent) !important; }