/* BuddyNext — Profile stylesheet. Enqueued via BuddyNext\Templates\ProfileLoader. */

/* ── CSS Custom Properties ───────────────────────────────────────────────── */
/* All --bn-p-* tokens are aliases of the v2 --bn-* source in bn-base.css.
 * They exist only to preserve the existing class-name surface; new code
 * should reference --bn-* directly. Dark mode flips automatically because
 * each alias resolves through the v2 source under [data-bn-theme="dark"]. */
:root {
	--bn-p-font-body:    var(--bn-font-ui);
	--bn-p-font-display: var(--bn-font-display);

	--bn-p-bg:           var(--bn-canvas);
	--bn-p-bg-subtle:    var(--bn-sunken);
	--bn-p-bg-hover:     var(--bn-sunken);
	--bn-p-surface:      var(--bn-surface);
	--bn-p-border:       var(--bn-line);
	--bn-p-border-soft:  var(--bn-line-faint);
	--bn-p-text-1:       var(--bn-ink);
	--bn-p-text-2:       var(--bn-ink-2);
	--bn-p-text-3:       var(--bn-ink-3);

	--bn-p-brand:        var(--bn-accent);
	--bn-p-brand-light:  var(--bn-accent-100);
	--bn-p-brand-hover:  var(--bn-accent-700);

	--bn-p-green:        var(--bn-success);
	--bn-p-green-bg:     var(--bn-success-bg);
	--bn-p-amber:        var(--bn-warn);
	--bn-p-amber-bg:     var(--bn-warn-bg);
	--bn-p-red:          var(--bn-danger);
	--bn-p-red-bg:       var(--bn-danger-bg);

	--bn-p-s1: var(--bn-s1);
	--bn-p-s2: var(--bn-s2);
	--bn-p-s3: var(--bn-s3);
	--bn-p-s4: var(--bn-s4);
	--bn-p-s5: var(--bn-s5);
	--bn-p-s6: var(--bn-s6);
	--bn-p-s8: var(--bn-s8);

	--bn-p-r-sm:   var(--bn-r-sm);
	--bn-p-r-md:   var(--bn-r-md);
	--bn-p-r-lg:   var(--bn-r-lg);
	--bn-p-r-xl:   var(--bn-r-xl);
	--bn-p-r-full: var(--bn-r-full);

	--bn-p-text-xs:   var(--bn-text-xs);
	--bn-p-text-sm:   var(--bn-text-sm);
	--bn-p-text-base: var(--bn-text-base);
	--bn-p-text-lg:   var(--bn-text-lg);
	--bn-p-text-xl:   var(--bn-text-xl);
	--bn-p-text-2xl:  var(--bn-text-2xl);
}

/* ── Profile Header Block ─────────────────────────────────────────────────── */

.bn-block-profile-header {
	font-family: var(--bn-p-font-body);
	color: var(--bn-p-text-1);
	background: var(--bn-p-bg-subtle);
	-webkit-font-smoothing: antialiased;
}

/* Cover photo — full-width, 3:1 aspect ratio */
.bn-profile-header__cover {
	width: 100%;
	aspect-ratio: 3 / 1;
	min-height: 160px;
	max-height: 260px;
	background: linear-gradient(135deg, var(--auth-grad-via) 0%, var(--auth-grad-to) 50%, var(--pink) 100%);
	background-size: cover;
	background-position: center;
	position: relative;
}

.bn-profile-header__cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Profile head section */
.bn-profile-header__body {
	background: var(--bn-p-surface);
	border-bottom: 1px solid var(--bn-p-border);
	padding: 0 var(--bn-p-s8) var(--bn-p-s5);
	position: relative;
}

/* Avatar — circular, offset up from cover */
.bn-profile-header__avatar-wrap {
	position: relative;
	display: inline-block;
	margin-top: -48px;
	margin-bottom: var(--bn-p-s3);
}

.bn-profile-header__avatar,
.bn-avatar.bn-avatar--xl.bn-profile-header__avatar {
	width: 96px;
	height: 96px;
	border-radius: var(--bn-p-r-full);
	border: 4px solid var(--bn-p-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: block;
	object-fit: cover;
}

/* Online indicator dot */
.bn-profile-header__online {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	background: var(--bn-p-green);
	border-radius: var(--bn-p-r-full);
	border: 2px solid var(--bn-p-bg);
}

/* Name + meta */
.bn-profile-header__info {
	flex: 1;
	min-width: 0;
}

.bn-profile-header__name {
	font-family: var(--bn-p-font-display);
	font-size: var(--bn-p-text-xl);
	font-weight: var(--fw-extrabold);
	color: var(--bn-p-text-1);
	line-height: var(--leading-tight);
	margin: 0 0 var(--bn-p-s1);
}

.bn-profile-header__handle {
	font-size: var(--bn-p-text-sm);
	color: var(--bn-p-text-2);
	margin: 0 0 var(--bn-p-s2);
}

.bn-profile-header__bio {
	font-size: var(--bn-p-text-sm);
	color: var(--bn-p-text-2);
	line-height: var(--leading-body);
	max-width: 540px;
	margin: 0 0 var(--bn-p-s3);
}

/* Member type badge */
.bn-profile-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--bn-p-s2);
	border-radius: var(--bn-p-r-full);
	font-size: var(--bn-p-text-xs);
	font-weight: var(--fw-bold);
	background: var(--bn-p-brand-light);
	color: var(--bn-p-brand);
	margin-left: var(--bn-p-s2);
	vertical-align: middle;
	text-transform: capitalize;
}

/* Degree badge (1st/2nd/3rd+) */
.bn-degree-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--bn-p-s2);
	border-radius: var(--bn-p-r-full);
	font-size: var(--bn-p-text-xs);
	font-weight: var(--fw-bold);
	background: var(--bn-p-brand-light);
	color: var(--bn-p-brand);
	margin-left: var(--bn-p-s2);
	vertical-align: middle;
}

/* Stats row — followers / following / connections / posts */
.bn-profile-header__stats {
	display: flex;
	gap: var(--bn-p-s5);
	flex-wrap: wrap;
	margin-top: var(--bn-p-s3);
}

.bn-profile-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	cursor: pointer;
	min-width: 48px;
	text-align: center;
}

.bn-profile-stat strong {
	font-size: var(--bn-p-text-lg);
	font-weight: var(--fw-extrabold);
	color: var(--bn-p-text-1);
	line-height: var(--leading-tight);
}

.bn-profile-stat span,
.bn-profile-stat:not(:has(strong)) {
	font-size: var(--bn-p-text-xs);
	color: var(--bn-p-text-2);
}

/* Actions row — Follow / Connect / Message / Options */
.bn-profile-header__actions {
	position: absolute;
	top: var(--bn-p-s5);
	right: var(--bn-p-s8);
	display: flex;
	gap: var(--bn-p-s2);
	flex-wrap: wrap;
}

/* Button primitives */
.bn-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-p-s1);
	font-family: var(--bn-p-font-body);
	font-size: var(--bn-p-text-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	text-decoration: none;
	border: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bn-btn--sm {
	padding: 7px var(--bn-p-s4);
	border-radius: var(--bn-p-r-full);
	font-size: var(--bn-p-text-xs);
}

.bn-btn--primary {
	background: var(--bn-p-brand);
	color: var(--text-on-brand);
	border: 1.5px solid var(--bn-p-brand);
	padding: 8px var(--bn-p-s5);
	border-radius: var(--bn-p-r-full);
}
.bn-btn--primary:hover,
.bn-btn--primary:focus {
	background: var(--bn-p-brand-hover);
	border-color: var(--bn-p-brand-hover);
	color: var(--text-on-brand);
}

.bn-btn--secondary {
	background: var(--bn-p-surface);
	color: var(--bn-p-text-1);
	border: 1.5px solid var(--bn-p-border);
	padding: 8px var(--bn-p-s4);
	border-radius: var(--bn-p-r-full);
}
.bn-btn--secondary:hover,
.bn-btn--secondary:focus {
	background: var(--bn-p-bg-hover);
	color: var(--bn-p-text-1);
}

.bn-btn--icon {
	background: var(--bn-p-surface);
	color: var(--bn-p-text-2);
	border: 1.5px solid var(--bn-p-border);
	padding: 8px 10px;
	border-radius: var(--bn-p-r-full);
	line-height: 1;
}
.bn-btn--icon:hover {
	background: var(--bn-p-bg-hover);
}

.bn-following {
	background: var(--bn-p-bg-subtle);
	color: var(--bn-p-text-1);
	border-color: var(--bn-p-border);
}
.bn-following:hover {
	background: var(--bn-p-red-bg);
	color: var(--bn-p-red);
	border-color: var(--bn-p-red);
}

/* ── Profile Fields Block ─────────────────────────────────────────────────── */

.bn-block-profile-fields {
	font-family: var(--bn-p-font-body);
	color: var(--bn-p-text-1);
}

.bn-profile-fields-list {
	display: grid;
	gap: var(--bn-p-s3);
}

.bn-profile-field {
	display: flex;
	gap: var(--bn-p-s3);
	padding: var(--bn-p-s3) 0;
	border-bottom: 1px solid var(--bn-p-border-soft);
}

.bn-profile-field:last-child {
	border-bottom: none;
}

.bn-profile-field__label {
	font-size: var(--bn-p-text-sm);
	font-weight: var(--fw-semibold);
	color: var(--bn-p-text-2);
	min-width: 100px;
	flex-shrink: 0;
}

.bn-profile-field__value {
	font-size: var(--bn-p-text-sm);
	color: var(--bn-p-text-1);
	flex: 1;
	min-width: 0;
	word-break: break-word;
}

.bn-field-link {
	color: var(--bn-p-brand);
	text-decoration: none;
}
.bn-field-link:hover {
	text-decoration: underline;
	color: var(--bn-p-brand-hover);
}

/* Social links with icons */
.bn-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-p-s2);
	margin-top: var(--bn-p-s2);
}

