/* Phase-1 shell: the tab inherits everything from BuddyNext's own tokens. */

.wpbnbge-events h3 {
	margin-block-start: 0;
}

/* The overview title carries the calendar icon, like the space tab bar. */
.wpbnbge-head__title {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
}

.wpbnbge-head__icon {
	display: flex;
	color: var(--bn-ink-2);
}

.wpbnbge-head__icon svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.wpbnbge-create {
	margin-block-end: var(--bn-s4);
}

.wpbnbge-section {
	margin-block: var(--bn-s4) var(--bn-s2);
}

.wpbnbge-event {
	padding: var(--bn-s3);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	margin-block-end: var(--bn-s3);
}

.wpbnbge-event.is-cancelled {
	opacity: 0.6;
}

.wpbnbge-event__head {
	display: flex;
	gap: var(--bn-s2);
	align-items: baseline;
}

.wpbnbge-event__title {
	margin: 0;
	font-size: var(--bn-text-md);
}

.wpbnbge-event__meta,
.wpbnbge-event__counts,
.wpbnbge-event__people,
.wpbnbge-event__mine {
	margin: var(--bn-s1) 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
}

.wpbnbge-event__rsvp {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--bn-s3);
	margin-block-start: var(--bn-s2);
}

/* The buttons close the panel on their own line, side by side. */
.wpbnbge-event__actions {
	display: flex;
	gap: var(--bn-s2);
	flex-wrap: wrap;
}

/*
 * ONE title form for every block in the panel -- days, options, allergies
 * all wear the small uppercase legend the section headings use.
 */
.wpbnbge-event__rsvp legend,
.wpbnbge-event__rsvp .wpbnbge-allergies > span {
	font-size: var(--bn-text-2xs);
	font-weight: var(--bn-fw-medium);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bn-ink-3);
	margin-block-end: var(--bn-s1);
	padding: 0;
}

.wpbnbge-event__options {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}

.wpbnbge-option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: var(--bn-s2);
	align-items: center;
	font-size: var(--bn-text-sm);
}

.wpbnbge-option.is-full {
	opacity: 0.55;
}

/* The remaining count sits on its own line, under the name. */
.wpbnbge-option__left {
	grid-column: 2 / -1;
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

.wpbnbge-allergies {
	max-inline-size: 26rem;
}

/* Days, options and the dietary card each wear their own tile (Thomas,
   2026-10-25) -- the subspace tile recipe: surface, faint line, r-lg. */
.wpbnbge-event__rsvp > fieldset {
	border: 1px solid var(--bn-line-faint);
	border-radius: var(--bn-r-lg);
	background: var(--bn-surface);
	padding: var(--bn-s3);
	margin: 0;
}

/* The two subheads inside the dietary card. */
.wpbnbge-rsvp-sub {
	margin: 0 0 var(--bn-s1);
	font-size: var(--bn-text-xs);
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink-2);
}

.wpbnbge-rsvp-sub + .wpbnbge-diet {
	margin-block-end: var(--bn-s2);
}

/* "Do not guarantee" only means something while the ask itself is on;
   unticking the ask folds it away (the value is harmless either way). */
.wpbnbge-form:has(input[name='allergy_enabled']:not(:checked)) .wpbnbge-allergy-disclaimer {
	display: none;
}

/* The disclaimer's warning, below the allergies: the sunken list-row
   shape, tinted lightly red. */
.wpbnbge-allergy-warning {
	margin: var(--bn-s2) 0 0;
	padding: var(--bn-s2);
	border-radius: var(--bn-r-md);
	background: color-mix(in oklab, var(--bn-danger, #c0392b) 12%, transparent);
	color: var(--bn-ink);
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-medium);
}

/* The common allergies, tickable side by side. */
.wpbnbge-allergy-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s1) var(--bn-s3);
	margin-block-end: var(--bn-s2);
}

/*
 * The form as sections, the way a person thinks about an evening: what it is,
 * when, where, who can come. Every colour comes from the theme's tokens -- the
 * modernity is spacing, grouping and focus, not a palette of our own.
 */
.wpbnbge-form {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
	margin-block-start: var(--bn-s3);
}

