/**
 * The profile "BoardGameGeek" tab's own sub-tab nav, filter form, and play
 * list. Built entirely on BuddyNext's --bn-* design tokens (see
 * buddynext-dev's 45-design-system-tokens.md), same convention as plays.css.
 *
 * @package WPBuddyNextBGG
 */

.wpbnbgg-profile-tab {
	--wpbnbgg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.wpbnbgg-subtabs {
	display: flex;
	gap: var(--bn-s2);
	margin-block-end: var(--bn-s4);
	border-bottom: 1px solid var(--bn-line);
}

.wpbnbgg-subtabs__item {
	padding: var(--bn-s2) var(--bn-s3);
	font: var(--bn-fw-medium) var(--bn-text-sm) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink-3);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 120ms ease, border-color 120ms ease;
}

.wpbnbgg-subtabs__item:hover {
	color: var(--bn-ink);
}

.wpbnbgg-subtabs__item.is-active {
	color: var(--bn-accent);
	border-color: var(--bn-accent);
}

.wpbnbgg-subtab-panel {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
}

.wpbnbgg-field {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);

	margin: 0;
}

/*
 * The theme (Reign, like Ashade before it on the external site) gives
 * generic form divs a bottom margin, through a selector that outranks a
 * bare class. In a bottom-aligned flex filter row that margin is
 * invisible spacing below each FIELD but not below the button -- flexbox
 * aligns margin edges, so the button sat 16px lower than the controls
 * (Thomas, 2026-09-28). Scoped to two classes so it wins on specificity
 * (verified live: 0,2,0 suffices, no !important); the rows' gap owns all
 * spacing.
 */
.wpbnbgg-collection-filters .wpbnbgg-field,
.wpbnbgg-play-filters .wpbnbgg-field {
	margin: 0;
}

.wpbnbgg-field label {
	font: var(--bn-fw-medium) var(--bn-text-2xs) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink-3);
}

/* A checkbox shaped like every other filter field -- small title label
 * on top, the option row below -- so the filter row wraps and aligns
 * exactly like the selects and the button (Thomas, 2026-09-28; used by
 * the collection's Expansions toggle and the plays' Display toggle).
 * Stretching to the row's height instead of hardcoding a control height
 * keeps the title flush with the neighbouring labels whatever height
 * the theme gives its selects -- the fixed 44px of the first attempt
 * sat 4px proud of Reign's 40px controls. */
.wpbnbgg-check-field {
	align-self: stretch;
}

.wpbnbgg-check-field__box {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--bn-s2);
	font: var(--bn-fw-medium) var(--bn-text-sm) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink-2);
	cursor: pointer;
}

/* The word next to the checkbox is an OPTION, not a field title --
 * undo the theme's uppercase field-label styling. Scoped at two
 * classes because the theme's label rule outranks a bare class, the
 * same cascade fight as the field margin above (0,2,0 verified live
 * to win without !important). */
.wpbnbgg-check-field .wpbnbgg-check-field__box {
	text-transform: none;
	letter-spacing: normal;
}

/* Where the load-more link lands: keep the first new card clear of any
 * sticky chrome instead of tucked under it. */
#wpbnbgg-new {
	scroll-margin-block-start: calc(var(--bn-topbar-h, 0px) + var(--bn-s6));
}

.wpbnbgg-play-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--bn-s3);
}

.wpbnbgg-win-only-toggle {
	display: flex;
	align-items: center;
	gap: var(--bn-s1);
	font: var(--bn-fw-medium) var(--bn-text-sm) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink-2);
}

/* ---------------------------------------------------------------------------
   Collection

   Cards and list are the same markup; only this layer differs. The switch is a
   data-view attribute on the container rather than two sets of classes, so a
   card never has to know which layout it is in.
   --------------------------------------------------------------------------- */

.wpbnbgg-collection-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--bn-s3);
}

.wpbnbgg-collection-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s2);
}

.wpbnbgg-collection-count {
	margin: 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
}

.wpbnbgg-view-toggle {
	display: flex;
	gap: 2px;
	padding: 2px;
	background: var(--bn-raised);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
}

.wpbnbgg-view-toggle__item {
	padding: var(--bn-s1) var(--bn-s3);
	border-radius: calc(var(--bn-r-md) - 3px);
	font: var(--bn-fw-medium) var(--bn-text-sm) / 1 var(--bn-font-ui);
	color: var(--bn-ink-3);
	text-decoration: none;
	transition: background 140ms var(--wpbnbgg-ease-out), color 140ms var(--wpbnbgg-ease-out);
}

.wpbnbgg-view-toggle__item:hover {
	color: var(--bn-ink);
}

.wpbnbgg-view-toggle__item.is-active {
	background: var(--bn-surface);
	color: var(--bn-ink);
}

.wpbnbgg-collection {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpbnbgg-collection__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s3);
	padding: var(--bn-s3);
	/* The subspace-card dress, mouse-over included (Thomas, 2026-09-28):
	   BuddyNext's .bn-card[data-interactive] recipe -- surface background,
	   line border brightening to line-strong on hover, the large card
	   radius, and the same eased border transition. */
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	transition: border-color var(--bn-dur) var(--bn-ease);
}

.wpbnbgg-collection__item:hover {
	border-color: var(--bn-line-strong);
}

/*
 * The result sits under the cover as well as under the text, because it is
 * about the whole play rather than a note on the column it happens to follow.
 * A full row of its own is also the only place a table of names has room.
 */