.bn-social-link {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-p-s1);
	padding: 5px var(--bn-p-s3);
	border-radius: var(--bn-p-r-md);
	border: 1px solid var(--bn-p-border);
	font-size: var(--bn-p-text-xs);
	font-weight: var(--fw-semibold);
	color: var(--bn-p-text-1);
	text-decoration: none;
	background: var(--bn-p-surface);
	transition: background 0.15s, border-color 0.15s;
}
.bn-social-link:hover {
	background: var(--bn-p-bg-hover);
	border-color: var(--bn-p-brand);
	color: var(--bn-p-brand);
}

.bn-social-link__icon {
	font-size: var(--text-md);
	line-height: 1;
}

/* Work experience cards (repeater) */
.bn-repeater-entries {
	display: flex;
	flex-direction: column;
	gap: var(--bn-p-s3);
}

.bn-repeater-entry {
	background: var(--bn-p-bg-subtle);
	border: 1px solid var(--bn-p-border-soft);
	border-radius: var(--bn-p-r-lg);
	padding: var(--bn-p-s4);
}

.bn-repeater-entry__title {
	font-size: var(--bn-p-text-base);
	font-weight: var(--fw-bold);
	color: var(--bn-p-text-1);
	margin: 0 0 var(--bn-p-s1);
	line-height: var(--leading-snug);
}

.bn-repeater-entry__sub {
	font-size: var(--bn-p-text-sm);
	color: var(--bn-p-text-2);
	margin: 0 0 var(--bn-p-s1);
}

.bn-repeater-entry__dates {
	font-size: var(--bn-p-text-xs);
	color: var(--bn-p-text-3);
	margin: 0 0 var(--bn-p-s2);
}

.bn-repeater-entry__desc {
	font-size: var(--bn-p-text-sm);
	color: var(--bn-p-text-2);
	line-height: var(--leading-body);
	margin: var(--bn-p-s2) 0 0;
}

/* Skills — chip tags */
.bn-skill-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-p-s2);
	margin-top: var(--bn-p-s2);
}

.bn-skill-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--bn-p-r-full);
	font-size: var(--bn-p-text-xs);
	font-weight: var(--fw-semibold);
	background: var(--bn-p-brand-light);
	color: var(--bn-p-brand);
	border: 1px solid transparent;
}
.bn-skill-chip:hover {
	border-color: var(--bn-p-brand);
}

/* Section group heading */
.bn-profile-group-heading {
	font-size: var(--bn-p-text-sm);
	font-weight: var(--fw-bold);
	color: var(--bn-p-text-2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	margin: 0 0 var(--bn-p-s3);
}

/* Empty state */
.bn-empty {
	font-size: var(--bn-p-text-sm);
	color: var(--bn-p-text-3);
	text-align: center;
	padding: var(--bn-p-s6) 0;
}

/* ── Profile Completion Bar Block ─────────────────────────────────────────── */

.bn-block-profile-completion {
	font-family: var(--bn-p-font-body);
	color: var(--bn-p-text-1);
	background: var(--bn-p-surface);
	border: 1px solid var(--bn-p-border);
	border-radius: var(--bn-p-r-lg);
	padding: var(--bn-p-s4);
}

.bn-completion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--bn-p-s3);
}

.bn-completion-label {
	font-size: var(--bn-p-text-sm);
	font-weight: var(--fw-semibold);
	color: var(--bn-p-text-1);
}

.bn-completion-percent {
	font-size: var(--bn-p-text-sm);
	font-weight: var(--fw-extrabold);
	color: var(--bn-p-brand);
}

/* Progress bar track */
.bn-completion-bar {
	width: 100%;
	height: 8px;
	background: var(--bn-p-border);
	border-radius: var(--bn-p-r-full);
	overflow: hidden;
	margin-bottom: var(--bn-p-s4);
}

/* Progress bar fill */
.bn-completion-bar__fill {
	height: 100%;
	background: var(--bn-p-brand);
	border-radius: var(--bn-p-r-full);
	transition: width 0.4s ease;
	min-width: 4px;
}

/* Color coding: red < 40%, amber 40–79%, green 80%+ */
.bn-completion-bar[aria-valuenow="0"] .bn-completion-bar__fill,
.bn-completion-bar[aria-valuenow="10"] .bn-completion-bar__fill,
.bn-completion-bar[aria-valuenow="20"] .bn-completion-bar__fill,
.bn-completion-bar[aria-valuenow="30"] .bn-completion-bar__fill {
	background: var(--bn-p-red);
}

/* Prompt cards for incomplete fields */
.bn-completion-tips {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-p-s2);
}

.bn-completion-tip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-p-s3);
	padding: var(--bn-p-s2) var(--bn-p-s3);
	background: var(--bn-p-bg-subtle);
	border: 1px solid var(--bn-p-border-soft);
	border-radius: var(--bn-p-r-md);
	font-size: var(--bn-p-text-xs);
	color: var(--bn-p-text-2);
	line-height: var(--leading-snug);
}

.bn-completion-tip a {
	flex-shrink: 0;
	color: var(--bn-p-brand);
	font-weight: var(--fw-bold);
	font-size: var(--bn-p-text-xs);
	text-decoration: none;
	padding: 3px var(--bn-p-s2);
	border-radius: var(--bn-p-r-sm);
	background: var(--bn-p-brand-light);
	transition: background 0.15s;
}
.bn-completion-tip a:hover {
	background: var(--bn-p-brand);
	color: var(--text-on-brand);
}

/* ── More-Options dropdown (profile view) ─────────────────────────────────── */

.bn-more-menu-wrap,
.bn-share-menu-wrap {
	position: relative;
	display: inline-block;
}
.bn-share-menu-wrap .bn-share-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--bn-p-s1));
	background: var(--bn-p-surface);
	border: 1px solid var(--bn-p-border);
	border-radius: var(--bn-p-r-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
	min-width: 180px;
	z-index: 200;
	overflow: hidden;
}
.bn-share-menu-wrap.is-open .bn-share-menu {
	display: block;
}

.bn-more-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--bn-p-s1));
	background: var(--bn-p-surface);
	border: 1px solid var(--bn-p-border);
	border-radius: var(--bn-p-r-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
	min-width: 160px;
	z-index: 200;
	overflow: hidden;
}

.bn-more-menu-wrap.is-open .bn-more-menu {
	display: block;
}

.bn-more-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: var(--bn-p-s3) var(--bn-p-s4);
	font-size: var(--bn-p-text-sm);
	color: var(--bn-p-text-1);
	cursor: pointer;
	font-family: var(--bn-p-font-body);
	line-height: var(--leading-snug);
}
.bn-more-menu-item:hover {
	background: var(--bn-p-bg-hover);
}

.bn-more-menu-item--danger {
	color: var(--bn-p-red);
}
.bn-more-menu-item--danger:hover {
	background: var(--bn-p-red-bg);
}

[data-bn-theme="dark"] .bn-more-menu,
[data-theme="dark"] .bn-more-menu {
	box-shadow: 0 4px 16px oklch(0% 0 0 / 0.35);
}

/* ── Private / suspended profile states ───────────────────────────────────── */

.bn-profile-private,
.bn-profile-suspended {
	text-align: center;
	padding: var(--bn-p-s8) var(--bn-p-s4);
	color: var(--bn-p-text-2);
	font-size: var(--bn-p-text-sm);
}

/* ── Responsive — Mobile ≤640px ──────────────────────────────────────────── */