.wpbnbge-form__section {
	margin: 0;
	padding: var(--bn-s4);
	border: 1px solid var(--bn-line-faint);
	border-radius: var(--bn-r-md);
	background: color-mix(in oklab, var(--bn-ink) 3%, transparent);
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
}

.wpbnbge-form__section > legend {
	padding-inline: var(--bn-s2);
	font-size: var(--bn-text-2xs);
	font-weight: var(--bn-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bn-ink-3);
}

.wpbnbge-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--bn-s3);
}

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

.wpbnbge-field > span {
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-medium);
	color: var(--bn-ink-2);
}

.wpbnbge-form .bn-input,
.wpbnbge-form .bn-select {
	inline-size: 100%;
	padding: 0.65em 0.8em;
	border-radius: var(--bn-r-md);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* BuddyNext's .bn-input pins a 40px height that overrules the rows
   attribute; textareas get their five lines back and stay resizable. */
.wpbnbge-form textarea.bn-input {
	block-size: auto;
	min-block-size: 8.5rem;
	resize: vertical;
}

.wpbnbge-form .bn-input:focus-visible,
.wpbnbge-form .bn-select:focus-visible {
	outline: none;
	border-color: var(--bn-accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--bn-accent) 25%, transparent);
}

.wpbnbge-toggle {
	display: inline-flex;
	gap: var(--bn-s2);
	align-items: center;
	font-size: var(--bn-text-sm);
	cursor: pointer;
}

/* All-day hides the time fields -- no script, the checkbox is the state. */
.wpbnbge-form:has(input[name='all_day']:checked) .wpbnbge-field--time {
	display: none;
}

/* A hidden end needs no end fields either. */
.wpbnbge-form:has(input[name='hide_end']:checked) .wpbnbge-field--ends {
	display: none;
}

.wpbnbge-form__footer {
	display: flex;
	justify-content: flex-end;
}

.wpbnbge-event__admin {
	margin-block-start: var(--bn-s2);
}

.wpbnbge-message:empty {
	display: none;
}

.wpbnbge-message {
	color: var(--bn-danger);
	font-size: var(--bn-text-sm);
}

.wpbnbge-map {
	block-size: 220px;
	border-radius: var(--bn-r-md);
	overflow: hidden;
	margin-block: var(--bn-s2);
}

.wpbnbge-venues {
	margin-block-end: var(--bn-s4);
}

.wpbnbge-venues__hint {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
}

.wpbnbge-venue {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
	padding-block: var(--bn-s2);
	border-block-end: 1px solid var(--bn-line-faint);
}

.wpbnbge-venue__foot {
	display: flex;
	gap: var(--bn-s2);
	align-items: center;
}

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


/*
 * The create control: the bgg play tab's square + in the panel's top
 * corner, sitting in its own row above the head. .bn-btn sets its own
 * height and wins on specificity, so the square has to restate it.
 */

.wpbnbge-create-toggle.bn-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline-start: auto;
	margin-block-end: var(--bn-s3);
	inline-size: 2.5rem;
	block-size: 2.5rem;
	min-block-size: 2.5rem;
	padding: 0;
	cursor: pointer;
}

/* The plus turns into a cross while the form is open: same control, and
   the rotation says which way it goes. */
.wpbnbge-create-toggle__glyph {
	font-size: var(--bn-text-lg);
	line-height: 1;
	transition: transform 160ms ease-out;
}

.wpbnbge-create-toggle.is-open .wpbnbge-create-toggle__glyph {
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.wpbnbge-create-toggle__glyph {
		transition: none;
	}
}

/* The global hub surface: bare in the shell's main column, headed like
   /spaces/ (bn-section-head + subtitle) with the calendar icon; the
   Upcoming/Past group labels wear the sidebar-widget-title dress --
   uppercase, small, wide tracking (Thomas, 2026-09-28). Scoped to the
   hub so the space tab's plain headings stay as they are. */

.wpbnbge-hub .bn-section-head {
	margin-block-end: var(--bn-s4);
}

.wpbnbge-hub .wpbnbge-head__icon svg {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

/* (Scope widened from the hub to every surface on 2026-09-28: the
   space tab's group labels wear the same dress.) */
.wpbnbge-section {
	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);
}

/* The load-more row under a group; the anchored tile keeps clear of the
   sticky header when the link jumps to it. */

