/* ==========================================================================
   mambo-setup.css - the Setup console skin (v3.6.0)

   THIS IS A SKIN. inc/setup-render.php keeps emitting every control with its
   real binding key, its real capability gate and its real admin-ajax wiring
   (179 control keys, 23 ajax actions, every nopriv twin). Nothing in this
   sheet participates in a save; it restyles the shipped .eop markup and
   nothing more. That is deliberate: the alternative - porting the demo's own
   markup - would have shipped 211 writeable controls carrying no binding key
   at all, and a key with no binding writes to a fallback store and still
   reports success.

   Every selector is scoped under body.mb-setup, added by mambo_body_class()
   only when mambo_is_setup() is true. The page also renders the site header
   and footer through get_header()/get_footer(), so an unscoped rule would
   repaint the global chrome.

   Loads after event-operations.css by declaring it as a dependency, so no
   rule here needs to escalate to !important merely to win source order.

   NB: never write a star-slash pair inside these comment bodies. An earlier
   revision of mambo-watch.css did exactly that, closed its comment four lines
   early, and the error recovery swallowed the entire token block below it.
   ========================================================================== */



/* ===== mb-setup-1-shell.css ===== */
/* ============================================================================
   mb-setup-1-shell.css
   SETUP CONSOLE SKIN — SECTION 1: SHELL, CHROME, HUB GRID, SPACE ACCENTS
   ----------------------------------------------------------------------------
   A SKIN. No PHP markup changed; every selector below meets the DOM that
   inc/setup-render.php already emits, and every selector is scoped to
   `body.mb-setup` so the site header and footer rendered by get_header() /
   get_footer() are never touched.

   Design target: _proto/setup-demo.html  (the Claude Design prototype).
   Loads AFTER assets/css/event-operations.css, which owns these selectors
   today; line references below are into that file.

   SELECTOR FAMILIES OWNED BY THIS FILE — do not restate them elsewhere:
     token bridge      body.mb-setup  (private --mbs-* aliases)
                       .eop           (re-points the .eop-local palette,
                                       event-operations.css:6-20, at the
                                       mambo token set)
     page frame        .eop
     masthead          .eop-hd, .eop-hd .mk, .eop-hd h1, .eop-hd .subttl
     access strip      .eop-perm, .eop-perm .pill, .eop-perm .who,
                       .eop-perm a
     refusal state     .eop-noaccess (+ its h2 / p)
     breadcrumb        .eop-subnav, .eop-back, .eop-crumb
     main column       .eop-mn, .eop-sec, .eop-sec > h3
     jump rail         .eop-jump, .eop-jump[hidden], .eop-jbtn (+ .on /
                       [aria-selected] / [aria-current] / .is-on)
     hub               .eop-ml, .eop-cards, a.eop-card.eop-cardlink,
                       .eop-cardic, .eop-cardlink > h4, .eop-cardlink p.sub,
                       .eop-cardgo
     notes             .eop-note, .eop-permnote
     toast             .eop-toast (+ .on)
     space accents     .eop[data-eop-space="…"] --a / --as, and the hub's
                       per-card accents (now keyed off the card href, see below)
     keyframes         mbSetupHubIn

   NOT owned here (another agent styles them): .eop-card in general, .eop-row,
   .eop-vrow, .eop-sw, .eop-inp, .eop-btn, .eop-st, .eop-status, .eop-chip,
   .eop-chk*, .eop-seg, .eop-ib, .eop-ro, .eop-hint, .eop-empty, .eop-mut,
   .eop-i in general, and every Events / Broadcast / Gallery sub-console shape.

   Breakpoints authored here: 1120, 940, 760, 620, 520 only.
   ========================================================================= */


/* ============================================================================
   1. TOKEN BRIDGE
   ----------------------------------------------------------------------------
   WHY THIS EXISTS, AND WHY IT IS FIRST.
   event-operations.css:6-20 declares a COMPLETE private palette on `.eop`
   itself — including five names that collide with the mambo token set:
   --card, --ink, --info, --tint2 and --ease. Inside `.eop`, `var(--card)`
   therefore resolves to #F1EFE9 (warm stone), not to the mambo #FFFFFF, and
   `var(--ease)` to the old curve. Any token-only rule written below `.eop`
   would silently pick up the superseded palette.

   A custom property cannot re-declare itself from its own inherited value
   (`--card:var(--card)` is a cycle and drops the declaration), so the real
   values are captured one level up, on `body.mb-setup` — which is not `.eop`,
   so nothing is shadowed there — into private --mbs-* aliases, then handed
   back down inside `.eop`.

   While we are here the REST of the private palette is re-pointed too. That
   is deliberate: it means any shape neither skin file restyles still lands on
   the mambo palette instead of reverting to warm stone and near-black. It is
   a variable re-point only — no shipped property is overwritten by this block.
   ========================================================================= */
body.mb-setup {
  /* Captured OUTSIDE .eop, where the mambo names are not shadowed. These
     follow the theme automatically: mambo-tokens.css declares its light set on
     `:root, html[data-theme="light"]` and its dark set on
     `html[data-theme="dark"]`, both of which are ancestors of body. */
  --mbs-card: var(--card);
  --mbs-ink:  var(--ink);
  --mbs-info: var(--info);
  --mbs-tint2:var(--tint2);
  --mbs-ease: var(--ease);
}

/* Two selectors, one block. The first beats event-operations.css:6
   (`.eop`, 0-1-0). The second exists because event-operations.css:15
   (`html[data-theme="dark"] .eop`) is 0-2-1 — exactly what `body.mb-setup .eop`
   scores — and a tie would be settled by source order alone.
   FIXED: that tie-breaker used to be written `html[data-theme="dark"]
   body.mb-setup .eop`, a selector that does NOT start at `body.mb-setup` and so
   broke hard constraint 1. `body.mb-setup main.eop` scores 0-2-2, outranks the
   dark rule outright, and never leaves the scope — setup-render.php:128 always
   emits the console as `<main class="eop">`. The plain `.eop` selector is kept
   alongside it so the bridge still lands if that element ever stops being a
   <main>. */
body.mb-setup .eop,
body.mb-setup main.eop {
  /* the five genuine collisions, handed back */
  --card:  var(--mbs-card);
  --ink:   var(--mbs-ink);
  --info:  var(--mbs-info);
  --tint2: var(--mbs-tint2);
  --ease:  var(--mbs-ease);

  /* the rest of the private palette, re-pointed at tokens */
  --page:     var(--pg);
  --strip:    var(--stage);
  --surface1: var(--stage);
  --well:     var(--stage);
  --field:    var(--card);
  --ink2:     var(--body);
  --ink3:     var(--muted);
  --accent:   var(--acc);
  --on:       var(--onacc);
  --border:   var(--line);
  --border2:  var(--line);
  --ok:       var(--success);
  --ok-bg:    color-mix(in srgb, var(--success) 13%, transparent);
  --warn:     var(--warning);
  --warn-bg:  color-mix(in srgb, var(--warning) 13%, transparent);
  --info-bg:  color-mix(in srgb, var(--info) 13%, transparent);
  --gold:     var(--acc);
  --gold-soft:color-mix(in srgb, var(--acc) 14%, transparent);
  --gold-line:color-mix(in srgb, var(--acc) 42%, transparent);
  --tint3:    var(--soft);
  --shadow:   var(--sh);
  --sp:       var(--spring);

  /* Per-space accent. The MECHANISM is event-operations.css:515-527 and is
     kept exactly as shipped — one --a (ink) and one --as (wash) per
     [data-eop-space]. Only the palette is restated in tokens, in section 11.
     --as is declared ONCE, here, as a formula over --a: both properties are
     declared on the same element, so --as resolves against whichever --a wins
     the cascade on that element. */
  --a:  var(--acc);
  --as: color-mix(in srgb, var(--a) 12%, transparent);
}


/* ============================================================================
   2. THE PAGE FRAME
   ----------------------------------------------------------------------------
   Shipped (event-operations.css:13-14) the console is a bordered, rounded,
   shadowed, overflow-hidden panel floating on the page. The demo has no such
   panel: the page ground is --pg, the content sits in one column, and the
   CARDS are the only surfaces. So the panel is dissolved.

   1240px is the demo's content column: its shell is 1560 with a 246px rail
   and a 34px gap; this console has no rail, so 1560 - 246 - 34 ~= 1240, which
   is also the --shell token's value.
   overflow is returned to visible — the date-picker popover
   (event-operations.css:281) escapes its card, and the shipped overflow:hidden
   on .eop was clipping it at the frame edge.
   ========================================================================= */
body.mb-setup .eop {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px) clamp(14px, 2.4vw, 26px) 96px;
  background: var(--pg);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  font-family: var(--font);
  line-height: 1.5;
}


/* ============================================================================
   3. MASTHEAD — .eop-hd / .mk / h1 / .subttl
   ----------------------------------------------------------------------------
   Shipped this is a grey strip with a hairline under it and a 1.05rem title
   (event-operations.css:24-27). The demo opens a space with a display heading
   and a lede on the page ground, so the strip goes and the type steps up.
   ========================================================================= */
body.mb-setup .eop-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 18px;
  background: transparent;
  border-bottom: 0;
}
body.mb-setup .eop-hd .mk {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--tint2);
  color: var(--tint2ink);
}
body.mb-setup .eop-hd .mk .eop-i {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}
/* event-operations.css:22 sets a heading face on .eop h1 (0-1-1); the mambo
   set is single-family, so the face is returned to --font. */
body.mb-setup .eop-hd h1 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(24px, 2.7vw, 31px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--ink);
}
body.mb-setup .eop-hd .subttl {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--body);
}


/* ============================================================================
   4. ACCESS STRIP — .eop-perm
   ----------------------------------------------------------------------------
   Becomes the demo's .permRow: an inset --stage panel with a hairline, not a
   full-bleed grey band (event-operations.css:32-35).
   ========================================================================= */
body.mb-setup .eop-perm {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: var(--stage);
  border: 1px solid var(--line2);
  border-radius: var(--r-field);
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
body.mb-setup .eop-perm .pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--tintink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.mb-setup .eop-perm .who {
  font-weight: 650;
  color: var(--ink);
}
body.mb-setup .eop-perm a {
  margin-left: auto;
  color: var(--acc);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.mb-setup .eop-perm a:hover {
  border-bottom-color: currentColor;
}
body.mb-setup .eop-perm a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: var(--r-8);
}


/* ============================================================================
   5. REFUSAL STATE — .eop-noaccess
   ----------------------------------------------------------------------------
   Shipped this is an unstyled centred box (event-operations.css:96). It is the
   only thing a leader without permission ever sees, so it gets the demo's card
   frame, a title, a measured line length and an accent rule across the top.
   The button inside it is .eop-btn.pri and belongs to the controls skin — only
   its spacing is set here.
   ========================================================================= */
body.mb-setup .eop-noaccess {
  position: relative;
  overflow: hidden;
  max-width: 520px;
  margin: clamp(32px, 7vw, 72px) auto;
  padding: clamp(26px, 4vw, 36px) clamp(20px, 3.4vw, 32px);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sc);
}
body.mb-setup .eop-noaccess::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg,
              var(--acc),
              color-mix(in srgb, var(--acc) 22%, transparent));
}
body.mb-setup .eop-noaccess h2 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.15;
  color: var(--ink);
}
body.mb-setup .eop-noaccess p {
  max-width: 44ch;
  margin: 11px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}
body.mb-setup .eop-noaccess p:last-child {
  margin-top: 22px;
}


/* ============================================================================
   6. BREADCRUMB — .eop-subnav / .eop-back / .eop-crumb
   ----------------------------------------------------------------------------
   The demo's .crumb / .crumbBack / .crumbNow. NOTE the class name: .eop-subnav
   is the breadcrumb, NOT the jump rail (setup-render.php:151 vs :161).
   ========================================================================= */
body.mb-setup .eop-subnav {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--muted);
}
body.mb-setup .eop-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
body.mb-setup .eop-back:hover {
  background: var(--soft);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--acc) 34%, var(--line));
}
body.mb-setup .eop-back:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
body.mb-setup .eop-back .eop-i {
  width: 15px;
  height: 15px;
}
body.mb-setup .eop-crumb {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}


/* ============================================================================
   7. MAIN COLUMN — .eop-mn / .eop-sec / .eop-sec > h3
   ----------------------------------------------------------------------------
   .eop now carries the page padding, so .eop-mn drops its own
   (event-operations.css:41) and becomes the demo's .spBody rhythm.
   scroll-margin-top is raised from 56 to 88: the site header
   (mambo-chrome.css:22) is sticky at top:0, and 56px let a jumped-to heading
   land underneath it.
   ========================================================================= */
body.mb-setup .eop-mn {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
}
body.mb-setup .eop-sec {
  scroll-margin-top: 88px;
}
body.mb-setup .eop-sec > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: clamp(22px, 2.5vw, 29px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
  color: var(--ink);
}
/* The space's own accent lands on the section icon, never on the heading text,
   so the heading keeps full contrast. Same principle as
   event-operations.css:619-621. */
body.mb-setup .eop-sec > h3 .eop-i {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
  color: var(--a);
}


/* ============================================================================
   8. JUMP RAIL — .eop-jump / .eop-jbtn
   ----------------------------------------------------------------------------
   The demo's .subnav / .jchip: a single-line pill rail that scrolls sideways
   with a snap and a soft right edge, rather than the shipped wrapping block
   (event-operations.css:584-597).

   THE RAIL MUST STAY HIDDEN UNTIL FILLED. setup-render.php:161 prints it with
   [hidden] and event-operations.js:896 clears the attribute only after it has
   built the buttons. A bare `display:flex` at this specificity would defeat
   the shipped `.eop-jump[hidden]{display:none}` (0-2-0 vs this file's 0-3-1),
   so the [hidden] rule is restated immediately below at matching scope.

   NOT sticky, on purpose. The demo pins its rail under a 62px in-frame header;
   the real page's header is sticky at top:0 AND retracts on scroll
   (mambo-chrome.css:22, .mb-nav[data-mb-hidden]), so there is no constant
   offset to pin against — v2.44.1 of the shipped sheet reached the same
   conclusion for its own reasons.
   ========================================================================= */
body.mb-setup .eop-jump {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 2px 1px 12px;
  margin: 0 0 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* The scroll affordance: the last 24px of the rail fade out, so a rail with
     more chips than fit reads as continuing. A mask uses only the ALPHA of its
     gradient, so an opaque token stands in for the "keep" end — no raw colour
     literal is introduced. */
  -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, var(--ink) calc(100% - 24px), transparent);
  /* a scrollbar would be taller than half the rail; the fade is the affordance */
  scrollbar-width: none;
}
body.mb-setup .eop-jump::-webkit-scrollbar {
  height: 0;
  width: 0;
}
/* Restated so the rule above cannot un-hide the empty shell. */
body.mb-setup .eop-jump[hidden] {
  display: none;
}
body.mb-setup .eop-jbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
/* transform:none is explicit — event-operations.css:595 lifts the chip on
   hover, and a rail of pills that jumps is not what the demo does. */
