/**
 * Federation front end (018 Phase C).
 *
 * Everything is scoped under `.fedman-fx`. Divi styles page content
 * aggressively, so selectors here are written to out-specify it rather than to
 * shout over it — there is no `!important` in this file, and none should be
 * added. If a rule loses, lengthen the selector.
 */

.fedman-fx {
	--fedman-accent: #b3122b;
	--fedman-surface: rgba(255, 255, 255, 0.04);
	--fedman-border: rgba(128, 128, 128, 0.28);
	--fedman-muted: rgba(128, 128, 128, 0.95);

	/*
	 * The tab band, and the breadcrumb that sits under it on a forum page.
	 *
	 * These are stated rather than inherited **on purpose**. The band used to
	 * take whatever the page happened to paint behind it, which is why the same
	 * tab bar read black on a forum page and white on the profile — two
	 * surfaces meant to be one design, differing by accident. The colour is now
	 * the band's own, so they cannot drift apart again.
	 *
	 * The ink is stated for the same reason: inherited, it came out as Divi's
	 * body `#666`, which on black is barely legible.
	 */
	--fedman-chrome-bg: #000;
	--fedman-chrome-ink: rgba(255, 255, 255, 0.75);
	--fedman-chrome-ink-strong: #fff;
	--fedman-chrome-rule: rgba(255, 255, 255, 0.16);

	/*
	 * The shared column. Every band spans the window and holds its contents to
	 * this width, which is what keeps the hero's text, the tabs, the breadcrumb
	 * and the panel below them all on the same left edge.
	 */
	--fedman-column: 1180px;
	--fedman-gutter: 1.25rem;
	/* A tab's own left padding, so a crumb can line up with a tab's label. */
	--fedman-tab-pad: 1rem;
}

/*
 * The page's own heading, on the views that render one (027 D62). Divi's
 * `page.php` printed "Federations" above every federation route until 1.9.0
 * took the template over.
 */
.fedman-fx h1.fedman-fx-page-title {
	margin: 0 0 1rem;
	line-height: 1.15;
}

/* ---------------------------------------------------------------- directory */

.fedman-fx .fedman-fx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx .fedman-fx-grid > li.fedman-fx-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 0;
	padding: 1.1rem;
	border: 1px solid var(--fedman-border);
	border-top: 3px solid var(--fedman-accent);
	border-radius: 4px;
	background: var(--fedman-surface);
	list-style: none;
}

.fedman-fx .fedman-fx-card-emblem {
	flex: 0 0 3.5rem;
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: var(--fedman-accent);
	overflow: hidden;
}

.fedman-fx .fedman-fx-card-emblem img {
	width: 100%;
	height: 100%;
	/*
	 * `contain`, never `cover`: cover fills the square by cutting the sides off
	 * a logo that is not square, which is most of them.
	 */
	object-fit: contain;
	display: block;
}

/*
 * The accent square exists so the initials fallback has something to sit on.
 * Behind a real logo it is just a coloured box around someone's artwork, so an
 * emblem carrying an image drops it — along with the rounded corners and the
 * clip that went with them.
 */
.fedman-fx .fedman-fx-card-emblem.has-logo {
	background: none;
	border-radius: 0;
	overflow: visible;
}

.fedman-fx .fedman-fx-initials {
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.04em;
	color: #fff;
}

.fedman-fx .fedman-fx-card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fedman-fx .fedman-fx-card-name {
	margin: 0 0 0.2rem;
	font-size: 1.15rem;
	line-height: 1.25;
}

.fedman-fx .fedman-fx-card-name a {
	text-decoration: none;
}

.fedman-fx .fedman-fx-card-name a:hover,
.fedman-fx .fedman-fx-card-name a:focus {
	text-decoration: underline;
}

.fedman-fx .fedman-fx-card-tagline {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--fedman-muted);
}

.fedman-fx ul.fedman-fx-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin: 0 0 0.45rem;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fedman-muted);
}

.fedman-fx ul.fedman-fx-meta > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx .fedman-fx-card-joining {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
}

.fedman-fx .fedman-fx-policy-open,
.fedman-fx .fedman-fx-policy-application {
	color: var(--fedman-accent);
}

.fedman-fx .fedman-fx-policy-invite,
.fedman-fx .fedman-fx-policy-closed {
	color: var(--fedman-muted);
	font-weight: 400;
}

.fedman-fx .fedman-fx-empty {
	margin: 0;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-defunct-link {
	margin: 1.5rem 0 0;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 480px) {

	.fedman-fx .fedman-fx-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ profile */

/*
 * 027 Phase A. The hero is full-bleed and the rest of the page is not, which is
 * the whole point of taking the template over from Divi (D60/D61) — under
 * Divi's `page.php` this content sat inside `#left-area` with a sidebar gutter.
 *
 * `.fedman-fx-page` is the wrapper the federation template emits. The negative
 * margin is deliberately NOT used to break out of a container: there is no
 * container to break out of any more.
 */

.fedman-fx-page .fedman-fx-container {
	max-width: var(--fedman-column);
	margin: 0 auto;
	padding: 0 var(--fedman-gutter) 2rem;
}

/*
 * The other three views have no full-bleed band, so the whole view is the
 * container. The profile is excluded because its hero must reach the edge of
 * the window while its content does not — that view carries its own
 * `.fedman-fx-container` inside.
 */
.fedman-fx-page .fedman-fx-directory,
.fedman-fx-page .fedman-fx-defunct,
.fedman-fx-page .fedman-fx-manage {
	max-width: var(--fedman-column);
	margin: 0 auto;
	padding: 2rem var(--fedman-gutter);
}

/* ---------------------------------------------------------------- the hero */

.fedman-fx .fedman-fx-hero {
	position: relative;
	/*
	 * No gap under the hero. The band follows it directly and the two read as
	 * one block. The gap used to be 1.75rem of whatever the page painted —
	 * invisible on a forum page, where the site's body is black, and an obvious
	 * white stripe on the profile.
	 */
	margin: 0;
	padding: 2.5rem 1.25rem;
	/*
	 * The bannerless gradient. NOT the retired `accent_color` column — that was
	 * removed in 1.7.2 and one federation still stores #ffffff in it, which is
	 * the value the removal cited as reading broken. This is the site accent,
	 * which is what every federation uses everywhere else on the page.
	 */
	background:
		linear-gradient(135deg, var(--fedman-accent) 0%, rgba(0, 0, 0, 0.55) 100%);
	background-size: cover;
	background-position: center;
	color: #fff;
}

/*
 * With a real banner the gradient becomes an overlay instead, so the name stays
 * readable over artwork of any brightness. It is a background rather than a
 * positioned child on purpose: an absolutely positioned overlay is not clipped
 * by its parent's radius, and clipping the hero would cut off the name picker
 * that drops out of it (the 025 lesson).
 */
.fedman-fx .fedman-fx-hero.has-banner {
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.78) 100%),
		var(--fedman-hero-image);
}

.fedman-fx .fedman-fx-hero-inner {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	max-width: 1180px;
	margin: 0 auto;
}