@media (max-width: 640px) {
	/* Cover — shorter on mobile */
	.bn-profile-header__cover {
		min-height: 120px;
		max-height: 160px;
	}

	/* Profile head padding */
	.bn-profile-header__body {
		padding: 0 var(--bn-p-s4) var(--bn-p-s4);
	}

	/* Actions — stack under avatar on mobile */
	.bn-profile-header__actions {
		position: static;
		margin-top: var(--bn-p-s3);
	}

	/* Stats row — tighten spacing */
	.bn-profile-header__stats {
		gap: var(--bn-p-s4);
	}

	.bn-profile-stat strong {
		font-size: var(--bn-p-text-base);
	}

	/* Profile field list — stack label above value */
	.bn-profile-field {
		flex-direction: column;
		gap: var(--bn-p-s1);
	}

	.bn-profile-field__label {
		min-width: unset;
	}

	/* Social links — wrap fully */
	.bn-social-links {
		gap: var(--bn-p-s2);
	}

	/* Completion bar block */
	.bn-block-profile-completion {
		padding: var(--bn-p-s3);
	}

	/* Button row — allow wrap */
	.bn-profile-header__actions {
		flex-wrap: wrap;
		gap: var(--bn-p-s2);
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Profile view (v2)
 * Surface uses primitives from bn-base.css: .bn-card, .bn-btn, .bn-badge,
 * .bn-avatar, .bn-tabs/.bn-tab. Only profile-specific composition lives here.
 * Prototype: docs/v2 Plans/v2/user-profile.html
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Main stack (replaces the legacy .bn-profile-wrap / .bn-profile-layout)
 *
 * The shell (`templates/shell/hub-shell.php`) owns the rail, main column,
 * and the optional right column (the active theme's get_header() is the
 * top navigation). This
 * template renders inside `.bn-app__main`; sidebar widgets are hooked
 * into `buddynext_right_sidebar`. The stack just stacks the hero, tab
 * bar, and tab panels vertically with consistent gap.
 * ───────────────────────────────────────────────────────────────────── */
.bn-pf-stack {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
	color: var(--bn-ink);
	font-family: var(--bn-font-ui);
	font-size: var(--bn-text-base);
	-webkit-font-smoothing: antialiased;
}

/* ── Hero card ─────────────────────────────────────────────────────────── */
.bn-pf-hero {
	/* No overflow:hidden here — it would clip the absolutely-positioned
	   More-Options dropdown (.bn-more-menu) that opens below the action row.
	   The cover band (.bn-pf-cover) carries its own overflow:hidden for the
	   cover image, so corner clipping is unaffected. */
	padding: 0;
}

/* Cover band */
.bn-pf-cover {
	height: 200px;
	position: relative;
	overflow: hidden;
	/* Default cover — a tonal wash of BuddyNext's own accent. Was mixing the
	   Jetonomy (purple) + MediaVerse (teal) brand accents, which read as a
	   generic purple/teal "AI" gradient rather than on-brand BuddyNext. */
	background:
		radial-gradient(circle at 20% 30%, color-mix(in oklch, var(--bn-accent) 30%, transparent), transparent 55%),
		radial-gradient(circle at 78% 70%, color-mix(in oklch, var(--bn-accent-600, var(--bn-accent)) 20%, transparent), transparent 50%),
		linear-gradient(135deg, var(--bn-accent-100), color-mix(in oklch, var(--bn-accent) 12%, var(--bn-sunken)));
	background-size: cover;
	background-position: center;
}
.bn-pf-cover--has-image {
	background-size: cover;
	background-position: center;
}
/* Cover image layer — object-fit:cover keeps it responsive at the fixed hero
   height, object-position pans, transform:scale zooms (set inline from the
   stored reposition). transform-origin centre so zoom grows from the middle. */
.bn-pf-cover__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transform-origin: center;
	z-index: 0;
}
.bn-pf-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-30deg,
		transparent 0 26px,
		color-mix(in oklch, var(--bn-ink) 4%, transparent) 26px 27px
	);
	mix-blend-mode: multiply;
	opacity: 0.55;
	pointer-events: none;
}
.bn-pf-cover--has-image::after { display: none; }
.bn-pf-cover__edit {
	position: absolute;
	inset-block-end: var(--bn-s3);
	inset-inline-end: var(--bn-s3);
	background: color-mix(in oklch, var(--bn-ink) 75%, transparent);
	color: var(--bn-surface);
	padding: var(--bn-s1) var(--bn-s3);
	border-radius: var(--bn-r-sm);
	font-size: var(--bn-text-xs);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
	border: none;
	z-index: 2;
	transition: background var(--bn-dur-fast) var(--bn-ease);
}
.bn-pf-cover__edit:hover,
.bn-pf-cover__edit:focus-visible {
	background: color-mix(in oklch, var(--bn-ink) 88%, transparent);
	color: var(--bn-surface);
}
.bn-pf-cover__edit svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
}

/* Identity head — avatar / id / actions grid */
.bn-pf-head {
	padding: 0 var(--bn-s6) var(--bn-s5);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: var(--bn-s5);
}

.bn-pf-avatar-wrap {
	position: relative;
	margin-block-start: calc(var(--bn-s12) * -1);
}
.bn-pf-avatar-wrap .bn-avatar[data-size="2xl"] {
	border: 4px solid var(--bn-surface);
	box-shadow: var(--bn-shadow-md);
	background: var(--bn-accent);
	overflow: hidden;
}
.bn-pf-avatar-wrap .bn-avatar[data-size="2xl"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.bn-pf-avatar-wrap .bn-avatar[data-presence] {
	--bn-avatar-presence-border: var(--bn-surface);
	overflow: visible;
}
.bn-pf-avatar-wrap .bn-avatar[data-presence]::after {
	z-index: 1;
}

/* Owner "Edit avatar" badge — a pencil chip on the avatar (bottom-right),
   replacing the old standalone Edit-Avatar toolbar button. Mirrors the
   edit-page avatar button so the affordance feels identical across view +
   edit. Native title attribute supplies the hover tooltip. */
.bn-pf-avatar-edit {
	position: absolute;
	inset-block-end: var(--bn-s1);
	inset-inline-end: var(--bn-s1);
	width: 30px;
	height: 30px;
	border-radius: var(--bn-r-full);
	background: var(--bn-accent);
	color: var(--bn-accent-fg);
	border: 2px solid var(--bn-surface);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--bn-dur-fast) var(--bn-ease),
				transform var(--bn-dur-fast) var(--bn-ease);
}
.bn-pf-avatar-edit svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
}
.bn-pf-avatar-edit:hover {
	background: var(--bn-accent-700);
	transform: scale(1.06);
}
.bn-pf-avatar-edit:focus-visible {
	background: var(--bn-accent-700);
	box-shadow: var(--bn-ring);
	outline: none;
}

/* On the owner's own avatar the edit pencil sits bottom-right, where the
   presence dot (.bn-avatar[data-presence]::after) also renders — they collide.
   Move the dot to the top-right corner when the edit affordance is present so
   both stay legible. */
.bn-pf-avatar-wrap:has( .bn-pf-avatar-edit ) .bn-avatar[data-presence]::after {
	top: 0;
	bottom: auto;
}

.bn-pf-id {
	padding-block-start: var(--bn-s4);
	min-width: 0;
}
.bn-pf-name-row {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	margin-block-end: var(--bn-s1);
	flex-wrap: wrap;
}
.bn-pf-name {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-2xl);
	font-weight: 800;
	letter-spacing: var(--bn-ls-tight);
	color: var(--bn-ink);
	margin: 0;
	line-height: var(--bn-leading-tight);
}
.bn-pf-type-badge {
	text-transform: capitalize;
}
.bn-pf-handle {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	margin-block-end: var(--bn-s2);
	font-family: var(--bn-font-mono);
}
.bn-pf-pronouns {
	color: var(--bn-ink-3);
	font-family: var(--bn-font-mono);
}
.bn-pf-headline-sep {
	margin-inline: var(--bn-s1);
	color: var(--bn-ink-4);
}
.bn-pf-headline {
	font-family: var(--bn-font-ui);
	font-size: var(--bn-text-base);
	font-weight: 500;
	color: var(--bn-ink-2);
	line-height: var(--bn-leading-snug, 1.35);
	max-width: 540px;
	margin-block-end: var(--bn-s2);
}
.bn-pf-bio {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	line-height: var(--bn-leading-body);
	max-width: 540px;
	margin-block-end: var(--bn-s3);
}
.bn-pf-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s4);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}
.bn-pf-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
}
.bn-pf-meta__item svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	flex-shrink: 0;
}
.bn-pf-meta__item a {
	color: var(--bn-accent);
	text-decoration: none;
}
.bn-pf-meta__item a:hover,
.bn-pf-meta__item a:focus-visible { text-decoration: underline; }

