.bnb-board-shell {
	background: var(--bnb-color-surface, #fff);
	border: 1px solid var(--bnb-color-border, #aab2c0);
	border-radius: 1rem;
	inline-size: min(52rem, calc(100% - 2rem));
	margin-block: 2rem;
	margin-inline: auto;
	padding-block: 1.5rem;
	padding-inline: 1.5rem;
}

.bnb-board-shell form {
	display: grid;
	gap: 0.75rem;
}

.bnb-boards-hero {
	align-items: center;
	background: linear-gradient(135deg, var(--bnb-gold-pale, #f1e2bd), var(--bnb-surface, #fff) 62%);
	border: 1px solid var(--bnb-line, #dce4e5);
	border-radius: var(--bnb-r-lg, 1.25rem);
	display: grid;
	gap: var(--bnb-space-5, 1.5rem);
	grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
	margin-block: var(--bnb-space-5, 1.5rem);
	max-inline-size: none;
	overflow: hidden;
	padding: var(--bnb-space-5, 1.5rem);
}

.bnb-boards-hero-copy {
	position: relative;
	z-index: 1;
}

.bnb-boards-hero-copy h1 {
	margin-block-start: 0;
}

.bnb-boards-hero-art {
	background: var(--bnb-gold-pale, #f1e2bd);
	border-radius: var(--bnb-r, 1rem);
	display: block;
	height: auto;
	inline-size: 100%;
	object-fit: cover;
}

.bnb-ad-label {
	background: var(--bnb-color-navy, #122447);
	color: #fff;
	display: inline-block;
	font-weight: 700;
	padding-block: 0.25rem;
	padding-inline: 0.75rem;
}

.bnb-commission {
	background: var(--bnb-gold-pale, #f1e2bd);
	color: var(--bnb-color-text, #172033);
	padding-block: 0.75rem;
	padding-inline: 1rem;
}
.bnb-view-tabs,.bnb-directory-actions,.bnb-time-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-block:1rem}.bnb-view-tabs a{border-bottom:3px solid transparent;color:var(--bnb-color-text,#172033);font-weight:800;padding:.7rem 1rem;text-decoration:none}.bnb-view-tabs a.is-active{border-color:var(--bnb-color-gold,#b8882e)}.bnb-directory-filters{align-items:end;background:var(--bnb-color-surface,#fff);border:1px solid var(--bnb-color-border,#dce4e5);border-radius:1rem;display:grid;gap:1rem;grid-template-columns:repeat(4,1fr);margin-block:1.5rem;padding:1rem}.bnb-directory-filters label,.bnb-time-row label{display:grid;gap:.35rem}.bnb-directory-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}.bnb-directory-grid article{background:var(--bnb-color-surface,#fff);border:1px solid var(--bnb-color-border,#dce4e5);border-radius:1rem;padding:1.25rem}.bnb-directory-card-head{align-items:center;display:flex;gap:1rem}.bnb-directory-card-head img{block-size:4rem;border-radius:.75rem;inline-size:4rem;object-fit:cover}.bnb-directory-card-head h2{margin:0}.bnb-directory-card-head span{color:var(--bnb-color-muted,#5f6f78);font-size:.8rem;font-weight:700}.bnb-directory-grid dl div{display:flex;gap:.5rem}.bnb-directory-grid dt{font-weight:800}.bnb-directory-grid dd{margin:0}.bnb-verified-label{color:var(--bnb-verified,#16643a)}.bnb-phone-reveal{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem}.bnb-phone-reveal output{font-weight:800}.bnb-check-grid{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}.bnb-directory-form fieldset{border:1px solid var(--bnb-color-border,#dce4e5);border-radius:.75rem;padding:1rem}.bnb-form-note{color:var(--bnb-color-muted,#5f6f78);font-size:.9rem;margin-block-start:-.35rem}
.bnb-board-filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-block:2rem}.bnb-board-filters a{padding:.55rem 1rem;border:1px solid var(--bnb-color-border,#dce4e5);border-radius:999px;text-decoration:none;font-weight:700;background:var(--bnb-color-surface,#fff)}.bnb-board-filters a.is-active{background:var(--bnb-color-navy,#173f59);color:#fff}.bnb-ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.bnb-ad-grid article,.bnb-ad-detail-card{background:var(--bnb-color-surface,#fff);border:1px solid var(--bnb-color-border,#dce4e5);border-radius:1rem;padding:1.4rem}.bnb-ad-grid article.is-highlighted{border:2px solid var(--bnb-color-gold,#b8882e)}.bnb-ad-card-label{display:flex;justify-content:space-between;color:var(--bnb-color-muted,#5f6f78);font-size:.75rem}.bnb-ad-card-label strong{color:var(--bnb-gold-ink,#5c430f)}.bnb-ad-grid h2 a{text-decoration:none}.bnb-ad-price{display:block;font-size:1.5rem;margin-block:1rem}.bnb-board-form{display:grid;gap:.75rem;padding:1.5rem;background:var(--bnb-color-surface,#fff);border:1px solid var(--bnb-color-border,#dce4e5);border-radius:1rem}.bnb-ad-detail-card>h1{font-size:clamp(2.3rem,6vw,4rem)}.bnb-ad-description{font-size:1.1rem;white-space:normal}.bnb-seller-card{display:flex;align-items:center;gap:1rem;margin-block:2rem;padding:1rem;background:var(--bnb-surface-2,#eef3f4);border-radius:1rem}.bnb-seller-card h2{margin:0}.bnb-seller-card small{font-size:.65rem;color:var(--bnb-verified,#16643a)}.bnb-seller-card .bnb-button{margin-inline-start:auto}@media(max-width:800px){.bnb-boards-hero{grid-template-columns:1fr;padding:1rem}.bnb-ad-grid,.bnb-directory-grid{grid-template-columns:1fr}.bnb-directory-filters{grid-template-columns:1fr}.bnb-check-grid{grid-template-columns:repeat(2,1fr)}.bnb-seller-card{align-items:flex-start;flex-wrap:wrap}.bnb-seller-card .bnb-button{margin-inline-start:0}}
.bnb-directory-profile-card{background:var(--bnb-color-surface,#fff);border:1px solid var(--bnb-color-border,#dce4e5);border-radius:1rem;margin-block:1rem;padding:clamp(1rem,3vw,2rem)}.bnb-directory-profile-fields{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-block:1.5rem}.bnb-directory-profile-fields div{border-block-end:1px solid var(--bnb-color-border,#dce4e5);padding-block-end:.75rem}.bnb-directory-profile-fields dt{font-weight:800}.bnb-directory-profile-fields dd{margin:.25rem 0 0}@media(max-width:800px){.bnb-directory-profile-fields{grid-template-columns:1fr}}

.bnb-form-progress {
	display: grid;
	gap: var(--bnb-space-3);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin-block: var(--bnb-space-5);
	padding: 0;
}

.bnb-form-progress li {
	align-items: center;
	color: var(--bnb-muted);
	display: flex;
	font-weight: 800;
	gap: var(--bnb-space-2);
}

.bnb-form-progress span {
	align-items: center;
	background: var(--bnb-navy-900);
	border-radius: var(--bnb-r-pill);
	/* Navy does not flip with the theme; paper-as-ink went near-black on it. */
	color: #fff;
	display: inline-flex;
	justify-content: center;
	min-block-size: 2rem;
	min-inline-size: 2rem;
}

.bnb-draft-restore,
.bnb-ad-preview,
.bnb-status-timeline {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-lg);
	box-shadow: var(--bnb-shadow-sm);
	margin-block: var(--bnb-space-4);
	padding: var(--bnb-space-4);
}

.bnb-draft-restore[hidden],
.bnb-ad-preview[hidden] {
	display: none;
}

.bnb-draft-restore > div,
.bnb-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
}

.bnb-board-form > small,
.bnb-draft-status,
.bnb-status-timeline time,
.bnb-status-timeline small {
	color: var(--bnb-muted);
}

.bnb-checkbox-row {
	align-items: start;
	display: flex;
	gap: var(--bnb-space-2);
}

.bnb-ad-preview .bnb-ad-description {
	white-space: pre-wrap;
}

.bnb-status-timeline ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-status-timeline li {
	display: grid;
	gap: var(--bnb-space-3);
	grid-template-columns: 1rem 1fr;
	padding-block: var(--bnb-space-2);
	position: relative;
}

.bnb-status-timeline li > span {
	background: var(--bnb-gold);
	border: 3px solid var(--bnb-gold-pale);
	border-radius: var(--bnb-r-pill);
	block-size: 1rem;
	inline-size: 1rem;
	margin-block-start: .2rem;
	z-index: 1;
}

.bnb-status-timeline li:not(:last-child)::after {
	background: var(--bnb-line);
	block-size: calc(100% - .4rem);
	content: "";
	inline-size: 2px;
	inset-block-start: 1.1rem;
	inset-inline-start: calc(.5rem - 1px);
	position: absolute;
}

.bnb-status-timeline li > div {
	display: grid;
	gap: .2rem;
}

.bnb-transaction-timeline li:not(.is-complete) > span {
	background: var(--bnb-paper);
	border-color: var(--bnb-line);
}

.bnb-directory-route,
.bnb-ad-schema-fields fieldset,
.bnb-ad-structured-details {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-lg);
	padding: var(--bnb-space-4);
}

.bnb-directory-route {
	margin-block: var(--bnb-space-4);
}

.bnb-ad-schema-fields fieldset[hidden] {
	display: none;
}

.bnb-ad-schema-fields legend {
	font-size: 1.15rem;
	font-weight: 900;
	padding-inline: var(--bnb-space-2);
}

.bnb-ad-schema-grid {
	display: grid;
	gap: var(--bnb-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Each label travels with its own control. As loose grid items they fell into opposite columns — the label
   at the far right, its field at the far left. */
.bnb-ad-schema-field {
	align-content: start;
	display: grid;
	gap: var(--bnb-space-2);
}

.bnb-ad-structured-details {
	margin-block: var(--bnb-space-5);
}

.bnb-commission {
	border-radius: 1rem;
}

.bnb-ad-detail-card > .bnb-commission {
	margin-block: 2rem;
}

/* Two actions that wrap on a phone share the row equally instead of stacking at two widths. */
.bnb-form-actions .bnb-button {
	flex: 1 1 auto;
}

.bnb-checkbox-row {
	min-block-size: var(--bnb-tap);
}

.bnb-directory-route a {
	align-items: center;
	display: inline-flex;
	min-block-size: var(--bnb-tap);
}

.bnb-directory-card-head :is(p, h1) {
	margin-block: 0 0.35rem;
}

.bnb-ad-hero-image {
	margin: var(--bnb-space-4) 0;
}

.bnb-ad-hero-image img {
	block-size: auto;
	border-radius: var(--bnb-r-lg);
	display: block;
	inline-size: 100%;
	max-block-size: 36rem;
	object-fit: cover;
}

.bnb-ad-facts {
	display: grid;
	gap: var(--bnb-space-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bnb-ad-facts div,
.bnb-ad-preview .bnb-ad-facts {
	background: var(--bnb-paper);
	border-radius: var(--bnb-r);
	margin: 0;
	padding: var(--bnb-space-3);
}

.bnb-ad-facts dt {
	font-weight: 800;
}

.bnb-ad-facts dd {
	margin: 0;
}

.bnb-delete-ad-form {
	margin-block: var(--bnb-space-4);
}

@media (max-width: 600px) {
	.bnb-form-progress {
		grid-template-columns: 1fr;
	}

	.bnb-ad-schema-grid,
	.bnb-ad-facts {
		grid-template-columns: 1fr;
	}

	/* A form or ad card inside the page card, with a fieldset inside that, left inputs 206px wide on a phone. */
	.bnb-board-form,
	.bnb-ad-detail-card {
		border: 0;
		padding: 0;
	}
}

.bnb-my-ads {
	border-collapse: collapse;
	inline-size: 100%;
	margin-block: var(--bnb-space-4);
}

.bnb-my-ads th,
.bnb-my-ads td {
	border-block-end: 1px solid var(--bnb-line);
	padding: 0.7rem 0.6rem;
	text-align: start;
}

.bnb-my-ads th {
	color: var(--bnb-ink-soft);
	font-size: 0.85rem;
}

.bnb-my-ads td {
	font-variant-numeric: tabular-nums;
}

.bnb-my-ads a {
	font-weight: 700;
}

.bnb-my-ads-note {
	color: var(--bnb-muted);
	font-size: 0.88rem;
}

.bnb-tier-chip,
.bnb-boost-chip {
	background: var(--bnb-gold-pale);
	border-radius: var(--bnb-r-pill);
	color: var(--bnb-gold-ink);
	font-size: 0.78rem;
	font-weight: 700;
	margin-inline-start: 0.4rem;
	padding: 2px 10px;
	white-space: nowrap;
}

.bnb-ad-stats {
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	margin-block-start: var(--bnb-space-4);
	padding: var(--bnb-space-4);
}

.bnb-ad-stats h2 {
	font-size: 1.15rem;
	margin: 0 0 var(--bnb-space-3);
}

.bnb-ad-stats dl {
	display: grid;
	gap: var(--bnb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	margin: 0;
}

.bnb-ad-stats dl div {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	padding: 0.8rem;
}

.bnb-ad-stats dt {
	color: var(--bnb-ink-soft);
	font-size: 0.8rem;
}

.bnb-ad-stats dd {
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	margin: 0;
}

@media (max-width: 640px) {
	.bnb-my-ads thead {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		block-size: 1px;
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	.bnb-my-ads tr {
		background: var(--bnb-surface);
		border: 1px solid var(--bnb-line);
		border-radius: var(--bnb-r-sm);
		display: block;
		margin-block-end: 10px;
		padding: 0.6rem 0.8rem;
	}

	.bnb-my-ads td {
		border: 0;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		padding: 0.35rem 0;
	}

	.bnb-my-ads td::before {
		color: var(--bnb-ink-soft);
		content: attr(data-label);
		font-size: 0.85rem;
	}

	.bnb-my-ads td:first-child {
		font-weight: 700;
	}
}

.bnb-ad-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: var(--bnb-space-3);
}

.bnb-ad-reactions .is-on {
	background: var(--bnb-gold-pale);
	border-color: var(--bnb-gold-bright);
	color: var(--bnb-gold-ink);
}