.fedman-fx .fedman-fx-hero-emblem {
	flex: 0 0 6rem;
	width: 6rem;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.fedman-fx .fedman-fx-hero-emblem img {
	width: 100%;
	height: 100%;
	/* `contain`, never `cover`: cover fills the square by cutting the sides off
	   a logo that is not square, which is most of them. */
	object-fit: contain;
	display: block;
}

.fedman-fx .fedman-fx-hero-emblem.has-logo {
	background: none;
	overflow: visible;
}

.fedman-fx .fedman-fx-hero-emblem .fedman-fx-initials {
	font-size: 1.9rem;
}

.fedman-fx .fedman-fx-hero-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fedman-fx .fedman-fx-hero-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, 0.82);
}

.fedman-fx .fedman-fx-hero-closed {
	padding: 0.05rem 0.45rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 2px;
	font-weight: 700;
}

.fedman-fx h1.fedman-fx-hero-name,
.fedman-fx p.fedman-fx-hero-name {
	margin: 0;
	line-height: 1.1;
	color: #fff;
}

/*
 * The forum page's federation name is a `<p>`, because that page's `<h1>` is
 * the forum's or the thread's and two of them is a real accessibility
 * regression. It has to be *given* the size and weight the `<h1>` inherits
 * from the theme, or the same name would read as body text on one page and a
 * heading on the other.
 */
.fedman-fx p.fedman-fx-hero-name {
	padding: 0;
	font-size: 1.875rem;
	font-weight: 500;
}

.fedman-fx .fedman-fx-hero-tagline {
	margin: 0.35rem 0 0;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.88);
}

/*
 * The manage link, bottom right of the hero (1.16.0).
 *
 * Absolutely positioned, which the hero already supports — it is
 * `position: relative` for the banner overlay, and deliberately
 * `overflow: visible` so the name picker can drop out of it (the 025 lesson).
 * A circle of translucent white works over the gradient and over any banner,
 * which is why it is not the accent colour.
 */
.fedman-fx a.fedman-fx-hero-manage {
	position: absolute;
	right: 1.25rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	text-decoration: none;
}

.fedman-fx a.fedman-fx-hero-manage:hover,
.fedman-fx a.fedman-fx-hero-manage:focus-visible {
	background: rgba(0, 0, 0, 0.6);
	border-color: #fff;
}

.fedman-fx a.fedman-fx-hero-manage .dashicons {
	width: 1.3rem;
	height: 1.3rem;
	font-size: 1.3rem;
	line-height: 1;
}

/*
 * Room for it. Without this the icon sits over the tagline on a narrow screen,
 * where the hero's own content reaches the bottom edge.
 */
.fedman-fx .fedman-fx-hero:has(.fedman-fx-hero-manage) .fedman-fx-hero-inner {
	padding-bottom: 1.6rem;
}

/* ------------------------------------------------- the hero name picker */

.fedman-fx details.fedman-fx-hero-picker {
	position: relative;
	margin: 0;
}

.fedman-fx .fedman-fx-hero-name-toggle {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	list-style: none;
	cursor: pointer;
}

.fedman-fx .fedman-fx-hero-name-toggle::-webkit-details-marker {
	display: none;
}

.fedman-fx .fedman-fx-hero-name-toggle::after {
	content: "\25BE";
	font-size: 0.7em;
	opacity: 0.75;
}

.fedman-fx .fedman-fx-picker-panel {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	width: min(22rem, 90vw);
	max-height: 20rem;
	overflow-y: auto;
	padding: 0.5rem;
	border: 1px solid var(--fedman-border);
	border-radius: 4px;
	background: #1a1a1a;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.fedman-fx .fedman-fx-picker-filter {
	width: 100%;
	margin: 0 0 0.4rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 0.85rem;
}

.fedman-fx ul.fedman-fx-picker-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-picker-list > li {
	margin: 0;
	list-style: none;
}

.fedman-fx .fedman-fx-picker-item {
	display: block;
	padding: 0.35rem 0.5rem;
	border-radius: 3px;
	color: #fff;
	font-size: 0.9rem;
	text-decoration: none;
}

.fedman-fx .fedman-fx-picker-item:hover,
.fedman-fx .fedman-fx-picker-item:focus {
	background: var(--fedman-accent);
	color: #fff;
}

.fedman-fx .fedman-fx-picker-item.is-current {
	font-weight: 700;
}

.fedman-fx .fedman-fx-picker-empty {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: var(--fedman-muted);
}

/*
 * The stat strip is gone (1.16.0) — its rules with it.
 *
 * It sat between the hero and the tab bar, which is where a visitor looks for
 * the page's own content, and two of its six tiles repeated what the page said
 * a moment later. What survived moved into the Overview as `.fedman-fx-facts`.
 */

/* Visually hidden, still read aloud. Ours, so no theme owns it. */
.fedman-fx .fedman-fx-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------- the Overview's facts (1.16.0) */

.fedman-fx dl.fedman-fx-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.9rem 1.25rem;
	margin: 0;
	padding: 0;
}

.fedman-fx .fedman-fx-fact {
	margin: 0;
}

.fedman-fx dt.fedman-fx-fact-label {
	margin: 0 0 0.15rem;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fedman-muted);
}

.fedman-fx dd.fedman-fx-fact-value {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* The way in sits under the facts, with air between them. */
.fedman-fx .fedman-fx-facts-block .fedman-fx-actions {
	margin: 1.1rem 0 0;
}

/* ------------------------------------- the news band (1.19.0) */

/*
 * Between the full-bleed hero and the contained tabs, and full-bleed itself. A
 * ticker that stops short of the window edges appears to hand items to nothing
 * and take them back from nothing.
 *
 * The hero carries `margin-bottom: 1.75rem`, which is right when the tabs follow
 * it and wrong when the band does — the band belongs against the hero. Pulled up
 * rather than the hero's margin removed, so a page with no ticker is unchanged.
 *
 * The News Feed ships the ticker's own styling; this is only the stripe it sits
 * in, so the two do not have to know about each other.
 */
.fedman-fx .fedman-fx-newsband {
	/* Was `-1.75rem` to cancel the hero's bottom margin, which is now zero. */
	margin: 0;
	padding: 0.35rem var(--fedman-gutter);
	/*
	 * The band's own colour, not `--fedman-surface`. That tint is 4% white,
	 * which on the profile's white surface left a pale line above and below the
	 * ticker — two more stripes of page background inside what is meant to be
	 * one continuous run of chrome. No bottom rule either: the tab band starts
	 * immediately below.
	 */
	background: var(--fedman-chrome-bg);
}

/*
 * The announcement in the ticker (1.20.1).
 *
 * `wnf-ticker.css` gives every avatar a 40px circle with `object-fit: cover`,
 * which is right for a wrestler's face and wrong for a federation's logo — it
 * cuts the sides off anything that is not square. This targets only our own
 * entry, by the `data-event` attribute News Feed 2.1.1 puts on the element, so
 * wrestler avatars in the same ticker are untouched.
 *
 * Height only, with width left to follow, so the box takes the picture's own
 * proportions and there is nothing to crop. `contain` rather than `fill` is the
 * belt and braces: if any other rule ever forces a width, `contain` letterboxes
 * where `fill` would stretch — and a squashed logo is worse than a cropped one.
 * `max-width` stops a very wide logo pushing the news off the line.
 */
.fedman-fx-newsband .wnf-ticker-item[data-event="fedman_announcement"] img.wnf-ticker-avatar {
	width: auto;
	height: 40px;
	max-width: 120px;
	border-radius: 0;
	object-fit: contain;
}

/* --------------------------------------------------------- the tab shell */

/*
 * A band is full-bleed; the row inside it is not.
 *
 * The colour has to reach the window edges or the strip reads as a black
 * rectangle floating in whatever the page paints around it. That is exactly how
 * the tab bar looked on the profile, whose surface is white, while looking
 * correct on a forum page, where the site's black body happened to fill the
 * gutters — the same markup, two different-looking pages, which is the fault
 * this whole feature exists to remove.
 *
 * So the band carries the colour and spans the viewport, and the row inside it
 * holds the contents to the shared column.
 */
.fedman-fx .fedman-fx-band {
	background: var(--fedman-chrome-bg);
}

.fedman-fx .fedman-fx-band-tabs {
	border-bottom: 1px solid var(--fedman-chrome-rule);
}

.fedman-fx .fedman-fx-profile-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	max-width: var(--fedman-column);
	margin: 0 auto;
	padding: 0 var(--fedman-gutter);
}