/* Actions column */
.bn-pf-actions {
	display: flex;
	gap: var(--bn-s2);
	padding-block-start: var(--bn-s4);
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

/* Connected (settled) — quiet outline matching the member-card treatment:
   transparent fill, muted border + text, leading check (already inline in the
   markup). Reads as a confirmed state, not a CTA; hover hints at disconnect. */
.bn-pf-actions .bn-pf-connected[data-state="connected"] {
	background: transparent;
	color: var(--bn-ink-3);
	border-color: var(--bn-line);
}
.bn-pf-actions .bn-pf-connected[data-state="connected"]:hover {
	color: var(--bn-danger);
	border-color: color-mix(in oklab, var(--bn-danger) 35%, var(--bn-line));
	background: var(--bn-danger-bg);
}

/* Verified badge — small filled accent circle next to the name. */
.bn-pf-verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--bn-accent, #2563eb);
	color: var(--bn-accent-fg, #fff);
	border-radius: 50%;
	margin-inline-start: 6px;
	flex-shrink: 0;
}
.bn-pf-verified svg {
	width: 12px;
	height: 12px;
	stroke-width: 3;
}

/* Avatar crop modal — opened by handleAvatarFileChange before the
   upload fires. The user drags + zooms; the cropped 512×512 JPEG
   is posted to /me/avatar instead of the raw file. */
.bn-avatar-crop-overlay {
	position: fixed;
	inset: 0;
	background: var(--bn-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 16px;
}
.bn-avatar-crop-panel {
	background: var(--bn-surface, #fff);
	border-radius: var(--bn-r-lg, 12px);
	padding: 20px;
	max-width: 100%;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.bn-avatar-crop-title {
	margin: 0;
	font-size: var(--bn-text-lg, 18px);
	font-weight: 600;
	color: var(--bn-ink, #111);
}
.bn-avatar-crop-stage {
	position: relative;
	border-radius: 50%;
	overflow: visible;
	cursor: grab;
	touch-action: none;
}
.bn-avatar-crop-stage:active { cursor: grabbing; }
.bn-avatar-crop-canvas {
	display: block;
	border-radius: 8px;
}
.bn-avatar-crop-zoom {
	width: 100%;
	max-width: 320px;
	accent-color: var(--bn-accent, #2563eb);
}
.bn-avatar-crop-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	width: 100%;
}

/* Cover reposition stage — a frame at the hero's proportions holding the
   live <img> preview. Drag to pan (object-position), scroll/slider to zoom
   (transform:scale) — the same display contract as the rendered hero cover,
   so the modal is true WYSIWYG. */
.bn-cover-repos-stage {
	position: relative;
	overflow: hidden;
	cursor: grab;
	border-radius: 8px;
	touch-action: none;
	background-color: var(--bn-sunken, #f3f4f6);
}
.bn-cover-repos-stage:active { cursor: grabbing; }
.bn-cover-repos-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transform-origin: center;
	pointer-events: none;
	user-select: none;
}

/* Pending follow-request inbox — only the owner sees this. One row per
   requester, with Decline / Approve buttons that hide the row on success
   via the buddynext/follow-requests Interactivity store. */
.bn-follow-requests {
	margin: 0 0 var(--s5);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	background: var(--bn-canvas);
	overflow: hidden;
}
.bn-follow-requests__head {
	padding: var(--s4) var(--s4) var(--s3);
	border-bottom: 1px solid var(--bn-line);
}
.bn-follow-requests__title {
	font-size: var(--bn-text-md);
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.bn-follow-requests__count {
	font-family: var(--bn-font-mono, var(--bn-font-ui));
	font-size: 11px;
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-accent);
	background: color-mix(in oklch, var(--bn-accent) 14%, var(--bn-surface));
	border-radius: 999px;
	padding: 1px 8px;
}
.bn-follow-requests__sub {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	margin: 4px 0 0;
}
.bn-follow-requests__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bn-follow-requests__row {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--bn-line);
}
.bn-follow-requests__row:last-child { border-bottom: 0; }
.bn-follow-requests__row[hidden] { display: none; }
.bn-follow-requests__avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-flex;
}
.bn-follow-requests__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bn-follow-requests__id {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.bn-follow-requests__name {
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink);
	text-decoration: none;
	line-height: 1.2;
}
.bn-follow-requests__name:hover { color: var(--bn-accent); }
.bn-follow-requests__handle {
	font-family: var(--bn-font-mono, var(--bn-font-ui));
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	margin-top: 2px;
}
.bn-follow-requests__actions {
	display: inline-flex;
	gap: 8px;
	flex-shrink: 0;
}

/* Blocked & muted lists in the profile-edit Privacy → Relations card.
   Each row is avatar + name + handle + ghost "Unblock"/"Unmute" button. */
.bn-ep-relations { display: flex; flex-direction: column; gap: 16px; }
.bn-ep-relations__group { display: flex; flex-direction: column; gap: 8px; }
.bn-ep-relations__title {
	font-size: var(--bn-text-sm);
	font-weight: 600;
	color: var(--bn-ink-2);
	margin: 0;
}
.bn-ep-relations__empty {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	margin: 0;
}
.bn-ep-relations__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bn-ep-relation {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Let the row shrink gracefully on narrow screens: name + handle truncate
	   (min-width:0 below) and the avatar + remove button never shrink; flex-wrap
	   is the safety net so the remove button drops to a second line instead of
	   overflowing the card on very small widths. */
	flex-wrap: wrap;
	padding: 6px 8px;
	border-radius: var(--bn-r-md, 8px);
	background: var(--bn-sunken, #f3f4f6);
}
.bn-ep-relation > .bn-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}
.bn-ep-relation__name {
	font-weight: 500;
	color: var(--bn-ink-1);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bn-ep-relation__handle {
	color: var(--bn-ink-3);
	font-size: var(--bn-text-xs);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bn-ep-relation [data-bn-relation-remove] {
	flex-shrink: 0;
	margin-inline-start: auto;
}

/* Profile completeness chip — circular ring with % label. Clicking
   the chip takes the owner to /edit. Owner-only; hidden when pct
   reaches 100 (rendered conditionally in the template). */
.bn-pf-completeness {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 6px;
	background: color-mix(in oklab, var(--bn-accent) 8%, transparent);
	border-radius: var(--bn-r-full, 999px);
	color: var(--bn-accent);
	font-size: var(--bn-text-xs);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--bn-dur-fast, 120ms) var(--bn-ease, ease);
}
.bn-pf-completeness:hover {
	background: color-mix(in oklab, var(--bn-accent) 16%, transparent);
}
/* De-duplicate the completeness indicator. The right-sidebar "Profile Strength"
   widget (ring + % + actionable task list) is the canonical module, but it is
   display:none below 1025px (see .bn-app__right in bn-shell.css). So show this
   hero chip ONLY where the sidebar widget is hidden: it is the mobile/tablet
   fallback, and on desktop the sidebar widget owns completeness — no redundant
   pair on one screen. */
@media (min-width: 1025px) {
	.bn-pf-completeness {
		display: none;
	}
}
.bn-pf-completeness__ring {
	position: relative;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: conic-gradient(var(--bn-accent) var(--bn-pf-pct, 0%), color-mix(in oklab, var(--bn-accent) 18%, transparent) var(--bn-pf-pct, 0%));
	display: inline-block;
}
.bn-pf-completeness__ring-fill {
	position: absolute;
	inset: 3px;
	background: var(--bn-surface, #fff);
	border-radius: 50%;
}
.bn-pf-actions__group {
	display: inline-flex;
	gap: var(--bn-s2);
}
.bn-pf-more-trigger {
	min-width: 36px;
	justify-content: center;
}
.bn-pf-more-trigger svg {
	width: 16px;
	height: 16px;
}

/* (Removed) .bn-pf-stats / .bn-pf-stat / .bn-pf-stat--link / .bn-pf-tabs —
   the profile stat band + tab bar are now the canonical Nav components
   (.bn-nav-metrics + .bn-tabs / .bn-subnav in bn-base.css), rendered from the
   unified registry. One nav system; no profile-specific tab/stat CSS. */

/* Activity cards (.bn-reply-card / .bn-like-card) are a shared cross-screen
   primitive — consolidated into bn-base.css so the in-hub space Discussions
   panel renders them styled too. */

/* Profile media grid */
.bn-profile-media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bn-s2);
}
.bn-profile-media-item {
	aspect-ratio: 1;
	border-radius: var(--bn-r-md);
	overflow: hidden;
	background: var(--bn-sunken);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bn-profile-media-item a { display: block; width: 100%; height: 100%; }
.bn-profile-media-item img { width: 100%; height: 100%; object-fit: cover; }
.bn-profile-media-video,
.bn-profile-media-placeholder {
	color: var(--bn-ink-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.bn-profile-media-video svg,
.bn-profile-media-placeholder svg { width: 32px; height: 32px; }

/* .bn-empty-state is defined ONCE in bn-base.css. No copy here. */

/* Profile activity (Posts) tab — stack the composer + post cards with the same
   vertical rhythm as the home feed (.bn-feed-list). Without this the cards
   render flush against each other with no gap. */
.bn-profile-posts-panel {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
}

/* ── Sidebar widgets ──────────────────────────────────────────────────── */
.bn-widget {
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	padding: var(--bn-s4);
	margin-block-end: var(--bn-s4);
}
.bn-widget-title {
	font-family: var(--bn-font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: var(--bn-ls-wider);
	text-transform: uppercase;
	margin-block-end: var(--bn-s3);
	color: var(--bn-ink-4);
}
.bn-field-row {
	display: flex;
	gap: var(--bn-s2);
	margin-block-end: var(--bn-s2);
	font-size: var(--bn-text-xs);
}
.bn-field-label {
	color: var(--bn-ink-4);
	font-family: var(--bn-font-mono);
	font-weight: 500;
	min-width: 90px;
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wide);
	font-size: 10px;
}
.bn-field-value { color: var(--bn-ink); word-break: break-word; font-weight: 500; }
.bn-field-value a { color: var(--bn-accent); text-decoration: none; }
.bn-field-value a:hover,
.bn-field-value a:focus-visible { text-decoration: underline; }

.bn-space-row {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	padding-block: var(--bn-s2);
}
.bn-space-row + .bn-space-row {
	border-block-start: 1px solid var(--bn-line);
}
a.bn-space-row {
	color: inherit;
	text-decoration: none;
	border-radius: var(--bn-r-sm);
}
a.bn-space-row:hover .bn-space-name {
	color: var(--bn-accent);
}
.bn-space-icon {
	width: 32px;
	height: 32px;
	border-radius: var(--bn-r-sm);
	background: linear-gradient(135deg, var(--bn-accent-100), var(--bn-surface));
	border: 1px solid var(--bn-line);
	color: var(--bn-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bn-space-icon svg { width: 16px; height: 16px; }
.bn-space-name { font-weight: 600; font-size: var(--bn-text-xs); color: var(--bn-ink); }
.bn-space-role {
	font-size: 10px;
	color: var(--bn-ink-4);
	font-family: var(--bn-font-mono);
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wide);
}

/* Completion bar widget */
.bn-completion-bar-wrap { margin-block-end: var(--bn-s3); }
.bn-completion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: var(--bn-s2);
}
.bn-completion-label {
	font-size: var(--bn-text-xs);
	font-weight: 600;
	color: var(--bn-ink);
}
.bn-completion-pct {
	font-family: var(--bn-font-mono);
	font-size: var(--bn-text-xs);
	font-weight: 700;
	color: var(--bn-accent);
}
.bn-completion-track {
	background: var(--bn-sunken);
	border-radius: var(--bn-r-full);
	height: 7px;
	overflow: hidden;
}
.bn-completion-fill {
	background: var(--bn-accent);
	height: 100%;
	border-radius: var(--bn-r-full);
	transition: width var(--bn-dur-slow) var(--bn-ease);
}
.bn-completion-fill.bn-complete { background: var(--bn-success); }

/* Prompt cards */
.bn-prompt-cards {
	margin-block-start: var(--bn-s3);
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}
.bn-prompt-card {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	padding: var(--bn-s2) var(--bn-s3);
	border-radius: var(--bn-r-md);
	background: var(--bn-accent-100);
	font-size: var(--bn-text-xs);
	color: var(--bn-accent-700);
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	transition:
		background var(--bn-dur-fast) var(--bn-ease),
		border-color var(--bn-dur-fast) var(--bn-ease),
		color var(--bn-dur-fast) var(--bn-ease);
}
.bn-prompt-card:hover,
.bn-prompt-card:focus-visible {
	background: var(--bn-sunken);
	border-color: var(--bn-line);
	color: var(--bn-ink);
}
.bn-prompt-card-icon {
	display: inline-flex;
	align-items: center;
	color: currentColor;
}
.bn-prompt-card-icon svg { width: 14px; height: 14px; }

/* ── Profile-completion ring (v2) ─────────────────────────────────────────
   Circular gauge + curated checklist that replaced the linear progress bar
   in the profile right-sidebar card. The old .bn-completion-* bar styles
   above are retained — the Gutenberg profile-completion-bar block still
   uses them. */
.bn-pf-ring-row {
	display: flex;
	align-items: center;
	gap: var(--bn-s3);
	padding-block-end: var(--bn-s3);
}
.bn-pf-ring {
	position: relative;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
.bn-pf-ring svg {
	width: 56px;
	height: 56px;
	transform: rotate(-90deg);
}
.bn-pf-ring__bg {
	fill: none;
	stroke: var(--bn-sunken);
	stroke-width: 5;
}
.bn-pf-ring__fg {
	fill: none;
	stroke: var(--bn-accent);
	stroke-width: 5;
	stroke-linecap: round;
}
.bn-pf-ring__pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bn-font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--bn-ink);
}
.bn-pf-ring__info { flex: 1; min-width: 0; }
.bn-pf-ring__info b {
	display: block;
	font-size: var(--bn-text-sm);
	font-weight: 600;
	color: var(--bn-ink);
}
.bn-pf-ring__info span {
	display: block;
	margin-block-start: 2px;
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}
.bn-pf-tasks {
	list-style: none;
	margin: 0;
	padding-block-start: var(--bn-s3);
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid var(--bn-line);
}
.bn-pf-task {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-2);
}
.bn-pf-task__mark {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bn-sunken);
	border: 1px solid var(--bn-line);
}
.bn-pf-task.is-done .bn-pf-task__mark {
	background: var(--bn-accent);
	border-color: var(--bn-accent);
	color: var(--bn-accent-fg);
}
.bn-pf-task__mark svg { width: 10px; height: 10px; }
.bn-pf-task__label { flex: 1; min-width: 0; }
.bn-pf-task.is-done .bn-pf-task__label { color: var(--bn-ink-3); }
.bn-pf-task__cta {
	font-size: var(--bn-text-xs);
	font-weight: 600;
	color: var(--bn-accent);
	text-decoration: none;
}
.bn-pf-task__cta:hover { text-decoration: underline; }

/* ── Profile view — responsive ────────────────────────────────────────── */
/* WCAG 1.4.10 reflow: the desktop header is a rigid "avatar | 1fr identity |
   actions" grid. Because the actions column is auto-sized (Follow/Connect/
   Message/Share/More can be ~370px wide), between ~770px and 1024px — the band
   hit by high browser zoom — it squeezed the 1fr identity column down to ~0,
   crushing the member name and bio. Stack the header to a single column before
   that happens; the 768/640/400 rules below refine the stacked layout further. */
@media (max-width: 1024px) {
	.bn-pf-head {
		grid-template-columns: 1fr;
	}
	.bn-pf-actions {
		justify-self: start;
		justify-content: flex-start;
	}
}

@media (max-width: 768px) {
	.bn-pf-head {
		grid-template-columns: 1fr;
		padding-inline: var(--bn-s4);
		padding-block-end: var(--bn-s4);
		gap: var(--bn-s3);
	}
	.bn-pf-actions {
		justify-self: start;
		justify-content: flex-start;
		padding-block-start: 0;
	}
	.bn-pf-cover { height: 160px; }
}

@media (max-width: 640px) {
	.bn-pf-stack { gap: var(--bn-s3); }
	.bn-pf-cover { height: 140px; }
	.bn-pf-avatar-wrap { margin-block-start: calc(var(--bn-s8) * -1); }
	.bn-pf-avatar-wrap .bn-avatar[data-size="2xl"] {
		width: 80px;
		height: 80px;
	}
	.bn-pf-name { font-size: var(--bn-text-xl); }
	.bn-pf-actions {
		width: 100%;
		flex-wrap: wrap;
	}
	.bn-pf-actions .bn-btn { flex: 1 1 auto; justify-content: center; }
	.bn-profile-media-grid { grid-template-columns: repeat(2, 1fr); }
}

/* iPhone 14 / Pixel widths and below: stack action row, single-column timeline. */
@media (max-width: 400px) {
	.bn-pf-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.bn-pf-actions .bn-btn { width: 100%; }
	.bn-pf-timeline { gap: var(--bn-s3); }
}

/* ── Profile connections page ──────────────────────────────────────────────── */
.bn-connections {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-1);
	line-height: var(--leading-body);
	/* Sit on the page canvas like the other hubs — no own --bg-subtle band. */
	min-height: 60vh;
	padding: var(--s6) var(--s5);
	-webkit-font-smoothing: antialiased;
}
.bn-connections-header { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); flex-wrap: wrap; }
.bn-connections-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-extrabold); color: var(--text-1); letter-spacing: -0.5px; }
.bn-connections-count { background: var(--brand-light); color: var(--brand); font-size: var(--text-sm); font-weight: var(--fw-bold); padding: 3px 10px; border-radius: var(--r-full); }
.bn-connections-back { font-size: var(--text-sm); color: var(--text-2); text-decoration: none; display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.bn-connections-back:hover { color: var(--brand); }
.bn-connections-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
/* .bn-member-card / .bn-member-name / .bn-member-handle / .bn-card-actions /
   .bn-page-btn are defined ONCE in bn-members.css (on --bn-* tokens). Only the
   profile-scoped extras (avatar sizing, connected badge, view/message buttons),
   the dark-mode override, and the responsive padding live here. */
/* Scoped to .bn-member-card: this stacked card centres a 64px avatar with a
   bottom margin. Previously these were bare .bn-avatar selectors that leaked
   globally, so the margin: 0 auto var(--s3) pushed avatars down inside every
   flex-row card footer (activity/explore/hashtag) and broke vertical centering.
   The shared .bn-avatar (bn-base.css) governs all other contexts. */
.bn-member-card .bn-avatar { border-radius: 50%; color: var( --bn-accent-fg, #fff ); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s3); width: 64px; height: 64px; font-size: var(--text-2xl); overflow: hidden; flex-shrink: 0; }
.bn-member-card .bn-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bn-connected-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--green-bg); color: var(--green); font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 3px var(--s2); border-radius: var(--r-full); margin-bottom: var(--s3); }
.bn-btn-view { background: var(--brand); color: var( --bn-accent-fg, #fff ); padding: 6px var(--s3); border-radius: 14px; font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer; border: none; font-family: var(--font-body); text-decoration: none; transition: background 0.15s; }
.bn-btn-view:hover { background: var(--brand-hover); color: var( --bn-accent-fg, #fff ); }
.bn-btn-message { background: var(--bg); color: var(--text-2); padding: 6px 10px; border-radius: 14px; font-size: var(--text-base); cursor: pointer; border: 1.5px solid var(--border); font-family: var(--font-body); line-height: 1; transition: border-color 0.15s; text-decoration: none; }
.bn-btn-message:hover { border-color: var(--brand); }
.bn-empty-icon  { margin-bottom: var(--s3); }
.bn-empty-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-2); margin-bottom: var(--s2); }
.bn-empty-text  { font-size: var(--text-sm); line-height: 1.6; color: var(--text-2); }
/* .bn-pagination is the shared component — defined once in bn-base.css. */

/* Dark mode */
[data-theme="dark"] .bn-member-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .bn-btn-message { background: var(--surface); }

/* ── Connections mobile ≤640px ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bn-connections-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.bn-connections { padding: var(--s3); }
	.bn-connections-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
	.bn-member-card { padding: var(--s4) var(--s3); }
	.bn-connections-back { margin-left: 0; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Profile edit (v2)
 * Surface uses primitives from bn-base.css: .bn-card, .bn-btn, .bn-input,
 * .bn-textarea, .bn-badge, .bn-avatar, .bn-toggle, .bn-modal. Only edit-page
 * composition lives here. Hero reuses .bn-pf-* classes so view + edit feel
 * like the same surface.
 * No prototype — composed from PLAN.md Part 3 primitives.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Layout shell ──────────────────────────────────────────────────────── */
.bn-ep-wrap {
	font-family: var(--bn-font-ui);
	font-size: var(--bn-text-base);
	color: var(--bn-ink);
	background: var(--bn-canvas);
	-webkit-font-smoothing: antialiased;
	padding-block-end: var(--bn-s16);
}

.bn-ep-shell {
	/* Fill the full main content column — identical to the profile VIEW page
	   (.bn-pf-stack has no max-width and spans .bn-app__main 100%). A previous
	   1180px cap left a large dead gap on wide screens (the form pinned left
	   while the right half sat empty), which read as the layout "shifting to
	   the left". The 1fr form column now grows with the column; the fixed
	   300px preview rail keeps the form line-length comfortable on its own. */
	width: 100%;
	margin-inline: 0;
	padding: var(--bn-s5) var(--bn-s5);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--bn-s4);
	align-items: start;
}

.bn-ep-title-row {
	grid-column: 1 / -1;
	margin-block-end: var(--bn-s1);
}
.bn-ep-title {
	margin: 0;
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-2xl);
	font-weight: 800;
	letter-spacing: var(--bn-ls-tight);
	color: var(--bn-ink);
	line-height: var(--bn-leading-tight);
}
.bn-ep-subtitle {
	margin: var(--bn-s1) 0 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
}

.bn-ep-form {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
}

/* ── Hero composition (reuses .bn-pf-* visual language) ───────────────── */
.bn-ep-hero { overflow: hidden; padding: 0; }

.bn-ep-hero-head {
	gap: var(--bn-s4);
}

.bn-ep-avatar-wrap {
	position: relative;
}
.bn-ep-avatar-wrap .bn-avatar[data-size="2xl"] {
	border: 4px solid var(--bn-surface);
	box-shadow: var(--bn-shadow-md);
	background: var(--bn-accent);
	color: var(--bn-accent-fg);
	overflow: hidden;
}
.bn-ep-avatar-wrap .bn-avatar[data-size="2xl"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.bn-ep-avatar-btn {
	position: absolute;
	inset-block-end: var(--bn-s1);
	inset-inline-end: var(--bn-s1);
	width: 32px;
	height: 32px;
	border-radius: var(--bn-r-full);
	background: var(--bn-accent);
	color: var(--bn-accent-fg);
	border: 2px solid var(--bn-surface);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--bn-dur-fast) var(--bn-ease);
}
.bn-ep-avatar-btn svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
}
.bn-ep-avatar-btn:hover,
.bn-ep-avatar-btn:focus-visible { background: var(--bn-accent-700); }
.bn-ep-avatar-btn:focus-visible { box-shadow: var(--bn-ring); outline: none; }