body.mb-setup .eop-jbtn:hover {
  background: var(--soft);
  color: var(--ink);
  border-color: var(--line);
  transform: none;
}
/* The selected chip. event-operations.js:913-915 sets BOTH `.on` and
   aria-selected="true" on the same button (the rail is a real tablist:
   role=tablist on the nav, role=tab + aria-controls on each button, :892-893),
   so both are matched.
   FIXED: `.is-on` and `[aria-current]` were also listed here and are phantom —
   nothing in event-operations.js or setup-render.php ever puts either on a
   .eop-jbtn (`is-on` in that file belongs to .eos-ep__tab, .eos-ep__cell and
   .eop-evf-mode; `aria-current` appears nowhere). Removed rather than left as
   dead weight.
   This rule must also outrank :hover above — same 0-3-1 score, so it wins on
   being later in source, which is why it stays below the hover block. */
body.mb-setup .eop-jbtn.on,
body.mb-setup .eop-jbtn[aria-selected="true"] {
  background: color-mix(in srgb, var(--a) 12%, transparent);
  border-color: color-mix(in srgb, var(--a) 34%, transparent);
  color: var(--a);
  transform: none;
}
body.mb-setup .eop-jbtn:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}


/* ============================================================================
   9. HUB — .eop-ml / .eop-cards / a.eop-card.eop-cardlink
   ----------------------------------------------------------------------------
   The demo's .hubGrid / .hubCard / .hubTile.
   ========================================================================= */
body.mb-setup .eop-ml {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
/* !important, and ONLY on grid-template-columns. event-operations.css:439
   carries `.eop-cards{grid-template-columns:1fr !important}` inside its own
   max-width:720px block; without an equally important declaration here the
   auto-fill track list would be discarded on every tablet and phone. Higher
   specificity plus !important wins at every width, so no media query of ours
   is needed to answer it. */
body.mb-setup .eop-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr)) !important;
  gap: 14px;
  margin-top: 14px;
}
body.mb-setup a.eop-card.eop-cardlink {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
  text-decoration: none;
  margin: 0;
  padding: 20px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sc);
  transition: transform .26s var(--ease),
              box-shadow .26s var(--ease),
              border-color .26s var(--ease);
}
body.mb-setup a.eop-card.eop-cardlink:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
  border-color: color-mix(in srgb, var(--a) 45%, var(--line));
}
body.mb-setup a.eop-card.eop-cardlink:active {
  transform: translateY(-1px);
}
body.mb-setup a.eop-card.eop-cardlink:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}
/* The accent edge that draws in on hover — kept from event-operations.css:534,
   restated on tokens. */
body.mb-setup a.eop-card.eop-cardlink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--a);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s var(--ease);
}
body.mb-setup a.eop-card.eop-cardlink:hover::before {
  transform: scaleY(1);
}
body.mb-setup a.eop-cardlink .eop-cardic {
  width: 38px;
  height: 38px;
  flex: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--as);
  color: var(--a);
}
body.mb-setup a.eop-cardlink .eop-cardic .eop-i {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}
/* event-operations.css:542 rotates the tile on hover. The demo's hub tile is
   still; the card's own lift is the whole gesture. */
body.mb-setup a.eop-cardlink:hover .eop-cardic {
  transform: none;
}
/* event-operations.css:248 gives EVERY `.eop-card > h4` a bottom rule and
   padding — correct for a settings card, wrong for a hub tile, where it draws
   a line between the space name and its description. */
body.mb-setup a.eop-cardlink > h4 {
  display: block;
  margin: 15px 0 0;
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.25;
  color: var(--ink);
}
body.mb-setup a.eop-cardlink p.sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}
body.mb-setup a.eop-cardlink .eop-cardgo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--a);
  transition: gap var(--dur) var(--ease);
}
body.mb-setup a.eop-cardlink:hover .eop-cardgo {
  gap: 9px;
}

/* Entrance stagger, matching the demo's sIn at 28ms steps.
   This is a LOAD animation, not a scroll reveal: the resting declaration is
   opacity:1 (it has to be — event-operations.css:562 sets opacity:0 on the
   card itself, which would leave the hub blank if the animation never ran),
   and the transparent step lives only inside the keyframes with a backwards
   fill. The reduced-motion block at the foot of this file removes it entirely
   and the cards are simply there. */
@keyframes mbSetupHubIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
body.mb-setup .eop-cards > .eop-cardlink {
  opacity: 1;
  animation: mbSetupHubIn .4s var(--ease) both;
}
body.mb-setup .eop-cards > .eop-cardlink:nth-child(1) { animation-delay: 0s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(2) { animation-delay: .028s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(3) { animation-delay: .056s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(4) { animation-delay: .084s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(5) { animation-delay: .112s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(6) { animation-delay: .14s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(7) { animation-delay: .168s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(8) { animation-delay: .196s }
body.mb-setup .eop-cards > .eop-cardlink:nth-child(n+9) { animation-delay: .224s }


/* ============================================================================
   10. NOTES AND TOAST — .eop-note / .eop-permnote / .eop-toast
   ========================================================================= */
body.mb-setup .eop-note {
  max-width: 70ch;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
body.mb-setup .eop-permnote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 70ch;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--stage);
  border: 1px solid var(--line2);
  border-radius: var(--r-12);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
body.mb-setup .eop-permnote .eop-i {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--tint2ink);
}
/* The demo's toast is a near-black pill in BOTH themes; on tokens that is
   var(--ink) on var(--pg), which inverts with the theme — the same read in
   dark, where a black pill on a #161514 ground would disappear.
   Kept on opacity/transform rather than the demo's display swap, because
   event-operations.js:15 only toggles the .on class and expects the element to
   stay in the layout.

   NOTE the toast is emitted OUTSIDE the console — setup-render.php:163 closes
   </main> before printing it — so the section-1 token bridge does not reach it
   and var(--ink) / var(--pg) here are already the mambo values. That is what we
   want; do not "fix" it by moving the element.

   FIXED — SIZING. This was `height:40px; max-width:90%; white-space:nowrap` with
   no width of its own. Two faults compounded:
     1. With `left:50%` and no `right`, an auto-width absolutely-positioned box
        shrink-to-fits against the space from the 50% mark to the right edge —
        half the viewport. `width:max-content` is what actually lets the pill be
        as wide as its text before max-width caps it.
     2. `nowrap` on a 40px-tall pill cannot hold the long messages this toast is
        actually given — event-operations.js:303 sends "This page has been open a
        while and its security token expired. Reload and try again.", and
        eopAjaxWhy() (:300-306) relays server text of unbounded length. At 375px
        that painted one ~600px line centred on the viewport, clipped off both
        edges and unreadable.
   So: max-content width, capped at the narrower of 90% and 34rem, wrapping text,
   min-height instead of height, and symmetric padding so a two-line toast still
   looks like a pill. */
body.mb-setup .eop-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  max-width: min(90%, 34rem);
  min-height: 40px;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--pg);
  border-radius: var(--r-pill);
  box-shadow: var(--sh);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity var(--dur-pop) var(--ease),
              transform var(--dur-pop) var(--ease);
}
body.mb-setup .eop-toast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================================================
   11. THE NINE SPACE ACCENTS
   ----------------------------------------------------------------------------
   Mechanism unchanged from event-operations.css:515-527: the space slug travels
   on the wrap as [data-eop-space] and sets --a. Only --a is declared per space;
   --as is the formula set in section 1 and resolves against whichever --a wins
   on the element.

   The palette is now derived from tokens, so it follows the theme. The mambo
   set has no violet or plum, so those two are mixed from the semantic tokens
   that do exist — the mix keeps each space distinguishable from its
   neighbours while staying inside the brand's own hues.
   ========================================================================= */
body.mb-setup .eop[data-eop-space="events"]         { --a: var(--acc) }
body.mb-setup .eop[data-eop-space="attendance"]     { --a: var(--success) }
body.mb-setup .eop[data-eop-space="chat"]           { --a: var(--info) }
body.mb-setup .eop[data-eop-space="studio"]         { --a: color-mix(in srgb, var(--info) 62%, var(--live) 38%) }
body.mb-setup .eop[data-eop-space="broadcast"]      { --a: color-mix(in srgb, var(--acc) 72%, var(--live) 28%) }
body.mb-setup .eop[data-eop-space="communications"] { --a: color-mix(in srgb, var(--live) 62%, var(--tintink) 38%) }
body.mb-setup .eop[data-eop-space="reports"]        { --a: var(--muted) }
body.mb-setup .eop[data-eop-space="gallery"]        { --a: color-mix(in srgb, var(--success) 78%, var(--tintink) 22%) }
body.mb-setup .eop[data-eop-space="bible"]          { --a: color-mix(in srgb, var(--success) 72%, var(--sandink) 28%) }

/* THE HUB GRID, keyed off each card's OWN destination rather than its position.
   event-operations.css:549-557 pins the nine accents by :nth-child, but
   setup-render.php:143 SKIPS any space the viewer cannot open — so a leader
   without, say, Chat sees every card below it wearing the accent of a space it
   is not. The href is emitted by setup-render.php:144 as home_url('/setup/<slug>/'),
   which is the same fact the accent is meant to express.

   The blanket rule scores 0-5-1 and the nine keyed rules 0-6-1, both above the
   shipped 0-5-0, so the nth-child palette can never re-assert itself; the
   blanket also gives any space added later by the eos_setup_sections filter a
   sane accent instead of a borrowed one. --as is restated here because it was
   already resolved on .eop and would otherwise inherit that space's wash. */
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink {
  --a: var(--acc);
  --as: color-mix(in srgb, var(--a) 12%, transparent);
}
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/events/"]         { --a: var(--acc) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/attendance/"]     { --a: var(--success) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/chat/"]           { --a: var(--info) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/studio/"]         { --a: color-mix(in srgb, var(--info) 62%, var(--live) 38%) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/broadcast/"]      { --a: color-mix(in srgb, var(--acc) 72%, var(--live) 28%) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/communications/"] { --a: color-mix(in srgb, var(--live) 62%, var(--tintink) 38%) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/reports/"]        { --a: var(--muted) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/gallery/"]        { --a: color-mix(in srgb, var(--success) 78%, var(--tintink) 22%) }
body.mb-setup .eop[data-eop-space="hub"] .eop-cards > .eop-cardlink[href*="/setup/bible/"]          { --a: color-mix(in srgb, var(--success) 72%, var(--sandink) 28%) }


/* ============================================================================
   12. RESPONSIVE
   ----------------------------------------------------------------------------
   Real media queries — this is the page, not the demo's container-query
   sandbox. Authored widths: 1120, 940, 760, 620, 520 (never 1060).
   ========================================================================= */
@media (max-width: 1120px) {
  body.mb-setup .eop {
    padding-bottom: 80px;
  }
}

@media (max-width: 940px) {
  /* One card narrower per row than the auto-fill would choose on its own at
     this width, so a three-line description does not tower over a one-line one. */
  body.mb-setup .eop-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)) !important; /* answers event-operations.css:439 — see section 9 */
    gap: 12px;
  }
  body.mb-setup .eop-mn {
    gap: 16px;
  }
}

@media (max-width: 760px) {
  /* The access strip stops being a single line: the permissions link drops to
     its own row instead of being squeezed against the sign-in sentence. */
  body.mb-setup .eop-perm {
    align-items: flex-start;
    gap: 8px 12px;
  }
  body.mb-setup .eop-perm a {
    margin-left: 0;
    flex: 1 0 100%;
  }
  body.mb-setup .eop-hd {
    gap: 12px;
    margin-bottom: 16px;
  }
}

@media (max-width: 620px) {
  body.mb-setup .eop {
    padding-bottom: 64px;
  }
  body.mb-setup .eop-hd .mk {
    width: 34px;
    height: 34px;
  }
  body.mb-setup .eop-hd .mk .eop-i {
    width: 17px;
    height: 17px;
  }
  body.mb-setup .eop-hd .subttl {
    font-size: 14px;
  }
  body.mb-setup a.eop-card.eop-cardlink {
    padding: 17px;
  }
  body.mb-setup .eop-noaccess {
    margin-top: 30px;
  }
}

@media (max-width: 520px) {
  body.mb-setup .eop {
    padding-left: 14px;
    padding-right: 14px;
  }
  body.mb-setup .eop-jump {
    gap: 5px;
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  body.mb-setup .eop-jbtn {
    padding: 0 10px;
  }
  body.mb-setup .eop-perm {
    padding: 11px 12px;
    font-size: 12.5px;
  }
  body.mb-setup .eop-toast {
    bottom: 16px;
    font-size: 13px;
  }
}


/* ============================================================================
   13. REDUCED MOTION
   ----------------------------------------------------------------------------
   Everything this file animates comes off. Transforms are zeroed as well as
   transitions: clearing only the transition leaves the movement in place, it
   just snaps.

   !important is used ONLY where the shipped reduced-motion block
   (event-operations.css:630-638) is itself !important on the same selector —
   .eop-cardlink, .eop-cardlink:hover, .eop-cardic, .eop-jbtn,
   .eop-cardlink::before and .eop-cards > .eop-cardlink. Everything else below
   is a plain declaration.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* --- overlaps the shipped !important rules, so it must match them --- */
  body.mb-setup .eop-jbtn,
  body.mb-setup .eop-jbtn:hover,
  body.mb-setup a.eop-card.eop-cardlink,
  body.mb-setup a.eop-card.eop-cardlink:hover,
  body.mb-setup a.eop-card.eop-cardlink:active,
  body.mb-setup a.eop-cardlink .eop-cardic {
    transition: none !important;
    transform: none !important;
  }
  /* event-operations.css:637 clears this pseudo-element's transition with
     !important; the edge is then simply drawn, since there is no hover
     gesture left to reveal it. The transform needs no !important — it only
     has to beat this file's own hover rule, and it is later in source. */
  body.mb-setup a.eop-card.eop-cardlink::before,
  body.mb-setup a.eop-card.eop-cardlink:hover::before {
    transition: none !important;
    transform: scaleY(1);
  }
  body.mb-setup .eop-cards > .eop-cardlink {
    animation: none !important;
    opacity: 1 !important;
  }

  /* --- no shipped !important on these; plain declarations are enough --- */
  body.mb-setup .eop-back,
  body.mb-setup .eop-back:hover,
  body.mb-setup .eop-perm a,
  body.mb-setup a.eop-cardlink .eop-cardgo,
  body.mb-setup a.eop-cardlink:hover .eop-cardgo,
  body.mb-setup .eop-toast {
    transition: none;
    transform: none;
  }
  /* the toast is centred BY a transform, so it keeps that much of one */
  body.mb-setup .eop-toast,
  body.mb-setup .eop-toast.on {
    transform: translateX(-50%);
  }
  body.mb-setup .eop-jump {
    scroll-behavior: auto;
  }
}


