/**
 * Forum Bnei Brak product UI — Design System V3.
 * Values come only from design-tokens.css. No external assets.
 */

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

html {
	scroll-behavior: smooth;
}

.bnb-portal-page {
	background: var(--bnb-paper);
	color: var(--bnb-ink);
	font-family: var(--bnb-font);
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}

.bnb-portal-page img,
.bnb-portal-page svg {
	max-inline-size: 100%;
}

.bnb-portal-page a {
	color: var(--bnb-heading-ink-soft);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

.bnb-portal-page h1,
.bnb-portal-page h2,
.bnb-portal-page h3 {
	color: var(--bnb-heading-ink);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.16;
	text-wrap: balance;
}

.bnb-portal-page :is(button, input, select, textarea) {
	font: inherit;
}

.bnb-portal-page button {
	min-block-size: var(--bnb-tap);
}

.bnb-portal-page :focus-visible {
	outline: 3px solid var(--bnb-gold);
	outline-offset: 3px;
}

.bnb-site-chrome {
	background: color-mix(in srgb, var(--bnb-surface) 96%, transparent);
	border-block-end: 1px solid var(--bnb-line);
	box-shadow: var(--bnb-shadow-sm);
	position: relative;
	z-index: 20;
}

.bnb-chrome-inner {
	align-items: center;
	display: flex;
	gap: var(--bnb-space-6);
	inline-size: var(--bnb-wrap);
	margin-inline: auto;
	min-block-size: 88px;
	padding-block: var(--bnb-space-3);
}

.bnb-logo-lockup {
	align-items: center;
	display: flex;
	flex: none;
	gap: var(--bnb-space-3);
	text-decoration: none;
	white-space: nowrap;
}

.bnb-logo-mark {
	background: linear-gradient(145deg, var(--bnb-navy-800), var(--bnb-navy-950));
	border: 1px solid color-mix(in srgb, var(--bnb-gold-bright) 75%, transparent);
	border-radius: var(--bnb-r);
	box-shadow: inset 0 0 0 3px rgb(255 255 255 / 6%), var(--bnb-shadow-sm);
	display: grid;
	height: 50px;
	place-items: center;
	width: 50px;
}

.bnb-logo-mark svg {
	block-size: 38px;
	fill: none;
	inline-size: 38px;
	stroke: var(--bnb-gold-bright);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.bnb-logo-lockup strong,
.bnb-logo-lockup small {
	display: block;
}

.bnb-logo-lockup strong {
	color: var(--bnb-heading-ink);
	font-size: 1.08rem;
}

.bnb-logo-lockup small {
	color: var(--bnb-gold);
	font-size: 0.72rem;
	font-weight: 700;
}

.bnb-navigation-panel {
	align-items: center;
	display: flex;
	flex: 1;
	gap: var(--bnb-space-5);
}

.bnb-primary-nav,
.bnb-account-links {
	align-items: center;
	display: flex;
	gap: var(--bnb-space-5);
}

.bnb-language-switcher {
	align-items: center;
	display: inline-flex;
	font-size: .75rem;
	gap: .25rem;
	white-space: nowrap;
}

.bnb-theme-toggle {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: 999px;
	color: var(--bnb-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: .75rem;
	font-weight: 700;
	gap: .35rem;
	min-block-size: var(--bnb-tap);
	padding: .25rem .65rem;
	white-space: nowrap;
}

.bnb-theme-toggle:hover {
	color: var(--bnb-gold);
}

.bnb-theme-toggle[aria-pressed="true"] {
	background: var(--bnb-gold-pale);
	border-color: var(--bnb-gold);
	color: var(--bnb-ink);
}

.bnb-theme-toggle-icon {
	font-size: .9rem;
	line-height: 1;
}

/* Without JavaScript the toggle cannot switch anything, so it is removed the
   same way the dead menu button is. */
html:not(.bnb-js) .bnb-theme-toggle {
	display: none;
}

.bnb-language-switcher a {
	border: 1px solid var(--bnb-color-border);
	border-radius: 999px;
	padding: .25rem .5rem;
	text-decoration: none;
}

/* ink-on-paper inverts cleanly in the dark palette; navy-on-surface did not
   (1.05:1 once both tokens went dark). */
.bnb-language-switcher a[aria-current="page"] {
	background: var(--bnb-ink);
	color: var(--bnb-paper);
}

.bnb-primary-nav {
	flex: 1;
}

.bnb-primary-nav a,
.bnb-account-links > a:not(.bnb-button) {
	font-size: 0.92rem;
	font-weight: 700;
	min-block-size: var(--bnb-tap);
	padding-block: 0.65rem;
	text-decoration: none;
}

.bnb-primary-nav a:hover,
.bnb-account-links > a:not(.bnb-button):hover {
	color: var(--bnb-gold);
}

.bnb-menu-toggle {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	color: var(--bnb-heading-ink);
	cursor: pointer;
	display: none;
	font-weight: 700;
	gap: var(--bnb-space-2);
	min-block-size: var(--bnb-tap);
	padding-inline: var(--bnb-space-3);
}

.bnb-menu-icon {
	display: grid;
	gap: 4px;
}

.bnb-menu-icon span {
	background: currentColor;
	block-size: 2px;
	display: block;
	inline-size: 20px;
}

.bnb-global-search {
	display: flex;
	filter: drop-shadow(0 8px 18px rgb(15 25 45 / 13%));
	inline-size: var(--bnb-wrap);
	margin-block-end: -27px;
	margin-inline: auto;
}

.bnb-global-search input {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-end-start-radius: var(--bnb-r);
	border-start-start-radius: var(--bnb-r);
	color: var(--bnb-ink);
	flex: 1;
	font-size: 1rem;
	min-block-size: 54px;
	min-inline-size: 0;
	padding-inline: var(--bnb-space-5);
}

.bnb-global-search button {
	background: var(--bnb-gold-bright);
	border: 0;
	border-end-end-radius: var(--bnb-r);
	border-start-end-radius: var(--bnb-r);
	color: var(--bnb-heading-ink-strong);
	cursor: pointer;
	font-weight: 700;
	inline-size: 104px;
}

.bnb-button {
	align-items: center;
	background: var(--bnb-navy-900);
	border: 1px solid var(--bnb-navy-900);
	border-radius: var(--bnb-r-sm);
	color: #fff !important;
	cursor: pointer;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	min-block-size: var(--bnb-tap);
	padding-block: 0.58rem;
	padding-inline: 1.2rem;
	text-decoration: none !important;
}

.bnb-button:hover {
	background: var(--bnb-navy-800);
	box-shadow: var(--bnb-shadow-sm);
}

.bnb-button-small {
	padding-inline: 0.9rem;
}

.bnb-button-large {
	font-size: 1.04rem;
	min-block-size: 54px;
	padding-inline: 1.75rem;
}

/*
 * core.css is enqueued after this sheet and paints `.bnb-button, button` navy at
 * equal specificity, so the later sheet won and the quiet button rendered as a
 * navy block with navy text — 1.62:1, which axe reports as a serious contrast
 * failure on every page that offers one. The colour already carries !important
 * for this same conflict; the surface has to as well.
 */
.bnb-button-quiet {
	background: transparent !important;
	color: var(--bnb-heading-ink-soft) !important;
}

.bnb-button-quiet:hover {
	background: var(--bnb-surface-2) !important;
}

.bnb-preview-bar,
.bnb-notice {
	align-items: center;
	background: var(--bnb-gold-pale);
	color: var(--bnb-gold-ink);
	display: flex;
	gap: var(--bnb-space-4);
	justify-content: center;
	padding-block: 2.1rem 0.65rem;
	padding-inline: var(--bnb-space-4);
}

/* The gate to the city: one deep navy band that carries the promise and the
   real numbers, so a first-time visitor sees what this place is before they
   scroll. Everything below it stays quiet paper. */
.bnb-hero {
	align-items: center;
	background: linear-gradient(160deg, var(--bnb-navy-900), var(--bnb-navy-950));
	color: #fff;
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: 1.05fr 0.95fr;
	margin-block-end: var(--bnb-space-6, 2.5rem);
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	padding-inline: max(1.25rem, calc(50vw - 41rem));
}

.bnb-hero h1,
.bnb-hero .bnb-hero-lead,
.bnb-hero dt,
.bnb-hero dd {
	color: #fff;
}

.bnb-hero .bnb-hero-lead {
	color: color-mix(in srgb, #fff 82%, transparent);
}

.bnb-hero .bnb-eyebrow {
	color: var(--bnb-gold-bright);
}

.bnb-hero .bnb-text-link {
	color: #fff;
}

.bnb-eyebrow {
	color: var(--bnb-gold);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-block: 0 0.65rem;
	text-transform: none;
}

.bnb-hero h1 {
	font-size: clamp(3rem, 6.2vw, 5.25rem);
	letter-spacing: -0.04em;
	line-height: 1.04;
	margin: 0;
	max-inline-size: 44rem;
}

.bnb-hero-lead {
	color: var(--bnb-ink-soft);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	max-inline-size: 43rem;
}

.bnb-hero-actions,
.bnb-dashboard-actions,
.bnb-profile-actions,
.bnb-forum-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-4);
}

.bnb-hero-actions {
	margin-block: 1.75rem;
}

.bnb-text-link,
.bnb-card-link {
	font-weight: 700;
}

.bnb-status-pill {
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-pill);
	color: var(--bnb-ink-soft);
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 700;
	margin-inline-end: var(--bnb-space-2);
	padding-block: 0.16rem;
	padding-inline: 0.55rem;
}

.bnb-status-pill--soon {
	background: var(--bnb-gold-pale);
	border-color: var(--bnb-gold);
	color: var(--bnb-gold-ink);
}

.bnb-real-stats,
.bnb-profile-stats {
	display: grid;
	gap: var(--bnb-space-3);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block: 2.25rem 0;
}

.bnb-real-stats div,
.bnb-profile-stats div {
	background: color-mix(in srgb, var(--bnb-surface) 78%, transparent);
	border: 1px solid var(--bnb-line);
	border-block-start: 3px solid var(--bnb-gold);
	border-radius: var(--bnb-r-sm);
	padding: 0.8rem 1rem;
}

.bnb-real-stats dt,
.bnb-profile-stats dt {
	color: var(--bnb-muted);
	font-size: 0.75rem;
}

.bnb-real-stats dd,
.bnb-profile-stats dd {
	font-size: 1.65rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
}

.bnb-hero-visual {
	position: relative;
}

.bnb-hero-visual::before {
	background: var(--bnb-gold-pale);
	border-radius: 50%;
	content: "";
	inset: 8% 4% 2%;
	position: absolute;
	z-index: -1;
}

.bnb-hero-visual img {
	/* Reserve the box before the file arrives. Without this the hero grew on load
	   and pushed the whole page down — a visible jump on a slow connection. */
	aspect-ratio: 1280 / 854;
	block-size: auto;
	display: block;
	filter: drop-shadow(0 22px 32px rgb(15 25 45 / 15%));
	inline-size: 100%;
	max-block-size: 560px;
	object-fit: contain;
}

.bnb-trust-charter,
.bnb-chesed-strip {
	inline-size: var(--bnb-wrap);
	margin-inline: auto;
}

.bnb-trust-charter {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-lg);
	box-shadow: var(--bnb-shadow);
	display: grid;
	gap: 2rem;
	grid-template-columns: 0.8fr 1.2fr;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.bnb-trust-charter h2 {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	margin: 0;
}

.bnb-trust-charter ul {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-trust-charter li {
	background: var(--bnb-surface-2);
	border-inline-start: 4px solid var(--bnb-gold);
	border-radius: var(--bnb-r-sm);
	display: grid;
	padding: 0.8rem 1rem;
}

.bnb-trust-charter li span,
.bnb-chesed-strip span {
	color: var(--bnb-muted);
}

.bnb-chesed-strip {
	align-items: center;
	background: var(--bnb-gold-pale);
	border: 1px solid color-mix(in srgb, var(--bnb-gold) 45%, transparent);
	border-radius: var(--bnb-r);
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 44px 1fr auto;
	margin-block-start: 1rem;
	padding: 0.9rem 1rem;
}

.bnb-chesed-strip div {
	display: grid;
}

.bnb-chesed-strip a {
	font-weight: 700;
}

.bnb-chesed-mark {
	align-items: center;
	background: var(--bnb-navy-900);
	border-radius: 50%;
	color: var(--bnb-gold-bright) !important;
	display: inline-flex;
	inline-size: 40px;
	justify-content: center;
	min-block-size: 40px;
}

.bnb-section {
	inline-size: var(--bnb-wrap);
	margin-inline: auto;
	padding-block: 4.5rem;
}

.bnb-section-heading {
	align-items: end;
	display: flex;
	gap: var(--bnb-space-5);
	justify-content: space-between;
	margin-block-end: 1.75rem;
}

.bnb-section-heading h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0;
}

.bnb-section-heading > a {
	font-weight: 700;
}

.bnb-domain-grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(3, 1fr);
}