.wpbnbge-more {
	display: flex;
	justify-content: center;
	margin: var(--bn-s3) 0 0;
}

#wpbnbge-more-up,
#wpbnbge-more-past {
	scroll-margin-top: 7rem;
}

/* The button's label, for anyone who is not reading its shape. */
.wpbnbge-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The venue row's buttons; Edit only exists while a venue is selected. */
.wpbnbge-where__actions {
	display: flex;
	gap: var(--bn-s2);
}

/* One verb at a time: Add while nothing is picked, Edit while something
   is. Deleting lives in the edit panel and only while an existing venue
   is being edited (openVenuePanel writes data-editing). */
.wpbnbge-where:has(select[name='venue_id'] option[value='']:checked) .wpbnbge-where__edit,
.wpbnbge-where:not(:has(select[name='venue_id'] option[value='']:checked)) .wpbnbge-where__add,
.wpbnbge-venue-panel:not([data-editing]) .wpbnbge-venue-delete,
.wpbnbge-venue-panel[data-editing=''] .wpbnbge-venue-delete {
	display: none;
}

.wpbnbge-venue-panel {
	padding: var(--bn-s3);
	border: 1px dashed var(--bn-line);
	border-radius: var(--bn-r-md);
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
}

/* The waitlist only exists under a cap: no number, no toggle. */
.wpbnbge-attendance:has(input[name='max_attendees']:placeholder-shown) .wpbnbge-waitlist {
	display: none;
}

/* RSVP events know no prices; ticket events get no waitlist (their waiting
   flow arrives with the payments phase). The type radio is the state. */
.wpbnbge-form:has(input[name='event_type'][value='rsvp']:checked) .wpbnbge-opt-entry__price,
.wpbnbge-form:has(input[name='event_type'][value='rsvp']:checked) .wpbnbge-event-price,
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-opt-entry__price,
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-event-price {
	display: none;
}

/* "Public from" only means something on a private event; the publishing
   appointment only on a draft. Both reveals keep the section's usual
   small gap to the block above (they sit inside the visibility field,
   whose own gap is tighter). */
.wpbnbge-form:has(input[name='visibility'][value='public']:checked) .wpbnbge-public-from,
.wpbnbge-form:has(input[name='visibility'][value='draft']:checked) .wpbnbge-public-from,
.wpbnbge-form:has(input[name='visibility'][value='public']:checked) .wpbnbge-publish-plan,
.wpbnbge-form:has(input[name='visibility'][value='private']:checked) .wpbnbge-publish-plan {
	display: none;
}

.wpbnbge-public-from,
.wpbnbge-publish-plan {
	margin-block-start: var(--bn-s2);
}

/* "Never" sits beside the date pair, on the controls' line. */
.wpbnbge-public-never {
	align-self: end;
	padding-block-end: 0.65em;
}

/* The publish plan is a field of its own: label, the choice, the moment. */
.wpbnbge-publish-plan {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}

.wpbnbge-publish-plan > span {
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-medium);
	color: var(--bn-ink-2);
}

/* Without registration there is nobody to count, no options to pick, no
   booking mode -- and no registration deadline either. */
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-attendance,
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-options-editor,
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-booking-mode,
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-deadline-row,
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-deadline-field {
	display: none;
}

/* The end date and the booking mode only mean something on a multi-day
   event; the switch above the dates reveals both. Unticking clears them
   (store.js), so nothing hidden ships. */
.wpbnbge-form:has(input[name='multi_day']:not(:checked)) .wpbnbge-field--ends,
.wpbnbge-form:has(input[name='multi_day']:not(:checked)) .wpbnbge-booking-mode {
	display: none;
}

/* The Extras chain unfolds step by step: the sub-space choice only under
   a ticked community box (creation only -- editing has no such box, so
   the chain starts at the choice there), the pick only under a ticked
   choice. Whatever hides a step also clears it (store.js). */
.wpbnbge-form:has(input[name='community_event']:not(:checked)) .wpbnbge-subspace-choice,
.wpbnbge-form:has(input[name='community_event']:not(:checked)) .wpbnbge-subspace-pick,
.wpbnbge-form:has(input[name='use_existing_subspace']:not(:checked)) .wpbnbge-subspace-pick {
	display: none;
}