/*
 * One look, two elements. The profile renders `<button>` (it swaps a panel in
 * place); a forum page renders `<a>` back to the profile. Same rule rather than
 * a copy, so the two surfaces cannot drift apart.
 */
.fedman-fx button.fedman-fx-profile-tab,
.fedman-fx a.fedman-fx-profile-tab {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	margin: 0;
	padding: 0.55rem 1rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--fedman-chrome-ink);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.fedman-fx button.fedman-fx-profile-tab:hover,
.fedman-fx button.fedman-fx-profile-tab:focus-visible,
.fedman-fx a.fedman-fx-profile-tab:hover,
.fedman-fx a.fedman-fx-profile-tab:focus-visible {
	color: var(--fedman-chrome-ink-strong);
}

/*
 * The active tab is the STRONG ink with the accent underline, not accent-
 * coloured text. `#b3122b` on black is a dark red on a dark ground — it reads
 * as the *least* prominent tab, which is the opposite of what it means. The
 * 3px underline is what marks it.
 */
.fedman-fx button.fedman-fx-profile-tab.is-active,
.fedman-fx a.fedman-fx-profile-tab.is-active {
	border-bottom-color: var(--fedman-accent);
	color: var(--fedman-chrome-ink-strong);
}

/*
 * Divi styles every `a` blue and underlines it on hover. `.fedman-fx
 * a.fedman-fx-profile-tab` is (0,2,1) against Divi's (0,0,1), so it wins on
 * specificity — which is the house rule. There is no `!important` in this file.
 */
.fedman-fx a.fedman-fx-profile-tab,
.fedman-fx a.fedman-fx-profile-tab:hover,
.fedman-fx a.fedman-fx-profile-tab:focus {
	text-decoration: none;
}

.fedman-fx .fedman-fx-profile-tab-badge {
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: var(--fedman-chrome-ink-strong);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0;
}

.fedman-fx .fedman-fx-profile-panel.is-loading {
	opacity: 0.55;
}

.fedman-fx .fedman-fx-error {
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--fedman-accent);
	background: var(--fedman-surface);
}

.fedman-fx button.fedman-fx-retry {
	margin-left: 0.4rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--fedman-accent);
	border-radius: 3px;
	background: none;
	color: var(--fedman-accent);
	font-size: 0.8rem;
	cursor: pointer;
}

/* ------------------------------------------------------ blocks in a panel */

.fedman-fx .fedman-fx-card-block {
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--fedman-border);
	border-radius: 4px;
	background: var(--fedman-surface);
}

.fedman-fx .fedman-fx-block-title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.fedman-fx .fedman-fx-block-note {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-block-more {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
}

/*
 * The description's "Read more" clamp was removed in 1.21.2, and its rules with
 * it — the `:has()` line-clamp, the disclosure and the two toggle labels.
 *
 * A federation's description is the thing a visitor came to this tab to read,
 * and hiding most of it behind a control saved space on the one page where
 * space is not the problem. The same reasoning that took out the stat strip.
 */

/* ------------------------------------------------------ overview: officers */

.fedman-fx ul.fedman-fx-officer-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-officer-list > li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: baseline;
	margin: 0;
	list-style: none;
}

.fedman-fx .fedman-fx-officer-name {
	font-weight: 700;
}

/* ------------------------------------------------- overview: belt chips */

.fedman-fx ul.fedman-fx-belt-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-belt-strip > li.fedman-fx-belt-chip {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin: 0;
	padding: 0.5rem;
	border: 1px solid var(--fedman-border);
	border-radius: 4px;
	list-style: none;
}

.fedman-fx .fedman-fx-belt-art {
	flex: 0 0 3.25rem;
	width: 3.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fedman-fx .fedman-fx-belt-art img {
	max-width: 100%;
	height: auto;
	display: block;
}

.fedman-fx .fedman-fx-belt-art-fallback {
	font-size: 2rem;
	line-height: 1;
}

.fedman-fx .fedman-fx-belt-chip-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.fedman-fx .fedman-fx-belt-chip-name {
	font-weight: 700;
	font-size: 0.9rem;
}

.fedman-fx .fedman-fx-belt-chip-holder {
	font-size: 0.85rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-archived-note {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-btn {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 3px;
	background: var(--fedman-accent);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.fedman-fx .fedman-fx-btn:hover,
.fedman-fx .fedman-fx-btn:focus {
	color: #fff;
	filter: brightness(1.12);
}

.fedman-fx .fedman-fx-announcement {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--fedman-accent);
	background: var(--fedman-surface);
}

.fedman-fx .fedman-fx-announcement p:last-child,
.fedman-fx .fedman-fx-description p:last-child {
	margin-bottom: 0;
}

.fedman-fx ul.fedman-fx-limits {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--fedman-muted);
}

.fedman-fx ul.fedman-fx-limits > li {
	margin: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-roster-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx .fedman-fx-defenses {
	font-size: 0.8rem;
	color: var(--fedman-muted);
}

.fedman-fx ul.fedman-fx-roster-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.4rem 1rem;
}

.fedman-fx ul.fedman-fx-roster-list > li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: baseline;
	margin: 0;
	padding: 0.3rem 0;
	list-style: none;
}

.fedman-fx .fedman-fx-office {
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--fedman-accent);
	border-radius: 2px;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fedman-accent);
}

.fedman-fx .fedman-fx-member.is-commissioner > a {
	font-weight: 700;
}

.fedman-fx .fedman-fx-back {
	margin: 1.5rem 0 0;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------ join / leave */

.fedman-fx .fedman-fx-notice {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--fedman-accent);
	border-radius: 3px;
	background: var(--fedman-surface);
	font-size: 0.9rem;
}

.fedman-fx .fedman-fx-notice.is-error {
	border-left-color: #c0392b;
}

.fedman-fx .fedman-fx-notice.is-success {
	border-left-color: #2e8b57;
}