.bnb-domain-card,
.bnb-directory-group,
.bnb-forum-grid article,
.bnb-search-results article,
.bnb-opening-post,
.bnb-reply,
.bnb-reply-composer,
.bnb-related,
.bnb-community-panel,
.bnb-preferences,
.bnb-board-workflow,
.bnb-board-ratings,
.bnb-appeal-list section,
.bnb-contact-form,
.bnb-join-form {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	box-shadow: var(--bnb-shadow-sm);
}

.bnb-domain-card {
	min-block-size: 300px;
	overflow: hidden;
	padding: 1.75rem;
	position: relative;
}

.bnb-domain-card:first-child {
	grid-column: span 2;
}

.bnb-domain-card::before {
	background: var(--bnb-gold);
	block-size: 5px;
	content: "";
	inset-block-start: 0;
	inset-inline: 0;
	position: absolute;
}

.bnb-domain-card[data-accent="1"]::before,
.bnb-domain-card[data-accent="5"]::before {
	background: #347a73;
}

.bnb-domain-card[data-accent="2"]::before,
.bnb-domain-card[data-accent="6"]::before {
	background: #8d493f;
}

.bnb-domain-card[data-accent="3"]::before {
	background: #5c598d;
}

.bnb-domain-number {
	color: color-mix(in srgb, var(--bnb-muted) 18%, transparent);
	font-size: 2.4rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	inset-block-start: 1.1rem;
	inset-inline-end: 1.5rem;
	position: absolute;
}

.bnb-domain-card h3 {
	font-size: 1.5rem;
	margin-block: 1rem 0.6rem;
}

.bnb-domain-card h3 a,
.bnb-topic-feed h3 a,
.bnb-directory-group h2 a,
.bnb-forum-grid h3 a,
.bnb-topic-list li > a,
.bnb-notification-list a {
	text-decoration: none;
}

.bnb-domain-card p,
.bnb-forum-grid p,
.bnb-helper,
.bnb-search-summary,
.bnb-forum-description {
	color: var(--bnb-muted);
}