.wpbnbgg-collection__item > .wpbnbgg-play-result,
.wpbnbgg-collection__item > .wpbnbgg-play-players,
.wpbnbgg-collection__item > .wpbnbgg-collection__local {
	flex-basis: 100%;
	min-inline-size: 0;
}

.wpbnbgg-collection__body {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
	min-inline-size: 0;
	flex: 1;
}

.wpbnbgg-collection__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--bn-s1);
}

.wpbnbgg-collection__title {
	font: var(--bn-fw-semibold) var(--bn-text-base) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink);
	text-decoration: none;
}

.wpbnbgg-collection__title:hover {
	text-decoration: underline;
}

.wpbnbgg-collection__year {
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

.wpbnbgg-collection__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s1);
}

.wpbnbgg-collection__stats {
	display: grid;
	gap: 2px var(--bn-s3);
	margin: 0;
	font-size: var(--bn-text-sm);
}

.wpbnbgg-stat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s2);
	min-inline-size: 0;
}

.wpbnbgg-stat__label {
	display: flex;
	align-items: center;
	gap: var(--bn-s1);
	margin: 0;
	color: var(--bn-ink-3);
	min-inline-size: 0;
}

.wpbnbgg-stat__value {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: var(--bn-fw-medium);
	color: var(--bn-ink);
	white-space: nowrap;
}

.wpbnbgg-stat__icon {
	display: inline-flex;
	flex: none;
	inline-size: 1em;
	block-size: 1em;
	color: var(--bn-ink-3);
}

.wpbnbgg-stat__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

/* The space badge is a link to the space; it should not look like body copy. */
a.bn-badge {
	text-decoration: none;
}

a.bn-badge:hover {
	text-decoration: underline;
}

/*
 * Set apart by space alone. The card already has an edge; a rule inside it was
 * a second one competing with the first. A gap wider than the one between the
 * blocks above does the same work and draws nothing.
 */
.wpbnbgg-collection__local {
	display: block;
	margin: 0;
	padding-block-start: var(--bn-s3);
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

/*
 * The result on a card: a bar the width of the card that opens onto a small
 * table. The bar reads as a control because it looks like one -- its own
 * recessed surface, a label at one end and a marker at the other -- rather than
 * relying on a cursor change nobody sees until they are already over it.
 *
 * Closed to start with. It is the tallest thing on a card, and a page of cards
 * is scanned to find an evening before one is read.
 */

.wpbnbgg-play-result > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s2);
	padding: var(--bn-s2) var(--bn-s3);
	border: 1px solid var(--bn-line-faint);
	border-radius: var(--bn-r-md);
	/*
	 * A tint of the text colour over whatever is behind, rather than the
	 * "sunken" token. That token is only bridged to the theme on some pages:
	 * on a profile it resolves to the theme's own near-surface grey, on the
	 * activity page to BuddyNext's built-in near-black -- so the same bar was
	 * a whisper on one page and a black slab on the other. A tint has no such
	 * allegiance: it sits a fixed step off whatever surface it lands on, in
	 * either colour scheme.
	 */
	background: color-mix(in oklab, var(--bn-ink) 7%, transparent);
	cursor: pointer;
	font: var(--bn-fw-medium) var(--bn-text-sm) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink-2);
	transition: background-color 140ms var(--wpbnbgg-ease-out), color 140ms var(--wpbnbgg-ease-out);
}

.wpbnbgg-play-result > summary::-webkit-details-marker {
	display: none;
}

.wpbnbgg-play-result > summary:hover {
	background: color-mix(in oklab, var(--bn-ink) 12%, transparent);
	color: var(--bn-ink);
}

/* The marker earns its animation: it is the state of the thing it sits on. */
.wpbnbgg-play-result__marker {
	inline-size: 0.45em;
	block-size: 0.45em;
	flex: none;
	margin-inline-end: 0.15em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform 140ms var(--wpbnbgg-ease-out);
}

.wpbnbgg-play-result[open] .wpbnbgg-play-result__marker {
	transform: rotate(225deg) translate(-0.1em, -0.1em);
}

@media (prefers-reduced-motion: reduce) {
	.wpbnbgg-play-result__marker {
		transition: none;
	}
}

.wpbnbgg-play-result__panel {
	margin-block-start: var(--bn-s2);
	padding: var(--bn-s2) var(--bn-s3);
	border-radius: var(--bn-r-md);
	background: color-mix(in oklab, var(--bn-ink) 5%, transparent);
	overflow-x: auto;
}

.wpbnbgg-play-result__table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--bn-text-2xs);
}

.wpbnbgg-play-result__table th {
	padding-block-end: var(--bn-s1);
	font-weight: var(--bn-fw-medium);
	color: var(--bn-ink-3);
	text-align: start;
}

.wpbnbgg-play-result__table td {
	padding-block: var(--bn-s1);
	color: var(--bn-ink-2);
}

/* Rows read as a list, so they are separated the way list items are. */
.wpbnbgg-play-result__table tbody tr + tr td {
	border-block-start: 1px solid var(--bn-line-faint);
}

.wpbnbgg-play-result__table tr.is-winner td {
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink);
}

.wpbnbgg-play-result__table a {
	color: inherit;
	text-decoration: none;
}

.wpbnbgg-play-result__table a:hover {
	text-decoration: underline;
}

.wpbnbgg-play-result__table th:not(:first-child),
.wpbnbgg-play-result__score,
.wpbnbgg-play-result__win {
	text-align: end;
	white-space: nowrap;
}

