/**
 * Event Frontend Submit — organizer dashboard styles.
 *
 * Everything is scoped under .mpefs-wrap and consumes the core plugin's own CSS
 * variables (--color_theme, --color_border, --dbr, --fs...), which are printed by
 * MPWEM_Global_Style from the site's Style settings. That means this addon picks up
 * the site's brand colour automatically instead of hard-coding one, and a site that
 * changes its accent gets a matching dashboard for free.
 *
 * Local fallbacks are supplied for every variable so the panel still renders
 * correctly if the core stylesheet is ever dequeued.
 *
 * ---------------------------------------------------------------------------
 * IMPORTANT — why layout rules are scoped to `.mpefs-wrap`
 *
 * The core plugin ships this, and our markup renders inside `.mpwem_style`:
 *
 *     .mpwem_style span, .mpwem_style strong { display: inline-block; }
 *
 * That is specificity (0,1,1). A plain component rule like
 * `.mpefs-stat__label { display: block }` is only (0,1,0), so it LOSES no
 * matter how late it appears in the file — every <span> of ours silently
 * stayed inline-block. That is what put icons in the top-left of their box and
 * ran the stat card's label, figure and hint onto one line.
 *
 * So: any rule here that sets `display`, `align-items`, `justify-content`,
 * `flex-direction` or `gap` is prefixed with `.mpefs-wrap`, taking it to at
 * least (0,2,0) and beating the core rule. If you add a new component that
 * lays out a <span> or <strong>, prefix it the same way — do not reach for
 * !important.
 *
 * ---------------------------------------------------------------------------
 * IMPORTANT — the same trap applies to :hover and :focus
 *
 * The core plugin also ships these:
 *
 *     .mpwem_style button:hover, .mpwem_style button:focus {
 *         opacity: .8; background-color: var(--color_theme_cc); color: #FFF;
 *     }
 *     .mpwem_style a:hover { opacity: .5; }
 *
 * Both are (0,2,1). Two separate things go wrong:
 *
 *  1. A rule of ours that beats them on specificity still loses on any
 *     property it does not mention. `.mpefs-wrap .mpefs-btn:hover` is (0,3,0)
 *     and wins the `background`, but because it never named `color` the core's
 *     `#FFF` applied unopposed — a white label on a near-white button.
 *  2. Our hover rules had no `:focus` twin at all, so the white label stuck
 *     after the click until the button lost focus.
 *
 * So every interaction state below states `color`, `background` and `opacity`
 * outright, and pairs `:hover` with `:focus`. State the whole set even when a
 * value looks like it should inherit — inside `.mpwem_style` it will not.
 * ---------------------------------------------------------------------------
 */

.mpefs-wrap {
	--mpefs-accent: var(--color_theme, #6046ff);
	--mpefs-accent-soft: color-mix(in srgb, var(--mpefs-accent) 8%, transparent);
	--mpefs-accent-line: color-mix(in srgb, var(--mpefs-accent) 26%, transparent);
	--mpefs-ink: #23232e;
	--mpefs-ink-soft: #6a6a7c;
	--mpefs-line: var(--color_border, #e4e4ee);
	--mpefs-surface: #ffffff;
	--mpefs-surface-2: #f7f7fb;
	--mpefs-radius: var(--dbr, 10px);
	--mpefs-good: #12805c;
	--mpefs-good-bg: #e7f7f1;
	--mpefs-warn: #8a5a00;
	--mpefs-warn-bg: #fdf3e0;
	--mpefs-bad: #b3261e;
	--mpefs-bad-bg: #fdecea;
	--mpefs-info: #245bb8;
	--mpefs-info-bg: #eaf1fd;
	--mpefs-gap: 18px;

	box-sizing: border-box;
	color: var(--mpefs-ink);
	font-size: 15px;
	line-height: 1.55;
}

/* color-mix has good support, but keep a usable value where it is missing. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.mpefs-wrap {
		--mpefs-accent-soft: rgba(96, 70, 255, .08);
		--mpefs-accent-line: rgba(96, 70, 255, .26);
	}
}

.mpefs-wrap *,
.mpefs-wrap *::before,
.mpefs-wrap *::after { box-sizing: inherit; }

.mpefs-wrap img { max-width: 100%; height: auto; }

/* ───────────────────────── Width breakout ───────────────────────── */

/* Negative-margin breakout rather than `left:50% + translateX(-50%)`: a
   transformed ancestor makes `position: sticky` stop working in every
   descendant, and the sidebar cards on the submit and payout screens are
   sticky. The margin maths needs no JS and no knowledge of the parent width —
   when the target is wider than the parent, `(100% - target) / 2` is negative
   and pulls the box outward on both sides; when it is narrower, the same
   expression is positive and simply centres it. */

/* Selectors are doubled (.mpefs-wrap.mpefs-wrap--wide) on purpose. Block themes
   constrain content with
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
   which is also one class of specificity, and the theme's stylesheet can load
   after the plugin's. Doubling the class wins without resorting to !important. */

.mpefs-wrap.mpefs-wrap--wide {
	--mpefs-target: min(1360px, calc(100vw - 40px));
}

.mpefs-wrap.mpefs-wrap--full {
	--mpefs-target: calc(100vw - 32px);
}

.mpefs-wrap.mpefs-wrap--wide,
.mpefs-wrap.mpefs-wrap--full {
	width: var(--mpefs-target);
	max-width: var(--mpefs-target);
	margin-left: calc( ( 100% - var(--mpefs-target) ) / 2 );
	margin-right: calc( ( 100% - var(--mpefs-target) ) / 2 );
}

/* Block themes also cap descendants of a constrained container; make sure our
   own inner layout is never re-constrained back to the content size. */
.mpefs-wrap.mpefs-wrap--wide > *,
.mpefs-wrap.mpefs-wrap--full > * {
	max-width: none;
}

/* On phones the theme column is already effectively full width, so breaking
   out buys nothing and risks a horizontal scroll. Stand down. */
@media (max-width: 782px) {
	.mpefs-wrap.mpefs-wrap--wide,
	.mpefs-wrap.mpefs-wrap--full {
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}.mpefs-wrap /* ───────────────────────────── Top bar ───────────────────────────── */

.mpefs-topbar{
	display: flex;
	flex-wrap: wrap;
	gap: var(--mpefs-gap);
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	margin-bottom: 16px;
	background: var(--mpefs-surface);
	border: 1px solid var(--mpefs-line);
	border-radius: var(--mpefs-radius);
}.mpefs-wrap .mpefs-topbar__identity{ display: flex; gap: 14px; align-items: center; min-width: 0; }

.mpefs-avatar { flex: 0 0 auto; line-height: 0; }
.mpefs-avatar .mpefs-avatar__img,
.mpefs-avatar img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--mpefs-accent-line);
}

.mpefs-topbar__text { min-width: 0; }.mpefs-wrap .mpefs-eyebrow{
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mpefs-ink-soft);
}