.fedman-fx .fedman-fx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	align-items: center;
	margin: 0.85rem 0 0;
}

.fedman-fx .fedman-fx-actions form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

.fedman-fx .fedman-fx-actions button.fedman-fx-btn {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
}

.fedman-fx .fedman-fx-btn.is-quiet {
	background: transparent;
	border: 1px solid var(--fedman-border);
	color: inherit;
}

.fedman-fx .fedman-fx-btn.is-quiet:hover,
.fedman-fx .fedman-fx-btn.is-quiet:focus {
	border-color: var(--fedman-accent);
	color: inherit;
}

.fedman-fx .fedman-fx-state {
	margin: 0;
	font-size: 0.9rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-state.is-blocked {
	color: #c0392b;
}

/* ------------------------------------------------------------------- manage */

/*
 * 027: `.fedman-fx-head` / `.fedman-fx-title` used to be shared with the
 * profile, which now has a hero instead. They are the manage screen's alone, so
 * they moved here rather than staying in a "profile" section that no longer
 * uses them.
 */
.fedman-fx .fedman-fx-head {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin: 0 0 1.5rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid var(--fedman-border);
}

.fedman-fx .fedman-fx-head-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fedman-fx h1.fedman-fx-title {
	margin: 0 0 0.25rem;
	line-height: 1.15;
}

.fedman-fx .fedman-fx-crumb {
	margin: 0 0 0.15rem;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.fedman-fx .fedman-fx-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--fedman-border);
}

.fedman-fx .fedman-fx-tab {
	padding: 0.5rem 0.9rem;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
	font-size: 0.85rem;
	text-decoration: none;
}

.fedman-fx .fedman-fx-tab.is-active {
	border-color: var(--fedman-border);
	background: var(--fedman-surface);
	font-weight: 600;
}

.fedman-fx .fedman-fx-block {
	margin: 0 0 2rem;
}

.fedman-fx .fedman-fx-block > h3 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.fedman-fx ul.fedman-fx-manage-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-manage-list > li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	align-items: center;
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--fedman-border);
	list-style: none;
}

.fedman-fx ul.fedman-fx-manage-list > li > a {
	flex: 1 1 10rem;
}

