/* social.css — the /social section (feed, profiles, about, work, posts).
   Loaded by head.php for /social. Scoped to body[data-page="social"] so the
   section's generic part names (avatar, photo, handle…) never reach other
   pages. Token-driven (light / dark / high contrast), rem at the 20px root. */

[data-page="social"] {
	--so-muted: color-mix(in srgb, var(--primary-text-color) 70%, transparent);
	--so-line: color-mix(in srgb, var(--primary-text-color) 14%, transparent);
	/* A card is the page colour with a little of the text colour in it: a shade
	   darker in light mode, lighter in dark, near-black in high contrast. Was
	   --shade-1, which is white in high contrast — white text on white cards. */
	--so-card: color-mix(in srgb, var(--primary-text-color) 5%, var(--bg-color));
	--so-radius: 0.6rem;
	/* The side column grows a little with the page; the feed takes the rest,
	   so both follow Accessibility → Content width. */
	--so-side: clamp(16rem, 28%, 24rem);
	/* Text inside a post stays at a readable line length however wide. */
	--so-measure: 46rem;
}

/* High contrast: card edges at full strength, as that mode asks. */
[data-accessibility~="high-contrast"] [data-page="social"] {
	--so-line: var(--primary-text-color);
}

/* Kept for screen readers, out of sight (the post page's h1). */
[data-page="social"] [data-visually-hidden] {
	position: absolute;
	width: 0.05rem;
	height: 0.05rem;
	margin: -0.05rem;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* base.css gives every main li a "●" and a hanging indent — not here. */
[data-page="social"] main :where(ul[data-part]) {
	list-style: none;
	margin: 0;
	padding: 0;
}

[data-page="social"] main :where(ul[data-part] > li) {
	padding: 0;
	text-indent: 0;
	line-height: inherit;
}

[data-page="social"] main :where(ul[data-part] > li)::before {
	content: none;
}

[data-page="social"] [data-part="lead"] {
	max-width: 42rem;
}

[data-page="social"] [data-part="empty"] {
	color: var(--so-muted);
}

/* ── Columns: the feed and a side column / the intro and the feed ─────── */
[data-page="social"] [data-part="columns"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--so-side);
	gap: var(--spacing-xx-large);
	align-items: start;
	margin-top: var(--spacing-normal);
}

[data-page="social"] [data-part="profile-columns"] {
	display: grid;
	grid-template-columns: var(--so-side) minmax(0, 1fr);
	gap: var(--spacing-xx-large);
	align-items: start;
	margin-top: var(--spacing-large);
}

[data-page="social"] [data-part="profile-columns"][data-intro="none"] {
	grid-template-columns: minmax(0, 1fr);
}

[data-page="social"] [data-part="feed-col"] {
	min-width: 0;
	container: so-feed / inline-size;
}