.wpbnbgg-play-result__score {
	font-variant-numeric: tabular-nums;
}

.wpbnbgg-play-result__win .wpbnbgg-stat__icon {
	color: var(--bn-ink);
}

/*
 * The same result in a row, said outright. See play-item.php for why the two
 * views differ.
 */

.wpbnbgg-play-players__list {
	display: block;
	min-inline-size: 0;
	line-height: 1.45;
	color: var(--bn-ink-2);
}

.wpbnbgg-play-players__person {
	display: inline;
}

/* Without a separator "Thomas 9 anonyme Spieler*innen" reads as one phrase
   rather than as two entries. The non-breaking space keeps the dot with the
   name it follows, so a wrapped line never opens with it. */
.wpbnbgg-play-players__person:not(:last-child)::after {
	content: '\00A0\00B7';
	color: var(--bn-ink-3);
	font-weight: 400;
}

.wpbnbgg-play-players__person .wpbnbgg-stat__icon {
	margin-inline-end: 0.2em;
	vertical-align: -0.12em;
}

.wpbnbgg-play-players__person a {
	color: var(--bn-ink-2);
	text-decoration: none;
}

.wpbnbgg-play-players__person a:hover {
	color: var(--bn-ink);
	text-decoration: underline;
}

.wpbnbgg-play-players__person.is-winner,
.wpbnbgg-play-players__person.is-winner a {
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink);
}

.wpbnbgg-play-players__score {
	margin-inline-start: 0.35em;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	color: var(--bn-ink-3);
}

/*
 * A one-word label and a nowrap value have nothing to give each other, so in a
 * narrow column they printed on top of each other. The label yields by
 * wrapping, and breaks mid-word only where even that is not enough -- an
 * ellipsis would have been tidier and would have hidden which measure the
 * number belongs to, which is the one thing the label is there to say.
 */
.wpbnbgg-stat__label > span:not(.wpbnbgg-stat__icon) {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/* Cards: a responsive grid, cover above a single column of stats. */

/*
 * Three columns at most, and never so narrow that a measure breaks across two
 * lines.
 *
 * The floor is measured rather than chosen: the widest label and value on a
 * card are "Spieldauer" and "60-120 Min.", which need about 179px side by
 * side. Add the cover, the gap, the padding and the border and a card wants
 * 17.5rem before its measures start wrapping -- which is the point this rule
 * exists to stop at.
 *
 * max() with a third of the container is what caps the count: once a third is
 * wider than the floor, a third is the track, so a fourth never fits. min()
 * with 100% is the other end, where one card takes the full width rather than
 * overflowing it.
 */
.wpbnbgg-collection[data-view='grid'] {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(100%, max(17.5rem, (100% - 2 * var(--bn-s3)) / 3)), 1fr)
	);
	gap: var(--bn-s3);

	/*
	 * Cards keep their own height. The default (stretch) sized every card in
	 * a row to the tallest one, so OPENING a disclosure in one card stretched
	 * its neighbours and their bottom bars slid down the extra space. Started
	 * at the top, a card's disclosure bar sits right under its own content
	 * and stays put whatever the card next door does.
	 */
	align-items: start;
}

/* Belt to the braces above: a stretched card must never spread its rows. */
.wpbnbgg-collection__item {
	align-content: start;
}

/*
 * A smaller cover in the card grid than the 5rem it used to be. At the narrow
 * end those 16px are the difference between "Spieldauer 60-120 Min." fitting
 * on its line and breaking, and a cover reads perfectly well at 4rem.
 */
.wpbnbgg-collection[data-view='grid'] .wpbnbgg-collection__cover {
	inline-size: 4rem;
	block-size: 4rem;
}

/* List: denser rows, stats flowing into columns when there is room. */

.wpbnbgg-collection[data-view='list'] {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

.wpbnbgg-collection[data-view='list'] .wpbnbgg-collection__cover {
	inline-size: 3rem;
	block-size: 3rem;
}

/*
 * A wide entry gets one fixed column per measure, assigned by name rather than
 * by position. auto-fit cannot work here: it sizes columns from how many cells
 * a row happens to have, so a game missing a complexity rating shifts every
 * measure after it one column left and nothing lines up down the page.
 *
 * Labels sit next to their values rather than being pushed apart, because a
 * wide row would otherwise strand the number a hand's width from the word it
 * belongs to -- at a 45rem card that gap was over 300px.
 *
 * Measured against the block that holds the measures, not the window. Both
 * views need this now: a list row is wide by definition, and a card is wide
 * because that is what the 45rem floor buys. A space page also carries a
 * sidebar, so the window says nothing useful about either.
 */
.wpbnbgg-collection__body {
	container-type: inline-size;
	container-name: wpbnbgg-entry;
}

@container wpbnbgg-entry (min-width: 48rem) {
	.wpbnbgg-collection__stats {
		grid-template-columns: repeat(var(--wpbnbgg-stat-cols, 5), minmax(0, 1fr));
		column-gap: var(--bn-s2);
	}

	.wpbnbgg-stat {
		grid-column: var(--wpbnbgg-stat-col, auto);
		justify-content: flex-start;
		gap: var(--bn-s1);
	}
}

/* Below that, fixed columns would be too narrow to read -- let them wrap. */
@container wpbnbgg-entry (min-width: 26rem) and (max-width: 47.999rem) {
	.wpbnbgg-collection__stats {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}

	.wpbnbgg-stat {
		justify-content: flex-start;
		gap: var(--bn-s1);
	}
}

.wpbnbgg-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bn-s3);
}