/* Remove-photo control — mirrors the edit pencil at the avatar's bottom-left,
   so the two controls flank the avatar without disturbing the hero layout. */
.bn-ep-avatar-remove {
	position: absolute;
	inset-block-end: var(--bn-s1);
	inset-inline-start: var(--bn-s1);
	width: 32px;
	height: 32px;
	border-radius: var(--bn-r-full);
	background: var(--bn-surface);
	color: var(--bn-danger);
	border: 2px solid var(--bn-surface);
	box-shadow: var(--bn-shadow-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--bn-dur-fast) var(--bn-ease), color var(--bn-dur-fast) var(--bn-ease);
}
.bn-ep-avatar-remove svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
}
.bn-ep-avatar-remove:hover,
.bn-ep-avatar-remove:focus-visible {
	background: var(--bn-danger);
	color: var(--bn-accent-fg);
}
.bn-ep-avatar-remove:focus-visible { box-shadow: var(--bn-ring); outline: none; }
.bn-ep-avatar-remove[hidden] { display: none; }

.bn-ep-cover-btn {
	cursor: pointer;
}

.bn-ep-hero-id {
	min-width: 0;
	padding-block-start: var(--bn-s4);
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
}
.bn-ep-hero-field {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}
.bn-ep-hero-label {
	font-size: var(--bn-text-xs);
	font-weight: 600;
	color: var(--bn-ink-3);
	font-family: var(--bn-font-mono);
	letter-spacing: var(--bn-ls-wide);
	text-transform: uppercase;
}
.bn-ep-hero-name {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-xl);
	font-weight: 700;
	letter-spacing: var(--bn-ls-tight);
	color: var(--bn-ink);
}
.bn-ep-hero-headline {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
}
.bn-ep-hero-handle {
	display: flex;
	gap: var(--bn-s2);
}