.mpefs-topbar__name {
	margin: 2px 0 0;
	font-size: 21px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--mpefs-ink);
	overflow-wrap: anywhere;
}.mpefs-wrap .mpefs-topbar__link{
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: 4px;
	font-size: 13px;
	color: var(--mpefs-accent);
	text-decoration: none;
}
.mpefs-wrap .mpefs-topbar__link:hover,
.mpefs-wrap .mpefs-topbar__link:focus { text-decoration: underline; opacity: 1; }.mpefs-wrap .mpefs-topbar__actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }.mpefs-wrap /* ───────────────────────────── Tabs ───────────────────────────── */

.mpefs-tabs{
	display: flex;
	gap: 4px;
	overflow-x: auto;
	padding: 6px;
	margin-bottom: 16px;
	background: var(--mpefs-surface-2);
	border: 1px solid var(--mpefs-line);
	border-radius: var(--mpefs-radius);
	scrollbar-width: thin;
}.mpefs-wrap .mpefs-tab{
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex: 0 0 auto;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mpefs-ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.mpefs-wrap .mpefs-tab:hover,
.mpefs-wrap .mpefs-tab:focus { background: var(--mpefs-surface); color: var(--mpefs-ink); opacity: 1; }
.mpefs-tab.is-active { background: var(--mpefs-accent); color: #fff; }
.mpefs-wrap .mpefs-tab.is-active .mpefs-tab__icon { color: #fff; }
.mpefs-wrap .mpefs-tab__icon { opacity: .9; }

/* ───────────────────────────── Cards ───────────────────────────── */

.mpefs-card {
	background: var(--mpefs-surface);
	border: 1px solid var(--mpefs-line);
	border-radius: var(--mpefs-radius);
	margin-bottom: var(--mpefs-gap);
	overflow: hidden;
}
.mpefs-card--muted { background: var(--mpefs-surface-2); }.mpefs-wrap .mpefs-card__head{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--mpefs-line);
}
.mpefs-card--muted .mpefs-card__head { border-bottom-color: transparent; }

.mpefs-card__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--mpefs-ink); }
.mpefs-card__sub { margin: 4px 0 0; font-size: 13px; color: var(--mpefs-ink-soft); flex-basis: 100%; }
.mpefs-card__body { padding: 20px; min-width: 0; overflow-wrap: break-word; }

.mpefs-mini-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mpefs-ink-soft); }

/*
 * Sticky sidebar.
 *
 * `position: sticky` is confined to the element's PARENT box, and the aside is
 * a grid item sized to its own content — so putting sticky on the first card
 * inside it only let that card travel the height of the aside, which on the
 * submit form runs out long before the form does. The fix is to stick the aside
 * itself: as a grid child its containing block is the grid area, and the row is
 * as tall as the main column, so it now follows all the way to the last field.
 *
 * The cap plus internal scroll is the fallback for a sidebar taller than the
 * viewport — without it the bottom card would be unreachable once pinned. The
 * overflow sits on the sticky element itself, which is safe; overflow on an
 * ANCESTOR is what silently kills sticky.
 */
@media (min-width: 1024px) {
	.mpefs-wrap .mpefs-form__aside,
	.mpefs-wrap .mpefs-split__aside {
		position: sticky;
		top: 32px;
		align-self: start;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	/* The aside now does the sticking, so the card inside must not also try —
	   nested sticky would pin it against the aside and double the offset. */
	.mpefs-wrap .mpefs-form__aside .mpefs-card--sticky,
	.mpefs-wrap .mpefs-split__aside .mpefs-card--sticky { position: static; }

	/* Trailing margin inside a scrollable pinned column reads as a dead gap. */
	.mpefs-wrap .mpefs-form__aside > .mpefs-card:last-child,
	.mpefs-wrap .mpefs-split__aside > .mpefs-card:last-child { margin-bottom: 0; }
}
.mpefs-wrap /* ───────────────────────────── Stats ───────────────────────────── */

.mpefs-stats{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: var(--mpefs-gap);
}
.mpefs-stats--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }.mpefs-wrap .mpefs-stat{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 18px 46px 16px 18px;
	background: var(--mpefs-surface);
	border: 1px solid var(--mpefs-line);
	border-radius: var(--mpefs-radius);
	min-width: 0;
}
.mpefs-wrap .mpefs-stat__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--mpefs-accent);
	opacity: .5;
}.mpefs-wrap .mpefs-stat__label{
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mpefs-ink-soft);
}.mpefs-wrap .mpefs-stat__value{
	display: block;
	margin: 6px 0 2px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mpefs-ink);
	font-variant-numeric: tabular-nums;
}
.mpefs-stat__value .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }.mpefs-wrap .mpefs-stat__hint{ display: block; font-size: 12px; color: var(--mpefs-ink-soft); }/* ───────────────────────────── Buttons ───────────────────────────── */