.wpbnbgg-pager__status {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
}

/* Sync controls in the Settings sub-tab */

.wpbnbgg-sync-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bn-s2);
	padding: var(--bn-s3);
	background: var(--bn-raised);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
}

.wpbnbgg-sync-status {
	margin: 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
}

.wpbnbgg-sync-status:empty {
	display: none;
}

.wpbnbgg-verify-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bn-s2);
	padding: var(--bn-s3);
	background: var(--bn-raised);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
}

.wpbnbgg-verify-box p {
	margin: 0;
}

.wpbnbgg-proof-value {
	max-inline-size: 100%;
	overflow-x: auto;
}

.wpbnbgg-proof-value code {
	white-space: nowrap;
}

/* Assignment list ("who is this player?") */

.wpbnbgg-assignments {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpbnbgg-assignment {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s3);
	padding: var(--bn-s3);
	background: var(--bn-raised);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
}

.wpbnbgg-assignment__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.wpbnbgg-assignment__count {
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

/*
 * One line, three columns, never wrapped: button first, then the space
 * filter, then the member picker (Thomas, 2026-08-31). Answered rows carry
 * only the picker and a delete button.
 */
.wpbnbgg-assignment__pick {
	display: flex;
	flex: 0 1 30rem;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--bn-s2);
}

.wpbnbgg-assignment__pick .bn-btn {
	flex: none;
}

.wpbnbgg-assignment__space {
	flex: 1 1 8rem;
	min-inline-size: 0;
}

.wpbnbgg-assignment__pick .bn-select:not(.wpbnbgg-assignment__space) {
	flex: 1.4 1 10rem;
	min-inline-size: 0;
}

/*
 * The nudges under BuddyNext's Profile Strength card carry NO CSS of their
 * own: they are bn-widget cards and inherit the sidebar's typography and
 * spacing wholesale, so they read as part of the design instead of beside it.
 */

/* The event wish list: the collection card, plus what people want from it. */

.wpbnbgg-wish {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	inline-size: 100%;
	gap: var(--bn-s2);
	margin-block-start: var(--bn-s3);
	padding-block-start: var(--bn-s3);
	border-block-start: 1px solid var(--bn-line-faint);
}

/*
 * Three equal thirds of the card (Thomas, 2026-10-03): icon over label,
 * modeled on the profile navigation's compact tabs. No .bn-btn anymore --
 * the choice reads as a row of toggles, not as three calls to action, and
 * dropping the theme button also drops the !important fight its inline
 * brand rule used to force.
 */
.wpbnbgg-wish__actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	inline-size: 100%;
}

.wpbnbgg-wish .wpbnbgg-wish__button {
	display: grid;
	justify-items: center;
	row-gap: var(--bn-s1);
	padding: var(--bn-s1) 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--bn-ink-3);
	transition: color 120ms ease;
}

.wpbnbgg-wish .wpbnbgg-wish__button svg {
	inline-size: 20px;
	block-size: 20px;
}

.wpbnbgg-wish .wpbnbgg-wish__label {
	font-size: var(--bn-text-2xs);
	line-height: 1.2;
	text-align: center;
}

.wpbnbgg-wish .wpbnbgg-wish__button:hover:not(:disabled) {
	color: var(--bn-ink);
}

/*
 * Chosen is green, and green is the theme's own success colour rather than
 * a value typed in here -- the same token the winner badge uses, so "yes"
 * looks the same wherever the plugin says it. Icon and label both ride on
 * currentColor, so one declaration carries the whole state.
 */
.wpbnbgg-wish .wpbnbgg-wish__button[aria-pressed='true'] {
	color: var(--bn-success, var(--green));
}

.wpbnbgg-wish .wpbnbgg-wish__button:disabled {
	cursor: default;
	opacity: 0.55;
}

.wpbnbgg-wish__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
	/* The same fine line as above the icons, closing the row off once
	   somebody chose something (Thomas, 2026-10-03) -- the dl hides
	   itself while no answer is given, and the line goes with it. */
	border-block-start: 1px solid var(--bn-line-faint);
	padding-block-start: var(--bn-s2);
}

.wpbnbgg-wish__group {
	display: flex;
	gap: var(--bn-s2);
}

.wpbnbgg-wish__group dt {
	flex: 0 0 auto;
	font-weight: var(--bn-fw-medium);
}

.wpbnbgg-wish__group dd {
	margin: 0;
	min-inline-size: 0;
}

/* A checkbox filter reads as a switch, not as a field with a label above it. */
.wpbnbgg-filter-toggle {
	flex-direction: row;
	align-items: center;
	gap: var(--bn-s2);
}

/* "Load more" sits under the list, centred, in the theme's own button. */
.wpbnbgg-wishes__more {
	display: flex;
	justify-content: center;
	margin-block-start: var(--bn-s4);
}

/* How far down the list you are, directly above the button that extends it. */
.wpbnbgg-wishes__progress {
	margin-block-start: var(--bn-s4);
	text-align: center;
}

.wpbnbgg-wishes__progress + .wpbnbgg-wishes__more {
	margin-block-start: var(--bn-s2);
}

/*
 * The answers sit at the foot of the card, not after the statistics.
 *
 * Cards in a row are as tall as the tallest, but their contents are not: one
 * game lists five statistics and its neighbour three, so the buttons landed at
 * a different height in every card and the row read as ragged. Pushing them
 * down with an automatic margin puts every row's answers on one line, whatever
 * BoardGameGeek knows about the game above them.
 */