.bn-ep-file-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Card section ─────────────────────────────────────────────────────── */
.bn-ep-card { padding: 0; overflow: hidden; }
.bn-ep-card-header {
	padding: var(--bn-s4) var(--bn-s5) var(--bn-s3);
	border-block-end: 1px solid var(--bn-line-faint);
}
.bn-ep-card-title {
	margin: 0;
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-base);
	font-weight: 700;
	color: var(--bn-ink);
	letter-spacing: var(--bn-ls-tight);
}
.bn-ep-card-subtitle {
	margin: var(--bn-s1) 0 0;
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}
.bn-ep-card-body {
	padding: var(--bn-s5);
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
}
.bn-ep-card-footer {
	padding: var(--bn-s3) var(--bn-s5) var(--bn-s5);
	border-block-start: 1px solid var(--bn-line-faint);
}

/* ── Field rows ───────────────────────────────────────────────────────── */
.bn-ep-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bn-s4);
}
.bn-ep-field {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
	min-width: 0;
}
.bn-ep-field--full { grid-column: 1 / -1; }
.bn-ep-label {
	font-size: var(--bn-text-sm);
	font-weight: 600;
	color: var(--bn-ink);
	line-height: var(--bn-leading-snug);
}
.bn-ep-hint {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	line-height: var(--bn-leading-snug);
}
.bn-ep-field-help {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	line-height: var(--bn-leading-snug);
	margin: 0;
}

/* ── Field head: label (left) + per-field privacy chip (right) ─────────────
 * The privacy control is a quiet, compact "lock" dropdown that sits on the
 * label row — NOT a full-width input stacked above the field. Without this
 * the .bn-input select fell back to width:100% and read as a duplicate box. */
.bn-ep-field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s2);
}
.bn-ep-field-head .bn-ep-label {
	min-width: 0;
}
.bn-ep-field-vis {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	color: var(--bn-ink-3);
}
.bn-ep-field-vis__label {
	display: inline-flex;
	align-items: center;
	color: var(--bn-ink-3);
}
.bn-ep-vis-lock {
	width: 13px;
	height: 13px;
}
/* Compact ghost select — overrides the full-width .bn-input it also carries. */
.bn-ep-field-vis__select.bn-input {
	width: auto;
	min-width: 0;
	height: 26px;
	padding-block: 0;
	padding-inline: var(--bn-s2) var(--bn-s2);
	font-size: var(--bn-text-xs);
	font-weight: 500;
	color: var(--bn-ink-2);
	background-color: transparent;
	border-color: transparent;
	border-radius: var(--bn-r-sm);
	cursor: pointer;
	transition: background-color var(--bn-dur) var(--bn-ease),
				border-color var(--bn-dur) var(--bn-ease);
}
.bn-ep-field-vis__select.bn-input:hover {
	background-color: var(--bn-sunken);
	border-color: var(--bn-line);
	color: var(--bn-ink);
}
.bn-ep-field-vis__select.bn-input:focus-visible {
	border-color: var(--bn-accent);
	color: var(--bn-ink);
}

/* ── Appearance (theme + text-scale) ─────────────────────────────────── */
.bn-ep-appearance {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
}
.bn-ep-segmented {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	background: var(--bn-sunken);
}
.bn-ep-segmented__btn[aria-pressed="true"] {
	background: var(--bn-surface);
	color: var(--bn-ink);
	box-shadow: var(--bn-shadow-sm);
}