.mpefs-wrap .mpefs-btn{
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--mpefs-surface-2);
	color: var(--mpefs-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.mpefs-wrap .mpefs-btn:hover,
.mpefs-wrap .mpefs-btn:focus { background: #eeeef6; color: var(--mpefs-ink); opacity: 1; }
.mpefs-wrap .mpefs-btn--primary { background: var(--mpefs-accent); color: #fff; }
.mpefs-wrap .mpefs-btn--primary:hover,
.mpefs-wrap .mpefs-btn--primary:focus { background: var(--mpefs-accent); color: #fff; opacity: .88; }
.mpefs-wrap .mpefs-btn--secondary { background: var(--mpefs-ink); color: #fff; }
.mpefs-wrap .mpefs-btn--secondary:hover,
.mpefs-wrap .mpefs-btn--secondary:focus { background: var(--mpefs-ink); color: #fff; opacity: .88; }
.mpefs-wrap .mpefs-btn--ghost { background: transparent; border-color: var(--mpefs-line); color: var(--mpefs-ink); }
.mpefs-wrap .mpefs-btn--ghost:hover,
.mpefs-wrap .mpefs-btn--ghost:focus { background: var(--mpefs-surface-2); color: var(--mpefs-ink); opacity: 1; }
.mpefs-wrap .mpefs-btn--block { width: 100%; }
.mpefs-wrap .mpefs-btn--sm { padding: 7px 12px; font-size: 13px; }
.mpefs-wrap .mpefs-btn[disabled],
.mpefs-wrap .mpefs-btn.is-busy { opacity: .6; pointer-events: none; }

.mpefs-wrap .mpefs-btn:focus-visible,
.mpefs-wrap .mpefs-input:focus-visible,
.mpefs-wrap .mpefs-tab:focus-visible,
.mpefs-wrap .mpefs-iconbtn:focus-visible,
.mpefs-wrap .mpefs-chip:focus-visible {
	outline: 2px solid var(--mpefs-accent);
	outline-offset: 2px;
}.mpefs-wrap .mpefs-iconbtn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--mpefs-line);
	border-radius: 7px;
	background: var(--mpefs-surface);
	color: var(--mpefs-ink-soft);
	font-size: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}
.mpefs-wrap .mpefs-iconbtn:hover,
.mpefs-wrap .mpefs-iconbtn:focus {
	background: var(--mpefs-surface);
	color: var(--mpefs-accent);
	border-color: var(--mpefs-accent-line);
	opacity: 1;
}
.mpefs-wrap .mpefs-iconbtn--danger:hover,
.mpefs-wrap .mpefs-iconbtn--danger:focus {
	background: var(--mpefs-surface);
	color: var(--mpefs-bad);
	border-color: var(--mpefs-bad);
	opacity: 1;
}

.mpefs-wrap .mpefs-link { color: var(--mpefs-accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.mpefs-wrap .mpefs-link:hover,
.mpefs-wrap .mpefs-link:focus { color: var(--mpefs-accent); text-decoration: underline; opacity: 1; }.mpefs-wrap /* ───────────────────────────── Pills & tags ───────────────────────────── */

.mpefs-pill{
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}
.mpefs-pill--success { background: var(--mpefs-good-bg); color: var(--mpefs-good); }
.mpefs-pill--warning { background: var(--mpefs-warn-bg); color: var(--mpefs-warn); }
.mpefs-pill--danger  { background: var(--mpefs-bad-bg);  color: var(--mpefs-bad); }
.mpefs-pill--info    { background: var(--mpefs-info-bg); color: var(--mpefs-info); }
.mpefs-pill--muted   { background: var(--mpefs-surface-2); color: var(--mpefs-ink-soft); }.mpefs-wrap .mpefs-tag{
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border: 1px solid var(--mpefs-line);
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--mpefs-ink-soft);
}

.mpefs-muted { color: var(--mpefs-ink-soft); }.mpefs-wrap /* ───────────────────────────── Notices ───────────────────────────── */

.mpefs-notices{ display: grid; gap: 10px; margin-bottom: var(--mpefs-gap); }.mpefs-wrap .mpefs-notice{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 16px;
	border: 1px solid var(--mpefs-line);
	border-left-width: 3px;
	border-radius: 8px;
	background: var(--mpefs-surface);
	font-size: 14px;
}
.mpefs-wrap .mpefs-notice__icon { flex: 0 0 auto; margin-top: 2px; }
.mpefs-notice__body { min-width: 0; }.mpefs-wrap .mpefs-notice__body strong{ display: block; }
.mpefs-notice--success { border-left-color: var(--mpefs-good); background: var(--mpefs-good-bg); }
.mpefs-notice--success .mpefs-notice__icon { color: var(--mpefs-good); }
.mpefs-notice--warning { border-left-color: var(--mpefs-warn); background: var(--mpefs-warn-bg); }
.mpefs-notice--warning .mpefs-notice__icon { color: var(--mpefs-warn); }
.mpefs-notice--error   { border-left-color: var(--mpefs-bad);  background: var(--mpefs-bad-bg); }
.mpefs-notice--error .mpefs-notice__icon { color: var(--mpefs-bad); }
.mpefs-notice--info    { border-left-color: var(--mpefs-info); background: var(--mpefs-info-bg); }
.mpefs-notice--info .mpefs-notice__icon { color: var(--mpefs-info); }.mpefs-wrap /* ───────────────────────────── Forms ───────────────────────────── */

/*
 * IMPORTANT — why every single-column grid below names its column.
 *
 * A grid container with no `grid-template-columns` gets one implicit column
 * sized `auto`, and `auto`'s minimum is the item's min-content width. Grid and
 * flex items also default to `min-width: auto`. Together that means a single
 * long word, a `white-space: nowrap` run, a wide input or a repeater row can
 * hold the column open wider than the container, and the whole page then
 * scrolls sideways on a phone. The desktop rules already avoided it by writing
 * `minmax(0, 1fr)`; the mobile defaults did not, so the submit form pushed the
 * page 43px wide at 375px and 98px at 320px.
 *
 * Naming the column `minmax(0, 1fr)` lets it shrink; `min-width: 0` on the
 * items lets their contents shrink with it. Fixing it here, at the containers,
 * rather than per-element, is what keeps it fixed as fields are added.
 */
.mpefs-form__grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mpefs-gap); }
@media (min-width: 1024px) {.mpefs-wrap .mpefs-form__grid{ grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}.mpefs-wrap .mpefs-split{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mpefs-gap); }
@media (min-width: 1024px) {.mpefs-wrap .mpefs-split{ grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.mpefs-wrap .mpefs-form__grid > *,
.mpefs-wrap .mpefs-split > *,
.mpefs-wrap .mpefs-form__main,
.mpefs-wrap .mpefs-form__aside { min-width: 0; }
.mpefs-wrap .mpefs-field{ display: block; margin-bottom: 16px; }
.mpefs-form--compact .mpefs-field { margin-bottom: 13px; }
.mpefs-field--full { grid-column: 1 / -1; }
.mpefs-field--grow { flex: 1 1 160px; min-width: 0; }
.mpefs-field--sm { flex: 0 1 110px; min-width: 90px; }
.mpefs-field--inline { margin-bottom: 0; }.mpefs-wrap .mpefs-label{
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mpefs-ink);
}
.mpefs-label--sm { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mpefs-ink-soft); }
.mpefs-label em { color: var(--mpefs-bad); font-style: normal; }.mpefs-wrap .mpefs-input{
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--mpefs-line);
	border-radius: 8px;
	background: var(--mpefs-surface);
	color: var(--mpefs-ink);
	font-size: 14px;
	line-height: 1.4;
	font-family: inherit;
}
.mpefs-wrap textarea.mpefs-input { min-height: 64px; resize: vertical; }
.mpefs-wrap .mpefs-input:focus { border-color: var(--mpefs-accent); }
.mpefs-wrap .mpefs-input[disabled] { background: var(--mpefs-surface-2); color: var(--mpefs-ink-soft); }.mpefs-wrap .mpefs-help{
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: var(--mpefs-ink-soft);
}
.mpefs-help--block {
	margin: 0 0 14px;
	padding: 11px 13px;
	background: var(--mpefs-surface-2);
	border-radius: 8px;
}.mpefs-wrap .mpefs-grid-2{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mpefs-wrap .mpefs-grid-2 > * { min-width: 0; }
@media (min-width: 640px) {
	/* minmax(0,1fr) not 1fr: plain `1fr` is minmax(auto,1fr), so a long label or
	   an unbreakable value can force the column wider than the card and get
	   clipped by the card's overflow. */
	/* Prefixed with .mpefs-wrap to match the base rule's specificity — the base
	   now names the single-column track, so an unprefixed selector here would
	   lose to it and the two-column layout would never appear. */
	.mpefs-wrap .mpefs-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}.mpefs-wrap .mpefs-check{ display: flex; gap: 9px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.mpefs-check--block { margin-bottom: 14px; }
.mpefs-check input { margin: 3px 0 0; flex: 0 0 auto; }.mpefs-wrap .mpefs-checkrow{ display: flex; flex-wrap: wrap; gap: 10px 18px; }.mpefs-wrap .mpefs-checklist{ display: grid; gap: 9px; max-height: 260px; overflow-y: auto; }

.mpefs-subsection {
	padding-top: 14px;
	margin-top: 14px;
	border-top: 1px dashed var(--mpefs-line);
}.mpefs-wrap .mpefs-submit-actions{ display: grid; gap: 9px; }

/* Repeaters */

.mpefs-repeater { margin-top: 6px; }.mpefs-wrap .mpefs-repeater__rows{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }.mpefs-wrap .mpefs-repeater__row{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	padding: 13px;
	background: var(--mpefs-surface-2);
	border: 1px solid var(--mpefs-line);
	border-radius: 8px;
	min-width: 0;
}
/* Flex children default to min-width:auto, so a wide input keeps the row from
   wrapping. Let them shrink and the row wraps onto the next line instead. */
.mpefs-wrap .mpefs-repeater__row > * { min-width: 0; }
.mpefs-repeater__row .mpefs-field { margin-bottom: 0; }.mpefs-wrap .mpefs-repeater__row--stack{ flex-direction: column; align-items: stretch; }
.mpefs-repeater__row--stack > .mpefs-iconbtn { align-self: flex-end; }
.mpefs-repeater__row > .mpefs-iconbtn { margin-bottom: 1px; }.mpefs-wrap /* Media picker */

.mpefs-media__preview{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 148px;
	margin-bottom: 12px;
	background: var(--mpefs-surface-2);
	border: 1px dashed var(--mpefs-line);
	border-radius: 8px;
	overflow: hidden;
}.mpefs-wrap .mpefs-media__preview img{ width: 100%; height: 100%; max-height: 220px; object-fit: cover; display: block; }.mpefs-wrap .mpefs-media__placeholder{
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: center;
	font-size: 12px;
	color: var(--mpefs-ink-soft);
}
.mpefs-wrap .mpefs-media__placeholder .mpefs-icon { opacity: .5; }.mpefs-wrap .mpefs-media__actions{ display: flex; flex-wrap: wrap; gap: 8px; }.mpefs-wrap .mpefs-media__status{ display: block; margin-top: 8px; font-size: 12px; color: var(--mpefs-ink-soft); }
.mpefs-media__status.is-error { color: var(--mpefs-bad); }.mpefs-wrap .mpefs-gallery{ display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-bottom: 12px; }
.mpefs-gallery__item { position: relative; border-radius: 7px; overflow: hidden; }.mpefs-wrap .mpefs-gallery__item img{ display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }.mpefs-wrap .mpefs-gallery__remove{
	position: absolute;
	top: 3px;
	right: 3px;
	width: 20px;
	height: 20px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 10px;
	cursor: pointer;
}.mpefs-wrap /* ───────────────────────────── Toolbar & chips ───────────────────────────── */

.mpefs-toolbar{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--mpefs-line);
}.mpefs-wrap .mpefs-filterbar{ display: flex; flex-wrap: wrap; gap: 6px; }.mpefs-wrap .mpefs-chip{
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--mpefs-line);
	border-radius: 999px;
	background: var(--mpefs-surface);
	font-size: 13px;
	font-weight: 600;
	color: var(--mpefs-ink-soft);
	text-decoration: none;
}
.mpefs-wrap .mpefs-chip:hover,
.mpefs-wrap .mpefs-chip:focus { border-color: var(--mpefs-accent-line); color: var(--mpefs-ink); opacity: 1; }
.mpefs-chip.is-active { background: var(--mpefs-accent); border-color: var(--mpefs-accent); color: #fff; }

/* ───────────────────────────── Tables ───────────────────────────── */

.mpefs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mpefs-wrap .mpefs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0;
}
.mpefs-wrap .mpefs-table th,
.mpefs-wrap .mpefs-table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mpefs-line);
}
.mpefs-wrap .mpefs-table th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mpefs-ink-soft);
	background: var(--mpefs-surface-2);
	white-space: nowrap;
}
.mpefs-wrap .mpefs-table tbody tr:last-child td { border-bottom: 0; }
.mpefs-wrap .mpefs-table .mpefs-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mpefs-wrap .mpefs-table .mpefs-num--muted { color: var(--mpefs-ink-soft); }
.mpefs-wrap .mpefs-table .mpefs-num--strong { font-weight: 700; }.mpefs-wrap .mpefs-cell-title{ display: block; font-weight: 600; overflow-wrap: anywhere; }.mpefs-wrap .mpefs-cell-note{ display: block; margin-top: 3px; font-size: 12px; color: var(--mpefs-ink-soft); overflow-wrap: anywhere; }
.mpefs-cell-note a { color: inherit; }
.mpefs-cell-note__sep { margin: 0 5px; }