.wpbnbgg-wishes__list .wpbnbgg-collection__body {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

/*
 * The wish card as a grid instead of the flex row: cover and body stay
 * side by side, but the answers row (and the plays line) spans BOTH
 * columns -- the full card width, no indent under the cover (Thomas,
 * 2026-10-03). Row 1 takes the spare height, so the answers still sit
 * at the bottom of equal-height grid cards (what margin-block-start:
 * auto used to do inside the body).
 */
.wpbnbgg-wishes__list .wpbnbgg-collection__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: 1fr;
}

.wpbnbgg-wishes__list .wpbnbgg-collection__item > .wpbnbgg-wish,
.wpbnbgg-wishes__list .wpbnbgg-collection__item > .wpbnbgg-collection__plays,
.wpbnbgg-wishes__list .wpbnbgg-collection__item > .wpbnbgg-collection__local {
	grid-column: 1 / -1;
}

/* The grid gap separates the rows; a small extra margin lifts the
   separator a touch further off the complexity line (Thomas,
   2026-10-03). */
.wpbnbgg-wishes__list .wpbnbgg-collection__item > .wpbnbgg-wish {
	margin-block-start: var(--bn-s2);
}

/* The event's space: a labelled link with the organizers, a field in the editor. */
.wpbnbgg-event-space {
	display: flex;
	gap: var(--bn-s2);
	align-items: baseline;
	font-size: var(--bn-text-sm);
}

.wpbnbgg-event-space__label {
	color: var(--bn-ink-3);
	font-weight: var(--bn-fw-medium);
}

.wpbnbgg-event-space__field {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
	margin-block-start: var(--bn-s3);
}

.wpbnbgg-event-space__hint {
	margin: 0;
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

/* The "load more" step under every 99-entry list. */

.wpbnbgg-load-more {
	display: flex;
	justify-content: center;
	margin: var(--bn-s4) 0 0;
}

/*
 * The evenings behind "played N times" reuse the result table's own classes,
 * so type and sizes match the plays cards by construction. Only the cap note
 * needs a rule of its own.
 */

.wpbnbgg-collection__plays-more {
	margin: var(--bn-s2) 0 0;
	color: var(--bn-ink-4);
	font-size: var(--bn-text-2xs);
}

/* A settled row's answer: the member's name as a fact beside the delete button. */

.wpbnbgg-assignment__answer {
	flex: 1;
	min-inline-size: 0;
	font-weight: var(--bn-fw-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpbnbgg-assignment__answer a {
	color: var(--bn-accent);
	text-decoration: none;
}

.wpbnbgg-assignment__answer a:hover {
	text-decoration: underline;
}

/*
 * Statistics tab: a grid of donut tiles. Same card anatomy as the collection
 * grid (raised, bordered, radius-md) and align-items: start for the same
 * reason as over there -- legends differ in length, and the tall tile must
 * not stretch its whole row.
 */

.wpbnbgg-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
	gap: var(--bn-s3);
	align-items: start;
}

.wpbnbgg-stats__tile {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
	padding: var(--bn-s3);

	/* The subspace-card dress, like the collection/plays tiles (Thomas,
	   2026-09-28) -- surface, line border brightening on hover, large
	   radius, eased border transition. */
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	transition: border-color var(--bn-dur) var(--bn-ease);
}

.wpbnbgg-stats__tile:hover {
	border-color: var(--bn-line-strong);
}

.wpbnbgg-stats__title {
	margin: 0;
	font: var(--bn-fw-semibold) var(--bn-text-base) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink);
}

.wpbnbgg-stats__chart {
	inline-size: min(100%, 11rem);
	margin-inline: auto;
}

.wpbnbgg-stats__total {
	font: var(--bn-fw-semibold) 7px / 1 var(--bn-font-ui);
	fill: var(--bn-ink);
}

.wpbnbgg-stats__legend {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--bn-text-xs);
}

.wpbnbgg-stats__dot {
	flex: none;
	inline-size: 0.65rem;
	block-size: 0.65rem;
	border-radius: 50%;
}

.wpbnbgg-stats__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpbnbgg-stats__pct {
	color: var(--bn-ink-3);
	font-weight: var(--bn-fw-regular);
}

.wpbnbgg-stats__note {
	margin: 0 0 var(--bn-s3);
	color: var(--bn-ink-3);
	font-size: var(--bn-text-xs);
}

/* The one year pulldown above the whole grid; its choice applies to every chart. */

.wpbnbgg-stats__year {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	margin-block-end: var(--bn-s3);
}

.wpbnbgg-stats__year label {
	color: var(--bn-ink-3);
	font-size: var(--bn-text-sm);
}

.wpbnbgg-stats__year .bn-select {
	flex: none;
	inline-size: auto;
}

/* Export / import of plays: a collapsed card under the play list. */

.wpbnbgg-transfer {
	margin-block-start: var(--bn-s3);
}

.wpbnbgg-transfer > summary {
	cursor: pointer;
	font-weight: var(--bn-fw-semibold);
	list-style: none;
}

.wpbnbgg-transfer > summary::-webkit-details-marker {
	display: none;
}

.wpbnbgg-transfer > summary::before {
	content: '\25B8\00A0';
	color: var(--bn-ink-3);
}