/* ── Repeater rows ────────────────────────────────────────────────────── */
.bn-ep-repeater-entry {
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	padding: var(--bn-s4);
	background: var(--bn-canvas);
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
}
.bn-ep-repeater-entry + .bn-ep-repeater-entry { margin-block-start: var(--bn-s3); }
.bn-ep-repeater-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bn-ep-repeater-num {
	font-family: var(--bn-font-mono);
	font-size: var(--bn-text-xs);
	font-weight: 600;
	color: var(--bn-ink-3);
	letter-spacing: var(--bn-ls-wide);
	text-transform: uppercase;
}
.bn-ep-repeater-remove {
	min-width: 32px;
	padding-inline: var(--bn-s2);
}
.bn-ep-repeater-remove:hover { color: var(--bn-danger); }
.bn-ep-repeater-remove svg { width: 14px; height: 14px; }

.bn-ep-add-entry {
	width: 100%;
	border: 1px dashed var(--bn-line-strong);
	background: transparent;
	color: var(--bn-ink-2);
	justify-content: center;
}
.bn-ep-add-entry:hover {
	border-color: var(--bn-accent);
	color: var(--bn-accent);
	background: var(--bn-accent-100);
}
.bn-ep-add-entry svg { width: 14px; height: 14px; }

/* ── Tag input (interests) ────────────────────────────────────────────── */
.bn-ep-tags-area {
	background: var(--bn-sunken);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	padding: var(--bn-s2) var(--bn-s3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s1);
	align-items: center;
	min-height: 44px;
	cursor: text;
	transition: border-color var(--bn-dur-fast) var(--bn-ease), background var(--bn-dur-fast) var(--bn-ease);
}
.bn-ep-tags-area:focus-within {
	border-color: var(--bn-accent);
	background: var(--bn-surface);
	box-shadow: var(--bn-ring);
}
.bn-ep-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
}
.bn-ep-tag-remove {
	cursor: pointer;
	background: none;
	border: none;
	color: inherit;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
	transition: opacity var(--bn-dur-fast) var(--bn-ease);
}
.bn-ep-tag-remove:hover,
.bn-ep-tag-remove:focus-visible { opacity: 1; }
.bn-ep-tag-remove:focus-visible {
	outline: none;
	box-shadow: var(--bn-ring);
	border-radius: var(--bn-r-sm);
}
.bn-ep-tag-remove svg { width: 10px; height: 10px; }
.bn-ep-tag-input {
	border: none;
	background: transparent;
	font-family: var(--bn-font-ui);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink);
	outline: none;
	min-width: 120px;
	flex: 1;
	min-height: 28px;
}
.bn-ep-tag-input::placeholder { color: var(--bn-ink-4); }

/* ── Toggles section ──────────────────────────────────────────────────── */
.bn-ep-toggles {
	padding-block: var(--bn-s2);
	gap: 0;
}

/* ── Account rows ─────────────────────────────────────────────────────── */
.bn-ep-account-rows {
	padding-block: 0;
	gap: 0;
}
.bn-ep-account-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s4);
	padding: var(--bn-s4) var(--bn-s5);
	border-block-end: 1px solid var(--bn-line-faint);
}
.bn-ep-account-row:last-child { border-block-end: none; }
.bn-ep-account-copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}
.bn-ep-account-label {
	font-size: var(--bn-text-sm);
	font-weight: 600;
	color: var(--bn-ink);
}
.bn-ep-account-value {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}

/* ── Slug row ─────────────────────────────────────────────────────────── */
.bn-ep-slug-row {
	padding: var(--bn-s4) var(--bn-s5);
	border-block-end: 1px solid var(--bn-line-faint);
}
.bn-ep-slug-base {
	font-family: var(--bn-font-mono);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}
.bn-ep-slug-field {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	flex-wrap: wrap;
}
.bn-ep-slug-input-wrap {
	position: relative;
	flex: 1;
	min-width: 180px;
}
.bn-ep-slug-input { padding-inline-end: var(--bn-s8); }
.bn-ep-slug-indicator {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--bn-s3);
	transform: translateY(-50%);
	font-size: var(--bn-text-xs);
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
}
.bn-ep-slug-indicator svg { width: 14px; height: 14px; }
.bn-ep-slug-ok { color: var(--bn-success); }
.bn-ep-slug-err { color: var(--bn-danger); }

/* ── Danger zone ──────────────────────────────────────────────────────── */
.bn-ep-danger { border-color: var(--bn-danger-bg); }
.bn-ep-danger .bn-ep-card-title { color: var(--bn-danger); }

/* ── Sidebar widgets ──────────────────────────────────────────────────── */
.bn-ep-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
	position: sticky;
	inset-block-start: calc(var(--bn-topbar-h) + var(--bn-s4));
	min-width: 0;
}

.bn-ep-preview-card { overflow: hidden; padding: 0; }
.bn-ep-preview-header {
	padding: var(--bn-s3) var(--bn-s4);
	border-block-end: 1px solid var(--bn-line-faint);
	font-family: var(--bn-font-mono);
	font-size: var(--bn-text-xs);
	font-weight: 700;
	color: var(--bn-ink-3);
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wider);
}
.bn-ep-preview-body {
	padding: var(--bn-s4);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bn-s2);
}
.bn-ep-preview-avatar {
	background: var(--bn-accent);
	color: var(--bn-accent-fg);
	overflow: hidden;
}
.bn-ep-preview-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.bn-ep-preview-name {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-base);
	font-weight: 700;
	color: var(--bn-ink);
}
.bn-ep-preview-headline {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-2);
	line-height: var(--bn-leading-snug);
}
.bn-ep-preview-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bn-s2);
	margin-block-start: var(--bn-s2);
	padding-block-start: var(--bn-s3);
	border-block-start: 1px solid var(--bn-line-faint);
	width: 100%;
}
.bn-ep-preview-stat { min-width: 0; }
.bn-ep-preview-stat-num {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-base);
	font-weight: 700;
	color: var(--bn-ink);
	line-height: var(--bn-leading-tight);
}
.bn-ep-preview-stat-lbl {
	font-family: var(--bn-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--bn-ls-wider);
	text-transform: uppercase;
	color: var(--bn-ink-4);
}
.bn-ep-preview-note {
	padding: var(--bn-s3) var(--bn-s4);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	background: var(--bn-sunken);
	border-block-start: 1px solid var(--bn-line-faint);
	line-height: var(--bn-leading-snug);
}

.bn-ep-visibility-card { padding: var(--bn-s4); }
.bn-ep-vis-title {
	display: block;
	font-family: var(--bn-font-mono);
	font-size: var(--bn-text-xs);
	font-weight: 700;
	color: var(--bn-ink-3);
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wider);
	margin-block-end: var(--bn-s3);
}
.bn-ep-vis-row {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	padding-block: var(--bn-s1);
}
.bn-ep-vis-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--bn-r-full);
	flex-shrink: 0;
}
.bn-ep-vis-dot--public    { background: var(--bn-success); }
.bn-ep-vis-dot--followers { background: var(--bn-accent); }
.bn-ep-vis-dot--private   { background: var(--bn-ink-3); }
.bn-ep-vis-label {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-2);
	display: inline-flex;
	gap: var(--bn-s1);
	flex-wrap: wrap;
}
.bn-ep-vis-label strong { color: var(--bn-ink); font-weight: 600; }
.bn-ep-vis-note {
	margin-block-start: var(--bn-s3);
	padding-block-start: var(--bn-s3);
	border-block-start: 1px solid var(--bn-line-faint);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	line-height: var(--bn-leading-snug);
}

/* ── Sticky save bar ──────────────────────────────────────────────────── */
.bn-ep-save-bar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	background: var(--bn-surface);
	border-block-start: 1px solid var(--bn-line);
	box-shadow: var(--bn-shadow-sm);
	padding-inline: var(--bn-s5);
	min-height: 64px;
	display: flex;
	align-items: center;
	z-index: 180;
}
.bn-ep-save-bar-inner {
	max-width: 1080px;
	margin-inline: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s3);
}
.bn-ep-save-status {
	font-size: var(--bn-text-sm);
	font-weight: 600;
	color: var(--bn-success);
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
}
.bn-ep-save-status svg { width: 14px; height: 14px; }
.bn-ep-save-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2);
	margin-inline-start: auto;
}

/* ── Delete modal helpers ─────────────────────────────────────────────── */
.bn-ep-delete-backdrop[hidden] { display: none !important; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bn-ep-shell { grid-template-columns: 1fr; }
	.bn-ep-sidebar { position: static; inset-block-start: auto; }
}

@media (max-width: 720px) {
	.bn-ep-shell { padding: var(--bn-s4); }
	.bn-ep-hero-head { grid-template-columns: 1fr; }
	.bn-ep-grid { grid-template-columns: 1fr; }
	.bn-ep-save-bar { padding-inline: var(--bn-s4); }
	.bn-ep-save-status { display: none; }
	.bn-ep-slug-field { flex-direction: column; align-items: stretch; }
	.bn-ep-account-row { flex-direction: column; align-items: flex-start; gap: var(--bn-s2); }
}