/* ===== mb-setup-2-controls.css ===== */
/* ============================================================================
   mb-setup-2-controls.css — SETUP CONSOLE SKIN, SECTION 2: CARDS + CONTROLS
   ----------------------------------------------------------------------------
   A SKIN over inc/setup-render.php. No markup changes: every selector below
   meets DOM the shipped renderer already emits, with its real binding key and
   its real admin-ajax wiring intact.

   OWNED SELECTOR FAMILIES (nothing outside this list is touched here):
     .eop-card, .eop-card > h4, .eop-card > h4 .eop-st (inline badge), .sub
     .eop-row, .eop-vrow, .eop-vrow--area, .eop-swr, .rt, .t, .s
     .eop-sw (+ .on, [aria-checked], .acc, .busy)
     .eop-inp (input / select / textarea, + .ctl)
     .eop-btn (+ .pri, + .primary), .eop-ib (+ .danger)
     .eop-status (+ .off)
     .eop-st (+ .published .approved .pending .draft .live)
     .eop-chip, .eop-chips, .eop-chk, .eop-chkgrid, .eop-chkh, .eop-chks
     .eop-seg (+ .eop-glseg), .eop-togline
     .eop-empty, .eop-hint, .eop-mut, .c34, .eop-i (stroke only)
     .eop-ro (read-only dim + the #eop-bible-test exemption)

   RULES OF THE HOUSE, honoured throughout:
     - every selector starts `body.mb-setup`;
     - colour / radius / shadow / easing / duration come from mambo tokens only,
       anything a token does not supply is built with color-mix() over a token;
     - assets/css/event-operations.css loads FIRST and owns these selectors
       today; every override below is commented with the line it answers;
     - !important appears nowhere in this file (nothing it overrides is
       !important, so plain specificity settles it);
     - breakpoints are drawn only from the authored set
       1120 1020 940 900 860 760 680 620 520;
     - all motion is cancelled under prefers-reduced-motion at the foot.
   ========================================================================= */


/* ============================================================================
   0. ONE LOCAL ALIAS — and why it has to exist
   ----------------------------------------------------------------------------
   event-operations.css:6-20 declares a LEGACY palette as custom properties ON
   `.eop` itself: --card, --ink, --tint2, --info, --ease and friends. Those
   declarations shadow the mambo tokens of the same name for every descendant of
   the console, and they cannot be undone from inside `.eop` — `--card:var(--card)`
   is a self-reference and computes to guaranteed-invalid.

   The fix has to be made OUTSIDE `.eop`, which `body.mb-setup` is. A custom
   property is substituted where it is DECLARED, so `--mbc-card` resolves to the
   real mambo `--card` here at body level and then inherits into the console as a
   plain colour, untouched by the legacy block.

   Only one alias is needed. --ink / --ease / --info are shadowed too, but the
   legacy values are visually equivalent (#1A1A1A vs #26231F light, #F8F8F6 vs
   #F7F5F2 dark) so they are simply used as-is; --tint2 IS badly shadowed (grey,
   not peach) so this sheet uses the identical --accsoft / --acc pair instead and
   needs no alias for it.
   ========================================================================= */
body.mb-setup{
  /* the demo's card surface: mambo --card, rescued from the .eop shadow */
  --mbc-card: var(--card);
}


/* ============================================================================
   1. ICONS
   ----------------------------------------------------------------------------
   Only the stroke weight is set on the bare .eop-i. Width and height are
   DELIBERATELY not: event-operations.css sizes the icon per context (:38 nav
   15px, :56 card 16px, :106 hub tile 22px, :167 icon button 16px) at exactly the
   specificity a `body.mb-setup .eop-i` rule would tie with, and a tie decided by
   source order would silently resize every icon in the shell — which this
   section does not own. Sizes below are set only inside shapes it does own.
   ========================================================================= */
body.mb-setup .eop-i{ stroke-width: 1.7; }


/* ============================================================================
   2. CARD — the demo's .card (setup-demo.html:210-216)
   ========================================================================= */
body.mb-setup .eop-card{
  background: var(--mbc-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--sc);
  /* No entrance animation. The demo's .card carries `animation:sIn .4s both`,
     which starts at opacity:0 — forbidden here, because nothing on the real page
     reveals on scroll and a card that begins invisible is a blank-section bug
     waiting to happen. The card is simply present. */
  transition: border-color var(--dur-pop) var(--ease),
              box-shadow  var(--dur-pop) var(--ease);
}
/* Overrides event-operations.css:54 and :603 — the -3px lift and the deep hover
   shadow. A settings card is not a link and not a target; the demo's card is
   inert, and 40+ cards that all rise under the pointer read as noise. */
body.mb-setup .eop-card:hover{
  transform: none;
  border-color: var(--line);
  box-shadow: var(--sc);
}
/* Nothing here sets `display` on .eop-card, so the jump-nav's
   `.eop-card[hidden]{display:none !important}` (event-operations.css:617-618)
   keeps working exactly as it does today. */

/* THE ONE .eop-card THAT IS NOT A CARD. The event and broadcast editors ship as
   `<form class="eop-card eop-evform">` (setup-render.php:274 and :786) and
   event-operations.css:230 deliberately strips the card off it — the form's
   real cards are the .eop-fgroup blocks INSIDE it, so a surface here would nest
   a card in a card and put a hover shadow round the whole editor. That rule is
   only (0,2,0); the two rules above are (0,2,1) and (0,3,1) and were silently
   outranking it. Restated at (0,3,1) and placed after the :hover rule, so it
   settles both the rest and the hover state on source order. */
body.mb-setup .eop-evform.eop-card,
body.mb-setup .eop-evform.eop-card:hover{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Card heading. Overrides event-operations.css:248 — which put an 800-weight
   .9rem heading above a full-width border. The demo's .h4 has no rule under it;
   the card's own padding is the separation. */
body.mb-setup .eop-card > h4{
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
}
/* Overrides event-operations.css:621 (`.eop-card > h4 svg{color:var(--a)}`),
   the per-space accent from v2.44.0. The nine --a values are literal hexes with
   no dark-mode pair (#185FA5 on #161514 fails contrast), and the demo carries a
   single accent, so the heading icon takes the demo's muted ink instead. */
body.mb-setup .eop-card > h4 .eop-i{
  width: 17px;
  height: 17px;
  color: var(--muted);
}
/* The inline state badge inside a heading — "Administrator" on the Bible,
   Appearance and Header cards. It is a role marker, not a row status, so it gets
   the demo's .adminB look (setup-demo.html:215), not the .stPill look below. */
body.mb-setup .eop-card > h4 .eop-st{
  height: 19px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: var(--tint);
  color: var(--tintink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Card lede. Overrides event-operations.css:57. */
body.mb-setup .eop-card .sub{
  margin: 8px 0 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
body.mb-setup .eop-card .sub:last-child{ margin-bottom: 0; }


/* ============================================================================
   3. ROWS — the demo's .row / .rowT (setup-demo.html:232-238)
   ----------------------------------------------------------------------------
   THE FLEX-BASIS BUG, and the shape that fixes it. The prototype gave the label
   column `flex:1 1 200px` unconditionally. flex-basis sizes the MAIN axis: while
   the row is a row that 200px is the label's WIDTH, which is what was meant — but
   the moment the row flips to `flex-direction:column` (which every one of these
   rows does on a phone) the same 200px becomes the label's HEIGHT, and with no
   definite row height flex-grow cannot claw it back. Every row inflates.

   So the basis travels WITH the axis: it is a custom property set beside every
   flex-direction, and .rt merely reads it. NEVER put a bare length back into
   .rt's flex shorthand.
   ========================================================================= */
body.mb-setup .eop-row,
body.mb-setup .eop-vrow,
body.mb-setup .eop-swr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 13px 0;
  --eop-rowT-basis: 200px;
}
/* Only the divider colour is restated — never its presence. event-operations.css
   decides WHICH rows carry a top border (:59, :83, :117, :251, and the
   :first-of-type resets); re-declaring that logic here would change which rows
   have a rule. This sets border-top-color alone, so a row with border-top:0
   stays borderless. */
body.mb-setup .eop-row,
body.mb-setup .eop-vrow,
body.mb-setup .eop-swr{ border-top-color: var(--line2); }

body.mb-setup .eop-row > .rt,
body.mb-setup .eop-vrow > .rt,
body.mb-setup .eop-swr > .rt{
  min-width: 0;
  flex: 1 1 var(--eop-rowT-basis, auto);
}
body.mb-setup .eop-row > .rt > .t,
body.mb-setup .eop-vrow > .rt > .t,
body.mb-setup .eop-swr > .rt > .t{
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
body.mb-setup .eop-row > .rt > .s,
body.mb-setup .eop-vrow > .rt > .s,
body.mb-setup .eop-swr > .rt > .s{
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}
/* Textarea and emoji-picker rows stack at every width, as the demo's
   .row.stacked does — a full-width writing surface beside a 200px label is the
   one row shape that never worked. The basis goes to auto WITH the axis. */
body.mb-setup .eop-vrow--area{
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 9px;
  --eop-rowT-basis: auto;
}


/* ============================================================================
   4. SWITCH — the demo's .sw (setup-demo.html:239-242)
   ----------------------------------------------------------------------------
   The shipped switch is an EMPTY <div role="switch">: there is no child element
   to be the knob, so the knob stays on ::after (the demo's <i> is not available
   to us). Checked is matched on BOTH the class the runtime sets and the ARIA
   state, because assets/js/event-operations.js writes them together every time
   (:20, :32, :49, :103, :114, :174) and either alone must still look right.
   ========================================================================= */
body.mb-setup .eop-sw{
  width: 44px;
  height: 26px;
  padding: 3px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  flex: none;
  position: relative;
  transition: background var(--dur-pop) ease;
}
body.mb-setup .eop-sw::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--btn2);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 28%, transparent);
  /* Overrides event-operations.css:80 (`.eop-sw:active::after{transform:scaleX(1.18)}`).
     The knob's position is a transform now, so a press-squish on the same
     property would fight it mid-travel; the demo has no squish. */
  transform: translateX(0);
  transition: transform .24s var(--spring), background var(--dur) ease;
}
body.mb-setup .eop-sw.on,
body.mb-setup .eop-sw[aria-checked="true"]{
  /* Overrides event-operations.css:79 and :624 — :624 is the v2.44.0 per-space
     accent (var(--a)); see the note at the card heading for why one accent wins. */
  background: var(--acc);
  border-color: transparent;
}
body.mb-setup .eop-sw.on::after,
body.mb-setup .eop-sw[aria-checked="true"]::after{
  /* `left` is reset because event-operations.css:79 moves the knob with it. */
  left: 3px;
  transform: translateX(18px);
  background: var(--btn2);
}
/* The access-control switch in the event editor. event-operations.css:215 tints
   it with the legacy --info; it is the same switch, so it takes the same accent. */
body.mb-setup .eop-sw.acc.on,
body.mb-setup .eop-sw.acc[aria-checked="true"]{ background: var(--acc); }
/* In-flight state written by the runtime (event-operations.js:25, :45). Kept. */
body.mb-setup .eop-sw.busy{ opacity: .55; pointer-events: none; }
body.mb-setup .eop-sw:focus-visible{
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}


/* ============================================================================
   5. FIELDS — input, select, textarea. The demo's .fld / .sel (:245-250)
   ========================================================================= */
body.mb-setup .eop-inp{
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--stage);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
  /* NO width and NO min-width here, deliberately. This selector is (0,2,1) and
     would outrank every context-specific width the shipped sheet sets on an
     input that also carries .eop-inp:
       :330 .eop-chatov-row select      width:104px   (0,1,1)
       :335 .eop-flow-row .fic          width:52px    (0,2,0)
       :336 .eop-flow-row .flb          min-width:110px
       :337 .eop-flow-row .fds          min-width:140px  (+ 100% at the shipped 640)
       :338 .eop-flow-row .fmn          width:70px
     A blanket width:100% on flex items that are also flex:none turns each of
     those rows into a single full-width control with the rest pushed off the
     side. The shipped `.eop-inp{width:100%}` at :119 is (0,1,0), so it still
     backstops every input none of the above claims, which is what those rows
     were designed against. Widths this sheet DOES own are set on the row shapes
     below, where they cannot reach the flow or chat-override grids. */
}
/* Focus: 1px accent border + a 3px --accsoft ring. Overrides
   event-operations.css:121 (a 2px outline) and :626 (the same shape in the
   per-space accent). */
body.mb-setup .eop-inp:focus,
body.mb-setup .eop-inp:focus-visible{
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--accsoft);
  outline: none;
}
body.mb-setup textarea.eop-inp{
  height: auto;
  min-height: 66px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}
/* Select: the shipped markup has no wrapper and a <select> cannot carry a
   pseudo-element, so the chevron has to live in the background.
   It is DRAWN FROM TWO GRADIENT WEDGES, not from a data: URI. A url() is a
   separate document: it can read neither a custom property nor currentColor, so
   a data: URI chevron would have to carry a literal hex for its stroke — a raw
   colour this sheet is not allowed to write, and one that would need its own
   light and dark copies and would silently stop matching --muted the day the
   palette moved. Two wedges take the token directly and follow both themes for
   free. The left wedge is the 45deg layer, the right wedge the 135deg one; they
   meet exactly at 15px from the right edge. */
body.mb-setup select.eop-inp{
  padding: 0 28px 0 11px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 15px center, right 10px center;
  background-repeat: no-repeat, no-repeat;
}
/* Field widths inside a settings row. Scoped to the row shapes on purpose: the
   service-flow editor sizes its own inputs by class (.fic/.flb/.fds/.fmn,
   event-operations.css:335-338) and the number rows carry an inline width, and
   neither should be caught by a width rule meant for a settings row.
   Overrides event-operations.css:120 (.ctl 170px) and :323. */
body.mb-setup .eop-row > .eop-inp,
body.mb-setup .eop-vrow > .eop-inp{
  flex: 0 1 auto;
  width: min(380px, 100%);
}
body.mb-setup .eop-vrow--area > textarea.eop-inp{
  /* Overrides event-operations.css:322 — min-width:min(340px,100%) was what
     pushed the stacked row wider than a 375px screen. */
  flex: none;
  width: 100%;
  min-width: 0;
}
/* COMPATIBILITY, not styling: the per-service chat-override selects are sized
   down by event-operations.css:330 (104px wide, 32px tall). The base .eop-inp
   rule above outranks its HEIGHT and font-size, and select.eop-inp outranks its
   padding, so both are restored at matching specificity and the chevron is
   pulled in with them — 104px cannot carry a 39px padding gutter. Its WIDTH now
   comes from the shipped rule untouched, because the base .eop-inp rule above no
   longer declares one. This sheet does not otherwise style .eop-chatov. */
body.mb-setup .eop-chatov-row select.eop-inp{
  height: 32px;
  font-size: 12px;
  padding: 0 22px 0 8px;
  background-position: right 13px center, right 8px center;
}


/* ============================================================================
   6. BUTTONS — the demo's .btnS / .btnP and .iBtn (:189-192, :303-306)
   ========================================================================= */
body.mb-setup .eop-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--btn2);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) ease,
              border-color var(--dur) ease,
              transform var(--dur) ease;
}
body.mb-setup .eop-btn .eop-i{ width: 16px; height: 16px; }
/* --btn2Hover is not in the token set this skin may use, so the hover wash is
   mixed from --ink over the button's own surface: it darkens on light and
   lightens on dark, which is exactly what the demo's two literals do. */