/* The currency picker only means something on a ticket sale. */
.wpbnbge-form:has(input[name='event_type'][value='rsvp']:checked) .wpbnbge-currency,
.wpbnbge-form:has(input[name='event_type'][value='none']:checked) .wpbnbge-currency {
	display: none;
}

/* The per-day price cell: only on a ticket sale booked by the day. Not a
   .wpbnbge-dt-time on purpose -- an all-day row keeps its price. */
.wpbnbge-dt-pricewrap {
	display: none;
}

.wpbnbge-form:has(input[name='event_type'][value='ticket']:checked):has(input[name='booking_mode'][value='per_day']:checked) .wpbnbge-dt-pricewrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--bn-s1);
}

.wpbnbge-daytime-row .wpbnbge-dt-price {
	inline-size: 7rem;
}

/* The sub-space, currency and venue lists, in the planning picker's dress. */
.wpbnbge-currency-list,
.wpbnbge-venue-list,
.wpbnbge-subspace-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;
}

.wpbnbge-currency-list button,
.wpbnbge-venue-list button,
.wpbnbge-subspace-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;
}

.wpbnbge-currency-list button:hover,
.wpbnbge-venue-list button:hover,
.wpbnbge-subspace-list button:hover {
	background: var(--bn-surface);
}

/* The picked room, as the member row the planning form gives games and
   players -- mirrored here because the bn-space-settings recipes live in
   the settings panel's own stylesheet, not on every space page. */
:is(.wpbnbge-extras, .wpbnbge-options-editor, .wpbnbge-venue-pick) .bn-space-settings__member-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

:is(.wpbnbge-extras, .wpbnbge-options-editor, .wpbnbge-venue-pick) .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(.wpbnbge-extras, .wpbnbge-options-editor, .wpbnbge-venue-pick) .bn-space-settings__member-info {
	flex: 1;
	min-inline-size: 0;
}

:is(.wpbnbge-extras, .wpbnbge-options-editor, .wpbnbge-venue-pick) .bn-space-settings__member-name {
	font-weight: var(--bn-fw-semibold);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink);
	margin: 0;
}

:is(.wpbnbge-extras, .wpbnbge-options-editor, .wpbnbge-venue-pick) .bn-space-settings__member-actions {
	display: flex;
	gap: var(--bn-s1);
	flex-wrap: wrap;
	align-items: center;
}

:is(.wpbnbge-extras, .wpbnbge-options-editor, .wpbnbge-venue-pick) .bn-avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* "Repeat until" only matters once a rhythm is chosen. */
.wpbnbge-form:has(select[name='repeat_rule'] option[value='none']:checked) .wpbnbge-repeat-until {
	display: none;
}

/* The community extras exist for one-off events only -- a series would
   spawn a room per copy. A chosen repeat rhythm hides the whole Extras
   card instead of greying the switch (Thomas, 2026-11-02): everything in
   it hangs off the community switch on creation, and store.js unticks
   and collapses the chain, so nothing hidden ships. Edit mode has no
   community switch and never carries data-disabled, so it is untouched. */
.wpbnbge-form:has(.wpbnbge-community-event[data-disabled]) .wpbnbge-extras {
	display: none;
}

/* One row per calendar day: weekday label, start/end time, per-day
 * all-day and per-day open end (Thomas, 2026-10-19). */
.wpbnbge-day-times {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
	margin-block-start: var(--bn-s2);
}

/* The sunken row our entity lists wear; min-block-size keeps an all-day
   row (whose time inputs fold away) as tall as a timed one. */
.wpbnbge-daytime-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bn-s2) var(--bn-s3);
	padding: var(--bn-s2);
	border-radius: var(--bn-r-md);
	background: var(--bn-sunken);
	min-block-size: 3.6rem;
	box-sizing: border-box;
}

.wpbnbge-daytime-row__day {
	flex: 0 0 6rem;
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-medium);
	color: var(--bn-ink-2);
	font-variant-numeric: tabular-nums;
}

.wpbnbge-daytime-row .wpbnbge-dt-time {
	flex-direction: row;
	align-items: center;
	gap: var(--bn-s1);
}

.wpbnbge-daytime-row .wpbnbge-dt-time input {
	inline-size: auto;
}