.bnb-domain-card ul,
.bnb-directory-group ul {
	columns: 2;
	padding-inline-start: 1.1rem;
}

.bnb-domain-card li,
.bnb-directory-group li {
	margin-block: 0.35rem;
}

.bnb-latest {
	max-inline-size: 70rem;
}

.bnb-topic-feed,
.bnb-topic-list {
	border-block-start: 1px solid var(--bnb-line);
}

.bnb-topic-feed article,
.bnb-topic-list li {
	align-items: center;
	border-block-end: 1px solid var(--bnb-line);
	display: flex;
	gap: var(--bnb-space-5);
	justify-content: space-between;
	padding-block: 1.25rem;
}

.bnb-topic-feed h3 {
	font-size: 1.15rem;
	margin-block: 0.2rem;
}

.bnb-topic-forum {
	color: var(--bnb-gold) !important;
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
}

.bnb-topic-meta {
	color: var(--bnb-muted);
	display: flex;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	gap: var(--bnb-space-4);
	white-space: nowrap;
}

.bnb-community-callout {
	align-items: center;
	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: grid;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	grid-template-columns: 0.8fr 1fr;
	inline-size: min(100% - 2.5rem, 74rem);
	margin-block: 2.5rem 6rem;
	margin-inline: auto;
	padding: 2.25rem;
}

.bnb-community-callout img {
	block-size: 330px;
	inline-size: 100%;
	object-fit: contain;
}

.bnb-community-callout h2 {
	color: #fff;
	font-size: clamp(2rem, 4vw, 2.7rem);
	margin: 0;
}

.bnb-community-callout p:not(.bnb-eyebrow) {
	color: #dbe3ef;
	font-size: 1.08rem;
}

.bnb-community-callout .bnb-button-quiet {
	border-color: #fff;
	color: #fff !important;
}

.bnb-shell {
	inline-size: var(--bnb-reading);
	margin-inline: auto;
	padding-block: 5.25rem;
}

.bnb-wide-shell {
	inline-size: var(--bnb-wrap);
}

.bnb-reading-shell {
	inline-size: var(--bnb-reading);
}

.bnb-breadcrumbs {
	align-items: center;
	color: var(--bnb-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.84rem;
	gap: var(--bnb-space-2);
	margin-block-end: 1.8rem;
}

.bnb-page-intro {
	margin-block-end: 3rem;
	max-inline-size: 54rem;
}

.bnb-page-intro h1,
.bnb-heading-row h1 {
	font-size: clamp(2.5rem, 5vw, 3.8rem);
	margin-block: 0 0.75rem;
}

.bnb-page-intro > p,
.bnb-page-intro > div {
	color: var(--bnb-muted);
	font-size: 1.08rem;
}

.bnb-directory-list {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: 1fr 1fr;
}

.bnb-directory-group,
.bnb-forum-grid article {
	padding: 1.5rem;
}

.bnb-directory-group header {
	align-items: start;
	display: flex;
	gap: var(--bnb-space-4);
}

.bnb-directory-group header > span {
	color: var(--bnb-gold);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.bnb-directory-group h2,
.bnb-forum-grid h3 {
	font-size: 1.35rem;
	margin: 0;
}

.bnb-directory-group header p {
	color: var(--bnb-muted);
	font-size: 0.78rem;
	margin-block: 0.15rem;
}

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

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

.bnb-empty-state {
	background: var(--bnb-surface);
	border: 1px dashed color-mix(in srgb, var(--bnb-muted) 55%, transparent);
	border-radius: var(--bnb-r);
	padding: clamp(2rem, 7vw, 3.5rem);
	text-align: center;
}

.bnb-empty-state h2,
.bnb-empty-state h3 {
	margin-block-start: 0;
}

.bnb-search-large {
	margin-block-end: 1.25rem;
}

.bnb-search-large > label,
.bnb-portal-page label {
	font-weight: 700;
}

.bnb-search-large > div {
	display: flex;
	margin-block-start: 0.4rem;
}

.bnb-search-large input {
	border-end-start-radius: var(--bnb-r-sm);
	border-start-start-radius: var(--bnb-r-sm);
	flex: 1;
	min-block-size: 54px;
	min-inline-size: 0;
}

.bnb-search-large .bnb-button {
	border-end-start-radius: 0;
	border-start-start-radius: 0;
}

.bnb-search-results article {
	padding: 1.25rem;
}

.bnb-search-large > div,
.bnb-compose-actions,
.bnb-compose-progress,
.bnb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-3);
	align-items: center;
}

.bnb-search-large input {
	flex: 1 1 18rem;
}

.bnb-search-results mark {
	background: var(--bnb-gold-pale);
	color: inherit;
	padding-inline: .1em;
}

.bnb-pagination {
	justify-content: center;
	margin-block: var(--bnb-space-6);
}

.bnb-pagination a {
	align-items: center;
	border: 1px solid var(--bnb-line);
	border-radius: 50%;
	display: inline-flex;
	font-weight: 800;
	justify-content: center;
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	text-decoration: none;
}

.bnb-pagination a[aria-current="page"] {
	background: var(--bnb-navy-900);
	color: var(--bnb-paper);
}

.bnb-compose-progress {
	list-style: none;
	margin: 0 0 var(--bnb-space-6);
	padding: 0;
}

.bnb-compose-progress li {
	background: var(--bnb-surface-2);
	border-radius: 999px;
	font-weight: 800;
	padding: .55rem 1rem;
}

.bnb-compose-progress li[aria-current="step"] {
	background: var(--bnb-navy-900);
	color: var(--bnb-paper);
}

.bnb-topic-preview {
	background: var(--bnb-paper);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	margin-block-start: var(--bnb-space-5);
	padding: var(--bnb-space-5);
}

.bnb-topic-preview [data-bnb-preview-body] {
	white-space: pre-wrap;
}

.bnb-legal-content section {
	border-block-start: 1px solid var(--bnb-line);
	padding-block: 1.6rem;
}

.bnb-legal-content h2 {
	font-size: 1.5rem;
	margin-block: 0 0.5rem;
}

.bnb-legal-content p {
	color: var(--bnb-ink-soft);
	font-size: 1.08rem;
}

.bnb-legal-toc {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	box-shadow: var(--bnb-shadow-sm);
	margin-block: var(--bnb-space-6);
	padding: var(--bnb-space-5);
}

.bnb-legal-toc h2 {
	font-size: 1.2rem;
	margin-block: 0 var(--bnb-space-3);
}

.bnb-legal-toc ol {
	columns: 2;
	margin: 0;
	padding-inline-start: 1.5rem;
}

.bnb-legal-toc li {
	break-inside: avoid;
	margin-block: var(--bnb-space-2);
}

.bnb-legal-content section {
	scroll-margin-block-start: var(--bnb-space-6);
}

.bnb-legal-back {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 700;
	margin-block-start: var(--bnb-space-2);
}

@media (max-width: 42.5rem) {
	.bnb-legal-toc ol {
		columns: 1;
	}
}

@media print {
	.bnb-site-chrome,
	.bnb-site-footer,
	.bnb-legal-toc,
	.bnb-legal-back,
	.bnb-skip-link {
		display: none !important;
	}

	.bnb-reading-shell {
		inline-size: 100%;
		max-inline-size: none;
		padding: 0;
	}
}

.bnb-heading-row,
.bnb-topic-heading,
.bnb-conversation-heading {
	align-items: start;
	display: flex;
	gap: var(--bnb-space-5);
	justify-content: space-between;
}