/* Owner action bar removed — Edit profile / Share live in the hero action
   cluster, Edit cover on the cover, Edit avatar as a badge on the avatar
   (.bn-pf-avatar-edit). The standalone toolbar was a redundant duplicate. */

/* -------------------------------------------------------------------------
 * F6 + F7 + F8: Profile production-grade additions
 * ------------------------------------------------------------------------- */

/* F6 - Edit page: dirty / saving status pills + inline field errors. */
.bn-ep-required {
	color: var(--bn-danger);
	margin-inline-start: 2px;
	font-weight: 600;
}
.bn-ep-field-error {
	display: block;
	margin-block-start: var(--bn-s1);
	color: var(--bn-danger);
	font-size: var(--bn-text-xs);
	font-weight: 500;
	line-height: var(--bn-leading-snug);
}
.bn-ep-field-error[hidden] { display: none !important; }
.bn-input--error {
	border-color: var(--bn-danger) !important;
	background-color: var(--bn-danger-50, rgba(220, 38, 38, 0.04));
}
.bn-input--error:focus-visible {
	outline-color: var(--bn-danger);
	box-shadow: 0 0 0 3px var(--bn-danger-100, rgba(220, 38, 38, 0.12));
}
/* Field wrapper flagged invalid by the store (context.errors[ key ]). The
   dynamic FieldType controls don't carry .bn-input--error, so colour their
   control here for the same red-border affordance as the hero name field. */
.bn-ep-field--error .bn-input,
.bn-ep-field--error .bn-textarea,
.bn-ep-field--error .bn-field-textarea {
	border-color: var(--bn-danger) !important;
	background-color: var(--bn-danger-50, rgba(220, 38, 38, 0.04));
}
.bn-ep-save-status[hidden] { display: none !important; }
.bn-ep-save-status--dirty {
	color: var(--bn-warning, #b45309);
	font-weight: 600;
	font-size: var(--bn-text-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
}
.bn-ep-save-status--saving {
	color: var(--bn-ink-2);
	font-weight: 500;
	font-size: var(--bn-text-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
}
.bn-ep-dirty-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bn-warning, #f59e0b);
	flex-shrink: 0;
}
.bn-ep-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid var(--bn-line);
	border-top-color: var(--bn-accent);
	border-radius: 50%;
	animation: bn-spin 0.8s linear infinite;
	flex-shrink: 0;
}
@keyframes bn-spin {
	to { transform: rotate(360deg); }
}

/* F7 - View page: social chip row + about-section cards + timeline + tag cloud. */
.bn-pf-social-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s2);
	margin-block-start: var(--bn-s3);
}
.bn-pf-social-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s1);
	padding: var(--bn-s1) var(--bn-s3);
	border-radius: 999px;
	background: var(--bn-sunken);
	border: 1px solid var(--bn-line);
	color: var(--bn-ink);
	text-decoration: none;
	font-size: var(--bn-text-sm);
	font-weight: 500;
	transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.bn-pf-social-chip:hover,
.bn-pf-social-chip:focus-visible {
	background: var(--bn-surface);
	border-color: var(--bn-line-strong);
	transform: translateY(-1px);
}
.bn-pf-social-chip svg { width: 14px; height: 14px; }
.bn-pf-social-chip[data-social="social_twitter"]   { color: #1da1f2; }
.bn-pf-social-chip[data-social="social_linkedin"]  { color: #0a66c2; }
.bn-pf-social-chip[data-social="social_github"]    { color: var(--bn-ink); }
.bn-pf-social-chip[data-social="social_instagram"] { color: #e1306c; }
.bn-pf-social-chip[data-social="social_youtube"]   { color: #ff0000; }

/* Brand colours are fixed by definition, but the darker ones (LinkedIn,
   Twitter) lose contrast on a dark surface — lift their lightness in dark mode
   so the icon stays legible without abandoning the brand hue. github already
   follows --bn-ink and needs no adjustment. */
[data-bn-theme="dark"] .bn-pf-social-chip[data-social^="social_"]:not([data-social="social_github"]),
[data-theme="dark"] .bn-pf-social-chip[data-social^="social_"]:not([data-social="social_github"]),
[data-bx-mode="dark"] .bn-pf-social-chip[data-social^="social_"]:not([data-social="social_github"]) {
	filter: brightness(1.35) saturate(1.05);
}

.bn-pf-about-card {
	padding: var(--bn-s5);
	margin-block-start: var(--bn-s4);
}
.bn-pf-about-card__header {
	margin-block-end: var(--bn-s4);
}
.bn-pf-about-card__title {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2);
	font-size: var(--bn-text-md);
	font-weight: 600;
	color: var(--bn-ink);
	margin: 0;
}
.bn-pf-about-card__title svg {
	width: 18px;
	height: 18px;
	color: var(--bn-accent);
}

.bn-pf-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
}
.bn-pf-timeline__item {
	position: relative;
	padding-inline-start: var(--bn-s5);
}
.bn-pf-timeline__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	inset-block: var(--bn-s2) calc(-1 * var(--bn-s4));
	width: 2px;
	background: var(--bn-line);
}
.bn-pf-timeline__item:last-child::before { display: none; }
.bn-pf-timeline__dot {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--bn-s1);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bn-accent);
	border: 2px solid var(--bn-surface);
	box-shadow: 0 0 0 2px var(--bn-line);
}
.bn-pf-timeline__body {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}
.bn-pf-timeline__title {
	font-size: var(--bn-text-sm);
	font-weight: 600;
	color: var(--bn-ink);
}
.bn-pf-timeline__sub {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
}
.bn-pf-timeline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s2);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}
.bn-pf-timeline__meta span:not(:last-child)::after {
	content: "·";
	margin-inline-start: var(--bn-s2);
	color: var(--bn-ink-3);
}
.bn-pf-timeline__desc {
	margin: var(--bn-s1) 0 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	line-height: var(--bn-leading-normal);
}

.bn-pf-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s2);
}
.bn-pf-tag-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--bn-s1) var(--bn-s3);
	border-radius: 999px;
	background: var(--bn-accent-100, rgba(59, 130, 246, 0.1));
	color: var(--bn-accent);
	text-decoration: none;
	font-size: var(--bn-text-sm);
	font-weight: 500;
	transition: background 120ms ease, transform 120ms ease;
}
.bn-pf-tag-chip:hover,
.bn-pf-tag-chip:focus-visible {
	background: var(--bn-accent);
	color: var(--bn-accent-fg);
	transform: translateY(-1px);
}

/* F8 - Report + block confirm modals: extend bn-modal primitive. */
.bn-pf-report-backdrop[hidden],
.bn-pf-block-backdrop[hidden] { display: none !important; }
.bn-modal__list {
	margin: var(--bn-s2) 0 var(--bn-s3);
	padding-inline-start: var(--bn-s5);
	color: var(--bn-ink-2);
	font-size: var(--bn-text-sm);
	line-height: var(--bn-leading-normal);
}
.bn-modal__list li { margin-block-end: var(--bn-s1); }
.bn-modal__help {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	margin: var(--bn-s2) 0 var(--bn-s3);
	line-height: var(--bn-leading-snug);
}

@media (max-width: 640px) {
	.bn-pf-about-card { padding: var(--bn-s4); }
}

/* ── Two-factor authentication panel (Account section) ─────────────────────── */
.bn-2fa-stage {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
}

.bn-2fa-desc {
	margin: 0;
	color: var(--bn-ink-2);
	font-size: var(--bn-text-sm, 0.875rem);
	line-height: 1.5;
}

.bn-2fa-secret {
	display: inline-block;
	font-family: var(--bn-font-mono);
	font-size: 1.05rem;
	letter-spacing: 0.18em;
	padding: var(--bn-s2) var(--bn-s3);
	background: var(--bn-surface-2, var(--bn-canvas));
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	word-break: break-all;
	user-select: all;
}

.bn-2fa-codes {
	list-style: none;
	margin: 0;
	padding: var(--bn-s3);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bn-s2);
	background: var(--bn-surface-2, var(--bn-canvas));
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
}

.bn-2fa-codes li {
	font-family: var(--bn-font-mono);
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--bn-ink-1);
	text-align: center;
}

@media ( max-width: 640px ) {
	.bn-2fa-codes {
		grid-template-columns: 1fr;
	}
}


/* ── Your data section (export / delete account) ──────────────────────────── */
.bn-ep-data-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s4);
	flex-wrap: wrap;
	padding-block: var(--bn-s3);
	border-block-end: 1px solid var(--bn-line-faint);
}

.bn-ep-data-row:last-child {
	border-block-end: 0;
}

.bn-ep-data-row__text {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
	flex: 1 1 16rem;
}

.bn-ep-data-row__text strong {
	color: var(--bn-ink);
	font-weight: var(--bn-fw-medium);
}

.bn-ep-data-row__text span {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
}

@media (max-width: 640px) {
	.bn-ep-data-row .bn-btn {
		width: 100%;
	}
}