.mpefs-actions { white-space: nowrap; }.mpefs-wrap .mpefs-actions > *{ display: inline-flex; vertical-align: middle; margin-right: 4px; }.mpefs-wrap .mpefs-inline-form{ display: inline-block; margin: 0; }

/* Stacked table on small screens: the header becomes a per-cell label. */
@media (max-width: 782px) {.mpefs-wrap .mpefs-table thead{ display: none; }.mpefs-wrap .mpefs-table, .mpefs-wrap .mpefs-table tbody, .mpefs-wrap .mpefs-table tr, .mpefs-wrap .mpefs-table td{ display: block; width: 100%; }
	.mpefs-wrap .mpefs-table tr {
		padding: 6px 0;
		margin-bottom: 12px;
		border: 1px solid var(--mpefs-line);
		border-radius: 8px;
	}.mpefs-wrap .mpefs-table td{
		display: flex;
		gap: 14px;
		justify-content: space-between;
		border-bottom: 1px solid var(--mpefs-line);
		text-align: right;
	}
	.mpefs-wrap .mpefs-table td:last-child { border-bottom: 0; }
	.mpefs-wrap .mpefs-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--mpefs-ink-soft);
		text-align: left;
	}
	.mpefs-wrap .mpefs-table .mpefs-num { text-align: right; }
	.mpefs-cell-title,
	.mpefs-cell-note { text-align: right; }
}