.bnb-topic-list {
	list-style: none;
	padding: 0;
}

.bnb-topic-list li > a {
	font-size: 1.08rem;
	font-weight: 700;
}

.bnb-topic-list small {
	color: var(--bnb-muted);
}

.bnb-topic-row-main {
	display: grid;
	flex: 1;
	gap: var(--bnb-space-1);
}

.bnb-topic-row-main > a {
	font-size: 1.08rem;
	font-weight: 700;
}

.bnb-topic-statuses,
.bnb-topic-management {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
}

.bnb-topic-statuses span {
	background: var(--bnb-gold-pale);
	border-radius: var(--bnb-r-pill);
	color: var(--bnb-gold-ink);
	font-size: .72rem;
	font-weight: 800;
	padding: .15rem .55rem;
}

.bnb-topic-row-meta {
	color: var(--bnb-muted);
	display: grid;
	font-size: .78rem;
	gap: var(--bnb-space-1);
	text-align: end;
}

.bnb-topic-management {
	margin-block: var(--bnb-space-3);
}

.bnb-topic-management form {
	margin: 0;
}

.bnb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
	margin-block-start: 2rem;
}

.bnb-pagination a {
	align-items: center;
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	display: inline-flex;
	justify-content: center;
	min-block-size: var(--bnb-tap);
	min-inline-size: var(--bnb-tap);
	text-decoration: none;
}

.bnb-pagination a[aria-current="page"] {
	background: var(--bnb-navy-900);
	color: #fff;
}

.bnb-opening-post,
.bnb-reply,
.bnb-reply-composer,
.bnb-related {
	margin-block: 1.25rem;
	padding: 1.6rem;
}

.bnb-opening-post > h1 {
	font-size: clamp(2.2rem, 5vw, 3.45rem);
}

.bnb-opening-post > header,
.bnb-reply > header {
	align-items: center;
	color: var(--bnb-muted);
	display: flex;
	gap: var(--bnb-space-3);
}

.bnb-opening-post > header time,
.bnb-reply > header time {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	margin-inline-start: auto;
}

.bnb-avatar,
.bnb-profile-avatar {
	align-items: center;
	background: var(--bnb-navy-900);
	border: 2px solid var(--bnb-gold-pale);
	color: #fff;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
}

.bnb-avatar {
	block-size: 42px;
	border-radius: 50%;
	inline-size: 42px;
}

.bnb-post-body {
	font-size: 1.08rem;
	margin-block: 1.4rem;
	overflow-wrap: anywhere;
}

.bnb-reply-list .bnb-reply-list {
	margin-inline-start: 1.75rem;
}

.bnb-interactions,
.bnb-reply-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
	margin-block: 1.1rem;
}

.bnb-interactions form,
.bnb-reply-actions form {
	margin: 0;
}

.bnb-interactions button,
.bnb-interactions span {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-pill);
	color: var(--bnb-heading-ink-soft);
	display: inline-flex;
	gap: var(--bnb-space-2);
	min-block-size: var(--bnb-tap);
	padding-inline: var(--bnb-space-4);
}

.bnb-interactions button {
	cursor: pointer;
}

.bnb-interactions .is-selected {
	background: var(--bnb-gold-pale);
	border-color: var(--bnb-gold);
}

.bnb-report {
	font-size: 0.82rem;
	margin-block-start: 0.75rem;
}

.bnb-report summary,
.bnb-nested-composer summary,
.bnb-preferences summary {
	color: var(--bnb-muted);
	cursor: pointer;
	font-weight: 700;
	min-block-size: var(--bnb-tap);
	padding-block: 0.5rem;
}

.bnb-report form,
.bnb-nested-composer form,
.bnb-reply-composer form,
.bnb-compose form,
.bnb-contact-form,
.bnb-join-form,
.bnb-appeal-list form,
.bnb-board-workflow form,
.bnb-board-ratings form,
.bnb-rating-form,
.bnb-preferences form,
.bnb-community-panel form,
.bnb-message-compose {
	display: grid;
	gap: 0.7rem;
	margin-block-start: 0.75rem;
}

.bnb-report label,
.bnb-nested-composer label,
.bnb-contact-form label,
.bnb-join-form label {
	display: grid;
	gap: 0.35rem;
}

.bnb-portal-page :is(textarea, select, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="file"]) {
	background: var(--bnb-surface-2);
	border: 1px solid color-mix(in srgb, var(--bnb-muted) 60%, transparent);
	border-radius: var(--bnb-r-sm);
	color: var(--bnb-ink);
	min-block-size: var(--bnb-tap);
	padding: 0.7rem;
	width: 100%;
}

.bnb-portal-page :is(input, textarea)::placeholder {
	color: var(--bnb-muted);
	opacity: 1;
}

.bnb-portal-page :is(textarea, select, input):focus {
	background: var(--bnb-surface);
	border-color: var(--bnb-gold);
}

.bnb-contact-form textarea {
	min-block-size: 150px;
}

.bnb-shabbat-form-message {
	background: var(--bnb-gold-pale);
	border-inline-start: 4px solid var(--bnb-gold);
	color: var(--bnb-gold-ink);
	padding: 0.7rem;
}

.bnb-shabbat-closed button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.bnb-accepted-answer {
	background: var(--bnb-verified-soft);
	border-inline-start: 4px solid var(--bnb-verified);
	color: var(--bnb-verified);
	padding: 0.7rem;
}

.bnb-auth-prompt {
	background: var(--bnb-info-soft);
	border-radius: var(--bnb-r-sm);
	font-weight: 700;
	padding: 1rem;
	text-align: center;
}

/* Member space and profile. */
.bnb-dashboard-actions {
	margin-block-end: 2.2rem;
}

.bnb-dashboard-actions > a:not(.bnb-button) {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	font-weight: 700;
	padding: 0.65rem 0.95rem;
	text-decoration: none;
}

.bnb-community-columns {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr 1fr;
}

.bnb-community-panel {
	padding: 1.75rem;
}

.bnb-community-panel dl {
	display: grid;
	gap: var(--bnb-space-2);
	grid-template-columns: repeat(3, 1fr);
}

.bnb-community-panel dl div {
	background: var(--bnb-surface-2);
	border-radius: var(--bnb-r-sm);
	padding: 0.75rem;
}

.bnb-community-panel dt {
	font-size: 0.7rem;
}

.bnb-community-panel dd {
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
}

.bnb-profile-hero {
	align-items: center;
	background: linear-gradient(145deg, var(--bnb-surface), var(--bnb-surface-2));
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-lg);
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 130px 1fr auto;
	padding: 2.1rem;
}

.bnb-profile-avatar {
	block-size: 120px;
	border-radius: var(--bnb-r-lg);
	font-size: 3.25rem;
	inline-size: 120px;
}

.bnb-profile-hero h1 {
	font-size: 3rem;
	margin: 0;
}

.bnb-profile-bio {
	max-inline-size: 41rem;
}

.bnb-profile-stats {
	grid-template-columns: repeat(4, 1fr);
	margin-block: 1.25rem;
}

.bnb-profile-detail {
	display: inline-block;
	margin-inline-end: 1.25rem;
}

/* Recognition and the evidence-backed badge art system. */
.bnb-invite-card {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-3);
	justify-content: space-between;
	margin-block-start: var(--bnb-space-4);
	padding: var(--bnb-space-4);
}

.bnb-invite-card h2 {
	font-size: 1.25rem;
	margin: 0;
}

.bnb-invite-card p {
	color: var(--bnb-ink-soft);
	margin: 0.35rem 0 0;
}