@container page (max-width: 48rem) {
	[data-page="social"] [data-part="columns"],
	[data-page="social"] [data-part="profile-columns"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Cards in the side column and the intro ──────────────────────────── */
[data-page="social"] [data-part="side-card"],
[data-page="social"] [data-part="intro"] {
	padding: var(--spacing-normal);
	border: 0.05rem solid var(--so-line);
	border-radius: var(--so-radius);
	background: var(--so-card);
}

[data-page="social"] [data-part="sidebar"] {
	display: grid;
	gap: var(--spacing-normal);
	position: sticky;
	top: var(--spacing-normal);
}

[data-page="social"] [data-part="side-card"] h2,
[data-page="social"] [data-part="intro"] h2 {
	margin: 0 0 var(--spacing-x-small);
	font-size: var(--font-size-medium);
}

[data-page="social"] [data-part="side-card"] p {
	margin: 0 0 var(--spacing-small);
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

[data-page="social"] [data-part="people"] {
	display: grid;
	gap: var(--spacing-x-small);
}

[data-page="social"] [data-part="people"] a {
	display: flex;
	align-items: center;
	gap: var(--spacing-x-small);
	color: var(--primary-text-color);
	text-decoration: none;
}

[data-page="social"] [data-part="people"] img {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--so-line);
}

[data-page="social"] [data-part="people-text"] {
	display: grid;
	line-height: 1.2;
}

[data-page="social"] [data-part="people-name"] {
	font-weight: 600;
}

[data-page="social"] [data-part="people"] a:hover [data-part="people-name"] {
	text-decoration: underline;
}

[data-page="social"] [data-part="people-handle"] {
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

[data-page="social"] [data-part="side-more"] {
	display: inline-block;
	margin-top: var(--spacing-small);
	font-size: var(--font-size-small);
	font-weight: 600;
}

[data-page="social"] [data-part="intro-bio"] {
	margin-bottom: var(--spacing-small);
}

[data-page="social"] [data-part="intro-details"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-x-small);
}

[data-page="social"] [data-part="intro-details"] [data-detail-label] {
	color: var(--so-muted);
}

[data-page="social"] [data-part="intro-details"] [data-icon] {
	margin-right: 0.25em;
}

/* ── Filters and profile tabs: one underlined tab bar ────────────────── */
/* The feed's type filter and a profile's Posts/About/Work read the same:
   a line under the row, the current tab marked in orange on it. */
[data-page="social"] [data-part="type-filter"],
[data-page="social"] [data-part="profile-tabs"] {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: var(--spacing-normal) 0 var(--spacing-large);
	padding: 0;
	border-bottom: 0.05rem solid var(--so-line);
}

[data-page="social"] [data-part="type-filter"] a,
[data-page="social"] [data-part="profile-tabs"] a {
	margin-bottom: -0.05rem;
	padding: var(--spacing-x-small) var(--spacing-normal);
	border-bottom: 0.15rem solid transparent;
	color: var(--so-muted);
	font-size: var(--font-size);
	font-weight: 600;
	text-decoration: none;
}

[data-page="social"] [data-part="type-filter"] a::after,
[data-page="social"] [data-part="profile-tabs"] a::after {
	content: none;
}

[data-page="social"] [data-part="type-filter"] a:hover,
[data-page="social"] [data-part="profile-tabs"] a:hover {
	color: var(--primary-text-color);
	border-bottom-color: var(--so-line);
}

[data-page="social"] [data-part="type-filter"] a[aria-current],
[data-page="social"] [data-part="profile-tabs"] a[aria-current] {
	color: var(--primary-text-color);
	border-bottom-color: var(--focus-color);
}

/* ── Feed and posts ──────────────────────────────────────────────────── */
[data-page="social"] [data-part="feed"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-normal);
}

/* A wide feed (Content width: extra wide / unlimited) becomes a masonry grid:
   two columns from 1000px of feed, three from 1500px (container rem = the
   20px root here, unlike media queries). A grid, not CSS columns, so the
   newest posts run across the top: each card spans as many 0.5rem rows as its
   height needs (--rows, set by social.js socialMasonryInit), so cards of
   different heights pack without gaps. The post page stays one column. */
@container so-feed (min-width: 50rem) {
	[data-page="social"] [data-part="feed"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 0.5rem;
		column-gap: var(--spacing-normal);
		row-gap: 0;
		align-items: start;
	}

	[data-page="social"] [data-part="feed"] > [data-component="social-post"] {
		grid-row-end: span var(--rows, 20);
		margin-bottom: var(--spacing-normal);
	}
}

@container so-feed (min-width: 75rem) {
	[data-page="social"] [data-part="feed"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


[data-page="social"] [data-component="social-post"] {
	padding: var(--spacing-normal);
	border: 0.05rem solid var(--so-line);
	border-radius: var(--so-radius);
	background: var(--so-card);
}

[data-page="social"] [data-component="social-post"][data-locked="1"] {
	border-style: dashed;
	background: none;
}

[data-page="social"] [data-part="post-head"] {
	display: flex;
	align-items: center;
	gap: var(--spacing-x-small);
	margin-bottom: var(--spacing-small);
}

[data-page="social"] [data-part="post-head"] [data-part="avatar"] {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	object-fit: cover;
}

[data-page="social"] [data-part="author"] {
	font-weight: 600;
	color: var(--primary-text-color);
	text-decoration: none;
}

[data-page="social"] a[data-part="author"]:hover {
	text-decoration: underline;
}

[data-page="social"] [data-part="timestamp"] {
	margin-left: auto;
	font-size: var(--font-size-small);
	color: var(--so-muted);
	text-decoration: none;
}

[data-page="social"] [data-component="social-post"] [data-part="body"],
[data-page="social"] [data-part="locked-note"],
[data-page="social"] [data-part="about-body"],
[data-page="social"] [data-part="entry-desc"] {
	max-width: var(--so-measure);
}

[data-page="social"] [data-post-type="short"] [data-part="body"] {
	font-size: var(--font-size-medium);
	line-height: var(--line-height-medium);
}

[data-page="social"] [data-part="photo"] {
	margin: 0;
}

/* A tall photo is shown whole but never taller than most of the screen. */
[data-page="social"] [data-part="photo"] img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(70vh, 28rem); /* a portrait shot shouldn't own the feed; the lightbox shows it whole */
	object-fit: contain;
	border-radius: calc(var(--so-radius) * 0.75);
	background: var(--so-line);
}

[data-page="social"] [data-part="photo"] figcaption {
	margin-top: var(--spacing-x-small);
	color: var(--so-muted);
}

[data-page="social"] [data-part="locked-note"] {
	margin: 0;
	color: var(--so-muted);
}

/* Under a post: the reactions on a row of their own, then an even action
   bar — Comment, Share, Open — like a social card's. Two deliberate rows, so
   nothing wraps at an odd place whatever the card's width. */
[data-page="social"] [data-part="post-foot"] {
	display: grid;
	gap: var(--spacing-small);
	margin-top: var(--spacing-small);
	/* All four sides: the site's own <footer> rule pads the bottom on phones
	   (room for the bottom bar), which a post's footer must not get. */
	padding: var(--spacing-small) 0 0;
	border-top: 0.05rem solid var(--so-line);
}

[data-page="social"] [data-part="post-actions"] {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--spacing-xx-small);
	padding-top: var(--spacing-x-small);
	border-top: 0.05rem solid var(--so-line);
}

/* In a feed the hint shows only on the post being pointed at or tabbed into,
   not under every post. */
[data-page="social"] [data-component="social-post"]:not([data-single])
	[data-part="post-foot"]:not(:hover):not(:focus-within)
	[data-part="consent-hint"] {
	display: none;
}

/* The action bar's buttons: quiet, full cell, highlighted on hover. */
[data-page="social"] [data-part="post-actions"] > button,
[data-page="social"] [data-part="post-actions"] > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-width: 0;
	padding: var(--spacing-x-small) var(--spacing-xx-small);
	border: 0;
	border-radius: calc(var(--so-radius) * 0.75);
	background: transparent;
	color: var(--so-muted);
	font: inherit;
	font-size: var(--font-size-small);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

[data-page="social"] [data-part="post-actions"] > button:hover,
[data-page="social"] [data-part="post-actions"] > a:hover,
[data-page="social"] [data-part="post-actions"] > [aria-expanded="true"] {
	background: var(--so-line);
	color: var(--primary-text-color);
}

[data-page="social"] [data-part="post-actions"] > a::after {
	content: none;
}

/* Subscribe (header, side column): a pill. */
[data-page="social"] [data-part="subscribe-btn"] {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: var(--spacing-xx-small) var(--spacing-small);
	border: 0.05rem solid var(--so-line);
	border-radius: 999px;
	background: transparent;
	color: var(--primary-text-color);
	font: inherit;
	font-size: var(--font-size-small);
	cursor: pointer;
}

[data-page="social"] [data-part="subscribe-btn"]:hover {
	border-color: var(--focus-color);
}

/* The thread, opened in the card (social.js loads it from the post page). */
[data-page="social"] [data-part="post-comments"] {
	margin-top: var(--spacing-small);
	padding-top: var(--spacing-small);
	border-top: 0.05rem solid var(--so-line);
}

[data-page="social"] [data-part="post-comments"][aria-busy="true"] {
	opacity: 0.6;
}

[data-page="social"] [data-part="post-comments"] [data-component="comments"] {
	margin-top: 0;
}

/* In the card the button above already says how many — no heading. */
[data-page="social"] [data-part="post-comments"] [data-component="comments"] > h2 {
	display: none;
}

[data-page="social"] [data-part="post-comments"] [data-part="comment-form"] h3 {
	font-size: var(--font-size);
	margin-bottom: var(--spacing-x-small);
}

/* A photo opens in the site's lightbox. */
[data-page="social"] [data-part="photo-link"] {
	display: block;
	cursor: zoom-in;
}

[data-page="social"] [data-part="photo-link"]::after {
	content: none;
}

/* ── Reactions ───────────────────────────────────────────────────────── */
[data-page="social"] [data-component="reactions"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-xx-small);
}