/* ───────────────────────────── Lists ───────────────────────────── */

.mpefs-list { list-style: none; margin: 0; padding: 0; }.mpefs-wrap .mpefs-list__item{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 13px 0;
	border-bottom: 1px solid var(--mpefs-line);
}
.mpefs-list__item:last-child { border-bottom: 0; }
.mpefs-list__main { min-width: 0; }.mpefs-wrap .mpefs-list__title{ display: block; font-weight: 600; color: var(--mpefs-ink); text-decoration: none; overflow-wrap: anywhere; }
.mpefs-wrap .mpefs-list__title:hover { color: var(--mpefs-accent); }.mpefs-wrap .mpefs-list__meta{ display: block; margin-top: 3px; font-size: 12px; color: var(--mpefs-ink-soft); }
.mpefs-wrap .mpefs-list__meta .mpefs-icon { margin-right: 5px; opacity: .7; }.mpefs-wrap .mpefs-list__aside{ display: flex; gap: 10px; align-items: center; }
.mpefs-list__seats { font-size: 12px; color: var(--mpefs-ink-soft); font-variant-numeric: tabular-nums; }.mpefs-wrap .mpefs-ticks{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }.mpefs-wrap /* Flex row rather than padding-left + an absolutely positioned ::before.
   Themes very commonly reset `ul li` padding, .mpefs-wrap which collapsed the indent and
   dropped the tick on top of the first letter. Flex layout cannot be undone
   that way. The check is drawn with two borders instead of a Font Awesome
   glyph, .mpefs-wrap so it also renders correctly when the icon font has not loaded. */