.wpbnbgg-transfer[open] > summary::before {
	content: '\25BE\00A0';
}

.wpbnbgg-transfer[open] > summary {
	margin-block-end: var(--bn-s3);
}

.wpbnbgg-transfer__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bn-s2);
	margin-block-end: var(--bn-s2);
}

.wpbnbgg-transfer__row .bn-select,
.wpbnbgg-transfer__row .bn-input {
	flex: none;
	inline-size: auto;
	max-inline-size: 100%;
}

/* CSV preview: one row per parsed line, match and space adjustable. */

.wpbnbgg-csv-rows {
	margin: 0 0 var(--bn-s2);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}

.wpbnbgg-csv-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bn-s2);
	padding: var(--bn-s1) var(--bn-s2);
	background: var(--bn-raised);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	font-size: var(--bn-text-sm);
}

.wpbnbgg-csv-row.is-invalid {
	opacity: 0.55;
}

.wpbnbgg-csv-row__date {
	font-variant-numeric: tabular-nums;
	color: var(--bn-ink-3);
	flex: none;
}

.wpbnbgg-csv-row__game {
	font-weight: var(--bn-fw-medium);
	min-inline-size: 8rem;
}

.wpbnbgg-csv-row__match {
	position: relative;
	flex: 1;
	min-inline-size: 12rem;
}

.wpbnbgg-csv-row__search {
	position: relative;
	display: block;
}

.wpbnbgg-csv-row__space {
	flex: none;
}

/*
 * Space statistics: the headline row in brand red -- four columns, two on
 * a phone (the layout Thomas pointed at on boredgamertools, in our own
 * dress) -- then the month and top-ten tiles beside the usual donuts.
 */

.wpbnbgg-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bn-s2);
	margin: 0 0 var(--bn-s3);
	padding: 0;
	list-style: none;
}

