/* Activity remains secondary to reading and writing. */
.bnb-topic-readership {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	color: var(--bnb-muted);
	font-size: 0.875rem;
	margin-block: 0.5rem 1rem;
}

.bnb-topic-readership > p {
	margin: 0;
}

.bnb-topic-readership details {
	flex-basis: 100%;
}

.bnb-topic-readership form {
	display: grid;
	gap: 0.75rem;
}

.bnb-topic-readership summary {
	cursor: pointer;
	min-block-size: var(--bnb-tap);
}

/**
 * Correcting, withdrawing, relocating — and what is new since you were here.
 *
 * Loaded only on the forum and topic screens. It lived in portal-v3.css at
 * first, which ships on every page of the site, and pushed the home page, the
 * forum directory and the boards past their CSS budgets for markup none of them
 * render.
 */
/* Correcting, withdrawing, relocating — and what is new since you were here.
   Each of these is a quiet control that must not compete with the conversation
   it sits beside, so they borrow the report affordance rather than inventing a
   louder one. */

/* The same quiet affordance the report and nested-composer panels use, restated
   here rather than added to the shared sheet — those selectors would otherwise
   ship to every page on the site for markup only these two screens render. */
.bnb-post-edit summary,
.bnb-topic-relocate summary {
	color: var(--bnb-muted);
	cursor: pointer;
	font-weight: 700;
	min-block-size: var(--bnb-tap);
	padding-block: 0.5rem;
}

.bnb-post-edit form,
.bnb-topic-relocate form {
	display: grid;
	gap: 0.7rem;
	margin-block-start: 0.75rem;
}

.bnb-post-edit,
.bnb-topic-relocate {
	font-size: 0.82rem;
	margin-block-start: 0.6rem;
}

.bnb-post-edit[open],
.bnb-topic-relocate[open] {
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	padding: 0.75rem 0.9rem;
}

.bnb-post-edit label,
.bnb-topic-relocate label {
	display: block;
	font-weight: 600;
	margin-block-start: 0.4rem;
}

.bnb-topic-relocate form + form {
	border-block-start: 1px solid var(--bnb-line);
	margin-block-start: 0.9rem;
	padding-block-start: 0.9rem;
}

.bnb-withdraw-form {
	margin-block-start: 0.6rem;
}

/* A post its author took back keeps its place in the thread and says so. */
.bnb-post-body.is-withdrawn p {
	color: var(--bnb-muted);
	font-style: italic;
	margin: 0;
}

.bnb-post-edited {
	color: var(--bnb-muted);
	font-size: 0.78rem;
	margin-block: 0.35rem 0;
}

.bnb-post-image {
	margin: 0.85rem 0 0;
}

.bnb-post-image img {
	block-size: auto;
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	max-inline-size: min(100%, 34rem);
}

/* Underlined always, not on hover. A mention set apart from the words around it
   by colour alone is invisible to a reader who does not see that colour — and at
   1.85:1 against body text it is close to invisible to everyone. */
.bnb-mention {
	/* gold-ink inverts with the palette (#5c430f light, #e9c988 dark), so the
	   link stays legible either way; the underline carries the meaning for anyone
	   who does not see the colour at all. */
	color: var(--bnb-gold-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* "New since I was here" — the marker has to read at a glance without turning
   the list into a wall of badges, so the row gets a rule and the flag a pill. */
/* Scoped through the row so it outranks `.bnb-topic-statuses span`, which sets
   the gold every other pill here shares — a bare class loses that match and the
   flag silently comes out looking like the metadata beside it. */
.bnb-topic-statuses span.bnb-unread-flag {
	/* The other pills are metadata; this is the only one asking the reader to do
	   something, so it takes the navy the buttons use.

	   --bnb-paper is NOT the text colour here: it is a surface role, and the dark
	   palette redefines it to #0a0f1c, which would have put near-black on navy at
	   about 2:1 — the one marker this whole feature exists for, unreadable in dark
	   mode. Navy-900 with white is the pair the buttons already prove at 15.3:1,
	   and it is fixed in both palettes. The border keeps the pill's own edge
	   visible against a dark surface. */
	background: var(--bnb-navy-900);
	border: 1px solid var(--bnb-gold);
	color: #fff;
}

.bnb-topic-list li.is-unread {
	border-inline-start: 3px solid var(--bnb-gold);
	margin-inline-start: -0.75rem;
	padding-inline-start: 0.75rem;
}

.bnb-topic-list li.is-unread > .bnb-topic-row-main a {
	font-weight: 700;
}

.bnb-mark-read {
	display: flex;
	/* Aligned with the leading edge of the list it clears, not with the page
	   actions above it — it belongs to the topics, not to the forum. */
	justify-content: flex-start;
	margin-block: 1rem 0.5rem;
}

/* Thumb targets on the topic screen: quoting and mentioning were 27px underlined words 8px apart, the
   sign-in prompt was a 17px link in a box that did nothing, and related topics were a browser bullet list. */
.bnb-reply-actions {
	column-gap: 0.75rem;
}

.bnb-reply-actions a,
.bnb-related li a {
	align-items: center;
	display: inline-flex;
	min-block-size: 44px;
}

.bnb-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-auth-prompt a {
	align-items: center;
	display: flex;
	justify-content: center;
	min-block-size: 44px;
}

@media (max-width: 42.5rem) {
	/* Under a start-aligned title the end-aligned meta floated mid-row and the list read as a zig-zag. */
	.bnb-topic-row-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		text-align: start;
	}

	/* Three reactions fit one row on a phone instead of two plus an orphan. */
	.bnb-interactions button,
	.bnb-interactions span {
		padding-inline: 0.6rem;
	}
}

/* The relocate panel's select and number field are flex/grid items, and a long
   forum name gave them an intrinsic width wider than a 360px screen — which
   scrolls the whole page sideways, not just the panel. */
.bnb-topic-relocate :is(select, input) {
	max-inline-size: 100%;
	min-inline-size: 0;
}

.bnb-topic-number {
	color: var(--bnb-muted);
	font-size: 0.78rem;
	margin-block: 0 0.6rem;
}

.bnb-withdraw-confirm {
	margin-block-start: 0.6rem;
}

.bnb-withdraw-confirm summary {
	color: var(--bnb-danger);
	cursor: pointer;
	font-weight: 700;
	min-block-size: var(--bnb-tap);
	padding-block: 0.5rem;
}

.bnb-withdraw-confirm p {
	color: var(--bnb-muted);
	font-size: 0.82rem;
	margin-block: 0 0.5rem;
}