[data-page="social"] [data-component="reactions"] button {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.15rem var(--spacing-x-small);
	border: 0.05rem solid var(--so-line);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-family: "ApfelGrotezk", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
	cursor: pointer;
}

[data-page="social"] [data-component="reactions"] button:hover {
	border-color: var(--primary-text-color);
}

[data-page="social"] [data-component="reactions"] button[aria-pressed="true"] {
	border-color: var(--focus-color);
	background: color-mix(in srgb, var(--focus-color) 12%, transparent);
}

[data-page="social"] [data-component="reactions"] button:disabled {
	cursor: default;
	opacity: 0.7;
}

[data-page="social"] [data-component="reactions"] [data-count] {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

[data-page="social"] [data-part="consent-hint"] {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

/* The persona picker: the label over the site's own dropdown (jQuery UI
   selectmenu, as on the contact form; social.js), not the browser's. */
[data-page="social"] [data-part="react-as"] {
	display: grid;
	gap: var(--spacing-xx-small);
	max-width: 24rem;
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

[data-page="social"] [data-part="feed-col"] > [data-card="react-as"] {
	margin-bottom: var(--spacing-normal);
}

[data-page="social"] [data-part="react-as"] select {
	width: 100%;
}

[data-page="social"] [data-part="reactors"] {
	margin: var(--spacing-x-small) 0 0;
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

/* ── The folded email gate ───────────────────────────────────────────── */
[data-page="social"] [data-part="gate"] {
	margin-bottom: var(--spacing-normal);
	border: 0.05rem dashed var(--so-line);
	border-radius: var(--so-radius);
}

[data-page="social"] [data-part="gate"] > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--spacing-x-small);
	padding: var(--spacing-small) var(--spacing-normal);
	cursor: pointer;
}

[data-page="social"] [data-part="gate-title"] {
	font-weight: 600;
}

[data-page="social"] [data-part="gate-hint"] {
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

[data-page="social"] [data-part="gate"][open] [data-part="gate-hint"] {
	display: none;
}

[data-page="social"] [data-part="gate-body"] {
	padding: 0 var(--spacing-normal) var(--spacing-normal);
}

/* ── Profile header: banner, the avatar over its edge, name, tabs ────── */
/* One banner shape for every cover: 3.2:1. A photo (4:3, 16:9) is cropped to
   a strip from its middle rather than standing as tall as it is (at its own
   proportions a 4:3 cover filled the screen). A 1568×580 banner (2.7:1) loses
   ~45px top and bottom — inside its empty margins (logo starts ~155px down,
   contacts end ~100px up); the old 4:1 frame, capped at 16rem, cut ~100px
   and with it the contact lines. */
[data-page="social"] [data-part="profile-head"] [data-part="cover"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: var(--so-radius);
}

[data-page="social"] [data-part="identity"] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--spacing-x-small) var(--spacing-normal);
	padding-inline: var(--spacing-normal);
}

[data-page="social"] [data-part="identity"] [data-part="avatar"] {
	width: 6.4rem;
	height: 6.4rem;
	border: 0.25rem solid var(--bg-color);
	border-radius: 50%;
	object-fit: cover;
	background: var(--so-card);
}

[data-page="social"] [data-part="profile-head"][data-cover] [data-part="identity"] [data-part="avatar"] {
	margin-top: -3.2rem;
}

[data-page="social"] [data-part="identity-text"] {
	min-width: 0;
	padding-bottom: var(--spacing-xx-small);
}

[data-page="social"] [data-part="identity-text"] [data-part="name"] {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.05;
}

[data-page="social"] [data-part="handle"] {
	margin: var(--spacing-xx-small) 0 0;
	color: var(--so-muted);
}

[data-page="social"] [data-part="identity-actions"] {
	margin-left: auto;
	padding-bottom: var(--spacing-x-small);
}

/* The header closes with a tab bar: a line across the page, the tabs on it
   as underlined labels (the current one in the brand orange) — not pills,
   which read as filters. They start at the page's edge, in line with the
   feed below; only the avatar row is inset under the banner. */
[data-page="social"] [data-part="profile-head"] {
	margin-bottom: var(--spacing-large);
}

[data-page="social"] [data-part="profile-head"] [data-part="profile-tabs"] {
	margin-bottom: 0; /* profile-head carries the gap */
}

[data-page="social"] [data-part="profile-columns"] {
	margin-top: 0;
}

@container page (max-width: 38.4rem) {
	[data-page="social"] [data-part="identity"] [data-part="avatar"] {
		width: 4.8rem;
		height: 4.8rem;
	}

	[data-page="social"] [data-part="profile-head"][data-cover] [data-part="identity"] [data-part="avatar"] {
		margin-top: -2.4rem;
	}

	[data-page="social"] [data-part="identity-actions"] {
		margin-left: 0;
	}
}

/* ── About / Work ────────────────────────────────────────────────────── */
[data-page="social"] [data-part="about"] h2 {
	margin-top: 0;
}

[data-page="social"] [data-part="work-section"] {
	margin-bottom: var(--spacing-large);
}

[data-page="social"] [data-part="work-section"] > h2 {
	margin-top: 0;
}

[data-page="social"] [data-part="about-body"] {
	margin-bottom: var(--spacing-large);
}

[data-page="social"] [data-part="about-group"] {
	margin-top: var(--spacing-normal);
	padding-top: var(--spacing-small);
	border-top: 0.05rem solid var(--so-line);
}

[data-page="social"] [data-part="about-group"] h3 {
	margin-bottom: var(--spacing-x-small);
}

[data-page="social"] [data-part="about-details"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-x-small);
}