.fedman-fx .fedman-fx-grantlist {
	flex: 1 1 100%;
	font-size: 0.78rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-field {
	display: block;
	margin: 0 0 1.1rem;
}

.fedman-fx .fedman-fx-field > label,
.fedman-fx .fedman-fx-field > legend {
	display: block;
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.fedman-fx .fedman-fx-field input[type="text"],
.fedman-fx .fedman-fx-field input[type="number"],
.fedman-fx .fedman-fx-field textarea,
.fedman-fx .fedman-fx-field select {
	width: 100%;
	max-width: 34rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.9rem;
}

.fedman-fx .fedman-fx-field-inline input[type="number"] {
	max-width: 9rem;
}

.fedman-fx .fedman-fx-check {
	display: block;
	margin: 0 0 0.3rem;
	font-size: 0.88rem;
	font-weight: 400;
}

.fedman-fx .fedman-fx-hint {
	display: block;
	margin: 0.3rem 0 0;
	font-size: 0.78rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-submit {
	margin: 0 0 0.6rem;
}

/* ------------------------------------------------------------------ defunct */

.fedman-fx .fedman-fx-lede {
	margin: 0 0 1.5rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-grid > li.fedman-fx-card.is-archived {
	border-top-color: var(--fedman-muted);
	opacity: 0.92;
}

.fedman-fx .fedman-fx-card.is-archived .fedman-fx-card-emblem {
	background: var(--fedman-muted);
}

.fedman-fx .fedman-fx-meta-closed,
.fedman-fx .fedman-fx-final-champion {
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-final-champion {
	margin: 0;
	font-size: 0.85rem;
}

.fedman-fx .fedman-fx-profile.is-archived .fedman-fx-card-emblem {
	background: var(--fedman-muted);
}

/* -------------------------------------------------------------- invitations */

.fedman-fx .fedman-fx-invitation {
	flex: 1 1 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--fedman-accent);
	border-radius: 4px;
	background: var(--fedman-surface);
}

.fedman-fx .fedman-fx-invitation-lede {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.fedman-fx .fedman-fx-policy .fedman-fx-field-inline select {
	max-width: 22rem;
}

.fedman-fx .fedman-fx-locked > strong {
	display: inline-block;
	padding: 0.3rem 0.6rem;
	border: 1px dashed var(--fedman-border);
	border-radius: 3px;
	background: var(--fedman-surface);
}

.fedman-fx details.fedman-fx-field > summary {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
}

/* ------------------------------------------- authoring forms (Phase D6) */

.fedman-fx .fedman-fx-lede {
	max-width: 46rem;
	margin: 0 0 1.2rem;
	font-size: 0.92rem;
}

.fedman-fx .fedman-fx-fieldset {
	margin: 0 0 1.6rem;
	padding: 1rem 1.1rem 0.4rem;
	border: 1px solid var(--fedman-border);
	border-radius: 4px;
	background: var(--fedman-surface);
}

.fedman-fx .fedman-fx-fieldset > h4 {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-hint-block {
	max-width: 46rem;
	margin: 0 0 0.8rem;
}

.fedman-fx .fedman-fx-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.15rem 0.9rem;
	margin: 0.5rem 0 0;
}

.fedman-fx .fedman-fx-upload {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	flex-wrap: wrap;
}

.fedman-fx .fedman-fx-image-preview {
	width: 72px;
	height: 72px;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
	/* Whole image, not a square cut out of it — the preview has to show what
	   was actually uploaded, or it is not a preview. */
	object-fit: contain;
}

.fedman-fx .fedman-fx-image-empty {
	display: flex;
	width: 72px;
	height: 72px;
	padding: 0.3rem;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--fedman-border);
	border-radius: 3px;
	font-size: 0.7rem;
	line-height: 1.2;
	text-align: center;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-upload input[type="file"] {
	flex: 1 1 14rem;
	max-width: 26rem;
	font-size: 0.82rem;
	color: inherit;
}

/*
 * "or paste a link to one" (1.21.0).
 *
 * Inside `.fedman-fx-upload`, which is a wrapping flex row, so the link takes a
 * line of its own under the file button rather than competing with it for width.
 * It is the second way into one field, not a second field, and reads that way.
 */
.fedman-fx label.fedman-fx-imagelink {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	color: var(--fedman-muted);
}

.fedman-fx label.fedman-fx-imagelink input[type="url"] {
	flex: 1 1 16rem;
	max-width: 30rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.82rem;
}

/* --------------------------------------------------------- repeating rows */

.fedman-fx .fedman-fx-row {
	display: flex;
	gap: 0.7rem;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 0 0 0.7rem;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
}

.fedman-fx .fedman-fx-row-field {
	display: block;
	flex: 1 1 11rem;
}

.fedman-fx .fedman-fx-row-field.is-narrow {
	flex: 0 1 7rem;
}

.fedman-fx .fedman-fx-row-field > label {
	display: block;
	margin: 0 0 0.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-row-field select,
.fedman-fx .fedman-fx-row-field input[type="number"],
.fedman-fx .fedman-fx-row-field input[type="text"] {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.88rem;
}

.fedman-fx .fedman-fx-row-note {
	flex: 1 1 100%;
	font-size: 0.76rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-row-note:empty {
	display: none;
}

.fedman-fx .fedman-fx-rowadd {
	margin: 0 0 1rem;
}

/* ------------------------------------------------------- inline explainers */

.fedman-fx details.fedman-fx-explain {
	margin: 0 0 1rem;
	font-size: 0.82rem;
}

.fedman-fx details.fedman-fx-explain > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--fedman-muted);
}

.fedman-fx details.fedman-fx-explain dl {
	margin: 0.7rem 0 0;
	padding: 0 0 0 0.2rem;
}

.fedman-fx details.fedman-fx-explain dt {
	margin: 0.55rem 0 0.1rem;
	font-weight: 600;
}

.fedman-fx details.fedman-fx-explain dd {
	margin: 0;
	color: var(--fedman-muted);
}

/* -------------------------------------------- nested rows (the item form) */

.fedman-fx .fedman-fx-row.is-block {
	align-items: flex-start;
}

.fedman-fx .fedman-fx-row-field.is-wide {
	flex: 2 1 16rem;
}

.fedman-fx .fedman-fx-row-extra {
	flex: 1 1 100%;
	margin: 0.5rem 0 0;
	padding: 0.5rem 0 0;
	border-top: 1px dashed var(--fedman-border);
}

.fedman-fx .fedman-fx-row-extra .fedman-fx-row-field {
	display: inline-block;
	margin: 0.5rem 0.9rem 0 0;
	vertical-align: top;
}

.fedman-fx .fedman-fx-conditions {
	display: block;
	margin: 0.6rem 0 0;
}

.fedman-fx .fedman-fx-subrow {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 0.45rem;
}

.fedman-fx .fedman-fx-subrow select,
.fedman-fx .fedman-fx-subrow input[type="text"] {
	flex: 1 1 9rem;
	max-width: 18rem;
	padding: 0.35rem 0.45rem;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.85rem;
}

.fedman-fx details.fedman-fx-explain h5 {
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fedman-muted);
}

/* ------------------------------------------------ the ranking ladder (D7) */

/*
 * Fight Simulator brings its own table styles; this only gives the table room
 * and lets it scroll on a narrow screen rather than pushing the page sideways.
 */
.fedman-fx .fedman-fx-ladder {
	margin: 0.4rem 0 0;
	overflow-x: auto;
}

.fedman-fx .fedman-fx-ladder table {
	width: 100%;
}

/* -------------------------------- championship cards (Phase D10, 027 A) */

.fedman-fx .fedman-fx-belt-head {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.fedman-fx .fedman-fx-belt-head .fedman-fx-belt-art {
	flex: 0 0 4.5rem;
	width: 4.5rem;
}

.fedman-fx .fedman-fx-belt-head-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fedman-fx h2.fedman-fx-belt-name {
	margin: 0 0 0.2rem;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.fedman-fx .fedman-fx-belt-holder {
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
}

.fedman-fx ul.fedman-fx-belt-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	color: var(--fedman-muted);
}

.fedman-fx ul.fedman-fx-belt-meta > li {
	margin: 0;
	list-style: none;
}

/*
 * 027: the lineage table is behind a disclosure now. On FedX the four of them
 * were 14.4 KB of a 33.8 KB page, sitting between the federation's description
 * and its roster.
 */
.fedman-fx details.fedman-fx-belt-history {
	margin: 0.9rem 0 0;
}

.fedman-fx .fedman-fx-belt-history-toggle {
	display: inline-block;
	list-style: none;
	color: var(--fedman-accent);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.fedman-fx .fedman-fx-belt-history-toggle::-webkit-details-marker {
	display: none;
}

.fedman-fx .fedman-fx-belt-history-toggle::before {
	content: "\25B8\00a0";
}

.fedman-fx .fedman-fx-belt-history[open] .fedman-fx-belt-history-toggle::before {
	content: "\25BE\00a0";
}

/*
 * Championship Manager styles its own table; this only gives it room and lets
 * it scroll on a narrow screen rather than pushing the page sideways.
 */
.fedman-fx .fedman-fx-belt-history-body {
	margin: 0.6rem 0 0;
	overflow-x: auto;
}

.fedman-fx .fedman-fx-belt-history-body table {
	width: 100%;
}

/* ----------------------------------------- profile on a narrow screen (027) */

@media (max-width: 600px) {

	.fedman-fx .fedman-fx-hero {
		padding: 1.5rem 1rem;
	}

	/* The emblem stacks above the name rather than eating half the width. */
	.fedman-fx .fedman-fx-hero-inner {
		flex-direction: column;
		gap: 1rem;
	}

	.fedman-fx .fedman-fx-hero-emblem {
		flex-basis: 4.5rem;
		width: 4.5rem;
		height: 4.5rem;
	}

	/*
	 * The tab bar scrolls sideways rather than wrapping to three rows. It is the
	 * one place on this page where horizontal scroll is wanted — the page body
	 * itself must never do it.
	 */
	.fedman-fx .fedman-fx-profile-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.fedman-fx button.fedman-fx-profile-tab,
	.fedman-fx a.fedman-fx-profile-tab {
		white-space: nowrap;
	}

	.fedman-fx .fedman-fx-belt-head {
		flex-direction: column;
	}
}

/* ------------------------------------ former members and commissioners (B) */

/*
 * A `<details>` that is also a card block. Closed by default: this is history,
 * and the current roster above it is what the tab is for.
 */
.fedman-fx details.fedman-fx-former {
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--fedman-border);
	border-radius: 4px;
	background: var(--fedman-surface);
}

.fedman-fx .fedman-fx-former-toggle {
	display: inline-block;
	list-style: none;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.fedman-fx .fedman-fx-former-toggle::-webkit-details-marker {
	display: none;
}

.fedman-fx .fedman-fx-former-toggle::before {
	content: "\25B8\00a0";
}

.fedman-fx .fedman-fx-former[open] .fedman-fx-former-toggle::before {
	content: "\25BE\00a0";
}

.fedman-fx .fedman-fx-former-body {
	margin: 0.9rem 0 0;
}

.fedman-fx h3.fedman-fx-former-heading {
	margin: 1rem 0 0.4rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fedman-muted);
}

.fedman-fx h3.fedman-fx-former-heading:first-child {
	margin-top: 0;
}

.fedman-fx ul.fedman-fx-former-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 0.3rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-former-list > li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	margin: 0;
	list-style: none;
}

.fedman-fx .fedman-fx-former-dates {
	font-size: 0.8rem;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-former-note {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var(--fedman-muted);
}

/* ------------------------------------------------------- Fed Staff tab (C) */

/*
 * One person per row (1.15.0), not a grid of columns.
 *
 * The grid was `minmax(17rem, 1fr)`, which is a comfortable width for a name
 * and a job title and a hostile one for prose. A staff biography is prose, so
 * the column count is now one and every card gets the full width.
 */
.fedman-fx ul.fedman-fx-staff-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-staff-list > li.fedman-fx-staff-card {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--fedman-border);
	border-top: 3px solid var(--fedman-accent);
	border-radius: 4px;
	background: var(--fedman-surface);
	list-style: none;
}

/*
 * The placement toggle. `row-reverse` rather than a second set of rules: the
 * markup order stays picture-then-text, which is the order a screen reader and
 * a narrow screen both want, and only the painting order changes.
 */
.fedman-fx ul.fedman-fx-staff-list > li.fedman-fx-staff-card.is-image-right {
	flex-direction: row-reverse;
}

.fedman-fx .fedman-fx-staff-figure {
	flex: 0 0 auto;
	/* Never wider than 250px, and never wider than the card on a small screen. */
	width: min(250px, 40%);
}

/*
 * Shown whole. No `object-fit`, no fixed height, no circle — the commissioner
 * chose this picture and a crop would decide for them which part of it matters.
 * `height: auto` against the width attribute the img carries is what keeps the
 * proportions and stops the page jumping as it loads.
 */
.fedman-fx .fedman-fx-staff-figure img {
	display: block;
	width: 100%;
	max-width: 250px;
	height: auto;
	border-radius: 3px;
}

/* Only the initials fall back to a block of colour, and only at picture size. */
.fedman-fx .fedman-fx-staff-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	width: 100%;
	max-width: 250px;
	font-size: 2.5rem;
	font-weight: 700;
	color: #fff;
	background: var(--fedman-accent);
	border-radius: 3px;
}

.fedman-fx ul.fedman-fx-staff-list > li.fedman-fx-staff-card.has-no-picture .fedman-fx-staff-figure {
	width: min(120px, 25%);
}

.fedman-fx .fedman-fx-staff-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fedman-fx h3.fedman-fx-staff-name {
	margin: 0 0 0.2rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
}

.fedman-fx h4.fedman-fx-staff-role {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--fedman-accent);
}

.fedman-fx .fedman-fx-staff-desc {
	font-size: 0.95rem;
	line-height: 1.6;
}

.fedman-fx .fedman-fx-staff-desc p {
	margin: 0 0 0.8rem;
}

.fedman-fx .fedman-fx-staff-desc p:last-child {
	margin-bottom: 0;
}

/*
 * Below the width where a 250px picture and a paragraph can share a line, the
 * card stacks. `row-reverse` would put the picture underneath, which is not
 * what "on the right" meant — so both sides stack picture-first.
 */
@media (max-width: 40rem) {
	.fedman-fx ul.fedman-fx-staff-list > li.fedman-fx-staff-card,
	.fedman-fx ul.fedman-fx-staff-list > li.fedman-fx-staff-card.is-image-right {
		flex-direction: column;
	}

	.fedman-fx ul.fedman-fx-staff-list > li.fedman-fx-staff-card .fedman-fx-staff-figure,
	.fedman-fx ul.fedman-fx-staff-list > li.fedman-fx-staff-card.has-no-picture .fedman-fx-staff-figure {
		width: min(250px, 100%);
	}
}

/*
 * The manage panel's rows, which reuse the store panel's field furniture.
 *
 * Each is now a bordered card inside a sort slot rather than a run of rows with
 * dividers between them — the Page Tabs lesson, which learnt it the hard way:
 * a `:last-child` divider rule inside a per-row wrapper matches every row.
 */
.fedman-fx form.fedman-fx-staff-row {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--fedman-border);
	border-radius: 4px;
	background: var(--fedman-surface);
}

/*
 * A staff card's short fields, two to a line.
 *
 * `auto-fit` rather than a fixed `1fr 1fr`, so the Order field can vanish — the
 * script hides it once dragging works — and the line closes up to two columns
 * instead of leaving a third empty one.
 */
.fedman-fx .fedman-fx-staff-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0 1.5rem;
	align-items: start;
}