/* All-day keeps the row's exact geometry (visibility, not display), so a
   list of mixed rows stays one height (Thomas, 2026-10-25). The open-end
   fold only drops the end field and may reflow. */
.wpbnbge-daytime-row.is-allday .wpbnbge-dt-time,
.wpbnbge-daytime-row.is-allday .wpbnbge-toggle:has(.wpbnbge-dt-he) {
	visibility: hidden;
}

.wpbnbge-daytime-row.is-openend .wpbnbge-dt-endwrap {
	display: none;
}

/* The pin preview inside the venue panel. */
.wpbnbge-venue-map {
	block-size: 220px;
	border-radius: var(--bn-r-md);
	overflow: hidden;
}

/* Per-day events price each day; the single event price would contradict it. */
.wpbnbge-form:has(input[name='booking_mode'][value='per_day']:checked) .wpbnbge-event-price {
	display: none;
}

.wpbnbge-form:has(input[name='event_type'][value='ticket']:checked) .wpbnbge-waitlist,
.wpbnbge-form:has(input[name='event_type'][value='ticket']:checked) .wpbnbge-waitlist-window {
	display: none;
}

/* The response window only matters while the waitlist itself is on. */
.wpbnbge-attendance:has(input[name='max_attendees']:placeholder-shown) .wpbnbge-waitlist-window,
.wpbnbge-attendance:has(input[name='waitlist_enabled']:not(:checked)) .wpbnbge-waitlist-window {
	display: none;
}

/* Added options wear the member-row dress; the muted second line holds
   price and quantity. An empty list keeps no footprint. */
.wpbnbge-opt-list:empty {
	display: none;
}

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

.wpbnbge-option__price {
	color: var(--bn-ink-3);
	font-variant-numeric: tabular-nums;
}

/* Booking-mode radios sit side by side; the hint stays quiet under them. */
.wpbnbge-booking-mode__choices {
	display: flex;
	gap: var(--bn-s4);
	flex-wrap: wrap;
}

.wpbnbge-booking-mode__hint {
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

/* Per-day capacities in the edit form: ONE day per row -- with the ticket
   sale's price field beside the cap there is no room for columns. */
.wpbnbge-day-caps {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

.wpbnbge-day-caps__row {
	display: grid;
	grid-template-columns: 7rem 8rem minmax(8rem, 14rem);
	align-items: center;
	gap: var(--bn-s2);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
}

.wpbnbge-day-caps__row .bn-input {
	inline-size: 100%;
}

@media (max-width: 480px) {
	.wpbnbge-day-caps__row {
		grid-template-columns: 1fr;
	}
}

/* Vegetarian/vegan stack under the allergy note, as asked. */
.wpbnbge-diet {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}

/* The day picker on a per_day event's detail view. */
.wpbnbge-event__days {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}

/* No box around a day row: its padding indented the checkbox, breaking the
   one column every checkbox in the panel lines up in. */
.wpbnbge-day {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: var(--bn-s2);
	align-items: center;
	font-size: var(--bn-text-sm);
	cursor: pointer;
}

.wpbnbge-day.is-full {
	opacity: 0.55;
	cursor: default;
}

/* The remaining count sits on its own line, under the day's name. */
.wpbnbge-day__count {
	grid-column: 2 / -1;
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
	font-variant-numeric: tabular-nums;
}

/* The member holding a live seat offer sees the clock and the claim button. */
.wpbnbge-offer {
	padding: var(--bn-s3);
	border: 1px solid var(--bn-accent);
	border-radius: var(--bn-r-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s2);
	align-items: center;
	justify-content: space-between;
	font-size: var(--bn-text-sm);
}

.wpbnbge-closed {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
}

/* ---- Overview: header row with the tiles/list switch ---- */

.wpbnbge-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-s3);
	flex-wrap: wrap;
}

/* The segmented switch, exactly the bgg collection's: a raised tray whose
   active segment surfaces. */
.wpbnbge-view-toggle {
	display: flex;
	gap: 2px;
	padding: 2px;
	/* Stays on the RIGHT even when the head row wraps -- space-between
	   alone parks a wrapped second line on the left (Thomas, 2026-09-28). */
	margin-inline-start: auto;
	background: var(--bn-raised);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
}

.wpbnbge-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 cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