.bnb-invite-link {
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	color: var(--bnb-ink);
	direction: ltr;
	flex: 1 1 20rem;
	font-family: var(--bnb-font-mono, monospace);
	font-size: 0.95rem;
	max-inline-size: 100%;
	padding: 0.7rem 0.85rem;
	text-align: left;
}

.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-preferences {
	margin-block: 1rem 3.75rem;
	padding: 1rem;
}

.bnb-preferences form {
	max-inline-size: 31rem;
}

.bnb-boards-note {
	color: var(--bnb-muted);
	margin-block-end: 1rem;
}

.bnb-leaderboards-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.bnb-leaderboard-card {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-md, 12px);
	padding: 1rem;
}

.bnb-leaderboard-card h3 {
	margin-block: 0 .25rem;
}

.bnb-board-period {
	color: var(--bnb-muted);
	font-size: .8rem;
	margin-block: 0 .5rem;
}

.bnb-board-empty {
	color: var(--bnb-muted);
	font-size: .9rem;
}

.bnb-field-hint {
	color: var(--bnb-muted);
	display: block;
	margin-block: .35rem .5rem;
}

.bnb-house-notice {
	background: var(--bnb-gold-pale);
	border: 1px solid var(--bnb-gold);
	border-radius: var(--bnb-r-sm, 8px);
	color: var(--bnb-ink);
	margin-block: 0 1rem;
	padding: .75rem 1rem;
}

.bnb-leaderboard {
	list-style: none;
	padding: 0;
}

.bnb-leaderboard li {
	align-items: center;
	border-block-end: 1px solid var(--bnb-line);
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 40px 48px 1fr auto;
	padding: 0.85rem;
}

.bnb-leaderboard small {
	color: var(--bnb-muted);
	display: block;
}

.bnb-leader-position {
	color: var(--bnb-gold);
	font-size: 1.2rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.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-badge.is-locked,
.bnb-mini-badges .is-locked {
	color: var(--bnb-muted);
	filter: none;
	opacity: 1;
}

.bnb-badge.is-locked .bnb-badge-art,
.bnb-mini-badges .is-locked .bnb-badge-art {
	filter: grayscale(1);
	opacity: 0.55;
}

.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;
}

/* Messages, notifications, boards and forms. */
.bnb-messages-layout {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: 300px 1fr;
}

.bnb-messages-layout aside,
.bnb-conversation {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	padding: 1.4rem;
}

.bnb-messages-layout aside ul,
.bnb-notification-list {
	list-style: none;
	padding: 0;
}

.bnb-messages-layout aside li {
	border-block-end: 1px solid var(--bnb-line);
}

.bnb-messages-layout aside li a {
	display: block;
	padding-block: 0.75rem;
	text-decoration: none;
}

.bnb-messages-layout aside small,
.bnb-notification-list time {
	color: var(--bnb-muted);
	display: block;
	font-size: 0.75rem;
}

.bnb-message-stream article {
	background: var(--bnb-surface-2);
	border-radius: var(--bnb-r);
	margin-block: 0.75rem;
	max-inline-size: 80%;
	padding: 0.9rem;
}

.bnb-message-stream article.is-mine {
	background: var(--bnb-gold-pale);
	margin-inline-start: auto;
}

.bnb-message-stream header {
	display: flex;
	font-size: 0.75rem;
	gap: var(--bnb-space-4);
	justify-content: space-between;
}

.bnb-conversation-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
}

.bnb-conversation-actions form {
	margin: 0;
}

.bnb-conversation-actions button {
	background: transparent;
	border: 1px solid var(--bnb-line);
	color: var(--bnb-ink);
}

.bnb-notification-list li {
	border-block-end: 1px solid var(--bnb-line);
	display: flex;
	gap: 0.85rem;
	padding: 1.1rem;
}

.bnb-notification-list li.is-unread {
	background: var(--bnb-surface);
	border-inline-start: 4px solid var(--bnb-gold);
}

.bnb-board-workflow,
.bnb-board-ratings,
.bnb-appeal-list section,
.bnb-contact-form,
.bnb-join-form {
	margin-block: 1.4rem;
	padding: 1.4rem;
}

.bnb-board-ratings article {
	border-block-start: 1px solid var(--bnb-line);
	padding-block: 1rem;
}

.bnb-board-ratings article:first-of-type {
	border-block-start: 0;
}

.bnb-join-form fieldset {
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 1rem;
}

.bnb-form-note {
	color: var(--bnb-muted);
}

.bnb-site-footer {
	background: var(--bnb-navy-950);
	color: #fff;
	padding-block: 3.5rem 1.5rem;
	padding-inline: 1.25rem;
}

.bnb-footer-grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr 1fr;
	inline-size: min(100%, 72.5rem);
	margin-inline: auto;
}

.bnb-footer-grid h2 {
	color: #fff;
	margin-block-start: 0;
}

.bnb-footer-grid p {
	color: #c3cbdd;
	max-inline-size: 31rem;
}

.bnb-footer-grid nav {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: 1fr 1fr;
}

.bnb-footer-grid a {
	color: #fff;
}

.bnb-shabbat-strip {
	align-items: center;
	background: rgb(255 255 255 / 5%);
	border: 1px solid rgb(217 171 82 / 35%);
	border-radius: var(--bnb-r);
	display: flex;
	gap: 0.8rem;
	inline-size: min(100%, 72.5rem);
	margin-block: 2.3rem 0;
	margin-inline: auto;
	padding: 0.85rem 1rem;
}

.bnb-shabbat-symbol {
	align-items: center;
	background: var(--bnb-gold-bright);
	border-radius: 50%;
	color: var(--bnb-heading-ink-strong);
	display: inline-flex;
	font-size: 1.1rem;
	inline-size: 36px;
	justify-content: center;
	min-block-size: 36px;
}

.bnb-shabbat-strip strong,
.bnb-shabbat-strip small {
	display: block;
}

.bnb-page .bnb-shabbat-strip small {
	color: #c3cbdd;
}

.bnb-footer-fineprint {
	border-block-start: 1px solid rgb(255 255 255 / 15%);
	color: #9aa6bf;
	font-size: 0.75rem;
	inline-size: min(100%, 72.5rem);
	margin-block: 1.75rem 0;
	margin-inline: auto;
	padding-block-start: 1.25rem;
}

.bnb-skip-link {
	background: var(--bnb-surface);
	color: var(--bnb-ink);
	inset-block-start: 4px;
	inset-inline-start: -9999px;
	padding: 0.65rem;
	position: absolute;
	z-index: 9999;
}

.bnb-skip-link:focus {
	inset-inline-start: 4px;
}

.bnb-visually-hidden {
	block-size: 1px !important;
	clip-path: inset(50%) !important;
	inline-size: 1px !important;
	overflow: hidden !important;
	position: absolute !important;
	white-space: nowrap !important;
}