/*
 * Inside the card the shared 34rem cap is wrong twice over: it is narrower than
 * a grid column on a wide screen, which strands the input against the left of
 * its own cell, and it is what made the biography half-width. The column (and
 * for the biography, the card) decides the width here.
 */
.fedman-fx .fedman-fx-staff-fields .fedman-fx-field input[type="text"],
.fedman-fx .fedman-fx-staff-fields .fedman-fx-field input[type="number"],
.fedman-fx .fedman-fx-form .fedman-fx-field.is-full textarea {
	max-width: none;
}

.fedman-fx .fedman-fx-staff-fields .fedman-fx-field.is-narrow input[type="number"] {
	max-width: 7rem;
}

.fedman-fx fieldset.fedman-fx-sideswitch {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
}

/* The two radios sit on one line; the note about narrow screens goes below. */
.fedman-fx fieldset.fedman-fx-sideswitch > legend {
	flex: 1 0 100%;
}

.fedman-fx fieldset.fedman-fx-sideswitch > .fedman-fx-check {
	margin: 0;
}

.fedman-fx fieldset.fedman-fx-sideswitch > .fedman-fx-hint {
	flex: 1 0 100%;
	margin-top: 0.2rem;
}

.fedman-fx fieldset.fedman-fx-sideswitch legend {
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* The order form only appears once the script has made the order changeable. */
.fedman-fx form.fedman-fx-sortsave {
	margin: 0.75rem 0 0;
}

/* --------------------------------------------------- Fed Policies tab (D) */

/*
 * The rulebook is somebody's prose, so this sets reading width and rhythm and
 * otherwise gets out of the way. The block comes from `wp_kses_post()`, so the
 * elements it can contain are known and bounded.
 */
.fedman-fx .fedman-fx-policies-body {
	max-width: 70ch;
	line-height: 1.65;
}

.fedman-fx .fedman-fx-policies-body > :first-child {
	margin-top: 0;
}

.fedman-fx .fedman-fx-policies-body > :last-child {
	margin-bottom: 0;
}

.fedman-fx .fedman-fx-policies-body h2,
.fedman-fx .fedman-fx-policies-body h3,
.fedman-fx .fedman-fx-policies-body h4 {
	margin: 1.6rem 0 0.5rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fedman-fx .fedman-fx-policies-body ul,
.fedman-fx .fedman-fx-policies-body ol {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.fedman-fx .fedman-fx-policies-body li {
	margin: 0 0 0.35rem;
}

/*
 * The editor on the manage screen. TinyMCE brings its own styling, so this only
 * stops the wrapper inheriting the form furniture around it.
 */
.fedman-fx .fedman-fx-editor {
	display: block;
	margin: 0 0 0.75rem;
}

.fedman-fx .fedman-fx-editor .wp-editor-container {
	border: 1px solid var(--fedman-border);
}

/* --------------------------------------------------- Page Tabs panel (E) */

/*
 * Each tab is one bordered box, the way a wrestler card is on My Hub. It used
 * to be a divider line between rows — `border-bottom` plus a `:last-of-type`
 * rule to drop the final one — which stopped working the moment each row got a
 * slot wrapper: every row became the last of its type inside its own slot, so
 * every box lost its bottom edge. The divider is gone rather than patched,
 * because a card and a divided list are two ways of saying the same thing and
 * the card is the one that matches the roster.
 */
.fedman-fx .fedman-fx-tabrow {
	align-items: center;
	margin: 0;
	padding: 0.6rem 0.8rem;
}

.fedman-fx .fedman-fx-tabrow-label {
	display: block;
	margin: 0 0 0.2rem;
	font-weight: 700;
}

/*
 * Drag-to-reorder (027 E, revised).
 *
 * The shape is My Hub's roster: the position number in the gutter, outside the
 * bordered box, and the box itself the thing that slides. Numbers in the gutter
 * line up down the page; numbers inside each box would shift with its contents.
 *
 * Everything below is inside `.is-draggable`, which `federations.js` adds only
 * once it has finished building the grips and arrows. With the script absent
 * the class never arrives, the number boxes stay visible and this whole block
 * is inert — so the panel degrades to exactly what it was before.
 */
.fedman-fx .fedman-fx-sort-slot {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
	margin: 0 0 0.6rem;
}

/* The slot only earns its gutter once there is a number to put in it. */
.fedman-fx .fedman-fx-sort-slot > .fedman-fx-row {
	flex: 1 1 auto;
	min-width: 0;
}

.fedman-fx .fedman-fx-sortlist.is-draggable .fedman-fx-sort-num {
	display: none;
}

.fedman-fx .fedman-fx-sort-rank {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-sort-controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.45rem;
}

.fedman-fx .fedman-fx-sort-grip {
	font-size: 1.2rem;
	line-height: 1;
	color: var(--fedman-muted);
	cursor: grab;
	/* The grip is the drag target; letting a drag start as a text selection
	   instead is the commonest way these controls feel broken. */
	user-select: none;
}

.fedman-fx .fedman-fx-sort-grip:active {
	cursor: grabbing;
}

/*
 * Stacked, not side by side. Two arrows in a column stand the height of a
 * single line of text, so the controls cost one thumb's width of the box
 * rather than two.
 */
.fedman-fx .fedman-fx-sort-arrows {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 2px;
}

.fedman-fx button.fedman-fx-sort-move {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 0.95rem;
	padding: 0;
	font-size: 0.55rem;
	line-height: 1;
	color: var(--fedman-muted);
	background: transparent;
	border: 1px solid var(--fedman-border);
	border-radius: 3px;
	cursor: pointer;
}

.fedman-fx button.fedman-fx-sort-move:hover,
.fedman-fx button.fedman-fx-sort-move:focus-visible {
	color: inherit;
	border-color: var(--fedman-accent);
}

.fedman-fx .fedman-fx-sort-slot.is-dragging {
	opacity: 0.5;
}

.fedman-fx .fedman-fx-sort-status {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: var(--fedman-muted);
}

/* ------------------------------------ a federation's own tabs (1.18.0) */

.fedman-fx .fedman-fx-tabrow-badge {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.4rem;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--fedman-accent);
	border-radius: 999px;
	vertical-align: middle;
}

.fedman-fx ul.fedman-fx-customtab-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-customtab-list > li.fedman-fx-customtab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin: 0;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--fedman-border);
	border-radius: 4px;
	background: var(--fedman-surface);
	list-style: none;
}