.mpefs-ticks li{
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}
.mpefs-ticks li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 11px;
	margin-top: 4px;
	border-right: 2px solid var(--mpefs-good);
	border-bottom: 2px solid var(--mpefs-good);
	transform: rotate(45deg);
}.mpefs-wrap .mpefs-kv{ display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--mpefs-line); font-size: 13px; }
.mpefs-kv__key { color: var(--mpefs-ink-soft); }
.mpefs-kv__value { text-align: right; }
.mpefs-kv + .mpefs-btn { margin-top: 14px; }

.mpefs-balance {
	padding: 15px;
	margin-bottom: 16px;
	background: var(--mpefs-accent-soft);
	border: 1px solid var(--mpefs-accent-line);
	border-radius: 8px;
	text-align: center;
}.mpefs-wrap .mpefs-balance__label{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mpefs-ink-soft); }.mpefs-wrap .mpefs-balance__value{ display: block; margin-top: 4px; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ───────────────────────────── Empty state ───────────────────────────── */

.mpefs-empty { padding: 44px 20px; text-align: center; }
.mpefs-wrap .mpefs-empty__icon { color: var(--mpefs-accent); opacity: .35; }
.mpefs-empty__title { margin: 14px 0 6px; font-size: 17px; font-weight: 700; }
.mpefs-empty__text { margin: 0 auto 18px; max-width: 42ch; font-size: 14px; color: var(--mpefs-ink-soft); }.mpefs-wrap /* ───────────────────────────── Pagination ───────────────────────────── */

.mpefs-pagination{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px solid var(--mpefs-line);
}
.mpefs-pagination__count { font-size: 12px; color: var(--mpefs-ink-soft); font-variant-numeric: tabular-nums; }.mpefs-wrap .mpefs-pagination__links{ display: flex; flex-wrap: wrap; gap: 4px; }.mpefs-wrap .mpefs-page{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--mpefs-line);
	border-radius: 7px;
	font-size: 13px;
	color: var(--mpefs-ink-soft);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.mpefs-wrap .mpefs-page:hover,
.mpefs-wrap .mpefs-page:focus { border-color: var(--mpefs-accent-line); color: var(--mpefs-ink); opacity: 1; }
.mpefs-page.is-current { background: var(--mpefs-accent); border-color: var(--mpefs-accent); color: #fff; font-weight: 700; }
.mpefs-page--gap { border-color: transparent; }.mpefs-wrap /* ───────────────────────────── Auth ───────────────────────────── */

.mpefs-auth__grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mpefs-gap); }
@media (min-width: 1024px) {.mpefs-wrap .mpefs-auth__grid{ grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; }
}
.mpefs-auth__card--narrow { max-width: 460px; margin: 0 auto; }
/* Constrain the inner card, not the wrapper — the wrapper carries the width
   breakout class, and capping it here would silently cancel that out. */
.mpefs-auth--single .mpefs-auth__card--narrow { max-width: 520px; margin-inline: auto; }
.mpefs-auth__switch { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--mpefs-line); font-size: 13px; text-align: center; color: var(--mpefs-ink-soft); }
.mpefs-auth__switch a { color: var(--mpefs-accent); font-weight: 600; }

.mpefs-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mpefs-line); }
.mpefs-details > summary { font-size: 13px; font-weight: 600; color: var(--mpefs-accent); cursor: pointer; }
.mpefs-details[open] > summary { margin-bottom: 12px; }

/* ───────────────────────────── Motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.mpefs-wrap *,
	.mpefs-wrap *::before,
	.mpefs-wrap *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}.mpefs-wrap /* ───────────────────────── Administrator preview ─────────────────────────
   Shown when a manager opens an organizer's dashboard read-only. Deliberately
   loud: it must never be mistaken for the manager's own account. */

.mpefs-previewbar{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding: 12px 16px;
	margin-bottom: 14px;
	background: var(--mpefs-warn-bg);
	border: 1px solid #fde68a;
	border-left: 3px solid var(--mpefs-warn);
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--mpefs-warn);
}
.mpefs-wrap .mpefs-previewbar__icon { flex: 0 0 auto; }
.mpefs-previewbar__text { flex: 1 1 260px; min-width: 0; line-height: 1.5; }
.mpefs-previewbar strong { font-weight: 700; }.mpefs-wrap /* ───────────────────────── Manager landing ───────────────────────── */