[data-page="social"] [data-part="about-details"] [data-detail-label] {
	color: var(--so-muted);
}

[data-page="social"] [data-part="work-entry"] {
	padding-block: var(--spacing-small);
	border-bottom: 0.05rem solid var(--so-line);
}

[data-page="social"] [data-part="work-entry"]:last-child {
	border-bottom: 0;
}

[data-page="social"] [data-part="entry-title"] {
	margin: 0;
}

[data-page="social"] [data-part="entry-subtitle"] {
	margin: 0;
	color: var(--so-muted);
}

[data-page="social"] [data-part="entry-meta"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-small);
	margin: var(--spacing-xx-small) 0 0;
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

/* ── Comments ────────────────────────────────────────────────────────── */
[data-page="social"] [data-component="comments"] {
	margin-top: var(--spacing-xx-large);
}

[data-page="social"] [data-part="comment"] {
	padding: var(--spacing-small) 0;
	border-top: 0.05rem solid var(--so-line);
}

[data-page="social"] [data-part="comment-head"] {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-x-small);
	font-size: var(--font-size-small);
}

[data-page="social"] [data-part="comment-author"] {
	font-weight: 600;
	color: var(--primary-text-color);
	text-decoration: none;
}

[data-page="social"] [data-part="comment-handle"],
[data-page="social"] [data-part="comment-head"] time {
	color: var(--so-muted);
}