.wpbnbge-badges {
	display: flex;
	gap: var(--bn-s1);
	flex-wrap: wrap;
	/* The space badge is a link; it must rise above the title link that
	   stretches across the whole card. */
	position: relative;
	z-index: 1;
}

/* On a card the badges live inside the head, a full row right under the
   weekday -- the head's own gap spaces them exactly like title/weekday. */
.wpbnbge-collection__head .wpbnbge-badges {
	flex-basis: 100%;
	margin: 0;
}

a.bn-badge {
	text-decoration: none;
}

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

/*
 * Physical width/height on purpose -- an unsized SVG defaults to its
 * container's full width (the hero pin once rendered hundreds of pixels
 * tall), and Safari additionally ignores logical sizes on SVG.
 */
.wpbnbge-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex: none;
}

/* ---- Collection: one item markup, the container's data-view lays it out ---- */

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

.wpbnbge-collection__item {
	position: relative;
	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);
}

.wpbnbge-collection__item.is-past,
.wpbnbge-collection__item.is-cancelled {
	opacity: 0.65;
}

/* The date box sits in the cover slot -- a solid accent calendar leaf
   with white type, matching the external calendar on spiele-club.ch
   (Thomas, 2026-09-28). The #fff is a deliberate exception to the
   tokens-only rule: it is the CONTRAST color on the accent surface, and
   the token for that (--bn-accent-fg) is dark -- tuned to BuddyNext's
   light default accents, unreadable on Reign's dark red. Reign itself
   paints its primary-button text hard white the same way (measured
   live). The border stays but goes transparent, so the box keeps the
   exact footprint it had with the grey outline. */
.wpbnbge-datebox {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	background: var(--bn-accent);
	border: 1px solid transparent;
	border-radius: var(--bn-r-sm, 6px);
}

.wpbnbge-datebox__day {
	font: var(--bn-fw-bold) var(--bn-text-base) / 1.1 var(--bn-font-ui);
	color: #fff;
	white-space: nowrap;
}

.wpbnbge-datebox__month {
	font-size: var(--bn-text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.wpbnbge-collection__body {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
	min-inline-size: 0;
	flex: 1;
	container-type: inline-size;
	container-name: wpbnbge-entry;
}

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

.wpbnbge-collection__title {
	font: var(--bn-fw-semibold) var(--bn-text-base) / var(--bn-leading-tight) var(--bn-font-ui);
	/* Tried in brand red, reverted the same day (Thomas, 2026-09-19:
	   "zu aufdringlich") -- ink it is, the date box carries the red. */
	color: var(--bn-ink);
	text-decoration: none;
}

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

/* The whole card opens the detail view; the title link stretches over it.
   Anything clickable of its own (the action buttons) rises above. */
.wpbnbge-collection__title::after {
	content: '';
	position: absolute;
	inset: 0;
}

.wpbnbge-collection__actions {
	position: relative;
	z-index: 1;
}

.wpbnbge-collection__aside {
	font-size: var(--bn-text-2xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bn-ink-3);

	/* Always its own line under the title, tiles and list alike (Thomas,
	   2026-09-28) -- the full flex basis wraps it without touching the
	   badges row, which is already full-width below. */
	flex-basis: 100%;
}

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

/*
 * Left-aligned throughout: label and value read as one line under the
 * status. The old label-left/value-right spread squeezed the labels until
 * they broke mid-word ("Or t") on narrow cards.
 */
.wpbnbge-stat {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: var(--bn-s2);
	min-inline-size: 0;
}

.wpbnbge-stat__label {
	display: flex;
	align-items: center;
	gap: var(--bn-s1);
	margin: 0;
	color: var(--bn-ink-3);
	flex: none;
}

.wpbnbge-stat__value {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: var(--bn-fw-medium);
	color: var(--bn-ink);
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: start;
	min-inline-size: 0;
}

.wpbnbge-stat__icon {
	display: inline-flex;
	flex: none;
	width: 1em;
	height: 1em;
	color: var(--bn-ink-3);
}

.wpbnbge-stat__icon svg {
	width: 100%;
	height: 100%;
}

/* Set apart by space alone, like the bgg footer line. */
.wpbnbge-collection__foot {
	margin: 0;
	padding-block-start: var(--bn-s2);
	font-size: var(--bn-text-2xs);
	color: var(--bn-ink-3);
}

.wpbnbge-collection__actions {
	display: flex;
	flex-direction: row;
	gap: var(--bn-s2);
	align-items: center;
	flex-wrap: wrap;
	flex-basis: 100%;
	justify-content: flex-end;
}

/* Cards: responsive grid, the date box a touch larger. Same floor logic as
   the bgg collection: never so narrow that a measure breaks across lines. */
.wpbnbge-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);
}