@media (max-width: 61.25rem) {
	.bnb-chrome-inner {
		justify-content: space-between;
	}

	.bnb-menu-toggle {
		display: inline-flex;
	}

	.bnb-navigation-panel {
		background: var(--bnb-surface);
		border-block-start: 1px solid var(--bnb-line);
		box-shadow: var(--bnb-shadow);
		display: none;
		inset-block-start: 100%;
		inset-inline: 0;
		max-block-size: calc(100dvh - 8.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 1rem 1.25rem 1.25rem;
		position: absolute;
	}

	.bnb-navigation-panel.is-open {
		display: block;
	}

	/* Without JavaScript the toggle cannot open anything, so the panel stays open
	   inline and the dead control is removed. `.bnb-js` is set by the components
	   script, so this only applies when that script has not run. */
	html:not(.bnb-js) .bnb-menu-toggle {
		display: none;
	}

	html:not(.bnb-js) .bnb-navigation-panel {
		box-shadow: none;
		display: block;
		max-block-size: none;
		position: static;
	}

	.bnb-primary-nav,
	.bnb-account-links {
		align-items: stretch;
		display: grid;
		gap: 0;
	}

	.bnb-primary-nav a,
	.bnb-account-links > a {
		border-block-end: 1px solid var(--bnb-line);
		padding-block: 0.75rem;
	}

	.bnb-account-links {
		gap: var(--bnb-space-2);
		grid-template-columns: 1fr 1fr;
		margin-block-start: 0.8rem;
	}

	.bnb-primary-nav {
		grid-template-columns: 1fr 1fr;
	}

	.bnb-hero {
		grid-template-columns: 1fr;
		padding-block-start: 5.75rem;
	}

	.bnb-hero-visual {
		grid-row: 1;
		/* `margin-inline: auto` turns off the grid item's default stretch, so the
		   box was sized by its content — an image whose own width is a percentage
		   of this box. That circularity left it 0 wide until the file arrived,
		   and the page jumped down by the hero's height on load. */
		inline-size: 100%;
		margin-inline: auto;
		max-inline-size: 38rem;
	}

	.bnb-domain-grid {
		grid-template-columns: 1fr 1fr;
	}

	.bnb-domain-card:first-child {
		grid-column: span 2;
	}

	.bnb-forum-grid,
	.bnb-badge-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 42.5rem) {
	.bnb-chrome-inner {
		gap: var(--bnb-space-3);
	}

	.bnb-logo-lockup {
		gap: var(--bnb-space-2);
	}

	.bnb-logo-lockup strong {
		font-size: 0.98rem;
	}

	.bnb-logo-lockup small {
		display: none;
	}

	.bnb-menu-toggle {
		padding-inline: var(--bnb-space-2);
	}

	.bnb-logo-mark {
		block-size: 44px;
		inline-size: 44px;
	}

	.bnb-global-search {
		inline-size: calc(100% - 2rem);
	}

	.bnb-global-search button {
		inline-size: 78px;
	}

	.bnb-primary-nav,
	.bnb-account-links {
		grid-template-columns: 1fr;
	}

	.bnb-hero {
		gap: 1.5rem;
		inline-size: calc(100% - 2.25rem);
		min-block-size: 0;
		padding-block: 5.6rem 2.75rem;
	}

	.bnb-hero h1 {
		font-size: clamp(2.7rem, 13vw, 3.5rem);
	}

	.bnb-hero-actions,
	.bnb-heading-row,
	.bnb-topic-heading,
	.bnb-conversation-heading,
	.bnb-section-heading {
		align-items: stretch;
		flex-direction: column;
	}

	.bnb-hero-actions .bnb-button {
		inline-size: 100%;
	}

	.bnb-real-stats,
	.bnb-profile-stats {
		gap: 0.4rem;
		grid-template-columns: 1fr 1fr;
	}

	.bnb-real-stats div:last-child {
		grid-column: span 2;
	}

	.bnb-section {
		inline-size: calc(100% - 2.25rem);
		padding-block: 3rem;
	}

	.bnb-trust-charter {
		grid-template-columns: 1fr;
		inline-size: calc(100% - 2.25rem);
	}

	.bnb-chesed-strip {
		grid-template-columns: 40px 1fr;
		inline-size: calc(100% - 2.25rem);
	}

	.bnb-chesed-strip a {
		grid-column: 2;
	}

	.bnb-domain-grid,
	.bnb-directory-list,
	.bnb-forum-grid,
	.bnb-search-results,
	.bnb-badge-grid,
	.bnb-community-columns,
	.bnb-messages-layout {
		grid-template-columns: 1fr;
	}

	.bnb-domain-card:first-child {
		grid-column: auto;
	}

	.bnb-domain-card {
		min-block-size: 0;
	}

	.bnb-domain-card ul,
	.bnb-directory-group ul {
		columns: 1;
	}

	.bnb-topic-feed article,
	.bnb-topic-list li {
		align-items: start;
		flex-direction: column;
	}

	.bnb-topic-meta {
		justify-content: space-between;
		white-space: normal;
		width: 100%;
	}

	.bnb-community-callout {
		grid-template-columns: 1fr;
		inline-size: calc(100% - 2rem);
		margin-block-end: 4.5rem;
		padding: 1.5rem;
	}

	.bnb-community-callout img {
		block-size: 240px;
	}

	.bnb-shell,
	.bnb-wide-shell,
	.bnb-reading-shell {
		inline-size: calc(100% - 2.25rem);
		padding-block: 4.8rem;
	}

	.bnb-opening-post,
	.bnb-reply,
	.bnb-reply-composer,
	.bnb-related {
		padding: 1.1rem;
	}

	.bnb-opening-post > header,
	.bnb-reply > header {
		align-items: start;
		flex-wrap: wrap;
	}

	.bnb-opening-post > header time,
	.bnb-reply > header time {
		flex-basis: 100%;
		margin-inline-start: 0;
	}

	.bnb-reply-list .bnb-reply-list {
		margin-inline-start: 0.75rem;
	}

	.bnb-profile-hero {
		grid-template-columns: 82px 1fr;
		padding: 1.3rem;
	}

	.bnb-profile-avatar {
		block-size: 76px;
		font-size: 2.25rem;
		inline-size: 76px;
	}

	.bnb-profile-actions {
		grid-column: 1 / -1;
	}

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

	.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;
	}

	.bnb-message-stream article {
		max-inline-size: 95%;
	}

	.bnb-footer-grid {
		grid-template-columns: 1fr;
	}

	.bnb-footer-grid nav {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.bnb-button,
	.bnb-logo-mark,
	.bnb-domain-card,
	.bnb-directory-group,
	.bnb-forum-grid article,
	.bnb-badge,
	.bnb-empty-state,
	.bnb-opening-post,
	.bnb-reply,
	.bnb-community-panel {
		border: 1px solid CanvasText;
	}
}

/*
 * Direction A — owner decision 2026-09-01.
 * The page has to read as alive from the first screen, so what the community is
 * doing right now sits directly under the hero, and the neighbourhood row and
 * the week's contributors follow. Each block renders only when it has real
 * content: the cost of this direction is that it looks hollow on an empty site,
 * and an empty block is worse than an absent one.
 */
.bnb-live-strip {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px 12px;
}

.bnb-live-list {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-live-list a {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	background: var(--bnb-surface);
	text-decoration: none;
}

.bnb-live-list a:hover,
.bnb-live-list a:focus-visible {
	border-color: var(--bnb-gold);
}

.bnb-live-forum {
	color: var(--bnb-gold);
	font-size: 0.78rem;
	font-weight: 800;
}

.bnb-fresh-list {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-fresh-list li {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 16px;
}

.bnb-fresh-list li.is-highlighted {
	border-color: var(--bnb-gold-bright);
}

.bnb-fresh-tag {
	background: var(--bnb-surface-2);
	border-radius: var(--bnb-r-pill);
	color: var(--bnb-ink-soft);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 3px 11px;
}

.bnb-fresh-list a {
	flex: 1 1 12rem;
	font-weight: 700;
	text-decoration: none;
}

.bnb-fresh-list time {
	color: var(--bnb-muted);
	font-size: 0.82rem;
}

.bnb-business-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.bnb-business-grid article {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	padding: var(--bnb-space-4);
}

.bnb-business-grid h3 {
	font-size: 1.05rem;
	margin: 0;
}

.bnb-business-grid h3 a {
	text-decoration: none;
}

.bnb-business-grid p {
	color: var(--bnb-ink-soft);
	margin: 0.4rem 0 0;
}

.bnb-business-hood {
	font-size: 0.85rem;
	font-weight: 600;
}

.bnb-verified-chip {
	background: var(--bnb-verified-soft);
	border-radius: var(--bnb-r-pill);
	color: var(--bnb-verified);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	margin-block-start: 0.35rem;
	padding: 2px 10px;
}

.bnb-hood-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-hood-grid a {
	align-items: center;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	display: flex;
	font-weight: 700;
	gap: 10px;
	justify-content: space-between;
	padding: 13px 16px;
	text-decoration: none;
}

.bnb-hood-grid small {
	background: var(--bnb-surface-2);
	border-radius: 999px;
	color: var(--bnb-ink-soft);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	padding: 2px 9px;
}

.bnb-hood-grid a:hover,
.bnb-hood-grid a:focus-visible {
	border-color: var(--bnb-gold);
}

.bnb-standing-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1.4fr 1fr;
	align-items: start;
}

.bnb-leader-list {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-leader-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	background: var(--bnb-surface);
}

.bnb-leader-place {
	display: grid;
	place-items: center;
	min-width: 28px;
	min-height: 28px;
	border-radius: 50%;
	background: var(--bnb-surface-2);
	font-weight: 800;
}

.bnb-viewer-standing {
	padding: 20px;
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	background: var(--bnb-surface-2);
}

.bnb-viewer-standing strong {
	display: block;
	margin: 4px 0 8px;
	font-size: 1.5rem;
}

@media (max-width: 780px) {
	.bnb-standing-grid {
		grid-template-columns: 1fr;
	}
}

/* Signing in is the first screen a returning member meets, so it gets the same
   care as the join form rather than a bare stack of inputs. */
.bnb-auth-panel {
	margin-inline: auto;
	max-inline-size: 30rem;
}

.bnb-auth-panel h1 {
	margin-block-end: 0.35rem;
}

.bnb-auth-panel > p {
	color: var(--bnb-ink-soft);
}

.bnb-auth-form {
	display: grid;
	gap: var(--bnb-space-3);
	margin-block-start: var(--bnb-space-4);
}

.bnb-auth-form label {
	display: grid;
	font-weight: 600;
	gap: 0.35rem;
}

.bnb-auth-form .bnb-checkbox {
	align-items: center;
	display: flex;
	font-weight: 500;
	gap: 0.55rem;
}

.bnb-auth-form .bnb-checkbox input {
	inline-size: auto;
	min-block-size: 0;
}

.bnb-auth-form button {
	justify-self: start;
	margin-block-start: 0.35rem;
}

.bnb-auth-aside {
	color: var(--bnb-ink-soft);
	font-size: 0.92rem;
	margin-block: 0.5rem 0;
}

/* A message about what went wrong belongs beside the field, coloured so it is
   unmistakable, and never on a page of its own. */
.bnb-form-error {
	background: var(--bnb-danger-soft);
	border: 1px solid color-mix(in srgb, var(--bnb-danger) 35%, transparent);
	border-radius: var(--bnb-r-sm);
	color: var(--bnb-danger);
	font-weight: 600;
	margin-block: var(--bnb-space-3) 0;
	padding: 0.75rem 1rem;
}

/* Inside the navy band the stat cards need their own contrast; the paper
   treatment above is for the profile page, where the ground is light. */
.bnb-hero .bnb-real-stats div {
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 14%);
	border-block-start: 3px solid var(--bnb-gold-bright);
}

.bnb-hero .bnb-real-stats dt {
	color: color-mix(in srgb, #fff 72%, transparent);
}

/* The neighbourhoods read as a row of places, not a wall of cards — the city
   is the point, and fourteen equal boxes bury it. */
.bnb-hood-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.bnb-hood-grid li {
	display: block;
}

.bnb-hood-grid a {
	border-radius: var(--bnb-r-pill);
	display: inline-flex;
	padding: 9px 18px;
}

/* On a phone every standalone link has to be reachable with a thumb. The design
   spec asks for 44px, and these controls were rendering at the height of their
   text alone — fine with a mouse, a miss with a finger. Desktop is untouched:
   the rule only applies where the pointer is coarse. */
@media (pointer: coarse) {
	.bnb-portal-page :is(.bnb-card-link, .bnb-more-link, .bnb-text-link, .bnb-topic-forum, .bnb-legal-back),
	.bnb-site-footer a,
	.bnb-breadcrumbs a,
	.bnb-legal-toc a,
	.bnb-shell-nav a,
	.bnb-domain-card ul a,
	.bnb-fresh-list a,
	.bnb-hood-grid a {
		align-items: center;
		display: inline-flex;
		min-block-size: 44px;
	}

	/* A row of links needs breathing room too, or two targets share an edge. */
	.bnb-site-footer li + li,
	.bnb-legal-toc li + li,
	.bnb-domain-card ul li + li {
		margin-block-start: 0.25rem;
	}
}

/* The management notice the owner has run on the site for years: the content is
   the writers' own, and using the forum is subject to the terms. It belongs on
   every page, quietly, above the copyright line. */
.bnb-admin-notice {
	border-block-start: 1px solid rgb(255 255 255 / 12%);
	color: color-mix(in srgb, #fff 68%, transparent);
	font-size: 0.86rem;
	line-height: 1.6;
	margin-block-start: var(--bnb-space-4);
	padding-block-start: var(--bnb-space-4);
}

.bnb-admin-notice p {
	margin: 0 0 0.35rem;
}

.bnb-admin-notice a {
	color: var(--bnb-gold-bright);
}

/* ------------------------------------------------------------------------
   Home page, the owner's layout (02.09.2026): a main column beside a side
   column — leading members, the member's own level, and the business call —
   category cards that carry an icon and a conversation count, and the owner's
   own "why the forum exists" text in place of a charter we had written.
   ------------------------------------------------------------------------ */
.bnb-home-layout {
	align-items: start;
	display: grid;
	gap: var(--bnb-space-6);
	grid-template-columns: minmax(0, 1fr);
	inline-size: var(--bnb-wrap);
	margin-inline: auto;
}

@media (min-width: 62rem) {
	.bnb-home-layout {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}
}

.bnb-home-layout .bnb-section,
.bnb-home-layout .bnb-live-strip {
	inline-size: 100%;
	margin: 0;
	max-width: none;
	padding: 0 0 2.75rem;
}

.bnb-home-layout .bnb-live-strip {
	padding-block-start: 0.5rem;
}

.bnb-home-layout .bnb-section-heading {
	margin-block-end: 1.1rem;
}

.bnb-home-layout .bnb-section-heading h2 {
	font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.bnb-home-layout .bnb-domain-grid {
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 40rem) {
	.bnb-home-layout .bnb-domain-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bnb-home-layout .bnb-domain-card {
	min-block-size: 0;
	padding: 1.2rem 1.25rem 1rem;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.bnb-home-layout .bnb-domain-card:first-child {
	grid-column: auto;
}

.bnb-home-layout .bnb-domain-card::before {
	display: none;
}

.bnb-home-layout .bnb-domain-card:hover,
.bnb-home-layout .bnb-domain-card:focus-within {
	box-shadow: var(--bnb-shadow-lg);
	transform: translateY(-3px);
}

.bnb-domain-card--chesed {
	border-color: var(--bnb-gold-bright);
}

.bnb-domain-head {
	align-items: flex-start;
	display: flex;
	gap: 0.8rem;
	margin-block-end: 0.6rem;
}

.bnb-domain-icon {
	background: var(--bnb-surface-2);
	block-size: 44px;
	border-radius: 12px;
	color: var(--bnb-ink);
	display: grid;
	flex: none;
	inline-size: 44px;
	place-items: center;
}

.bnb-domain-card--chesed .bnb-domain-icon {
	background: var(--bnb-gold-pale);
	color: var(--bnb-gold-ink);
}

.bnb-home-layout .bnb-domain-card h3 {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0;
}

.bnb-domain-card h3 small {
	color: var(--bnb-muted);
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.45;
	margin-block-start: 0.2rem;
}

.bnb-domain-card .bnb-domain-forums {
	columns: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-domain-card .bnb-domain-forums li {
	align-items: center;
	border-block-start: 1px dashed var(--bnb-line);
	display: flex;
	gap: 0.6rem;
	justify-content: space-between;
	margin: 0;
}

.bnb-domain-card .bnb-domain-forums li:first-child {
	border-block-start: 0;
}

.bnb-domain-card .bnb-domain-forums a {
	align-items: center;
	color: var(--bnb-ink-soft);
	display: inline-flex;
	flex: 1 1 auto;
	font-size: 0.93rem;
	min-block-size: 44px;
	text-decoration: none;
}

.bnb-domain-card .bnb-domain-forums a:hover,
.bnb-domain-card .bnb-domain-forums a:focus-visible {
	color: var(--bnb-gold);
}

.bnb-domain-count {
	color: var(--bnb-muted);
	font-size: 0.8rem;
}

.bnb-domain-foot {
	align-items: center;
	border-block-start: 1px solid var(--bnb-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-block-start: 0.5rem;
	padding-block-start: 0.35rem;
}

.bnb-domain-total {
	color: var(--bnb-muted);
	font-size: 0.82rem;
	font-weight: 700;
}

.bnb-home-rail {
	display: grid;
	gap: 1.1rem;
}

.bnb-rail-box {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	box-shadow: var(--bnb-shadow-sm);
	padding: 1.1rem 1.15rem;
}

.bnb-rail-box h2 {
	align-items: center;
	display: flex;
	font-size: 1.05rem;
	gap: 0.55rem;
	margin: 0 0 0.6rem;
}

.bnb-rail-icon {
	background: var(--bnb-surface-2);
	block-size: 32px;
	border-radius: 9px;
	color: var(--bnb-ink);
	display: inline-grid;
	inline-size: 32px;
	place-items: center;
}

.bnb-rail-box .bnb-eyebrow {
	margin-block: 0 0.5rem;
}

.bnb-rail-box .bnb-leader-list li {
	padding: 0.5rem 0.75rem;
}

.bnb-leader-score {
	color: var(--bnb-muted);
	font-size: 0.85rem;
	font-weight: 700;
	margin-inline-start: auto;
}

.bnb-rail-empty,
.bnb-rail-note {
	color: var(--bnb-ink-soft);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0 0 0.6rem;
}

.bnb-rail-level {
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.bnb-rail-rank {
	display: block;
	font-size: 1.35rem;
	margin: 0 0 0.3rem;
}

.bnb-level-ladder {
	display: grid;
	gap: 0.55rem;
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.bnb-level-ladder li {
	align-items: flex-start;
	display: flex;
	gap: 0.7rem;
}

.bnb-level-ladder strong {
	display: block;
	font-size: 0.95rem;
}

.bnb-level-ladder small {
	color: var(--bnb-muted);
	display: block;
	font-size: 0.78rem;
	line-height: 1.4;
}

.bnb-level-key {
	background: var(--bnb-muted);
	block-size: 28px;
	border-radius: 8px;
	color: #fff;
	display: grid;
	flex: none;
	font-size: 0.8rem;
	font-weight: 800;
	inline-size: 28px;
	place-items: center;
}

.bnb-level-key[data-level="4"] {
	background: var(--bnb-navy-700);
}

.bnb-level-key[data-level="3"] {
	background: var(--bnb-gold-bright);
	color: var(--bnb-gold-ink);
}

.bnb-rail-box--promo {
	background: linear-gradient(150deg, var(--bnb-navy-900), var(--bnb-navy-700));
	border-color: transparent;
	color: #fff;
}

.bnb-rail-box--promo h2 {
	color: #fff;
}

.bnb-rail-box--promo .bnb-rail-icon {
	background: rgb(255 255 255 / 12%);
	color: #fff;
}

.bnb-rail-box--promo p {
	color: #dbe3ef;
	font-size: 0.92rem;
	margin: 0 0 0.8rem;
}

/* Gold stays light in both themes, so the ink on it is a fixed dark value —
   the navy token flips to white on the dark palette. */
.bnb-button.bnb-button-gold {
	background: var(--bnb-gold-bright) !important;
	border-color: var(--bnb-gold-bright);
	color: #0b1526 !important;
}

.bnb-button.bnb-button-gold:hover,
.bnb-button.bnb-button-gold:focus-visible {
	background: #d8b35c !important;
}

.bnb-global-search button {
	color: #0b1526;
}

.bnb-fresh-boost {
	background: var(--bnb-gold-pale);
	border: 1px solid var(--bnb-gold-bright);
	border-radius: var(--bnb-r-pill);
	color: var(--bnb-gold-ink);
	font-size: 0.7rem;
	font-weight: 800;
	padding: 2px 9px;
}

.bnb-business-grid article.is-verified {
	border-color: var(--bnb-gold-bright);
}

.bnb-mission-text {
	background: var(--bnb-surface);
	border-inline-start: 4px solid var(--bnb-gold);
	border-radius: var(--bnb-r-sm);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 0.75rem;
	padding: 1.1rem 1.25rem;
}

.bnb-mission-text p {
	margin: 0;
}

.bnb-home-main .bnb-community-callout {
	margin-block: 2.5rem 5rem;
}

/* Every standalone control is a thumb target — 44px, on every pointer, not
   only when the browser reports a coarse one. */
.bnb-home-main :is(.bnb-card-link, .bnb-more-link, .bnb-text-link, .bnb-topic-forum),
.bnb-home-main .bnb-topic-feed h3 a,
.bnb-home-main .bnb-domain-card h3 a,
.bnb-home-main .bnb-business-grid h3 a,
.bnb-home-main .bnb-rail-box .bnb-button,
.bnb-home-main .bnb-hero-actions .bnb-button,
.bnb-site-footer a,
.bnb-breadcrumbs a,
.bnb-hood-grid a,
.bnb-fresh-list a,
.bnb-language-switcher a,
.bnb-primary-nav a,
.bnb-account-links a,
.bnb-account-links .bnb-button {
	align-items: center;
	display: inline-flex;
	min-block-size: 44px;
}

.bnb-theme-toggle,
.bnb-menu-toggle,
.bnb-global-search input,
.bnb-global-search button {
	min-block-size: 44px;
}

.bnb-account-links a,
.bnb-language-switcher a {
	justify-content: center;
	min-inline-size: 44px;
}

.bnb-skip-link {
	align-items: center;
	display: inline-flex;
	min-block-size: 44px;
}

/* An email address or a setup key is one unbreakable word; on a 360px phone it
   pushed the account screen two pixels past the viewport. */
.bnb-account-page .bnb-community-panel p,
.bnb-account-page .bnb-community-panel code,
.bnb-account-page .bnb-community-panel a {
	overflow-wrap: anywhere;
}