[data-page="social"] [data-part="comment-body"] {
	margin-top: var(--spacing-xx-small);
}

[data-page="social"] [data-part="comment-replies"] {
	margin-left: var(--spacing-large);
}

[data-page="social"] [data-part="comment-form"] {
	margin-top: var(--spacing-large);
}

[data-page="social"] [data-part="reply-toggle"] {
	margin-top: var(--spacing-x-small);
}

[data-page="social"] [data-part="reply-toggle"] summary {
	cursor: pointer;
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

[data-page="social"] [data-part="reply-form"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-x-small);
	margin-top: var(--spacing-x-small);
}

[data-page="social"] [data-part="reply-form"] select {
	width: auto;
}

/* ── Share / subscribe modals ────────────────────────────────────────── */
dialog[data-modal] {
	width: min(28rem, 92vw);
	padding: var(--spacing-large);
	border: 0.05rem solid var(--so-line, var(--shade-2));
	border-radius: var(--so-radius, 0.6rem);
	color: var(--primary-text-color);
	background: var(--bg-color);
}

dialog[data-modal]::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

dialog[data-modal] h2 {
	margin-top: 0;
}

[data-modal-fields] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	margin-top: var(--spacing-x-small);
}

/* Each field: its label over a full-width box (the site's form-field rule
   puts them side by side, which in a narrow dialog left them ragged). */
dialog[data-modal] [data-type="form-field"] {
	display: grid;
	gap: var(--spacing-xx-small);
	margin: 0;
}

dialog[data-modal] [data-type="form-field"] > label {
	margin: 0;
	font-size: var(--font-size-small);
	font-weight: 600;
}

dialog[data-modal] [data-type="form-field"] > input,
dialog[data-modal] [data-type="form-field"] > textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

dialog[data-modal] [data-type="form-field"][data-field="checkbox"] > label {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-x-small);
	font-weight: 400;
}

/* The result line is only there once there is something to say. */
[data-modal-result][hidden] {
	display: none;
}

[data-part="modal-actions"] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	margin-top: var(--spacing-small);
}

[data-modal-result] {
	padding: var(--spacing-x-small) var(--spacing-small);
	border: 0.05rem solid var(--shade-2);
	border-radius: 0.3rem;
}