@media (max-width: 640px) {
	.wpbnbgg-kpis {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Neutral tile with the number in accent (Thomas, 2026-09-28): the theme
 * keeps accent for buttons and highlights, surfaces stay neutral -- the
 * old full-accent tiles shouted next to its cards. Same language as
 * BuddyNext's own admin stat tiles. */
.wpbnbgg-kpi {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--bn-s3) var(--bn-s2);
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	transition: border-color var(--bn-dur) var(--bn-ease);
	text-align: center;
}

.wpbnbgg-kpi:hover {
	border-color: var(--bn-line-strong);
}

.wpbnbgg-kpi__value {
	font: var(--bn-fw-bold) var(--bn-text-2xl, 1.75rem) / 1.1 var(--bn-font-ui);
	font-variant-numeric: tabular-nums;
	color: var(--bn-accent);
}

.wpbnbgg-kpi__label {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}

/* Game of the month: cover, name, play count, then the measure rows. */

.wpbnbgg-month-tile__head {
	display: flex;
	align-items: center;
	gap: var(--bn-s3);
}

.wpbnbgg-month-tile__cover {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	object-fit: cover;
	border-radius: var(--bn-r-sm, 6px);
	flex: none;
}

.wpbnbgg-month-tile__name {
	margin: 0;
	font: var(--bn-fw-semibold) var(--bn-text-base) / var(--bn-leading-tight) var(--bn-font-ui);
}

.wpbnbgg-month-tile__plays {
	margin: 2px 0 0;
	color: var(--bn-ink-3);
	font-size: var(--bn-text-xs);
}

/* The ten most played games, rank first, count right-aligned. */

.wpbnbgg-top-games {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}

.wpbnbgg-top-games__row {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	font-size: var(--bn-text-sm);
}

.wpbnbgg-top-games__rank {
	inline-size: 1.4rem;
	flex: none;
	text-align: right;
	color: var(--bn-ink-3);
	font-variant-numeric: tabular-nums;
}

.wpbnbgg-top-games__cover {
	inline-size: 2rem;
	block-size: 2rem;
	object-fit: cover;
	border-radius: var(--bn-r-sm, 6px);
	flex: none;
}

.wpbnbgg-top-games__name {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The recently-played tile borrows the row anatomy; a date takes the
   count's slot, quiet like the collection card's date. */
.wpbnbgg-top-games__date {
	flex: none;
	color: var(--bn-ink-3);
	font-size: var(--bn-text-xs);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ── The meeple word cloud above the KPI tiles (Thomas, 2026-10-02) ──
   A canvas filled by the bundled wordcloud2.js: titles packed
   horizontally and vertically inside a meeple silhouette (the mask and
   outline are drawn in stats-cloud.js from this element's computed
   tokens). --wpbnbgg-cloud-bg names the surface the cloud sits on; the
   mask paints the outside of the meeple in exactly that color, so the
   blocked area is invisible on the identical background. */
.wpbnbgg-cloud {
	--wpbnbgg-cloud-bg: var(--bn-canvas);
	inline-size: min(100%, 560px);
	/* No own bottom margin: the subtab panel's 16px flex gap alone seats
	   the KPI tiles, same rhythm as every other panel child (Thomas,
	   2026-10-02 -- the earlier extra s4 doubled up on that gap). */
	margin: 0 auto;
	color: var(--bn-ink);
	font-family: var(--bn-font-display);
}

.wpbnbgg-cloud canvas {
	display: block;
	inline-size: 100%;
}

/* ── Session planning (Thomas, 2026-10-18) ──────────────────────────
   Planned rounds under day headings; the cards wear the collection's
   own dress, with a people block and an action row of their own. */

.wpbnbgg-planning__day {
	margin: var(--bn-s4) 0 var(--bn-s2);
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wide);
	color: var(--bn-ink);
}

.wpbnbgg-session__when {
	margin: 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	font-variant-numeric: tabular-nums;
}

.wpbnbgg-session__seats {
	margin: 0;
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}

.wpbnbgg-session__seats--open {
	color: var(--bn-success, var(--green));
	font-weight: var(--bn-fw-medium);
}

.wpbnbgg-session__people {
	/* A row of its own under image and body, so the groups start on the
	 * game image's left line (Thomas, 2026-10-19). */
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
	margin: 0;
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

/* Two columns like a table (Thomas, 2026-10-19): the labels (Explains,
 * Playing, Waiting) on the game image's left line, the names on the
 * title's line -- the label column is exactly one cover plus the card
 * gap wide, per view. */
.wpbnbgg-session__group {
	display: flex;
	align-items: baseline;
}

.wpbnbgg-session__group dt {
	flex: 0 0 calc(4rem + var(--bn-s3));
	font-weight: var(--bn-fw-medium);
}

.wpbnbgg-collection[data-view='list'] .wpbnbgg-session__group dt {
	flex-basis: calc(3rem + var(--bn-s3));
}

.wpbnbgg-session__group dd {
	margin: 0;
	min-inline-size: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bn-s1) var(--bn-s2);
}

.wpbnbgg-session__person {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.wpbnbgg-session__skill,
.wpbnbgg-session__offer {
	font-style: normal;
	color: var(--bn-ink-3);
}

.wpbnbgg-session__offer {
	color: var(--bn-accent);
}

/* The "Game of the month filter" panel (Thomas, 2026-10-24), in the
 * official settings-panel anatomy. The bn-space-settings__* recipes live
 * in bn-spaces.css, which the profile edit screen does not load -- these
 * scoped mirrors carry the same values so both surfaces match. */
.wpbnbgg-month-filter {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
}

.wpbnbgg-month-filter .bn-space-settings__panel-title {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-lg);
	font-weight: var(--bn-fw-bold);
	color: var(--bn-ink);
	margin: 0;
}

.wpbnbgg-month-filter .bn-space-settings__panel-desc {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	margin: 0;
}

:is(.wpbnbgg-month-filter, .wpbnbgg-session-form) .bn-space-settings__member-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

:is(.wpbnbgg-month-filter, .wpbnbgg-session-form) .bn-space-settings__member-row {
	display: flex;
	align-items: center;
	gap: var(--bn-s3);
	padding: var(--bn-s2);
	border-radius: var(--bn-r-md);
	background: var(--bn-sunken);
	flex-wrap: wrap;
}

:is(.wpbnbgg-month-filter, .wpbnbgg-session-form) .bn-space-settings__member-info {
	flex: 1;
	min-inline-size: 0;
}

:is(.wpbnbgg-month-filter, .wpbnbgg-session-form) .bn-space-settings__member-actions {
	display: flex;
	gap: var(--bn-s1);
	flex-wrap: wrap;
	align-items: center;
}

:is(.wpbnbgg-month-filter, .wpbnbgg-session-form) .bn-space-settings__member-name {
	font-weight: var(--bn-fw-semibold);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink);
	margin: 0;
}

.wpbnbgg-month-filter .bn-space-settings__invite-row {
	display: flex;
	gap: var(--bn-s2);
	flex-wrap: wrap;
	align-items: center;
}

.wpbnbgg-month-filter .bn-space-settings__invite-row .bn-input {
	flex: 1;
	margin: 0;
}

/* The game cover fills its avatar circle like a member photo. */
:is(.wpbnbgg-month-filter, .wpbnbgg-session-form) .bn-avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The play card's delete control, in BuddyNext's own dress (Thomas,
 * 2026-10-24): the dark 2rem circle with the light cross the lightbox
 * close uses (--bn-sunken / --bn-ink-3), pinned to the card's top right
 * corner, and only shown while a permitted viewer hovers the card. On a
 * touch screen there is no hover, so it stays visible there. */
.wpbnbgg-collection__item:has( .wpbnbgg-play__delete ) {
	position: relative;
}

.wpbnbgg-play__delete {
	position: absolute;
	inset-block-start: var(--bn-s2);
	inset-inline-end: var(--bn-s2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--bn-sunken);
	color: var(--bn-ink-3);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	opacity: 0;
	transition: opacity var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease);
}

.wpbnbgg-collection__item:hover .wpbnbgg-play__delete,
.wpbnbgg-play__delete:focus-visible {
	opacity: 1;
}

/* Hovering the CROSS itself fills the whole circle accent-red with the
 * light cross (Thomas, 2026-10-24, reference screenshots of BuddyNext's
 * remove control) -- the exact color pair of the primary button, where
 * core guarantees the label contrast on the accent. */
.wpbnbgg-play__delete:hover {
	background: var(--bn-accent-solid);
	color: var(--bn-accent-fg);
}

@media ( hover: none ) {
	.wpbnbgg-play__delete {
		opacity: 1;
	}
}

/* The play's date, its own line right under the title. */
.wpbnbgg-play__date {
	margin: 0;
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

.wpbnbgg-session__remove {
	border: 0;
	background: none;
	color: var(--bn-ink-3);
	cursor: pointer;
	padding: 0 2px;
}

.wpbnbgg-session__remove:hover {
	color: var(--bn-ink);
}

.wpbnbgg-session__actions {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s2);
	margin-block-start: var(--bn-s2);
	padding-block-start: var(--bn-s2);
	border-block-start: 1px solid var(--bn-line-faint);
}