.mpefs-manager-links{ display: grid; gap: 10px; }
@media (min-width: 700px) { .mpefs-manager-links { grid-template-columns: 1fr 1fr; } }.mpefs-wrap .mpefs-manager-link{
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 15px 16px;
	background: var(--mpefs-surface-2);
	border: 1px solid var(--mpefs-line);
	border-radius: 9px;
	text-decoration: none;
	color: var(--mpefs-ink);
	transition: border-color .15s, background .15s;
}
.mpefs-wrap .mpefs-manager-link:hover,
.mpefs-wrap .mpefs-manager-link:focus { border-color: var(--mpefs-accent-line); background: var(--mpefs-surface); opacity: 1; }.mpefs-wrap /* The glyph lives in a child <i>, not on this element: Font Awesome sets its own
   display and line-height on .fas, .mpefs-wrap which fought the flex centering when both
   classes sat on the same node and left the icon stuck in the top-left corner.
   line-height:1 here stops the wrapper's 1.55 body leading offsetting it too. */
.mpefs-manager-link__icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--mpefs-accent-soft);
	color: var(--mpefs-accent);
	line-height: 1;
}.mpefs-wrap /* SVG sizes itself from its width/height attributes, .mpefs-wrap so nothing here has to
   fight an icon font's own display or line-height. */
.mpefs-manager-link__icon .mpefs-icon{ display: block; }

/* Shared inline-icon behaviour: sit on the text baseline when inline, inherit
   colour, and never get squashed by a flex parent. */
.mpefs-wrap .mpefs-icon {
	flex: 0 0 auto;
	vertical-align: -0.15em;
}.mpefs-wrap .mpefs-manager-link strong{ display: block; font-size: 14px; font-weight: 700; }.mpefs-wrap .mpefs-manager-link em{ display: block; margin-top: 2px; font-size: 12.5px; font-style: normal; color: var(--mpefs-ink-soft); line-height: 1.5; }.mpefs-wrap /* ═══════════════════════ Event rows ═══════════════════════
   A four-part grid: date/thumb block, .mpefs-wrap title + meta, .mpefs-wrap capacity, .mpefs-wrap actions. It
   collapses to two rows on tablet and stacks on phones, .mpefs-wrap so the capacity bar
   always keeps a usable width rather than being squeezed to a sliver. */