body.mb-setup .eop-btn:hover{
  background: color-mix(in srgb, var(--ink) 6%, var(--btn2));
  border-color: var(--line);
  transform: translateY(-1px);
}
body.mb-setup .eop-btn:active{ transform: translateY(0); }
body.mb-setup .eop-btn:focus-visible{
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
/* Primary. BOTH class names are live: setup-render.php emits `.primary` on every
   save button and `.pri` on the flow save and the no-access link. Overrides
   event-operations.css:31, :133-134 and :625 (the per-space accent). */
body.mb-setup .eop-btn.pri,
body.mb-setup .eop-btn.primary{
  border-color: transparent;
  background: var(--acc);
  color: var(--onacc);
  font-weight: 600;
  box-shadow: var(--sc);
}
/* Same trick as the secondary hover, in the other direction: mixing --ink into
   --acc darkens it on light and lightens it on dark, standing in for --accHover. */
body.mb-setup .eop-btn.pri:hover,
body.mb-setup .eop-btn.primary:hover{
  background: color-mix(in srgb, var(--acc) 88%, var(--ink));
  border-color: transparent;
  filter: none;                        /* event-operations.css:134 */
}

/* Icon button — the row of edit / duplicate / delete on every list row. */
body.mb-setup .eop-ib{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--body);
  cursor: pointer;
  transition: background var(--dur-micro) ease,
              color var(--dur-micro) ease,
              border-color var(--dur-micro) ease,
              transform var(--dur-micro) var(--spring);
}
body.mb-setup .eop-ib .eop-i{ width: 16px; height: 16px; }
body.mb-setup .eop-ib:hover{ background: var(--soft); color: var(--ink); }
body.mb-setup .eop-ib:active{ transform: scale(.94); }
body.mb-setup .eop-ib:focus-visible{ outline: 2px solid var(--acc); outline-offset: 2px; }
/* Destructive. Overrides event-operations.css:170, which flooded the button with
   a literal red on hover; the demo marks danger by ink and edge, not by fill. */
body.mb-setup .eop-ib.danger{ color: var(--danger); }
body.mb-setup .eop-ib.danger:hover{
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}


/* ============================================================================
   7. READOUT PILL + STATE BADGE — the demo's .stat (:251-252) and .stPill (:302)
   ========================================================================= */
/* .eop-status is emitted "on" by default and `.off` for the negative case
   (setup-render.php:116-118), which is the reverse of the demo's .stat/.stat.ok
   pairing — so the tones are mapped, not the class names. */
body.mb-setup .eop-status{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
body.mb-setup .eop-status.off{
  background: var(--stage);
  color: var(--muted);
}

/* State badge. Overrides event-operations.css:66-71: the shipped badge is
   uppercase .58rem with letter-spacing, but every label PHP passes is already
   sentence case ("Published", "Scheduled", "LIVE — marked live by hand"), and
   uppercasing a whole sentence is what made the Go-live pill unreadable. */
body.mb-setup .eop-st{
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
body.mb-setup .eop-st.published{
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
/* `approved` is the class eos_setup_event_status_meta() gives a SCHEDULED post
   (setup-render.php:177) — future, not blessed, hence the neutral tint. */
body.mb-setup .eop-st.approved{ background: var(--tint); color: var(--tintink); }
body.mb-setup .eop-st.pending{ background: var(--sand); color: var(--sandink); }
body.mb-setup .eop-st.draft{
  border: 0;                            /* event-operations.css:67 gave it one */
  background: var(--stage);
  color: var(--muted);
}
body.mb-setup .eop-st.live{
  border: 0;                            /* event-operations.css:71 */
  background: color-mix(in srgb, var(--live) 14%, transparent);
  color: var(--live);
}


/* ============================================================================
   8. CHIPS — one class, two shapes, told apart by element
   ----------------------------------------------------------------------------
   .eop-chip is a <div> stat tile inside .eop-chips on Reports
   (setup-render.php:887-892) AND a <button> filter pill in the events and
   broadcast bars (:223). Styling them together is what made the shipped sheet
   need .eop-evfilters / .eop-aud prefixes; the element itself is the honest
   discriminator, and `button.eop-chip` outranks both of those prefixed rules
   (event-operations.css:139-141) without any of them being repeated here.
   ========================================================================= */
/* --- stat tiles: the demo's .atTile (setup-demo.html:382-388) --- */
body.mb-setup .eop-chips{
  /* auto-fit rather than a fixed 4-up, so this needs no media query and the
     shipped 640px 2-up rule (event-operations.css:46) becomes redundant instead
     of being outranked into a 4-up phone layout. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: 10px;
}
body.mb-setup .eop-chips > .eop-chip{
  padding: 11px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-field);
  background: var(--stage);
}
body.mb-setup .eop-chips > .eop-chip > .n{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.mb-setup .eop-chips > .eop-chip > .l{
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;               /* event-operations.css:49 */
  color: var(--muted);
}
/* --- filter pills: the demo's .atChip (setup-demo.html:434-437) --- */
body.mb-setup button.eop-chip{
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--mbc-card);
  color: var(--body);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) ease,
              border-color var(--dur) ease,
              color var(--dur) ease,
              transform var(--dur-micro) ease;
}
body.mb-setup button.eop-chip:hover{ background: var(--stage); color: var(--ink); }
body.mb-setup button.eop-chip:active{ transform: scale(.96); }
body.mb-setup button.eop-chip:focus-visible{ outline: 2px solid var(--acc); outline-offset: 2px; }
/* Selected. The runtime sets `.on` (event-operations.js:135, :138), so that is
   what is matched — outranking event-operations.css:140. */
body.mb-setup button.eop-chip.on{
  border-color: var(--acc);
  background: var(--accsoft);
  color: var(--acc);
}


/* ============================================================================
   9. CHECK GRIDS — the broadcast player-chrome ticks (setup-render.php:779-783)
   ========================================================================= */
body.mb-setup .eop-chkgrid{ margin-top: 16px; }
body.mb-setup .eop-chkh{
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
body.mb-setup .eop-chks{ display: flex; flex-wrap: wrap; gap: 7px; }
body.mb-setup .eop-chk{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--stage);
  color: var(--body);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) ease,
              border-color var(--dur) ease,
              color var(--dur) ease,
              transform var(--dur-micro) ease;
}
body.mb-setup .eop-chk .bx{
  width: 15px;
  height: 15px;
  flex: none;
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  background: var(--mbc-card);
  transition: background var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
body.mb-setup .eop-chk:hover{ border-color: var(--line); background: var(--soft); }
body.mb-setup .eop-chk:active{ transform: scale(.96); }
body.mb-setup .eop-chk:focus-visible{ outline: 2px solid var(--acc); outline-offset: 2px; }
/* Ticked. The runtime toggles `.on` (event-operations.js:186). */
body.mb-setup .eop-chk.on{
  border-color: var(--acc);
  background: var(--accsoft);
  color: var(--acc);
}
body.mb-setup .eop-chk.on .bx{ border-color: transparent; background: var(--acc); }
body.mb-setup .eop-chk.on .bx::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--onacc);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ============================================================================
   10. SEGMENTED CONTROL + TOGGLE LINE
   ========================================================================= */
/* Segmented — the demo's .seg (setup-demo.html:112-115). Used for Draft/Published
   on both editors and for the gallery layout picker (.eop-glseg). */
body.mb-setup .eop-seg{
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--stage);
}
body.mb-setup .eop-seg button{
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease;
}
body.mb-setup .eop-seg button:hover{ color: var(--ink); }
/* Selected. The runtime writes `.on` (event-operations.js:107, :173, :288).
   Overrides event-operations.css:195 and :628 — the demo's selected segment is a
   raised card, not an accent fill, so the row of segments stays legible. */
body.mb-setup .eop-seg button.on{
  background: var(--mbc-card);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--sc);
}

/* Toggle line — a label and a switch in their own well. The demo's .permRow
   (setup-demo.html:338-340). Overrides event-operations.css:181-182. */
body.mb-setup .eop-togline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-field);
  background: var(--stage);
}
body.mb-setup .eop-togline .tl{
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
body.mb-setup .eop-togline .tl .eop-i{ width: 16px; height: 16px; color: var(--muted); }

/* NO .eop-kv / .eop-kvi / .eop-grid / .eop-grid3 HERE — and that is deliberate.
   All four are styled by event-operations.css (:50-51, :125-129) but NOTHING in
   the theme emits them: grepping inc/*.php, template-parts and assets/js for
   `eop-kv`, `eop-kvi`, `eop-grid` and `eop-grid3` returns the stylesheet and
   nothing else. Rules for markup that does not exist read as a promise that it
   does, and the next maintainer pays for it. If a space ever starts emitting
   them, the tile idiom to copy is .eop-chips above and the grid idiom is
   `repeat(auto-fit, minmax(min(100%, N), 1fr))`. */


/* ============================================================================
   11. SMALL TEXT SHAPES + THE ROW ICON TILE
   ========================================================================= */
/* Empty state — the demo's .emptyList (setup-demo.html:520). */
body.mb-setup .eop-empty{
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-field);
  background: var(--stage);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
body.mb-setup .eop-hint{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
body.mb-setup .eop-mut{
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* The 34px icon tile that leads an attendance row. The demo's .thumb idiom
   (setup-demo.html:292) — the accent wash pair, which is what --tint2 /
   --tint2ink resolve to outside the console's legacy shadow. */
body.mb-setup .c34{
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--accsoft);
  color: var(--acc);
}
body.mb-setup .c34 .eop-i{ width: 17px; height: 17px; }


/* ============================================================================
   12. READ-ONLY
   ----------------------------------------------------------------------------
   event-operations.css:319-320 dims every control inside .eop-ro and exempts
   #eop-bible-test, because testing a connection is a READ and a viewer is
   allowed to do it. Both are restated here at this sheet's specificity so that
   nothing above (the button, field and switch rules all set backgrounds and
   transitions on the same elements) can end up outranking them. The exemption
   carries an id, so it still beats the dim rule as it must.
   ========================================================================= */
body.mb-setup .eop-ro .eop-sw,
body.mb-setup .eop-ro .eop-inp,
body.mb-setup .eop-ro .eop-btn{ pointer-events: none; opacity: .55; }
body.mb-setup .eop-ro .eop-btn#eop-bible-test{ pointer-events: auto; opacity: 1; }


/* ============================================================================
   13. RESPONSIVE
   ----------------------------------------------------------------------------
   Real media queries, drawn only from the authored set. 760 is deliberate: the
   shipped phone pass runs at max-width 720 (event-operations.css:427-440) and
   flips .eop-vrow to a column. If this sheet stacked LATER than that, there
   would be a band between 620 and 720 where the shipped rule made the row a
   column while --eop-rowT-basis was still 200px — the exact bug section 3
   exists to kill. Stacking at 760 means our column branch always contains the
   shipped one.
   ========================================================================= */
@media (max-width: 760px){
  /* Value rows stack: label over control, basis released WITH the axis. */
  body.mb-setup .eop-vrow{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
    --eop-rowT-basis: auto;
  }
  body.mb-setup .eop-vrow > .rt{ flex: none; }
  body.mb-setup .eop-row > .eop-inp,
  body.mb-setup .eop-vrow > .eop-inp,
  body.mb-setup .eop-vrow > select.eop-inp,
  body.mb-setup .eop-vrow--area > textarea.eop-inp{
    flex: none;
    width: 100%;
    min-width: 0;
  }
  /* 16px or iOS zooms the page on focus and never zooms back. The shipped sheet
     says this at :438 with a selector this one outranks, so it has to be said
     again here or the fix is lost. */
  body.mb-setup .eop-inp,
  body.mb-setup select.eop-inp,
  body.mb-setup textarea.eop-inp{ font-size: 16px; }
  /* The go-live state pill. It is a child of .eop-VROW (setup-render.php:690-693),
     not of .eop-row, so it has to be released in THIS branch — the one where the
     vrow becomes a column. Without it, align-items:stretch above blows an
     inline-flex pill out to the full width of the card and "LIVE — marked live
     by hand" reads as a banner. */
  body.mb-setup .eop-vrow > .eop-st{ align-self: flex-start; }
}
@media (max-width: 620px){
  /* Switch and readout rows stack too — the demo's 559 flip, at the nearest
     authored width. Same rule: the basis goes with the axis. */
  body.mb-setup .eop-row,
  body.mb-setup .eop-swr{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
    --eop-rowT-basis: auto;
  }
  body.mb-setup .eop-row > .rt,
  body.mb-setup .eop-swr > .rt{ flex: none; }
  /* The control keeps its natural size and sits at the edge the demo puts it on
     (setup-demo.html:689-694), rather than being stretched to full width.
     Only .eop-swr is listed: a switch is never a direct child of .eop-row. Every
     switch the renderer emits sits in .eop-swr (setup-render.php:62, :499),
     .eop-togline (:353, :777, :1047, :1067, :1292, :1320) or .eop-acc (:379),
     and .eop-row carries readouts instead. Likewise .eop-st is a child of
     .eop-vrow, released in the 760 branch above, never of .eop-row. */
  body.mb-setup .eop-swr > .eop-sw{ align-self: flex-end; }
  body.mb-setup .eop-row > .eop-status{ align-self: flex-start; }
  body.mb-setup .eop-card{ padding: 16px; }
  body.mb-setup .eop-card > h4{ font-size: 14.5px; }
}
@media (max-width: 520px){
  body.mb-setup .eop-card{ padding: 14px; }
  body.mb-setup .eop-chk{ flex: 1 1 auto; justify-content: flex-start; }
  body.mb-setup .eop-seg{ width: 100%; }
  body.mb-setup .eop-seg button{ flex: 1 1 auto; }
}


/* ============================================================================
   14. REDUCED MOTION
   ----------------------------------------------------------------------------
   Both the transition AND the transform go. Clearing only the transition leaves
   the movement in place — it just snaps — which is the lesson the shipped sheet
   records at event-operations.css:630-638.

   No !important is needed, and none is used. Every selector below repeats one
   this sheet already wrote, at identical specificity, from a later point in the
   same file — so it wins the tie on source order. (The one rule this cannot
   reach, .eop-card's hover lift, is already cancelled with !important by the
   shipped block at :634, which this sheet does not have to restate.)

   The switch knob is the one exception that must KEEP its transform: its
   position IS translateX, so zeroing it would park the knob at the off end of a
   switch that is on. Only its transition is removed, so it teleports.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  body.mb-setup .eop-card,
  body.mb-setup .eop-card:hover,
  body.mb-setup .eop-inp,
  body.mb-setup .eop-btn,
  body.mb-setup .eop-btn:hover,
  body.mb-setup .eop-btn:active,
  body.mb-setup .eop-ib,
  body.mb-setup .eop-ib:hover,
  body.mb-setup .eop-ib:active,
  body.mb-setup button.eop-chip,
  body.mb-setup button.eop-chip:active,
  body.mb-setup .eop-chk,
  body.mb-setup .eop-chk:active,
  body.mb-setup .eop-chk .bx,
  body.mb-setup .eop-seg button,
  body.mb-setup .eop-sw{
    transition: none;
    transform: none;
  }
  body.mb-setup .eop-sw::after,
  body.mb-setup .eop-sw.on::after,
  body.mb-setup .eop-sw[aria-checked="true"]::after{
    transition: none;
  }
}


/* ===== mb-setup-3-events.css ===== */
/* ============================================================================
   mb-setup-3-events.css — SECTION 3: THE EVENTS SPACE AND THE EVENT EDITOR
   ----------------------------------------------------------------------------
   A SKIN over inc/setup-render.php:204-493. No markup changes; every selector
   below meets DOM that setup-render.php already emits, with its real binding
   key (data-ev-field / data-ev-sw / data-evf-*) untouched.

   Loads AFTER assets/css/event-operations.css (713 lines), which owns most of
   these selectors today. `body.mb-setup ` prefixed to their selector raises
   specificity by (0,1,1), which settles the cascade without !important.
   !important appears in exactly two situations, both commented at source:
   (a) .eop-evf-clear (rest, hover and disabled), because event-operations.css
       :491 is itself !important on border-color and color;
   (b) the prefers-reduced-motion block, which has to beat every transition and
       transform this file declares.

   SELECTOR FAMILIES OWNED BY THIS FILE
   ------------------------------------
   List view
     .eop-evtabs .eop-evtab .eop-ev-view
     .eop-evbar .eop-evsearch .eop-evfilters (its .eop-chip only)
     .eop-evmetrics .eop-m
     .eop-evhead (its .eop-mut only)
     .eop-evwrap .eop-evtbl .eop-evrow .eop-evmain .eop-evthumb .eop-evtxt
     .eop-evtitle .eop-evsub .eop-evby .eop-livetag .eop-evact (its .eop-ib only)
     .eop-ev  (the numeric readout span, event-operations.css:65)
   Editor
     .eop-evform .eop-evformhead .eop-evcreator .eop-evfoot .eop-evtoast
     .eop-fgroup .eop-fsec .eop-fbody .eop-fg .eop-frow
     .eop-evform label, .eop-evform .eop-togline + .tl, .req
     leaf-only (typography only, no width/flex/display): .fic .fmn
   Per-feature audience
     .eop-evf .eop-evf-h .eop-evf-modes .eop-evf-mode .eop-evf-aud .eop-evf-lbl
     .eop-evf-chips .eop-evf-chip .eop-evf-emails .eop-evf-hint .eop-evf-row
     .eop-evf-row--danger .eop-evf-clear .eop-evf-tog
   Date / time picker (all sixteen parts)
     .eop-dt .eop-dt-row .eop-dt-cal .eop-dt-ic .eop-dt-lbl .eop-dt-time
     .eop-dt-h .eop-dt-m .eop-dt-colon .eop-dt-gmt .eop-dt-pop .eop-dt-pophd
     .eop-dt-nav .eop-dt-dow .eop-dt-grid .eop-dt-clear
   Media / overrides
     .eop-drop .eop-drop-in .eop-chatov .eop-chatov-row

   NOT TOUCHED HERE (another section owns them): .eop-card, .eop-btn, .eop-inp,
   .eop-sw, .eop-st, .eop-chip outside .eop-evfilters, .eop-seg outside
   .eop-evfoot, .eop-i outside .eop-fsec, .eop-accgrid / .eop-acc, .eop-jump,
   .eop-ro, .eop-permnote, .eop-empty, .eop-note, .eop-hint.
   ========================================================================== */


/* ----------------------------------------------------------------------------
   0. FIVE MAMBO TOKENS ARE SHADOWED INSIDE .eop — READ THIS BEFORE EDITING
   ----------------------------------------------------------------------------
   event-operations.css:6-20 declares its own stone palette ON `.eop` itself,
   and five of those names collide with the mambo token set:

       --card   --ink   --tint2   --info   --ease

   So a `var(--card)` written anywhere inside the console resolves to
   event-operations' #F1EFE9, NOT to mambo's #FFFFFF. The collision cannot be
   fixed from inside `.eop` either: `.eop{--card:var(--card)}` is circular and
   the whole declaration is dropped.

   The fix is to read those four (we never need --info) OUTSIDE `.eop`, on the
   body scope, where :root still wins, and alias them under a section-private
   `--ev-` prefix. The aliases carry the RESOLVED mambo value down into the
   console by inheritance.

   NEXT AGENT: do not re-declare --ev-card / --ev-ink / --ev-tint2 / --ev-ease.
   If you need the same escape hatch, mint your own prefix.
   -------------------------------------------------------------------------- */
body.mb-setup {
  --ev-card:  var(--card);   /* mambo card surface, not the stone #F1EFE9 */
  --ev-ink:   var(--ink);    /* mambo warm ink, not #1A1A1A               */
  --ev-tint2: var(--tint2);  /* mambo accent tint, not rgba(17,17,17,.08) */
  --ev-ease:  var(--ease);   /* mambo reveal ease                          */
}


/* ============================================================================
   1. VIEW SWITCH — "All events" / "Add event"
   ----------------------------------------------------------------------------
   event-operations.css:684-710 (v2.45.2) already turned these into a pill row
   with a hairline under it, deliberately, so the Events space reads like every
   other space's .eop-jump menu. That grammar is kept; only the palette and the
   selected state change, because :704 paints .on with --a (a raw #B45309 pinned
   at :515) instead of the mambo accent.
   ========================================================================== */
body.mb-setup .eop-evtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 10px;
  margin: 0 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
}
body.mb-setup .eop-evtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  max-width: 100%;
  padding: 0 13px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease;
}
body.mb-setup .eop-evtab .eop-i { width: 15px; height: 15px }
body.mb-setup .eop-evtab:hover {
  background: var(--soft);
  border-color: var(--line);
  color: var(--ev-ink);
  transform: none;                 /* :703 lifts the pill; the demo's current-
                                      state chips do not move. */
}
/* The demo's canonical "you are here" pill is the accent tint, not an accent
   fill — see .navItem[aria-current="page"] in the prototype. */