.wpbnbge-collection[data-view='grid'] .wpbnbge-collection__cover {
	inline-size: 4rem;
	block-size: 4rem;
}

/*
 * On a tile only title and weekday sit beside the date box; everything below
 * the weekday -- badges, measures, footer -- spans the full card, flush with
 * its left edge. display:contents lifts the body's children into the item's
 * own grid so CSS alone can re-seat them (it also disables the body's
 * container queries here, which is right: a tile wants the single stat
 * column anyway).
 */
.wpbnbge-collection[data-view='grid'] .wpbnbge-collection__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--bn-s2) var(--bn-s3);
}

.wpbnbge-collection[data-view='grid'] .wpbnbge-collection__body {
	display: contents;
}

.wpbnbge-collection[data-view='grid'] .wpbnbge-collection__head {
	grid-column: 2;
	min-inline-size: 0;
}

.wpbnbge-collection[data-view='grid'] .wpbnbge-badges,
.wpbnbge-collection[data-view='grid'] .wpbnbge-collection__stats,
.wpbnbge-collection[data-view='grid'] .wpbnbge-collection__foot,
.wpbnbge-collection[data-view='grid'] .wpbnbge-collection__actions {
	grid-column: 1 / -1;
}

/* List: denser rows, stats flowing into fixed named columns when wide. */
.wpbnbge-collection[data-view='list'] {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

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

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

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

@container wpbnbge-entry (min-width: 26rem) and (max-width: 47.999rem) {
	.wpbnbge-collection__stats {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}

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

/* ---- Calendar view ---- */

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

.wpbnbge-calendar__month {
	font: var(--bn-fw-semibold) var(--bn-text-md) / 1.2 var(--bn-font-ui);
	min-inline-size: 11rem;
	text-align: center;
}

.wpbnbge-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
}

.wpbnbge-calendar__weekday {
	font-size: var(--bn-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bn-ink-3);
	text-align: center;
	padding-block: var(--bn-s1);
}

.wpbnbge-calendar__cell {
	min-block-size: 5.5rem;
	padding: var(--bn-s1);
	background: var(--bn-raised);
	border: 1px solid var(--bn-line-faint);
	border-radius: var(--bn-r-sm, 6px);
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.wpbnbge-calendar__cell.is-empty {
	background: transparent;
	border-color: transparent;
}

.wpbnbge-calendar__cell.is-today {
	border-color: var(--bn-accent);
}

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

.wpbnbge-calendar__cell.is-today .wpbnbge-calendar__daynum {
	color: var(--bn-accent);
	font-weight: var(--bn-fw-bold, 700);
}

.wpbnbge-calendar__chip {
	display: block;
	font-size: var(--bn-text-2xs);
	line-height: 1.3;
	color: var(--bn-accent);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 3px;
	padding-inline: 2px;
	background: color-mix(in oklab, var(--bn-accent) 12%, transparent);
}

.wpbnbge-calendar__chip:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.wpbnbge-calendar__cell {
		min-block-size: 3.5rem;
	}
}

/* ---- Detail view ---- */

/*
 * Two columns: 2/3 the event, 1/3 the actions beside it. The card is the
 * container, and the collapse threshold is the SAME width at which the tile
 * grid drops from three columns to two (3 x 17.5rem tracks + 2 gaps) -- one
 * breakpoint governing both surfaces.
 */
.wpbnbge-detail {
	container-type: inline-size;
	container-name: wpbnbge-detail;
}

.wpbnbge-detail__cols {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--bn-s5, 20px);
	align-items: start;
}

.wpbnbge-detail__side {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
	padding: var(--bn-s4);
	background: var(--bn-raised);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
}