[data-modal-result][data-state="success"] {
	border-color: var(--success-color);
	color: var(--success-color);
}

[data-modal-result][data-state="error"] {
	border-color: var(--error-color);
	color: var(--error-color);
}

/* ── Profile directory (/social/profiles) ────────────────────────────── */
[data-page="social"] [data-part="profile-group"] {
	margin-top: var(--spacing-large);
}

[data-page="social"] [data-part="profile-group"] h2 {
	margin-bottom: var(--spacing-normal);
}

[data-page="social"] [data-part="profile-grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--spacing-normal);
}

[data-page="social"] [data-part="profile-card"] a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xx-small);
	height: 100%;
	box-sizing: border-box;
	padding: var(--spacing-normal) var(--spacing-x-small);
	border: 0.05rem solid var(--so-line);
	border-radius: var(--so-radius);
	background: var(--so-card);
	color: var(--primary-text-color);
	text-align: center;
	text-decoration: none;
}

[data-page="social"] [data-part="profile-card"] a:hover,
[data-page="social"] [data-part="profile-card"] a:focus-visible {
	border-color: var(--focus-color);
}

[data-page="social"] [data-part="profile-card"] [data-part="avatar"] {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--so-line);
}

[data-page="social"] [data-part="profile-card"] [data-part="name"] {
	font-weight: 600;
}

[data-page="social"] [data-part="profile-card"] [data-part="handle"] {
	margin-top: -0.2rem;
	font-size: var(--font-size-small);
	color: var(--so-muted);
	overflow-wrap: anywhere;
}

[data-page="social"] [data-part="profile-card"] [data-part="tagline"] {
	margin-top: var(--spacing-xx-small);
	font-size: var(--font-size-small);
	color: var(--so-muted);
}

/* ── Reposts ─────────────────────────────────────────────────────────── */
[data-page="social"] [data-part="repost-label"] {
	margin: 0 0 var(--spacing-xx-small);
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--so-muted);
}

[data-page="social"] [data-part="repost-embed"] {
	margin-top: var(--spacing-x-small);
	padding: var(--spacing-normal);
	border: 0.05rem solid var(--so-line);
	border-radius: var(--so-radius);
	background: var(--bg-color);
}

[data-page="social"] [data-part="repost-embed"][data-unavailable="1"] {
	color: var(--so-muted);
	font-style: italic;
}

[data-page="social"] [data-part="embed-head"] {
	display: flex;
	align-items: center;
	gap: var(--spacing-x-small);
	margin-bottom: var(--spacing-x-small);
}

[data-page="social"] [data-part="embed-head"] [data-part="avatar"] {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	object-fit: cover;
}

[data-page="social"] [data-part="embed-link"] {
	display: inline-block;
	margin-top: var(--spacing-x-small);
	font-size: var(--font-size-small);
	font-weight: 600;
}

/* The selectmenu's list sits in the picker's box: its items are menu rows,
   not the page's bulleted list items (base.css "●" + hanging indent). */
[data-page="social"] [data-part="react-as"] ul li,
[data-page="social"] [data-part="comment-form"] ul li {
	padding: 0;
	text-indent: 0;
	line-height: 1.4;
}

[data-page="social"] [data-part="react-as"] ul li::before,
[data-page="social"] [data-part="comment-form"] ul li::before {
	content: none;
}

/* An open dropdown floats over what is below it, under its own button —
   main.css lays selectmenu lists out in the flow (right for the contact
   form), which here pushed the whole post or card down while it was open.
   social.js marks each dropdown's parent [data-menu-host] as its frame. */
[data-page="social"] [data-menu-host] {
	position: relative;
}

[data-page="social"] [data-menu-host] > .ui-selectmenu-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	width: auto;
	box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
}

/* The open button keeps its bottom edge (main.css drops it for the contact
   form, whose list hangs on in the flow) — losing it made the button 2px
   shorter and everything under it jump. The floating list starts at the
   button's bottom edge, shadowed, so the two still read as one. */
[data-page="social"] [data-menu-host] > .ui-selectmenu-button.ui-selectmenu-button-open {
	border-bottom: 0.1rem solid var(--primary-color) !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* One line between button and list: the button's bottom edge. The list has
   no top border of its own (the two 2px edges met as one thick 4px line). */
[data-page="social"] [data-menu-host] > .ui-selectmenu-menu {
	border-top: 0;
}