body.mb-setup .eop-evtab.on {
  background: var(--ev-tint2);
  border-color: transparent;
  color: var(--tint2ink);
  box-shadow: none;
}
body.mb-setup .eop-evtab:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* The two panels. event-operations.css:224-226 hides/shows them and runs the
   `eopfade` keyframe on reveal; the JS only ever toggles `.on`, so the
   display contract is preserved exactly and only the motion is restyled. */
body.mb-setup .eop-ev-view { display: none }
body.mb-setup .eop-ev-view.on {
  display: block;
  animation: mbsEvIn var(--dur-pop) var(--ev-ease) both;
}
@keyframes mbsEvIn { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }


/* ============================================================================
   2. LIST TOOLBAR — search, filters, add
   ========================================================================== */
body.mb-setup .eop-evbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--stage);
  border: 1px solid var(--line2);
  border-radius: var(--r-card);
}

body.mb-setup .eop-evsearch {
  position: relative;
  display: flex;
  flex: 1 1 220px;
  min-width: 0;
}
body.mb-setup .eop-evsearch .eop-i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
body.mb-setup .eop-evsearch input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 11px 0 33px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ev-card);
  color: var(--ev-ink);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
body.mb-setup .eop-evsearch input::placeholder { color: var(--faint) }
body.mb-setup .eop-evsearch input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--accsoft);
}

body.mb-setup .eop-evfilters { display: flex; flex-wrap: wrap; gap: 6px }
/* .eop-chip is a shared class; this is scoped INSIDE .eop-evfilters so the
   metric chips elsewhere in the console stay with their own owner. Overrides
   event-operations.css:139-141, which pins the selected fill to --accent. */
body.mb-setup .eop-evfilters .eop-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ev-card);
  color: var(--body);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease, transform var(--dur-micro) ease;
}
body.mb-setup .eop-evfilters .eop-chip:hover { background: var(--soft) }
body.mb-setup .eop-evfilters .eop-chip:active { transform: scale(.96) }
body.mb-setup .eop-evfilters .eop-chip.on {
  border-color: var(--acc);
  background: var(--accsoft);
  color: var(--acc);
}
body.mb-setup .eop-evfilters .eop-chip:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}


/* ============================================================================
   3. METRIC TILES
   ========================================================================== */
body.mb-setup .eop-evmetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
body.mb-setup .eop-m {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--stage);
  border: 1px solid var(--line2);
  border-radius: var(--r-12);
}
body.mb-setup .eop-m .k {
  order: 2;                       /* PHP emits label-then-number; the demo tile
                                     reads number-then-label. Flex order gets
                                     there without touching the markup. */
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
body.mb-setup .eop-m .v {
  order: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ev-ink);
}

/* The plain numeric readout (setup-render.php:506-507). */
body.mb-setup .eop-ev {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ev-ink);
}


/* ============================================================================
   4. THE EVENTS TABLE
   ========================================================================== */
body.mb-setup .eop-evhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line2);
}
body.mb-setup .eop-evhead h4 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ev-ink);
}
/* The "N total" counter. Scoped to .eop-evhead so the shared .eop-mut stays
   with its owner. */
body.mb-setup .eop-evhead .eop-mut {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--stage);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The table scrolls INSIDE this box and never widens the page.
   The right/left edge fades are painted as background layers rather than as
   the demo's absolutely-positioned ::after: an ::after inside an
   overflow-x:auto box scrolls away with the content, whereas the two
   `local` cover layers + two `scroll` shadow layers below show a fade
   exactly when — and only when — there is more table in that direction.
   background-color is pinned to --ev-card so the cover layers always match
   the card they sit on, whatever the card section decides its surface is. */
body.mb-setup .eop-evwrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background-color: var(--ev-card);
  background-image:
    linear-gradient(to right, var(--ev-card), transparent),
    linear-gradient(to left,  var(--ev-card), transparent),
    linear-gradient(to right, color-mix(in srgb, var(--ev-ink) 13%, transparent), transparent),
    linear-gradient(to left,  color-mix(in srgb, var(--ev-ink) 13%, transparent), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 30px 100%, 30px 100%, 16px 100%, 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

body.mb-setup .eop-evtbl {
  width: 100%;
  min-width: 620px;              /* below this the three columns collide, so the
                                    wrapper scrolls instead of the page body */
  border-collapse: collapse;
}
body.mb-setup .eop-evtbl td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line2);
  vertical-align: middle;
}
body.mb-setup .eop-evtbl td:first-child { padding-left: 20px; padding-right: 20px }
body.mb-setup .eop-evtbl td:last-child  { padding-right: 20px }
/* FIXED: the right-align and the nowrap belong to the ACTION cell, and the
   action cell only exists on a real row. The empty state is a single
   `td colspan="3"` (setup-render.php:238) which is simultaneously first-child
   AND last-child, so an unscoped `td:last-child` right-aligned "No events yet"
   and stopped it wrapping. Scoped to .eop-evrow, which the empty row is not. */
body.mb-setup .eop-evrow td:last-child { text-align: right; white-space: nowrap }
body.mb-setup .eop-evtbl tr:last-child td { border-bottom: 0 }

/* No `display` is ever set on .eop-evrow: assets/js/event-operations.js:134
   filters rows with an inline style.display, and any rule here would fight it. */
body.mb-setup .eop-evrow { transition: background var(--dur-micro) ease }
body.mb-setup .eop-evrow:hover { background: var(--stage) }

body.mb-setup .eop-evmain { display: flex; align-items: center; gap: 12px }
body.mb-setup .eop-evthumb {
  flex: none;
  width: 40px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: var(--r-8);
  background: var(--ev-tint2);
  color: var(--tint2ink);
}
body.mb-setup .eop-evthumb img { width: 100%; height: 100%; object-fit: cover }
body.mb-setup .eop-evthumb .eop-i { width: 19px; height: 19px; color: var(--tint2ink) }

body.mb-setup .eop-evtxt { min-width: 0; display: flex; flex-direction: column; gap: 2px }
body.mb-setup .eop-evtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ev-ink);
}
body.mb-setup .eop-evsub { font-size: 12.5px; line-height: 1.45; color: var(--body) }
body.mb-setup .eop-evby {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
body.mb-setup .eop-evby .eop-i { width: 12px; height: 12px }
body.mb-setup .eop-evby b { font-weight: 600; color: var(--body) }

/* Live badge. The PHP emits no inner element, so the pulsing dot the demo's
   .liveTag carries is a ::before here — a pseudo, not a markup change. */
body.mb-setup .eop-livetag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--live) 14%, transparent);
  color: var(--live);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.mb-setup .eop-livetag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: mbsEvPulse 2s var(--ev-ease) infinite;
}
@keyframes mbsEvPulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

body.mb-setup .eop-evact { display: flex; gap: 6px; justify-content: flex-end }
/* .eop-ib is scoped inside .eop-evact so the broadcast and flow-row icon
   buttons stay with their own owner. Overrides event-operations.css:166-170,
   whose danger hover is a hard #c0392b fill. */
body.mb-setup .eop-evact .eop-ib {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--body);
  cursor: pointer;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease,
              border-color var(--dur-micro) ease, transform var(--dur-micro) var(--spring);
}
body.mb-setup .eop-evact .eop-ib .eop-i { width: 16px; height: 16px }
body.mb-setup .eop-evact .eop-ib:hover { background: var(--soft); color: var(--ev-ink) }
body.mb-setup .eop-evact .eop-ib:active { transform: scale(.93) }
body.mb-setup .eop-evact .eop-ib.danger { color: var(--danger) }
body.mb-setup .eop-evact .eop-ib.danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger);
  color: var(--danger);
}
body.mb-setup .eop-evact .eop-ib:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }


/* ============================================================================
   5. THE EDITOR SHELL
   ========================================================================== */
body.mb-setup .eop-evform { margin-top: 0 }

body.mb-setup .eop-evformhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 2px 16px;
}
body.mb-setup .eop-evformhead h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ev-ink);
}
body.mb-setup .eop-evformhead .eop-i { width: 19px; height: 19px; color: var(--muted) }
body.mb-setup .eop-evcreator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
body.mb-setup .eop-evcreator .eop-i { width: 13px; height: 13px }
body.mb-setup .eop-evcreator b { font-weight: 600; color: var(--body) }
/* FIXED — MISSING STATE. The span ships with the `hidden` attribute
   (setup-render.php:275) and event-operations.js:117/119 drives it with
   `cr.hidden = true/false`, never a class. `hidden` is only `display:none` in
   the BROWSER'S sheet, so ANY author `display` beats it — event-operations.css
   :175 already did (`display:inline-flex`) and the rule above inherited the
   bug. Restated here so the creator byline really disappears on a new event.
   Same lesson event-operations.css:605-618 records for `.eop-card[hidden]`. */
body.mb-setup .eop-evcreator[hidden] { display: none }

/* Section card. overflow MUST stay visible or the calendar popover is clipped —
   the same reason event-operations.css:296 re-declares it after :231. */
body.mb-setup .eop-fgroup {
  overflow: visible;
  margin-bottom: 14px;
  background: var(--ev-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sc);
}
/* Section head. event-operations.css:232 gives it a --well fill and a bottom
   hairline; the prototype's .edCardHead sits on the card with a tinted icon
   tile and no rule under it, so both are cleared here. */
body.mb-setup .eop-fgroup > .eop-fsec {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 16px 18px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ev-ink);
  text-transform: none;
}
body.mb-setup .eop-fgroup > .eop-fsec > .eop-i {
  box-sizing: content-box;
  width: 17px;
  height: 17px;
  padding: 7px;
  border-radius: var(--r-ctl);
  background: var(--ev-tint2);
  color: var(--tint2ink);
}
body.mb-setup .eop-fbody { position: relative; padding: 13px 18px 18px }
body.mb-setup .eop-fbody > *:last-child { margin-bottom: 0 }