@container wpbnbge-detail (max-width: 54rem) {
	.wpbnbge-detail__cols {
		grid-template-columns: 1fr;
	}
}

/* The countdown: the date box's language, scaled up and set ticking. */
.wpbnbge-countdown__lead {
	margin: 0 0 var(--bn-s2);
	font-size: var(--bn-text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bn-ink-3);
}

.wpbnbge-countdown__cells {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bn-s2);
}

.wpbnbge-countdown__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: var(--bn-s2);
	background: var(--bn-sunken, var(--bn-surface));
	border: 1px solid var(--bn-line-faint);
	border-radius: var(--bn-r-sm, 6px);
}

.wpbnbge-countdown__value {
	font: var(--bn-fw-bold) var(--bn-text-xl) / 1.1 var(--bn-font-ui);
	color: var(--bn-accent);
	font-variant-numeric: tabular-nums;
}

.wpbnbge-countdown__label {
	font-size: var(--bn-text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bn-ink-3);
}

.wpbnbge-detail__back {
	display: inline-block;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	text-decoration: none;
	margin-block-end: var(--bn-s3);
}

.wpbnbge-hero {
	display: flex;
	gap: var(--bn-s5, 20px);
	align-items: flex-start;
	margin-block-end: var(--bn-s4);
}

/* Solid accent, white type -- the detail's calendar leaf matches the
   overview's date box and the external calendar (Thomas, 2026-09-28;
   see the datebox note above for why the white is hardcoded). */
.wpbnbge-hero__date {
	flex: none;
	inline-size: 8.5rem;
	display: flex;
	flex-direction: column;
	padding: var(--bn-s3);
	background: var(--bn-accent);
	border: 1px solid transparent;
	border-radius: var(--bn-r-md);
	text-align: center;
}

.wpbnbge-hero__days {
	/* One size down from 3xl: a from-to range ("10 – 14") must hold one line
	   inside the box, and at 3xl it broke across two. */
	font-size: var(--bn-text-2xl);
	font-weight: var(--bn-fw-bold, 700);
	color: #fff;
	line-height: 1.1;
	white-space: nowrap;
}

.wpbnbge-hero__month {
	font-size: var(--bn-text-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin-block-start: var(--bn-s1);
}

.wpbnbge-hero__weekday {
	font-size: var(--bn-text-sm);
	text-transform: uppercase;
	color: #fff;
	margin-block-start: var(--bn-s2);
}

.wpbnbge-hero__body {
	min-inline-size: 0;
}

.wpbnbge-hero__title {
	font-size: var(--bn-text-2xl);
	line-height: 1.2;
	/* Plain heading ink, not accent (Thomas, 2026-09-28) -- the accent
	   next to it belongs to the calendar leaf alone. */
	color: var(--bn-ink);
}

.wpbnbge-hero__where {
	display: flex;
	align-items: center;
	gap: var(--bn-s1);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	margin-block-start: var(--bn-s2);
}

.wpbnbge-facts {
	list-style: none;
	display: flex;
	gap: var(--bn-s5, 20px);
	flex-wrap: wrap;
	padding: 0;
	margin-block-start: var(--bn-s3);
}

.wpbnbge-facts__label {
	display: block;
	font-size: var(--bn-text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bn-ink-3);
}

.wpbnbge-detail__section {
	margin-block-start: var(--bn-s4);
}

.wpbnbge-detail__section > h4 {
	font-size: var(--bn-text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bn-ink-3);
	margin-block-end: var(--bn-s2);
}

.wpbnbge-event__people--waitlist {
	color: var(--bn-ink-3);
}

@media (max-width: 600px) {
	.wpbnbge-hero {
		flex-direction: column;
	}

	.wpbnbge-hero__date {
		inline-size: auto;
		align-self: flex-start;
		text-align: start;
	}
}


/* The Standort fact's route form: address in the field, one primary
   button, off to OpenStreetMap. The input shares the row and shrinks
   first; BuddyNext's .bn-input pins its own height. */

.wpbnbge-facts__route {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wpbnbge-route {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Its own row under the address line. */
	flex-basis: 100%;
	min-inline-size: 0;
}

.wpbnbge-route .bn-input {
	flex: 1 1 8rem;
	min-inline-size: 0;
}

.wpbnbge-route .bn-btn {
	flex: none;
}

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