/* The plan-a-round form. */

.wpbnbgg-session-form {
	margin-block-end: var(--bn-s3);
}

.wpbnbgg-session-form summary {
	display: inline-flex;
	cursor: pointer;
	list-style: none;
}

.wpbnbgg-session-form summary::-webkit-details-marker {
	display: none;
}

.wpbnbgg-session-form__body {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
	margin-block-start: var(--bn-s3);
	padding: var(--bn-s3);
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
}

.wpbnbgg-session-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s3);
}

.wpbnbgg-session-form__gamerow {
	display: flex;
	gap: var(--bn-s2);
	align-items: center;
}

.wpbnbgg-session-form__gamerow .bn-input {
	flex: 1;
	margin: 0;
}

.wpbnbgg-session-form__results,
.wpbnbgg-session-form__members,
.wpbnbgg-session-form__explainers,
.wpbnbgg-month-filter__list {
	margin: var(--bn-s1) 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md, 8px);
	background: var(--bn-raised);
	max-block-size: 14rem;
	overflow: auto;
}

.wpbnbgg-session-form__results button,
.wpbnbgg-session-form__members button,
.wpbnbgg-session-form__explainers button,
.wpbnbgg-month-filter__list button {
	display: block;
	inline-size: 100%;
	text-align: start;
	border: 0;
	background: none;
	color: var(--bn-ink);
	padding: var(--bn-s2) var(--bn-s3);
	cursor: pointer;
}

.wpbnbgg-session-form__results button:hover,
.wpbnbgg-session-form__members button:hover,
.wpbnbgg-session-form__explainers button:hover,
.wpbnbgg-month-filter__list button:hover {
	background: var(--bn-surface);
}

/* The day calendar under the date (Thomas, 2026-10-19): the players'
 * other rounds as muted fixed blocks, the planned round as an accent
 * block one drags onto a free slot. */
.wpbnbgg-session-form__daycal-hint {
	margin: 0 0 var(--bn-s1);
	font: var(--bn-fw-regular) var(--bn-text-2xs) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink-3);
}

.wpbnbgg-daycal {
	position: relative;
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md, 8px);
	background: var(--bn-surface);
	overflow: hidden;
}

.wpbnbgg-daycal__hour {
	position: absolute;
	inset-inline: 0;
	border-top: 1px solid var(--bn-line);
	pointer-events: none;
}

.wpbnbgg-daycal__hour span {
	position: absolute;
	top: 2px;
	left: var(--bn-s1);
	font: var(--bn-fw-regular) 10px / 1 var(--bn-font-ui);
	color: var(--bn-ink-3);
}

.wpbnbgg-daycal__busy,
.wpbnbgg-daycal__plan {
	position: absolute;
	inset-inline: 3.25rem var(--bn-s2);
	box-sizing: border-box;
	border-radius: var(--bn-r-sm, 6px);
	padding: 2px var(--bn-s2);
	font: var(--bn-fw-medium) var(--bn-text-2xs) / var(--bn-leading-tight) var(--bn-font-ui);
	overflow: hidden;
}

.wpbnbgg-daycal__busy {
	background: var(--bn-raised);
	border: 1px solid var(--bn-line-strong, var(--bn-line));
	color: var(--bn-ink-3);
}

.wpbnbgg-daycal__plan {
	background: color-mix( in srgb, var(--bn-accent) 18%, transparent );
	border: 1px solid var(--bn-accent);
	color: var(--bn-ink);
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	z-index: 1;
}

.wpbnbgg-daycal__plan[data-conflict] {
	border-style: dashed;
	background: color-mix( in srgb, var(--bn-accent) 40%, transparent );
}

.wpbnbgg-daycal__plantime {
	font-weight: var(--bn-fw-semibold);
}

/* The field column stretches its children; the "+ Anonymous" trigger is
 * a small right-hand button, not a bar (Thomas, 2026-10-19). */
.wpbnbgg-session-form__guesttoggle {
	align-self: flex-end;
}

.wpbnbgg-session-form__picked {
	margin: var(--bn-s1) 0 0;
}

.wpbnbgg-session-form__players {
	margin: 0 0 var(--bn-s2);
}

.wpbnbgg-session-form__time {
	margin: 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	font-variant-numeric: tabular-nums;
}

.wpbnbgg-session-form__error {
	margin: 0;
	color: var(--bn-danger, #c33);
}

/* The player row: the skill select takes only its own width, so it can
   never sit over the name (Thomas, 2026-10-18); long names ellipsize. */

.wpbnbgg-session-form__players .wpbnbgg-session-form__skill {
	flex: 0 0 auto;
	inline-size: auto;
	max-inline-size: 11rem;
	margin: 0;
}

/* The timing breakdown under the date: label-value pairs, not a sum
   squeezed into one sentence (Thomas, 2026-10-18). */

.wpbnbgg-session-form__timing {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	font-variant-numeric: tabular-nums;
}

.wpbnbgg-session-form__timing > div {
	display: flex;
	gap: var(--bn-s2);
}

.wpbnbgg-session-form__timing dt {
	flex: 0 0 11rem;
	color: var(--bn-ink-3);
}

.wpbnbgg-session-form__timing dd {
	margin: 0;
}

.wpbnbgg-session-form__timing > div:last-child {
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink);
}