body.mb-setup .eop-fgroup .eop-fg,
body.mb-setup .eop-fgroup .eop-frow { margin-bottom: 14px }
body.mb-setup .eop-fgroup .eop-fg:last-child,
body.mb-setup .eop-fgroup .eop-frow:last-child { margin-bottom: 0 }
body.mb-setup .eop-evform .eop-fg { display: grid; gap: 12px 14px }
body.mb-setup .eop-evform .eop-fg.g2 { grid-template-columns: 1fr 1fr }
body.mb-setup .eop-evform .eop-fg.g3 { grid-template-columns: 1fr 1fr 1fr }

body.mb-setup .eop-evform label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--body);
  text-transform: none;
}
/* event-operations.css:205 pins the asterisk to a raw #e5484d. */
body.mb-setup .eop-evform .req { color: var(--danger); font-weight: 700 }

/* Toggle line. Scoped to the event form only — .eop-togline is also used by
   the broadcast, gallery and landing spaces, which belong to another section. */
body.mb-setup .eop-evform .eop-togline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
  background: var(--stage);
  border: 1px solid var(--line2);
  border-radius: var(--r-ctl);
}
body.mb-setup .eop-evform .eop-togline:last-child { margin-bottom: 0 }
body.mb-setup .eop-evform .eop-togline .tl {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ev-ink);
}
body.mb-setup .eop-evform .eop-togline .tl .eop-i { width: 16px; height: 16px; color: var(--muted) }

/* Leaf-level field bits of the service-flow row (.eop-flow-row, built by
   event-operations.js:375-383). Only the leaf class is written — the row itself
   sits in the Reports space and belongs to another section, so there is no
   container rule here to collide.

   FIXED — the `.flb { min-width: 110px }` / `.fds { min-width: 140px }` pair
   that stood here has been REMOVED. Two defects in one:
     (a) CASCADE. event-operations.css:336-337 already sets those exact
         min-widths as part of `flex:1` / `flex:2`, and :340 relaxes
         `.eop-flow-row .fds` to `min-width:100%` on a narrow screen. That
         shipped rule is (0,2,0); the copy here was (0,3,0) and OUTSIDE any
         media query, so it beat the mobile relaxation at every width.
     (b) OVERFLOW. With .fds pinned at 140px the flow row could no longer
         collapse, and grip + 4 inputs + "min" + the remove button pushed the
         card sideways at 375px.
   Nothing here now sets width, flex or display — only typography, exactly as
   a leaf-only borrow should.

   `.fi` / `.stp` / `.stp.now` were REMOVED as well: they are PHANTOM. Their
   containers `.eop-feed` and `.eop-life` are styled at event-operations.css
   :72-86 but no PHP or JS in this theme emits either one, so the classes never
   reach the page. */
body.mb-setup .eop .fic { text-align: center }
body.mb-setup .eop .fmn { font-variant-numeric: tabular-nums }


/* ============================================================================
   6. EDITOR FOOTER — status segment, cancel, save
   ----------------------------------------------------------------------------
   Made sticky so Save stays reachable down a form this long; the prototype
   keeps its editor's save button pinned in .edHdrIn for the same reason.
   Scoped to .eop-evform so the gallery's own .eop-evfoot (setup-render.php
   :1064) — the one event-operations.css:608-618 had to teach about [hidden] —
   is not touched.
   ========================================================================== */
body.mb-setup .eop-evform .eop-evfoot {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
  padding: 13px 2px;
  background: color-mix(in srgb, var(--pg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
/* .eop-seg is a shared class; scoped inside the footer so the gallery segment
   keeps its owner. Overrides event-operations.css:193-195 and :628, which
   paints the selected button with --a. */
body.mb-setup .eop-evfoot .eop-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
}
body.mb-setup .eop-evfoot .eop-seg button {
  height: 28px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease;
}
body.mb-setup .eop-evfoot .eop-seg button:hover { color: var(--ev-ink) }
body.mb-setup .eop-evfoot .eop-seg button.on {
  background: var(--ev-card);
  border-color: transparent;
  color: var(--ev-ink);
  box-shadow: var(--sc);
}

/* Save/typing toast. event-operations.css:198 paints it with --a. */
body.mb-setup .eop-evtoast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--ev-ink);
  color: var(--pg);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 90vw;
  box-shadow: var(--sh);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity var(--dur-pop) ease, transform var(--dur-pop) var(--spring);
}
body.mb-setup .eop-evtoast.show { opacity: 1; transform: translateX(-50%) translateY(0) }


/* ============================================================================
   7. PER-FEATURE AUDIENCE — "Live features for this service"
   ----------------------------------------------------------------------------
   event-operations.css:474-496 (v2.23.1) built these against a --eop-line /
   --eop-card pair that no sheet ever declares, so every one of those rules is
   running on its literal fallback (rgba(17,17,17,.12) and #fff) and none of it
   re-tones in dark. Everything below is a straight re-tokenisation; the
   `.is-on` classes the runtime sets (event-operations.js:725-762) are all
   restyled so no state reverts.
   ========================================================================== */
body.mb-setup .eop-evf {
  padding: 13px 14px;
  margin-bottom: 10px;
  background: var(--stage);
  border: 1px solid var(--line2);
  border-radius: var(--r-12);
}
body.mb-setup .eop-evf:last-child { margin-bottom: 0 }
body.mb-setup .eop-evf-h {
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ev-ink);
}

body.mb-setup .eop-evf-modes {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ev-card);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
}
body.mb-setup .eop-evf-mode {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  opacity: 1;                    /* :478 dims every mode to .62 — the demo's
                                    segmented buttons carry full-strength ink */
  transition: background var(--dur) ease, color var(--dur) ease;
}
body.mb-setup .eop-evf-mode:hover { color: var(--ev-ink) }
body.mb-setup .eop-evf-mode.is-on {
  background: var(--acc);
  color: var(--onacc);
  box-shadow: none;
}
body.mb-setup .eop-evf-mode:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }

body.mb-setup .eop-evf-aud {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
body.mb-setup .eop-evf-lbl {
  margin: 10px 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 1;
}
body.mb-setup .eop-evf-lbl:first-child { margin-top: 0 }
body.mb-setup .eop-evf-chips { display: flex; flex-wrap: wrap; gap: 6px }
body.mb-setup .eop-evf-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: var(--ev-card);
  color: var(--body);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease, transform var(--dur-micro) ease;
}
body.mb-setup .eop-evf-chip:hover { background: var(--soft); color: var(--ev-ink) }
body.mb-setup .eop-evf-chip:active { transform: scale(.96) }
/* :484 pins the selected chip to a raw #B45309. */
body.mb-setup .eop-evf-chip.is-on {
  border-color: var(--acc);
  background: var(--accsoft);
  color: var(--acc);
  font-weight: 600;
}
/* Leadership roles arrive from the Hub and are a different KIND of thing from
   the four fixed classifications, so they read in the second voice while off. */
body.mb-setup .eop-evf-chip.is-role { background: var(--tint); color: var(--tintink); border-color: transparent }
body.mb-setup .eop-evf-chip.is-role:hover { background: var(--tint); color: var(--tintink) }
body.mb-setup .eop-evf-chip.is-role.is-on { border-color: var(--acc); background: var(--accsoft); color: var(--acc) }
body.mb-setup .eop-evf-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }

body.mb-setup .eop-evf-emails {
  width: 100%;
  min-height: 62px;
  margin-top: 2px;
  border-radius: var(--r-ctl);
  font-size: 12.5px;
  line-height: 1.5;
}
body.mb-setup .eop-evf-hint {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 1;                    /* :486 dims it to .62, which under the mambo
                                    --muted lands below the contrast floor */
}

body.mb-setup .eop-evf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-top: 1px solid var(--line2);
}
/* FIXED. `:first-of-type` was a no-op here: it means "first DIV child of the
   parent", and the first div inside .eop-evf--sched is the .eop-evf-h heading
   (setup-render.php:452), never a row — so the top row kept a hairline that
   sat directly under the heading rule. The first row is always the element
   immediately after the heading, so the adjacent-sibling combinator is the
   markup-accurate way to say it. */
body.mb-setup .eop-evf-h + .eop-evf-row { border-top: 0 }
body.mb-setup .eop-evf-row > label {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ev-ink);
}
body.mb-setup .eop-evf-row > label small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  opacity: 1;
}
body.mb-setup .eop-evf-row > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted) }
body.mb-setup .eop-evf-row--danger {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
/* !important ONLY because event-operations.css:491 is itself !important on
   both of these properties. Nothing else in this file escalates. */
body.mb-setup .eop-evf-clear {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line)) !important;
  color: var(--danger) !important;
  background: transparent;
}
body.mb-setup .eop-evf-clear:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger) !important;
}
/* FIXED — MISSING STATE. event-operations.js:777 sets `clr.disabled = true` for
   the whole round trip and clears it at :786/:790. Nothing in this theme styles
   a disabled .eop-btn, so the button looked live and still lit on hover while
   the clear was in flight. `:disabled` beats the plain :hover rule above on
   specificity, and the hover is neutralised explicitly for the same reason.
   The two !importants only answer event-operations.css:491, as above. */
body.mb-setup .eop-evf-clear:disabled,
body.mb-setup .eop-evf-clear:disabled:hover {
  background: transparent;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  cursor: default;
}

/* The schedule switch. :492-495 is a 38x22 pill on raw #B0ADA3 / #157038. */
body.mb-setup .eop-evf-tog {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition: background var(--dur-pop) ease;
}
body.mb-setup .eop-evf-tog::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ev-card);
  box-shadow: var(--sc);
  transition: transform var(--dur-pop) var(--spring), background var(--dur) ease;
}
body.mb-setup .eop-evf-tog.is-on { background: var(--acc) }
body.mb-setup .eop-evf-tog.is-on::after { transform: translateX(18px); background: var(--onacc) }
body.mb-setup .eop-evf-tog:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }


/* ============================================================================
   8. PER-SERVICE CHAT OVERRIDES
   ========================================================================== */
body.mb-setup .eop-chatov {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 8px;
}
body.mb-setup .eop-chatov-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--stage);
  border: 1px solid var(--line2);
  border-radius: var(--r-ctl);
  transition: border-color var(--dur) ease;
}
body.mb-setup .eop-chatov-row:hover { border-color: var(--line) }
body.mb-setup .eop-chatov-row .ic { flex: none; width: 22px; text-align: center; font-size: 15px; line-height: 1 }
body.mb-setup .eop-chatov-row .t {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-ink);
}
body.mb-setup .eop-chatov-row .t small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
body.mb-setup .eop-chatov-row select { flex: none; width: 108px; height: 32px; font-size: 12px }


/* ============================================================================
   9. MEDIA DROP ZONES
   ----------------------------------------------------------------------------
   event-operations.js:267-268 writes `border-color: var(--accent)` as an INLINE
   style on dragover and clears it on dragleave/drop. Inline beats any rule, and
   --accent is event-operations' near-black (:7). Rather than fight it, --accent
   is re-pointed to the mambo accent for this element only — so the shipped
   dragover behaviour keeps working and simply paints the right colour.
   ========================================================================== */
body.mb-setup .eop-drop {
  --accent: var(--acc);
  position: relative;
  overflow: hidden;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-field);
  background: var(--stage);
  cursor: pointer;
  transition: border-color var(--dur-pop) ease, background var(--dur-pop) ease,
              color var(--dur-pop) ease;
}
body.mb-setup .eop-drop-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 100px;
  padding: 18px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
body.mb-setup .eop-drop-in .eop-i { width: 22px; height: 22px }
body.mb-setup .eop-drop:hover {
  border-color: var(--acc);
  background: var(--accsoft);
  color: var(--tint2ink);
}
body.mb-setup .eop-drop:hover .eop-drop-in { color: var(--tint2ink) }
body.mb-setup .eop-drop:focus-within { border-color: var(--acc); background: var(--accsoft) }
body.mb-setup .eop-drop.has .eop-drop-in { display: none }
body.mb-setup .eop-drop.has { border-style: solid; border-color: var(--line2); background: var(--soft) }
body.mb-setup .eop-drop img { display: none }
body.mb-setup .eop-drop.has img { display: block; width: 100%; height: 104px; object-fit: cover }


/* ============================================================================
   10. DATE / TIME PICKER (GMT)
   ----------------------------------------------------------------------------
   Sixteen parts, all restyled. The popover must never be clipped: .eop-dt is
   the positioning context, and .eop-fgroup is re-declared overflow:visible in
   section 5 for exactly this reason.
   ========================================================================== */
body.mb-setup .eop-dt { position: relative; margin-bottom: 14px }
body.mb-setup .eop-dt > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--body);
}
body.mb-setup .eop-dt-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px }

body.mb-setup .eop-dt-cal {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--stage);
  color: var(--ev-ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-micro) ease, background var(--dur-micro) ease;
}
body.mb-setup .eop-dt-cal:hover { border-color: var(--acc); background: var(--ev-card) }
body.mb-setup .eop-dt-cal:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }
body.mb-setup .eop-dt-ic { display: inline-flex; flex: none }
body.mb-setup .eop-dt-ic .eop-i { width: 16px; height: 16px; color: var(--muted) }
body.mb-setup .eop-dt-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

body.mb-setup .eop-dt-time {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--stage);
}
body.mb-setup .eop-dt-time select,
body.mb-setup .eop-dt-h,
body.mb-setup .eop-dt-m {
  height: 30px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ev-ink);
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  outline: none;
}
body.mb-setup .eop-dt-colon { color: var(--faint); font-weight: 600 }
body.mb-setup .eop-dt-gmt {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint);
}

body.mb-setup .eop-dt-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  left: 0;
  width: min(292px, calc(100vw - 28px));
  padding: 13px;
  background: var(--ev-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh);
  animation: mbsEvPop var(--dur-micro) ease both;
}
body.mb-setup .eop-dt-pop[hidden] { display: none }
@keyframes mbsEvPop { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }

body.mb-setup .eop-dt-pophd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
body.mb-setup .eop-dt-pophd b { font-size: 14px; font-weight: 700; letter-spacing: -.012em; color: var(--ev-ink) }
body.mb-setup .eop-dt-nav {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: var(--ev-card);
  color: var(--body);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}
body.mb-setup .eop-dt-nav:hover { background: var(--soft); color: var(--ev-ink) }
body.mb-setup .eop-dt-nav:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }

body.mb-setup .eop-dt-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px }
body.mb-setup .eop-dt-dow span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
body.mb-setup .eop-dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px }
body.mb-setup .eop-dt-grid button {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--body);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}
body.mb-setup .eop-dt-grid button:hover { background: var(--soft); color: var(--ev-ink) }
body.mb-setup .eop-dt-grid button.today {
  background: var(--accsoft);
  color: var(--tint2ink);
  font-weight: 700;
  box-shadow: none;
}
body.mb-setup .eop-dt-grid button.on { background: var(--acc); color: var(--onacc); font-weight: 700; box-shadow: none }
body.mb-setup .eop-dt-grid button:focus-visible { outline: 2px solid var(--acc); outline-offset: -1px }

body.mb-setup .eop-dt-clear {
  width: 100%;
  height: 32px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: var(--ev-card);
  color: var(--body);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}