.mpefs-erows{ display: grid; gap: 10px; }.mpefs-wrap .mpefs-erow{
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 160px auto;
	gap: 16px;
	align-items: center;
	padding: 14px 16px;
	background: var(--mpefs-surface);
	border: 1px solid var(--mpefs-line);
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mpefs-wrap .mpefs-erow:hover {
	border-color: var(--mpefs-accent-line);
	box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}
/* A draft is not live yet — mute it so the eye goes to what is selling. */
.mpefs-erow--draft { background: var(--mpefs-surface-2); }
.mpefs-erow--draft .mpefs-erow__title { color: var(--mpefs-ink-soft); }.mpefs-wrap /* ── date / thumbnail block ── */

.mpefs-erow__media{
	width: 56px;
	height: 56px;
	border-radius: 9px;
	overflow: hidden;
	background: var(--mpefs-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}.mpefs-wrap .mpefs-erow__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }.mpefs-wrap /* No featured image: show the date instead of a grey box — more useful. */
.mpefs-erow__media-fallback{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	color: var(--mpefs-accent);
	font-variant-numeric: tabular-nums;
}
.mpefs-erow__media-fallback em {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .75;
}

/* ── title + meta ── */

.mpefs-erow__body { min-width: 0; }.mpefs-wrap .mpefs-erow__head{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 5px;
}

.mpefs-erow__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mpefs-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.mpefs-wrap a.mpefs-erow__title:hover,
.mpefs-wrap a.mpefs-erow__title:focus { color: var(--mpefs-accent); opacity: 1; }.mpefs-wrap .mpefs-erow__meta{
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 12.5px;
	color: var(--mpefs-ink-soft);
}.mpefs-wrap .mpefs-erow__meta-item{ display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mpefs-erow__meta-item .mpefs-icon { opacity: .65; }

/* ── capacity ── */

.mpefs-erow__capacity { min-width: 0; }.mpefs-wrap .mpefs-erow__cap-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 5px;
	font-variant-numeric: tabular-nums;
}
.mpefs-erow__cap-sold { font-size: 12.5px; color: var(--mpefs-ink-soft); }
.mpefs-erow__cap-sold strong { font-size: 15px; font-weight: 700; color: var(--mpefs-ink); }
.mpefs-erow__cap-pct { font-size: 11px; font-weight: 700; color: var(--mpefs-ink-soft); }

.mpefs-erow__bar {
	height: 6px;
	border-radius: 999px;
	background: var(--mpefs-line);
	overflow: hidden;
}.mpefs-wrap .mpefs-erow__bar-fill{
	display: block;
	height: 100%;
	border-radius: 999px;
	transition: width .35s ease;
}
/* Semantic, and separate from the brand accent: green while there is room,
   amber as it fills, red once it is effectively gone. */
.mpefs-erow__bar-fill--low  { background: #10b981; }
.mpefs-erow__bar-fill--high { background: #f59e0b; }
.mpefs-erow__bar-fill--full { background: #ef4444; }

.mpefs-erow__cap-none { font-size: 12px; color: var(--mpefs-ink-soft); font-style: italic; }.mpefs-wrap /* ── actions ── */

.mpefs-erow__actions{ display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

/* ── responsive ── */

@media (max-width: 900px) {
	.mpefs-erow {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		row-gap: 12px;
	}
	.mpefs-erow__capacity { grid-column: 2 / -1; }
}

@media (max-width: 560px) {.mpefs-wrap .mpefs-erow{
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 12px;
		padding: 13px;
	}
	.mpefs-erow__media { width: 44px; height: 44px; }
	.mpefs-erow__media-fallback { font-size: 16px; }
	.mpefs-erow__capacity,
	.mpefs-erow__actions { grid-column: 1 / -1; }.mpefs-wrap .mpefs-erow__actions{ justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.mpefs-erow__bar-fill { transition: none; }
}

/* ─────────────────── Pick grid (speakers, related events) ─────────────────── */

.mpefs-wrap .mpefs-pickgrid {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr;
	max-height: 320px;
	overflow-y: auto;
	padding: 4px;
	margin: 0 -4px;
}
@media (min-width: 620px) {
	.mpefs-wrap .mpefs-pickgrid { grid-template-columns: 1fr 1fr; }
}

.mpefs-wrap .mpefs-pick {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 9px 11px;
	border: 1px solid var(--mpefs-line);
	border-radius: 9px;
	background: var(--mpefs-surface);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.mpefs-wrap .mpefs-pick:hover,
.mpefs-wrap .mpefs-pick:focus-within {
	border-color: var(--mpefs-accent-line);
	background: var(--mpefs-surface-2);
	opacity: 1;
}
.mpefs-wrap .mpefs-pick.is-selected {
	border-color: var(--mpefs-accent);
	background: var(--mpefs-accent-soft);
}
.mpefs-wrap .mpefs-pick input[type="checkbox"] { flex: none; margin: 0; }

.mpefs-wrap .mpefs-pick__avatar {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}
.mpefs-wrap .mpefs-pick__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mpefs-accent-soft);
	color: var(--mpefs-accent);
	font-size: 14px;
	font-weight: 700;
}

.mpefs-wrap .mpefs-pick__text { display: block; min-width: 0; line-height: 1.35; }
.mpefs-wrap .mpefs-pick__text strong {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mpefs-ink);
	overflow-wrap: anywhere;
}
.mpefs-wrap .mpefs-pick__text em {
	display: block;
	font-size: 12px;
	font-style: normal;
	color: var(--mpefs-ink-soft);
	overflow-wrap: anywhere;
}

.mpefs-wrap .mpefs-pickgrid--plain .mpefs-pick { padding: 8px 11px; }

.mpefs-wrap .mpefs-rule {
	height: 0;
	margin: 6px 0 14px;
	border: 0;
	border-top: 1px solid var(--mpefs-line);
}

/* ───────────────────────────── Inline SVG icons ───────────────────────────── */

/*
 * Every icon on these screens is an inline SVG from MPEFS_Icons rather than a
 * Font Awesome glyph. Core bundles FA 5.15.4 and offers a setting that stops it
 * loading at all, so an <i class="fas fa-xmark"> renders as an empty box on a
 * site that has switched it off — or, as here, whenever the name is an FA6 one
 * that FA5 never had. An SVG has no such failure mode.
 *
 * `flex: none` because most of these sit inside a flex row and would otherwise
 * be squashed by a long label next to them; `vertical-align: middle` for the
 * few that sit in normal inline flow.
 */
.mpefs-wrap .mpefs-icon {
	flex: none;
	vertical-align: middle;
}

/* Inside a button the glyph is the only child, so let the button centre it. */
.mpefs-wrap .mpefs-iconbtn > .mpefs-icon,
.mpefs-wrap .mpefs-gallery__remove > .mpefs-icon { display: block; }

/* ───────────────────────── Speakers panel ───────────────────────── */

.mpefs-wrap .mpefs-speakerlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mpefs-wrap .mpefs-speakerlist__item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--mpefs-line);
	border-radius: 10px;
	background: var(--mpefs-surface);
}
.mpefs-wrap .mpefs-speakerlist__avatar{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mpefs-surface-2);
	color: var(--mpefs-ink-soft);
	font-weight: 700;
}
/* Doubled class: a shared `img { height: auto }` elsewhere turns the round
   avatar into an oval unless this wins on specificity. */
.mpefs-wrap .mpefs-speakerlist__avatar img.mpefs-speakerlist__avatar,
.mpefs-wrap .mpefs-speakerlist__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpefs-wrap .mpefs-speakerlist__text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mpefs-wrap .mpefs-speakerlist__name { font-weight: 600; color: var(--mpefs-ink); overflow-wrap: anywhere; }
.mpefs-wrap .mpefs-speakerlist__role { font-size: 13px; color: var(--mpefs-ink-soft); overflow-wrap: anywhere; }
.mpefs-wrap .mpefs-speakerlist__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.mpefs-wrap .mpefs-speakerlist__actions .mpefs-inline-form { display: inline-flex; margin: 0; }

/* On a phone the actions drop under the name rather than squeezing it. */
@media (max-width: 480px) {
	.mpefs-wrap .mpefs-speakerlist__text { flex: 1 1 100%; }
	.mpefs-wrap .mpefs-speakerlist__actions { margin-left: 58px; }
}