.fedman-fx ul.fedman-fx-customtab-list > li.fedman-fx-customtab.is-editing {
	border-left: 3px solid var(--fedman-accent);
}

.fedman-fx .fedman-fx-customtab-name {
	flex: 1 1 12rem;
	min-width: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.fedman-fx .fedman-fx-customtab-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
}

/* A one-button form must not add a line break of its own. */
.fedman-fx form.fedman-fx-inline-form {
	display: inline;
	margin: 0;
}

.fedman-fx form.fedman-fx-inline-form button.fedman-fx-btn {
	border: 1px solid var(--fedman-border);
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
}

/* The public side: a commissioner's own tab renders like any other block. */
.fedman-fx .fedman-fx-custom-body {
	line-height: 1.65;
}

.fedman-fx .fedman-fx-custom-body > *:first-child {
	margin-top: 0;
}

.fedman-fx .fedman-fx-custom-body > *:last-child {
	margin-bottom: 0;
}

.fedman-fx .fedman-fx-custom-body h2,
.fedman-fx .fedman-fx-custom-body h3,
.fedman-fx .fedman-fx-custom-body h4 {
	margin: 1.4rem 0 0.5rem;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fedman-fx .fedman-fx-custom-body ul,
.fedman-fx .fedman-fx-custom-body ol {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.fedman-fx .fedman-fx-custom-body li {
	margin: 0 0 0.35rem;
}

/* ---------------------------------------------- Forums and Store tabs (F) */

.fedman-fx ul.fedman-fx-forum-list,
.fedman-fx ul.fedman-fx-thread-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-forum-list > li,
.fedman-fx ul.fedman-fx-thread-list > li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: baseline;
	margin: 0;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--fedman-border);
	list-style: none;
}

.fedman-fx ul.fedman-fx-forum-list > li:last-child,
.fedman-fx ul.fedman-fx-thread-list > li:last-child {
	border-bottom: 0;
}

.fedman-fx .fedman-fx-forum-name,
.fedman-fx .fedman-fx-thread-title {
	flex: 1 1 14rem;
	font-weight: 600;
}

.fedman-fx .fedman-fx-forum-counts,
.fedman-fx .fedman-fx-thread-meta {
	font-size: 0.8rem;
	color: var(--fedman-muted);
}

/* ------------------------------------------------------------- the store */

.fedman-fx .fedman-fx-storewide {
	font-weight: 700;
	color: var(--fedman-accent);
}

.fedman-fx ul.fedman-fx-store-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fedman-fx ul.fedman-fx-store-grid > li.fedman-fx-store-card {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--fedman-border);
	border-top: 3px solid var(--fedman-accent);
	border-radius: 4px;
	background: var(--fedman-surface);
	list-style: none;
}

.fedman-fx .fedman-fx-store-icon {
	flex: 0 0 3rem;
	width: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fedman-fx .fedman-fx-store-icon img {
	max-width: 100%;
	height: auto;
	display: block;
}

.fedman-fx .fedman-fx-store-emoji {
	font-size: 2rem;
	line-height: 1;
}

.fedman-fx .fedman-fx-store-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.fedman-fx .fedman-fx-store-name {
	font-weight: 700;
	font-size: 0.95rem;
}

.fedman-fx .fedman-fx-store-desc {
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--fedman-muted);
}

.fedman-fx .fedman-fx-store-price {
	margin-top: 0.15rem;
	font-size: 0.9rem;
}

.fedman-fx .fedman-fx-store-was {
	margin-right: 0.35rem;
	color: var(--fedman-muted);
}


/* ------------------------------------------- the chrome on forum pages (028) */

/*
 * `/federations/fedx/` and `/fedx/rp/` are the same federation one click apart.
 * The hero and the tab bar are the profile's own, rendered from the same two
 * template files — everything below is placement, not a second design.
 *
 * This block is injected into `.entry-content` on the board page, **above**
 * `#wpforo`. That position is what keeps wpForo's `#wpforo #wpforo-wrap …`
 * rules and its 13px base font off our markup: they are scoped inside a wrapper
 * this sits outside of. Nothing here needs to out-specify wpForo, and nothing
 * here may use `!important`.
 */

.fedman-fx-forum {
	margin: 0 0 1.5rem;
}