body.mb-setup .eop-dt-clear:hover { background: var(--soft); color: var(--ev-ink) }
body.mb-setup .eop-dt-clear:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }


/* ============================================================================
   11. RESPONSIVE — real media queries, authored only at the sanctioned widths
   (1120, 1020, 940, 900, 860, 760, 680, 620, 520). 1060 is Watch-only and is
   never used here.
   ========================================================================== */
@media (max-width: 1120px) {
  body.mb-setup .eop-fbody { padding: 13px 16px 16px }
  body.mb-setup .eop-fgroup > .eop-fsec { padding: 15px 16px 0 }
}

@media (max-width: 1020px) {
  /* Three-up field rows are the first thing to give: at this width each column
     is under 200px and the labels start wrapping mid-word. */
  body.mb-setup .eop-evform .eop-fg.g3 { grid-template-columns: 1fr 1fr }
  body.mb-setup .eop-chatov { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) }
}

@media (max-width: 940px) {
  body.mb-setup .eop-evmetrics { grid-template-columns: repeat(auto-fit, minmax(min(50%, 130px), 1fr)) }
  body.mb-setup .eop-m { padding: 12px 14px }
  body.mb-setup .eop-m .v { font-size: 21px }
}

@media (max-width: 900px) {
  body.mb-setup .eop-evformhead h4 { font-size: 16px }
  body.mb-setup .eop-evf-modes { gap: 3px }
  body.mb-setup .eop-evf-mode { font-size: 11px; padding: 0 6px }
}

@media (max-width: 860px) {
  /* Search takes its own line so the filter pills are not squeezed to two
     characters beside it. */
  body.mb-setup .eop-evsearch { flex: 1 1 100% }
  body.mb-setup .eop-evbar { padding: 11px 12px }
  body.mb-setup .eop-evhead { padding: 14px 16px }
  body.mb-setup .eop-evtbl td:first-child,
  body.mb-setup .eop-evtbl td:last-child { padding-left: 16px; padding-right: 16px }
}

@media (max-width: 760px) {
  /* Four mode buttons do not fit one line here. This is a superset of the
     shipped 720px rule at event-operations.css:496, which therefore becomes
     redundant rather than conflicting. */
  body.mb-setup .eop-evf-modes { flex-wrap: wrap }
  body.mb-setup .eop-evf-mode { flex: 1 0 46% }
  body.mb-setup .eop-evf-row { align-items: flex-start }
  body.mb-setup .eop-chatov { grid-template-columns: 1fr }
}

@media (max-width: 680px) {
  /* Two-up and three-up field rows stack. Superset of the shipped 640px rule at
     event-operations.css:216 for .eop-fg.g2/.g3 (.eop-accgrid is not ours). */
  body.mb-setup .eop-evform .eop-fg.g2,
  body.mb-setup .eop-evform .eop-fg.g3 { grid-template-columns: 1fr }
  body.mb-setup .eop-fbody { padding: 12px 14px 14px }
  body.mb-setup .eop-fgroup > .eop-fsec { padding: 14px 14px 0; font-size: 14px }
  body.mb-setup .eop-evform .eop-evfoot { padding: 11px 2px }
  body.mb-setup .eop-evtabs { gap: 5px; padding-bottom: 9px; margin-bottom: 13px }
  body.mb-setup .eop-evtab { padding: 0 11px }
}

@media (max-width: 620px) {
  body.mb-setup .eop-evthumb { width: 34px; height: 44px }
  body.mb-setup .eop-evtitle { font-size: 13px }
  body.mb-setup .eop-evtbl td { padding: 11px 10px }
  body.mb-setup .eop-evtbl td:first-child,
  body.mb-setup .eop-evtbl td:last-child { padding-left: 14px; padding-right: 14px }
  body.mb-setup .eop-evf { padding: 12px }
}

@media (max-width: 520px) {
  /* 375px target. The picker stacks so the hour/minute selects keep a real tap
     target, and the popover is pinned inside the viewport. */
  body.mb-setup .eop-dt-row { flex-direction: column; align-items: stretch }
  body.mb-setup .eop-dt-cal { flex: none }
  body.mb-setup .eop-dt-time { justify-content: flex-start }
  body.mb-setup .eop-dt-time select,
  body.mb-setup .eop-dt-h,
  body.mb-setup .eop-dt-m { font-size: 16px }   /* under 16px iOS zooms on focus
                                                   and never zooms back */
  body.mb-setup .eop-dt-pop {
    left: 0;
    right: auto;
    width: min(288px, calc(100vw - 24px));
    padding: 11px;
  }
  body.mb-setup .eop-dt-grid button { min-height: 36px }
  body.mb-setup .eop-evsearch input { font-size: 16px }
  body.mb-setup .eop-evf-emails { font-size: 16px }
  body.mb-setup .eop-evf-mode { flex: 1 0 100% }
  body.mb-setup .eop-evf-row { flex-direction: column; align-items: stretch; gap: 9px }
  body.mb-setup .eop-evf-row > label { flex: none }
  body.mb-setup .eop-evform .eop-evfoot { gap: 7px }
  body.mb-setup .eop-evfoot .eop-seg { flex: 1 1 100% }
  body.mb-setup .eop-evfoot .eop-seg button { flex: 1 }
  body.mb-setup .eop-evtoast { bottom: 14px; font-size: 12.5px; padding: 0 15px }
}


/* ============================================================================
   12. REDUCED MOTION
   ----------------------------------------------------------------------------
   Both the transition AND the transform are cleared, and both animations are
   stopped — clearing only the transition leaves the movement in place, it just
   snaps (the lesson event-operations.css:630-638 records). Nothing in this file
   ever reveals a card, row or block from opacity:0 on scroll, so there is
   nothing to force back to visible except the two entrance keyframes.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.mb-setup .eop-evtab,
  body.mb-setup .eop-evtab:hover,
  body.mb-setup .eop-evsearch input,
  body.mb-setup .eop-evfilters .eop-chip,
  body.mb-setup .eop-evfilters .eop-chip:active,
  body.mb-setup .eop-evrow,
  body.mb-setup .eop-evact .eop-ib,
  body.mb-setup .eop-evact .eop-ib:active,
  body.mb-setup .eop-evtoast,
  body.mb-setup .eop-evf-mode,
  body.mb-setup .eop-evf-chip,
  body.mb-setup .eop-evf-chip:active,
  body.mb-setup .eop-evf-tog,
  body.mb-setup .eop-evf-tog::after,
  body.mb-setup .eop-chatov-row,
  body.mb-setup .eop-drop,
  body.mb-setup .eop-dt-cal,
  body.mb-setup .eop-dt-nav,
  body.mb-setup .eop-dt-grid button,
  body.mb-setup .eop-dt-clear,
  body.mb-setup .eop-evfoot .eop-seg button {
    transition: none !important;
    transform: none !important;
  }
  /* The toast still has to arrive and leave, so only its travel is removed —
     opacity is left to the .show class. */
  body.mb-setup .eop-evtoast { transform: translateX(-50%) !important }
  body.mb-setup .eop-evtoast.show { transform: translateX(-50%) !important }
  body.mb-setup .eop-evf-tog.is-on::after { transform: translateX(18px) !important }
  body.mb-setup .eop-ev-view.on,
  body.mb-setup .eop-dt-pop { animation: none !important }
  body.mb-setup .eop-livetag::before { animation: none !important }
}


/* ===== mb-setup-4-spaces.css ===== */
/* ============================================================================
   mb-setup-4-spaces.css
   SETUP CONSOLE SKIN — SECTION 4: GALLERY, BROADCAST FLOW, COMMUNICATIONS,
   ATTENDANCE AND REPORTS.

   This sheet is a SKIN. It restyles the DOM that inc/setup-render.php and
   assets/js/event-operations.js already emit. It adds no markup, renames no
   class, and touches no binding key. Every selector is scoped to
   `body.mb-setup` so nothing bleeds onto the site header or footer that
   get_header() / get_footer() wrap around the console.

   SELECTOR FAMILIES OWNED BY THIS FILE
     Gallery ............ .eop-glgrid, .eop-glcard (.im, .drag, .x, .star,
                          input.cap, input.alt, .dragging)
     Broadcast .......... .eop-flow-rows, .eop-flow-row (.grip, .fic, .flb,
                          .fds, .fmn, .mnl)
     Attendance/reports.. .eop-tbl, .eop-acc, .eop-accgrid, .eop-qa, .eop-busy

   NOT OWNED HERE — do not expect these to be styled by this file:
     .eop-card .eop-row .eop-vrow .eop-sw .eop-inp .eop-btn .eop-ib .eop-st
     .eop-chip .eop-chips .eop-seg .eop-chk .eop-status .eop-empty .eop-mut
     .eop-ev .eop-evwrap .eop-evhead .eop-evfoot .eop-evmetrics .eop-m .eop-drop

   SELECTORS DELIBERATELY ABSENT — DO NOT ADD THEM BACK
     .eop-feed (+ .fi .dot .m), .eop-chart (+ rect line text), .eop-life
     (+ .stp .aw), .eop-aud, .eop-nav (+ a, a.on), .eop-sp.
     Nothing in this theme emits any of them. Verified by grepping every .php
     and .js in the theme for the class token: zero hits. event-operations.js
     :816-817 says so in its own words for #eop-nav ("nothing has ever rendered
     #eop-nav"). event-operations.css still carries their old look at :36-40,
     :72-75, :84-87, :184 and :28, but a skin rule for markup that is never
     built is dead weight that misleads whoever reads this next.
     Communications (setup-render.php:865-876) likewise ships only two
     .eop-row's and an .eop-permnote — all shell vocabulary, nothing here.
     .eop-m is emitted (setup-render.php:228-231 Events, :678-681 Broadcast)
     but mb-setup-3-events.css:249-275 owns it; see section 4f.

   TOKEN TRAP — RESOLVED UPSTREAM, BUT KNOW ABOUT IT
     event-operations.css:6-20 declares a LOCAL palette on `.eop` itself which
     shadows five mambo token names inside the whole console:
       --card  --ink  --tint2  --info  --ease
     mb-setup-1-shell.css:91-98 hands all five back on `body.mb-setup .eop`
     (via --mbs-* aliases captured one level up, where nothing is shadowed), and
     it wins the tie on source order. So inside the console `var(--card)` is
     mambo's #FFFFFF and `var(--ink)` is mambo's #26231F, in both themes.
     This file may therefore read any of the five directly. It still prefers
     --accsoft / --tint2ink over --tint2 / --info, purely because those name the
     accent wash more honestly — not because of the collision.
     If the shell layer is ever removed, restore that hand-back before editing
     here or every surface in this file reverts to warm stone.

   MOTION
     Every transition and animation in this file is switched off in the
     prefers-reduced-motion block at the foot. Nothing here ever sets opacity:0
     on a card, a row or a block of content.
   ========================================================================= */


/* ============================================================================
   1. GALLERY — the photo manager (setup-render.php:1073, built by
   event-operations.js:254). Real emitted shape, per card:
     .eop-glcard[draggable] > .im > img + span.drag + button.x + button.star
                            > input.cap + input.alt
   Target: the demo's photo tile (setup-demo.html:534-543 .photoGrid / .ph /
   .phx / .phStar / .phCap).
   ========================================================================= */

/* Overrides event-operations.css:301, which is auto-FILL at a bare 140px.
   auto-fit plus min(100%, …) is the rule for every grid in this section: the
   min() is what keeps a 150px track from forcing a scrollbar at 375px. */
body.mb-setup .eop-glgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  margin-top: 13px;
}

/* Overrides event-operations.css:302 (--border / --well / 10px radius). */
body.mb-setup .eop-glcard {
  position: relative;
  border: 1px solid var(--line2);
  border-radius: var(--r-field);
  background: var(--stage);
  overflow: hidden;
  cursor: grab;
  transition: transform var(--dur-pop) var(--ease),
              border-color var(--dur) ease,
              box-shadow var(--dur) ease,
              opacity var(--dur-micro) ease;
}
body.mb-setup .eop-glcard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
  box-shadow: var(--sc);
}
body.mb-setup .eop-glcard:active { cursor: grabbing; }
body.mb-setup .eop-glcard:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--accsoft);
}

/* The starred (featured) card has to read as selected from across the grid,
   not only on the 26px star itself. :has() is the only way to reach the card
   from a state the JS sets on a descendant — and the star rule below still
   carries the state on its own if :has() is ever unavailable. */
body.mb-setup .eop-glcard:has(.star.on) {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 1px var(--acc);
}

/* Overrides event-operations.css:303-304. 4:3 kept: the shipped ratio is what
   the landing-page gallery renders, so the manager must not lie about crop. */
body.mb-setup .eop-glcard .im {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--soft);
}
body.mb-setup .eop-glcard .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* The three overlay controls share one scrim chip. Overrides the rgba()
   literals at event-operations.css:306-309 with a token mix over --ink. */
body.mb-setup .eop-glcard .im .drag,
body.mb-setup .eop-glcard .im .x,
body.mb-setup .eop-glcard .im .star {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--pg);
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background var(--dur) ease,
              color var(--dur) ease,
              transform var(--dur-micro) var(--spring);
}
body.mb-setup .eop-glcard .im .drag {
  top: 5px; left: 5px;
  width: 22px; height: 22px;
  border-radius: var(--r-8);
  cursor: grab;
}
body.mb-setup .eop-glcard .im .drag:active { cursor: grabbing; }
body.mb-setup .eop-glcard .im .x {
  top: 5px; right: 5px;
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
body.mb-setup .eop-glcard .im .x:hover {
  background: var(--live);
  color: var(--pg);
}
body.mb-setup .eop-glcard .im .star {
  bottom: 5px; left: 5px;
  width: 24px; height: 24px;
  border-radius: var(--r-8);
  cursor: pointer;
}
body.mb-setup .eop-glcard .im .x:active,
body.mb-setup .eop-glcard .im .star:active { transform: scale(.92); }
/* Overrides event-operations.css:308, which paints the on-state with the
   console's local --accent (near-black). Featured is an accent state. */
body.mb-setup .eop-glcard .im .star.on {
  background: var(--acc);
  color: var(--onacc);
}
body.mb-setup .eop-glcard .im .drag .eop-i,
body.mb-setup .eop-glcard .im .x .eop-i,
body.mb-setup .eop-glcard .im .star .eop-i { width: 14px; height: 14px; }

/* Caption and alt fields. Overrides event-operations.css:310-311. */
body.mb-setup .eop-glcard input.cap,
body.mb-setup .eop-glcard input.alt {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 9px;
  outline: none;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}
body.mb-setup .eop-glcard input.alt {
  color: var(--body);
  font-size: 11.5px;
}
body.mb-setup .eop-glcard input.cap::placeholder,
body.mb-setup .eop-glcard input.alt::placeholder { color: var(--faint); }
body.mb-setup .eop-glcard input.cap:focus,
body.mb-setup .eop-glcard input.alt:focus {
  background: var(--accsoft);
  color: var(--ink);
}

/* The drag ghost. Overrides event-operations.css:312 (opacity .45). A card is
   never taken to 0 — it stays legible so you can see what you are moving. */
body.mb-setup .eop-glcard.dragging {
  opacity: .42;
  border-color: var(--acc);
  cursor: grabbing;
}


/* ============================================================================
   2. BROADCAST — the service-flow stage editor (setup-render.php:754, rows
   built by event-operations.js:376). Real emitted shape, per row:
     .eop-flow-row[draggable] > span.grip + input.eop-inp.fic + .flb + .fds
                              + .fmn + span.mnl + button.eop-ib.danger.frm
   Target: the demo's one list row, setup-demo.html:484-499 (.lrow / .grip /
   .lmain / .lmeta), and .listCol for the stack.
   ========================================================================= */

/* Overrides event-operations.css:332. */
body.mb-setup .eop-flow-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 11px;
}

