/* Follow button + stats + suggestions — 1.22.165
 * One stylesheet covers every surface (profile header, folks
 * directory cards, follower / following lists, suggested-follows
 * widget). Visual variants are switched via modifier classes
 * (.wpf-follow-btn--solid / --outline / --compact) so the JS toggle
 * handler doesn't have to know which surface it lives on.
 */

.wpf-follow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--color-text, #1e1e1e);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
	white-space: nowrap;
}

.wpf-follow-btn:hover {
	transform: translateY(-1px);
}

.wpf-follow-btn[aria-pressed="true"],
.wpf-follow-btn.is-following {
	background: transparent;
	color: var(--color-text, #1e1e1e);
	border-color: var(--color-border, #d1d5db);
}

.wpf-follow-btn[aria-pressed="true"]:hover,
.wpf-follow-btn.is-following:hover {
	background: #fff5f5;
	color: #b00020;
	border-color: #b00020;
}

/* Dark profile hero override. Default not-following state already
 * reads (dark bg + white text on the navy hero), but the
 * is-following state collapses to dark-on-dark — invert it for
 * dark surfaces so "Following" stays legible. */
.profile-hero .wpf-follow-btn[aria-pressed="true"],
.profile-hero .wpf-follow-btn.is-following {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.profile-hero .wpf-follow-btn[aria-pressed="true"]:hover,
.profile-hero .wpf-follow-btn.is-following:hover {
	background: rgba(220, 38, 38, 0.15);
	color: #ff8a8a;
	border-color: #ff8a8a;
}

.wpf-follow-btn--outline {
	background: transparent;
	color: var(--color-text, #1e1e1e);
	border-color: var(--color-text, #1e1e1e);
}

.wpf-follow-btn--outline:hover {
	background: var(--color-text, #1e1e1e);
	color: #fff;
}

.wpf-follow-btn--compact {
	min-height: 30px;
	padding: 6px 14px;
	font-size: 13px;
}

/* 1.22.173 — `--link` variant: plain inline text link. Used inside
 * the post-card header next to @handle so the follow affordance
 * stays close to the author identity instead of off in the corner.
 * No background, no border, no padding. Color matches the brand
 * link colour; toggles to muted-secondary on the following state. */
.wpf-follow-btn--link {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	min-height: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: inherit;
	color: var(--color-link, #2145e6);
	cursor: pointer;
	white-space: nowrap;
	border-radius: 0;
}

.wpf-follow-btn--link:hover {
	transform: none;
	text-decoration: underline;
}

.wpf-follow-btn--link[aria-pressed="true"],
.wpf-follow-btn--link.is-following {
	background: transparent;
	color: var(--color-text-secondary, #50575e);
	border: 0;
	font-weight: 500;
}

.wpf-follow-btn--link[aria-pressed="true"]:hover,
.wpf-follow-btn--link.is-following:hover {
	background: transparent;
	color: #b00020;
	border: 0;
	box-shadow: none;
}

.wpf-follow-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Followers / following stats below the @handle on profile header.
 *
 * Light-themed by default so they read on the dark profile hero.
 * Surfaces with a light background (the follower / following list
 * pages) override via `.profile-bg--light` or fall back to the
 * `:not(.profile-hero) .wpf-follow-stats` cascade defined below.
 */
.wpf-follow-stats {
	display: inline-flex;
	gap: 18px;
	align-items: baseline;
	margin: 8px 0 4px;
	flex-wrap: wrap;
}

.wpf-follow-stats__item {
	display: inline-flex;
	gap: 5px;
	align-items: baseline;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	line-height: 1.3;
}

.wpf-follow-stats__item:hover {
	color: #fff;
}

.wpf-follow-stats__count {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}

/* Light-bg fallback for surfaces that aren't the dark profile hero
 * (e.g. the follower / following list page). Detect via the absence
 * of an ancestor `.profile-hero` is impossible in CSS — so we
 * affirmatively style the list-page container. */
.wpf-follow-list-page .wpf-follow-stats__item {
	color: var(--color-text-secondary, #50575e);
}
.wpf-follow-list-page .wpf-follow-stats__item:hover {
	color: var(--color-text, #1e1e1e);
}
.wpf-follow-list-page .wpf-follow-stats__count {
	color: var(--color-text, #1e1e1e);
}

/* Suggested-follows widget. */
.wpf-follow-suggestions {
	background: var(--color-white, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 12px;
	padding: 18px 16px;
}

.wpf-follow-suggestions__heading {
	font-family: var(--font-heading, Georgia), serif;
	font-size: 16px;
	font-weight: 400;
	margin: 0 0 12px;
	color: var(--color-text, #1e1e1e);
}

.wpf-follow-suggestions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wpf-follow-suggestions__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wpf-follow-suggestions__avatar {
	flex: none;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
}

.wpf-follow-suggestions__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wpf-follow-suggestions__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.wpf-follow-suggestions__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #1e1e1e);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpf-follow-suggestions__tagline {
	font-size: 12px;
	color: var(--color-text-secondary, #50575e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpf-follow-suggestions__action {
	flex: none;
}

/* Feed tabs (All / Following) above the compose box. */
.feed-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--color-border, #e5e7eb);
	margin-bottom: 16px;
}

.feed-tabs__tab {
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text-secondary, #50575e);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
}

.feed-tabs__tab:hover {
	color: var(--color-text, #1e1e1e);
}

.feed-tabs__tab.is-active {
	color: var(--color-text, #1e1e1e);
	border-bottom-color: var(--color-text, #1e1e1e);
}

/* "X reacted to this" surfacing strip on Following-tab cards.
 * Belt-and-suspenders spacing: flex `gap` between icon and text,
 * AND inside the text span the link gets `margin-right` so the gap
 * between the name and the verb is enforced even if HTML whitespace
 * collapses or `gap` doesn't apply on certain layouts.
 */
.feed-post__surfacing {
	display: flex;
	align-items: center;
	gap: 0px;
	font-size: 12px;
	color: var(--color-text-secondary, #50575e);
	padding: 5px 0px 0;
	margin-bottom: 10px;
}

.feed-post__surfacing-icon {
	flex: none;
	font-size: 14px;
	line-height: 1;
	margin-right: 10px;
}

.feed-post__surfacing-text {
	flex: 1 1 auto;
	min-width: 0;
}

.feed-post__surfacing-text a {
	color: var(--color-text, #1e1e1e);
	font-weight: 600;
	text-decoration: none;
	margin-right: 4px;
}

.feed-post__surfacing-text a:hover {
	text-decoration: underline;
}

/* Backwards-compat for the old structure (a + span as direct flex
 * children) in case any cached card markup is still on the page
 * before a hard refresh. */
.feed-post__surfacing > a {
	color: var(--color-text, #1e1e1e);
	font-weight: 600;
	text-decoration: none;
	margin-right: 4px;
}
.feed-post__surfacing > a:hover {
	text-decoration: underline;
}

/* Tiny middot separator between @handle and the inline Follow link
 * inside the post-card name span. */
.feed-post-name__sep {
	display: inline-block;
	margin: 0 6px;
	color: var(--color-text-secondary, #50575e);
	font-size: 12px;
}

/* Folks directory card actions row (View Profile + Follow).
 *
 * 1.22.174 — The card-level rule `.member-card .btn { width: 100% }`
 * (in members.css) was making View Profile full-width, which forced
 * the Follow button to wrap to a second line. Override here so both
 * actions share the row equally, same height, side-by-side. */
.member-card__actions {
	display: flex;
	gap: 8px;
	align-items: stretch;
	justify-content: center;
	margin-top: auto;
	padding-top: 12px;
}

.member-card__actions .btn,
.member-card__actions .wpf-follow-btn {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin-top: 0;
}

.member-card__actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* 1.22.175 — Match the directory's `.btn--sm` chrome so View and
 * Follow look like a matched pair (small outline pills). */
.member-card__actions .wpf-follow-btn,
.member-card__actions .btn {
	min-height: 0;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 999px;
	white-space: nowrap;
}