/*
 * Federation Manager — drag-to-reorder furniture.
 *
 * SHARED BY THE SITE AND THE ADMIN SCREENS. Loaded on the commissioner's manage
 * page and on Federation Manager's own wp-admin screens, which is why it lives
 * here rather than inside either side's stylesheet.
 *
 * It used to sit in `public/assets/css/federations.css`, a 2,650-line front-end
 * stylesheet. When 039 brought dragging to the admin, loading that whole file
 * into wp-admin would have dragged a federation page's typography, buttons and
 * colours onto every screen this plugin owns — so these rules were MOVED here.
 * Not copied: two copies of a stylesheet is two things to keep in step, and the
 * drift always shows up as "the drag looks wrong on one of the two screens".
 *
 * WHAT THIS FILE DOES NOT DEFINE: the four custom properties it reads —
 * --fedman-accent, --fedman-border, --fedman-muted, --fedman-surface. Each side
 * sets those for its own surroundings: the site from its own palette, the admin
 * in WordPress's greys. Defining them here would make one of the two wrong.
 *
 * THE ROOT SELECTOR IS `.fedman-fx`, on both sides. The admin wraps its
 * sortable lists in that class and inherits nothing else, because nothing else
 * from the front-end stylesheet is loaded there.
 *
 * WHERE THE CLASS NAMES COME FROM, which matters when reading this:
 *   the template supplies  .fedman-fx-sortlist, -sort-slot, -sort-num,
 *                          -sort-status, .fedman-fx-sortsave
 *   the script supplies    .fedman-fx-sort-rank, -sort-controls, -sort-grip,
 *                          -sort-arrows, -sort-move, .is-draggable, .is-dragging
 *
 * That split is deliberate and is the reason the screen still works with the
 * script absent: the grip, the badge and the arrows are created by
 * `federations.js`, never by a template, so they can never render as controls
 * that do nothing.
 */

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

/*
 * 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.6125rem;
	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.9125rem;
	color: var(--fedman-muted);
}