/* The panel needs room under the band; the band itself supplies none. */
.fedman-fx-profile .fedman-fx-band-tabs {
	margin-bottom: 1.75rem;
}

/*
 * The chrome is one continuous block: hero, tab band, breadcrumb band, then
 * wpForo. Nothing between them, so no stripe of page background can show
 * through and break it up.
 */
.fedman-fx-forum .fedman-fx-band-tabs {
	border-bottom: 0;
}

/*
 * Divi's `.entry-content` typography reaches in here — this block, unlike the
 * profile's, is inside the post content. The hero sets its own colour on white
 * text over artwork, so state it rather than inherit whatever the page has.
 */
.fedman-fx-forum .fedman-fx-hero,
.fedman-fx-forum .fedman-fx-hero p {
	color: #fff;
}

/*
 * The compact hero (Q3). A full hero is a lot of picture above a long thread
 * somebody came to read, so a single thread gets the short version: the same
 * hero, a modifier class, no second renderer.
 */
.fedman-fx .fedman-fx-hero.is-compact {
	padding: 1.25rem 1.25rem;
}

.fedman-fx .fedman-fx-hero.is-compact .fedman-fx-hero-emblem {
	flex: 0 0 3.25rem;
	width: 3.25rem;
	height: 3.25rem;
}

.fedman-fx .fedman-fx-hero.is-compact .fedman-fx-hero-emblem .fedman-fx-initials {
	font-size: 1.1rem;
}

.fedman-fx .fedman-fx-hero.is-compact p.fedman-fx-hero-name {
	font-size: 1.375rem;
}

.fedman-fx .fedman-fx-hero.is-compact .fedman-fx-hero-tagline {
	font-size: 0.9rem;
}

/* ---------------------------------------------- the forum breadcrumb (D85) */

/*
 * Replaces wpForo's, which is switched off per board rather than hidden. It
 * sits directly under the tab bar and continues the same band — the tab bar
 * carries `margin-bottom: 0` on a forum page for exactly this reason, so the
 * two read as one piece of chrome rather than as two stripes.
 *
 * **The horizontal padding matches the tabs' `padding-left`.** A tab's label
 * starts 1rem in from the band's edge, so a crumb list with no padding began
 * 1rem to the left of it and the two never lined up. The vertical padding
 * matches for the same reason.
 */

/*
 * The trail row: breadcrumb on the left, search on the right — roughly where
 * wpForo had the two before its menu bar was switched off.
 *
 * The left edge lines up with a tab's LABEL, not with the tab bar's own edge:
 * the gutter plus the tab's internal padding. Stated as a sum of the two tokens
 * rather than as one number, so it follows either of them.
 */
.fedman-fx-forum .fedman-fx-crumbrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	align-items: center;
	justify-content: space-between;
	max-width: var(--fedman-column);
	margin: 0 auto;
	padding: 0.45rem calc(var(--fedman-gutter) + var(--fedman-tab-pad));
	/*
	 * Smaller than the tabs (0.85rem), which is what makes it read as the
	 * subordinate line rather than a second navigation bar. Stated on the list
	 * and the items too, because Divi sizes `.entry-content li` and this block
	 * is inside the post content on a forum page.
	 */
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--fedman-chrome-ink);
}

.fedman-fx-forum .fedman-fx-forum-crumbs {
	min-width: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.fedman-fx-forum ol.fedman-fx-crumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.45rem;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	list-style: none;
}

.fedman-fx-forum li.fedman-fx-crumb {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	list-style: none;
}

/*
 * The separator is generated, not markup, so it is never read out as a word and
 * never lands in a copied selection between two crumb labels.
 *
 * It was a chevron in `var(--fedman-border)` — 28% grey, invisible on this
 * band. It is a plain `>` at a colour you can actually see: the whole point of
 * a separator is that somebody can tell it is a trail.
 */
.fedman-fx-forum li.fedman-fx-crumb + li.fedman-fx-crumb::before {
	content: ">";
	margin-right: 0.45rem;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
}

/*
 * Divi colours every `a` blue and underlines it on hover. (0,3,1) against its
 * (0,0,1) — specificity, never `!important`, which does not appear anywhere in
 * this file.
 */
.fedman-fx-forum li.fedman-fx-crumb a {
	color: var(--fedman-chrome-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.fedman-fx-forum li.fedman-fx-crumb a:hover,
.fedman-fx-forum li.fedman-fx-crumb a:focus-visible {
	color: var(--fedman-chrome-ink-strong);
	border-bottom-color: var(--fedman-chrome-ink-strong);
}

/* The page you are already on: present, named, and not a link. */
.fedman-fx-forum li.fedman-fx-crumb [aria-current="page"] {
	color: var(--fedman-chrome-ink-strong);
	font-weight: 600;
}

/* ------------------------------------------- the forum search box (1.24.1) */

/*
 * wpForo's own search lived inside `#wpforo-menu`, and its `top_bar_search`
 * setting only gates the form *within* that bar — so switching the bar off to
 * close the gap above the first thread took the search with it, and turning the
 * bar back on would return the gap. The box lives here instead, on the right of
 * the trail row.
 *
 * A plain GET form carrying `wpfs`, exactly as wpForo's was. No script, so
 * there is nothing to initialise and nothing to come back dead from an injected
 * fragment.
 */

.fedman-fx-forum .fedman-fx-forum-search {
	display: flex;
	align-items: stretch;
	flex: 0 1 18rem;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--fedman-chrome-rule);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
}

.fedman-fx-forum .fedman-fx-forum-search:focus-within {
	border-color: var(--fedman-chrome-ink);
}

/*
 * Divi styles `.entry-content input` heavily — background, border, padding and
 * a radius among them — and this block is inside the post content on a forum
 * page. (0,3,1) against its (0,2,0), so it wins on specificity. There is no
 * `!important` in this file.
 */
.fedman-fx-forum .fedman-fx-forum-search input.fedman-fx-forum-search-field {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0.3rem 0.6rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--fedman-chrome-ink-strong);
	font-size: inherit;
	line-height: 1.6;
}

.fedman-fx-forum .fedman-fx-forum-search input.fedman-fx-forum-search-field::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

/* The focus ring belongs to the whole control, not to the bare field inside. */
.fedman-fx-forum .fedman-fx-forum-search input.fedman-fx-forum-search-field:focus {
	outline: none;
}

.fedman-fx-forum button.fedman-fx-forum-search-go {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 0.55rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--fedman-chrome-ink);
	line-height: 1;
	cursor: pointer;
}

.fedman-fx-forum button.fedman-fx-forum-search-go:hover,
.fedman-fx-forum button.fedman-fx-forum-search-go:focus-visible {
	color: var(--fedman-chrome-ink-strong);
}

.fedman-fx-forum .fedman-fx-forum-search-go svg {
	display: block;
}

/*
 * On a narrow screen the trail wraps and the box takes the second line whole,
 * rather than being squeezed into a field too small to read.
 */
@media (max-width: 600px) {

	.fedman-fx-forum .fedman-fx-crumbrow {
		justify-content: flex-start;
	}

	.fedman-fx-forum .fedman-fx-forum-search {
		flex: 1 1 100%;
	}
}