/* Recognition and the member profile — the only two screens that render a badge.

   These rules used to live in the stylesheet that ships on every page, so
   somebody reading a forum downloaded the badge grid, five tier shapes and the
   score card they were never going to see. Moving them to the two routes that do
   render them returns those bytes to every other page, and pays for the domain
   menu the header gained. */

.bnb-forum-grid,
.bnb-search-results,
.bnb-badge-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
}

.bnb-recognition-section,
.bnb-profile-section {
	margin-block: 4.5rem;
}

.bnb-score-card {
	background: linear-gradient(145deg, var(--bnb-navy-900), var(--bnb-navy-950));
	border: 1px solid color-mix(in srgb, var(--bnb-gold-bright) 45%, transparent);
	border-radius: var(--bnb-r-lg);
	color: #fff;
	display: flex;
	gap: 1.8rem;
	justify-content: space-between;
	padding: 2rem;
}

.bnb-score-card h2 {
	color: #fff;
	font-size: 2.25rem;
	margin: 0;
}

.bnb-score-card dl {
	display: flex;
	gap: var(--bnb-space-3);
}

.bnb-score-card dl div {
	background: rgb(255 255 255 / 9%);
	border: 1px solid rgb(255 255 255 / 13%);
	border-radius: var(--bnb-r);
	min-inline-size: 100px;
	padding: 0.85rem;
}

.bnb-score-card dt {
	font-size: 0.75rem;
}

.bnb-score-card dd {
	font-size: 1.55rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
}

.bnb-badge,
.bnb-mini-badges > div {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
}

.bnb-badge {
	align-items: center;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 52px 1fr auto;
	padding: 1rem;
}

.bnb-badge h3 {
	font-size: 0.95rem;
	margin: 0;
}

.bnb-badge p {
	color: var(--bnb-muted);
	font-size: 0.7rem;
	margin: 0.15rem 0;
}

.bnb-badge > strong {
	font-size: 0.7rem;
}

.bnb-badge-art {
	align-items: center;
	background: var(--bnb-gold-pale);
	border: 2px solid var(--bnb-gold);
	color: var(--bnb-gold-ink);
	display: inline-flex;
	inline-size: 46px;
	justify-content: center;
	min-block-size: 46px;
}

.bnb-badge-art svg {
	block-size: 28px;
	fill: none;
	inline-size: 28px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.bnb-badge-art--bronze {
	border-radius: 50%;
}

.bnb-badge-art--silver {
	border-radius: var(--bnb-r-sm);
}

.bnb-badge-art--gold {
	border-radius: 50% 50% 46% 46% / 35% 35% 65% 65%;
}

.bnb-badge-art--rare {
	clip-path: polygon(25% 5%, 75% 5%, 98% 50%, 75% 95%, 25% 95%, 2% 50%);
}

.bnb-badge-art--keystone {
	clip-path: polygon(18% 3%, 82% 3%, 100% 100%, 0 100%);
}

.bnb-mini-badges {
	display: grid;
	gap: var(--bnb-space-2);
	grid-template-columns: repeat(8, 1fr);
}

.bnb-mini-badges > div {
	min-block-size: 104px;
	padding: 0.65rem;
	text-align: center;
}

.bnb-mini-badges .bnb-badge-art {
	display: flex;
	margin-inline: auto;
}

.bnb-mini-badges small {
	display: block;
	font-size: 0.65rem;
	margin-block-start: 0.4rem;
}

/* These overrides had lost their media queries, so every desktop screen that loads this sheet — messages,
   account, community, recognition, the member profile — collapsed to a single wide column. */
@media (max-width: 61.25rem) {
	.bnb-forum-grid,
	.bnb-badge-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 42.5rem) {
	.bnb-domain-grid,
	.bnb-forum-grid,
	.bnb-search-results,
	.bnb-badge-grid,
	.bnb-community-columns,
	.bnb-messages-layout {
		grid-template-columns: 1fr;
	}

	.bnb-mini-badges {
		grid-template-columns: repeat(3, 1fr);
	}

	.bnb-score-card {
		display: block;
	}

	.bnb-score-card dl {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.bnb-score-card dl div {
		flex: 1 1 84px;
	}

	.bnb-badge {
		grid-template-columns: 52px 1fr;
	}

	.bnb-badge > strong {
		grid-column: 2;
	}

	/* A card inside the page card: on a phone the doubled padding left forms 236px wide. */
	.bnb-community-panel,
	.bnb-messages-layout aside,
	.bnb-conversation {
		padding: 1rem;
	}
}

.bnb-upgrade-panel {
	margin-block-start: 1.25rem;
}

/* A label that wraps its control reads above it, like every other field on these screens. */
.bnb-community-panel label {
	display: grid;
	gap: 0.35rem;
}

/* A stat tile whose label wraps keeps its number on the same line as its neighbours'. */
.bnb-community-panel dl div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

:is(.bnb-community-panel, .bnb-messages-layout aside, .bnb-conversation) > h2:first-child {
	margin-block-start: 0;
}

/* Two forms in one card read as two sections, not one long form. */
.bnb-community-panel form + h3 {
	border-block-start: 1px solid var(--bnb-line);
	margin-block-start: 2rem;
	padding-block-start: 1.5rem;
}

.bnb-section-heading h1 {
	font-size: clamp(2.5rem, 5vw, 3.8rem);
	margin: 0;
}

.bnb-preferences {
	margin-block-end: 1rem;
}

.bnb-profile-section {
	margin-block: 2.5rem;
}

.bnb-profile-section .bnb-section-heading h2 {
	font-size: clamp(1.4rem, 3vw, 1.8rem);
}

@media (max-width: 42.5rem) {
	/* The name beside the avatar wrapped to three lines on a phone. */
	.bnb-profile-hero {
		grid-template-columns: 1fr;
	}

	.bnb-profile-hero h1 {
		font-size: 1.75rem;
	}
}

/* The goal surface: what the member is closest to, and how close. */
.bnb-goal-list {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-goal {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
}

.bnb-goal > div {
	display: grid;
	flex: 1;
	gap: 0.2rem;
	min-inline-size: 0;
}

.bnb-goal > .bnb-badge-art {
	flex: none;
}

.bnb-goal-how {
	color: var(--bnb-muted);
	font-size: 0.9rem;
}

.bnb-goal-bar {
	block-size: 0.5rem;
	inline-size: 100%;
}

.bnb-goal-left {
	color: var(--bnb-gold-ink);
	font-size: 0.85rem;
	font-weight: 650;
}

.bnb-badge-rest {
	color: var(--bnb-muted);
	margin-block-start: 1rem;
}