/* Overrides event-operations.css:333 (--border / --well / 10px). */
body.mb-setup .eop-flow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line2);
  border-radius: var(--r-field);
  background: var(--stage);
  /* No `opacity` here on purpose. The gallery gets a drag ghost because
     event-operations.js:261 puts `.dragging` on the card; the stage editor's
     dragstart (js:397) only records an index and adds no class, so a flow row
     has no drag state to transition to. Listing opacity would advertise one. */
  transition: border-color var(--dur) ease,
              background var(--dur) ease;
}
body.mb-setup .eop-flow-row:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
}
body.mb-setup .eop-flow-row:focus-within {
  border-color: var(--acc);
  background: var(--card);
}

/* Overrides event-operations.css:334. The shipped grip is the literal text
   "⋮⋮" with letter-spacing:-2px, so it is type, not an icon: it is sized and
   coloured as type here rather than given an icon box it does not have. */
body.mb-setup .eop-flow-row .grip {
  flex: none;
  color: var(--faint);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  transition: color var(--dur) ease;
}
body.mb-setup .eop-flow-row:hover .grip { color: var(--muted); }
body.mb-setup .eop-flow-row .grip:active { cursor: grabbing; }

/* Field widths. Paint comes from .eop-inp, which this file does not own —
   only the track sizes are set here, each with a min() floor so no field can
   push the row wider than the screen. Overrides event-operations.css:335-338. */
body.mb-setup .eop-flow-row .fic {
  width: 54px;
  flex: none;
  text-align: center;
  font-size: 15px;
}
body.mb-setup .eop-flow-row .flb { flex: 1 1 min(100%, 130px); min-width: 0; }
body.mb-setup .eop-flow-row .fds { flex: 2 1 min(100%, 170px); min-width: 0; }
body.mb-setup .eop-flow-row .fmn {
  width: 72px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
/* Overrides event-operations.css:339. */
body.mb-setup .eop-flow-row .mnl {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}


/* ============================================================================
   3. COMMUNICATIONS — nothing to style.
   setup-render.php:865-876 is the whole space: two .eop-row's and one
   .eop-permnote, all of which the shell layer owns. The activity feed
   (.eop-feed / .fi / .dot / .m) that event-operations.css:84-86 still carries
   a look for is never built by any template or script in this theme, so no
   rule for it is written here. Section kept as a placeholder so the numbering
   in this file and in the section brief stay aligned.
   ========================================================================= */


/* ============================================================================
   4. ATTENDANCE AND REPORTS
   ========================================================================= */

/* ---- 4a. The attendance table (setup-render.php:898). Target: the demo's
   report table, setup-demo.html:591-598 (table.rTbl). The table sits inside a
   flush .eop-card, so the card is the frame and the table needs none. ------ */

/* Overrides event-operations.css:62. min-width plus the shipped
   .eop-evwrap{overflow:auto} is what keeps five numeric columns readable at
   375px without the page itself scrolling sideways. */
body.mb-setup .eop-tbl {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
}
/* Overrides event-operations.css:63. */
body.mb-setup .eop-tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 10px 13px;
  background: var(--stage);
  border-bottom: 1px solid var(--line2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* Overrides event-operations.css:64. */
body.mb-setup .eop-tbl td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line2);
  vertical-align: middle;
  color: var(--body);
}
body.mb-setup .eop-tbl th:first-child,
body.mb-setup .eop-tbl td:first-child { padding-left: 16px; }
body.mb-setup .eop-tbl th:last-child,
body.mb-setup .eop-tbl td:last-child { padding-right: 16px; }
/* Every column after the service name is a count or a duration. */
body.mb-setup .eop-tbl th:not(:first-child),
body.mb-setup .eop-tbl td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.mb-setup .eop-tbl tbody tr {
  transition: background var(--dur-micro) ease;
}
body.mb-setup .eop-tbl tbody tr:hover { background: var(--stage); }
body.mb-setup .eop-tbl tbody tr:last-child td { border-bottom: 0; }

/* ---- 4b. (was the .eop-chart block.) Reports draws no chart: the space is
   four .eop-chip stat tiles, the table above, and the export row below. No
   template or script in this theme builds an .eop-chart, so the rules that
   were here have been removed rather than left to mislead. If a chart is ever
   added, style it here and add it to the reduced-motion block. ------------ */

/* ---- 4c. Access-control tiles (setup-render.php:377-379). Target: the
   demo's list row, setup-demo.html:484-496. ------------------------------- */

/* Overrides event-operations.css:209 (fixed 1fr 1fr) and its 640px partner at
   line 216. auto-fit with a min() floor collapses to one column on its own,
   so the tiles never crush and never overflow. */
body.mb-setup .eop-accgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 9px;
  margin-top: 9px;
}
/* Overrides event-operations.css:210. */
body.mb-setup .eop-acc {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--r-field);
  background: var(--stage);
  transition: border-color var(--dur) ease, background var(--dur) ease;
}
body.mb-setup .eop-acc:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
}
/* Overrides event-operations.css:211-212. --accsoft / --tint2ink are the pair
   that names an accent wash and its ink; both are unshadowed either way. */
body.mb-setup .eop-acc .ic {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-8);
  background: var(--accsoft);
  color: var(--tint2ink);
}
body.mb-setup .eop-acc .ic .eop-i { width: 16px; height: 16px; }
/* Overrides event-operations.css:213-214. */
body.mb-setup .eop-acc .t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}
body.mb-setup .eop-acc .t .s {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}
/* The switch inside these tiles is NOT styled here. The access switch is
   `<span class="eop-sw acc" role="switch" aria-checked="…">`
   (setup-render.php:379), and mb-setup-2-controls.css:295-296 already declares
       body.mb-setup .eop-sw.acc.on,
       body.mb-setup .eop-sw.acc[aria-checked="true"] { background: var(--acc) }
   which is (0,4,1) and beats event-operations.css:215's `.eop-sw.acc.on`
   (0,3,0) outright — no `.eop-acc` scope was ever needed to reach it, and a
   copy here would cover only `.on` and miss the aria-checked half. The
   .eop-sw family belongs to the controls layer; leave it there. */

/* ---- 4d / 4e. (were the .eop-aud chip row and the .eop-life lifecycle
   strip.) Neither class is emitted anywhere in this theme — the audience chips
   under Events are .eop-evf-chips (mb-setup-3-events.css owns them) and there
   is no lifecycle strip in any space. Rules removed. The leaf `.stp` still has
   a look from mb-setup-3-events.css's leaf-level block if one ever appears.
   ------------------------------------------------------------------------ */

/* ---- 4f. Quick-action row (.eop-qa) — export links under Reports
   (setup-render.php:919) and the Add-stage / Save-stages pair under Broadcast
   (setup-render.php:755). Target: the demo's .mBtn, setup-demo.html:500-503.

   event-operations.css:89 styles `.eop-qa a,.eop-qa button` — a (0,1,1)
   selector that also swallows the two .eop-btn children under Broadcast and
   inflates them into 130px-wide tiles. The paint half of that rule is beaten
   by any `body.mb-setup .eop-btn` rule from the shell layer, but flex and
   min-width are not properties a button rule sets, so they are released here
   explicitly. Bare <a> children keep the full treatment. --------------- */
body.mb-setup .eop-qa {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.mb-setup .eop-qa > .eop-btn {
  flex: 0 0 auto;
  min-width: 0;
}
body.mb-setup .eop-qa a:not(.eop-btn),
body.mb-setup .eop-qa button:not(.eop-btn) {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: var(--btn2);
  color: var(--body);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) ease,
              border-color var(--dur) ease,
              color var(--dur) ease;
}
body.mb-setup .eop-qa a:not(.eop-btn):hover,
body.mb-setup .eop-qa button:not(.eop-btn):hover {
  background: var(--soft);
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
  color: var(--ink);
}
body.mb-setup .eop-qa a:not(.eop-btn) .eop-i,
body.mb-setup .eop-qa button:not(.eop-btn) .eop-i {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
/* (was `body.mb-setup .eop-qa .c34`, overriding event-operations.css:91.)
   Removed on two counts. First, no .eop-qa in this theme has a .c34 child: the
   only .c34 emitted anywhere is inside .eop-swr at setup-render.php:499, so the
   combination never matches. Second, .c34 is owned outright by
   mb-setup-2-controls.css:789-800 as `body.mb-setup .c34` (0,2,1); a
   descendant form here would be (0,3,1) and would silently out-rank its owner
   the day the markup changed. If .eop-qa ever gains an icon slot, ask the
   controls layer for it — do not re-specify it here. ---------------------- */

/* ---- 4g. Metric tiles (.eop-m). NOT STYLED HERE — and it matters why.
   Broadcast emits them (setup-render.php:678-681) so they are in this section's
   brief, but so does Events (:228-231), and mb-setup-3-events.css:249-275
   already owns `body.mb-setup .eop-m` / `.k` / `.v` unscoped, which covers both
   emitters (both sit inside .eop-evmetrics).

   The duplicate that used to be here did not merely repeat sheet 3, it BROKE
   it. A media query adds no specificity, so an unmediated `body.mb-setup
   .eop-m{padding:…}` in this file — loading after sheet 3 — beat sheet 3's
   @media (max-width:940px) step-down (mb-setup-3-events.css:1160-1164) at every
   width, and the tiles never shrank until this file's own 620px rule. It also
   re-pointed `.eop-m .v` from sheet 3's --ev-ink alias back to a bare --ink,
   undoing that sheet's token escape hatch.
   Rule of thumb: a shape emitted by two spaces gets ONE owner, and it is the
   sheet that loads first. ------------------------------------------------- */

/* ---- 4h. (was the .eop-nav section nav.) Never rendered. The console's real
   subsection menu is `nav.eop-jump#eop-jump` (setup-render.php:161), which the
   shell layer owns; event-operations.js:816-817 states outright that "nothing
   has ever rendered #eop-nav". Rules removed. ----------------------------- */

/* ---- 4i. Busy state (.eop-busy) — set by the JS on save buttons and on the
   gallery dropzone while a request is in flight (event-operations.js:128,
   194, 272, 290). Overrides event-operations.css:200. --------------------- */
body.mb-setup .eop-busy {
  opacity: .55;
  pointer-events: none;
  cursor: progress;
  filter: saturate(.6);
}

/* ---- 4j. (was `.eop-sp{flex:1}`, the header spacer.) No element in this theme
   carries the class — the only `eop-sp` in the source is the `data-eop-space`
   attribute it matched as a substring. Rule removed. ---------------------- */


/* ============================================================================
   5. RESPONSIVE. Real media queries — this is the shipped page, not the demo's
   container-query sandbox. Only the authored widths for this project are used:
   1120, 1020, 940, 900, 860, 760, 680, 620, 520. Never 1060.
   ========================================================================= */

@media (max-width: 760px) {
  /* The stage row cannot stay on one line once the description field has less
     than ~170px. It wraps to two: icon + name + minutes, then description.
     Fires earlier than the shipped 640px partner at event-operations.css:340,
     which it supersedes. */
  body.mb-setup .eop-flow-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.mb-setup .eop-flow-row .fds { flex: 1 1 100%; order: 1; }
  body.mb-setup .eop-flow-row .flb { flex: 1 1 min(100%, 110px); }
}

@media (max-width: 620px) {
  body.mb-setup .eop-glgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    gap: 9px;
  }
  body.mb-setup .eop-accgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
  body.mb-setup .eop-tbl th,
  body.mb-setup .eop-tbl td { padding: 10px 11px; }
  /* No .eop-m step-down here. mb-setup-3-events.css:1160-1164 already steps the
     metric tiles at 940px and it owns them; a second, later rule at 620 would
     out-rank that one at every width (media queries carry no specificity). */
}

@media (max-width: 520px) {
  /* Two photo tiles across at 375px, which is the smallest count that still
     shows a usable crop. The min(100%, …) floor is what stops the third
     column from appearing and pushing the grid past the viewport. */
  body.mb-setup .eop-glgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
  }
  body.mb-setup .eop-glcard input.cap,
  body.mb-setup .eop-glcard input.alt { padding: 6px 8px; }
  body.mb-setup .eop-flow-row { padding: 9px 10px; gap: 8px; }
  body.mb-setup .eop-flow-row .fic { width: 48px; }
  body.mb-setup .eop-qa a:not(.eop-btn),
  body.mb-setup .eop-qa button:not(.eop-btn) { flex: 1 1 auto; justify-content: center; }
}


/* ============================================================================
   6. REDUCED MOTION. Every transition and animation this file introduces is
   switched off here, and so is every transform it would apply — clearing the
   transition alone leaves the movement in place, it merely snaps to it.
   Nothing is hidden: all colour, all state and all layout survive.

   NO !important here, and that is deliberate. The project rule is that
   !important answers !important only. The two shipped reduced-motion blocks
   that DO carry it (event-operations.css:630-638 and :711-713) target
   .eop-cardlink / .eop-cardic / .eop-jbtn / .eop-card / .eop-evtab — not one
   selector in this file — so there is nothing here for it to answer.

   Plain declarations are enough, and it was checked rather than assumed. Every
   selector below is either identical to the base rule it switches off (this
   block is last in the file, so it wins on source order) or strictly more
   specific than the shipped rule it has to beat. The only external competitor
   is event-operations.css:90 `.eop-qa a:hover,.eop-qa button:hover
   {transform:translateY(-2px)}` at (0,2,2); the selector below that answers it,
   `body.mb-setup .eop-qa a:not(.eop-btn)`, is (0,3,2) and wins on class count.
   Sister sheet mb-setup-2-controls.css:900-923 uses the same no-!important
   form, and it is what covers the two .eop-btn children of .eop-qa under
   Broadcast — they are excluded here by :not(.eop-btn) because the controls
   layer owns them.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  body.mb-setup .eop-glcard,
  body.mb-setup .eop-glcard:hover,
  body.mb-setup .eop-glcard .im .drag,
  body.mb-setup .eop-glcard .im .x,
  body.mb-setup .eop-glcard .im .star,
  body.mb-setup .eop-glcard .im .x:active,
  body.mb-setup .eop-glcard .im .star:active,
  body.mb-setup .eop-glcard input.cap,
  body.mb-setup .eop-glcard input.alt,
  body.mb-setup .eop-flow-row,
  body.mb-setup .eop-flow-row .grip,
  body.mb-setup .eop-tbl tbody tr,
  body.mb-setup .eop-acc,
  body.mb-setup .eop-qa a:not(.eop-btn),
  body.mb-setup .eop-qa button:not(.eop-btn) {
    transition: none;
    transform: none;
  }
}