* { box-sizing: border-box; }

/* ─── v.178 IA refresh: event-page sidebar + mobile pills ───
   Replaces the horizontal tab strip inside an event with a
   left sidebar on desktop and a horizontal scrollable tab bar
   on mobile/tablet.

   Layout: .event-console becomes a 2-column flexbox. The
   sidebar (220px) sits on the left; everything else flows
   into the right column. Below 720px the layout collapses
   to one column and the tab bar replaces the sidebar.

   Implementation note: we use flex (not grid) and target
   children with order/flex rules so this works regardless
   of how many children .event-console has or what classes
   they carry. Many event pages wrap their content in a single
   inner card; some have multiple sibling sections. Flex
   handles both shapes the same way.

   v.178 follow-up:
   • Context-card hidden everywhere (the avatar dropdown +
     chrome strip carry the event identity).
   • Sidebar wrapped in a card (background, border, shadow).
   • Mobile pills converted to a tab bar with underline.
   • event-card.php hides the nav entirely; shows a back
     link instead. */

.event-console,
.host-body .event-console,
body.warm-data-page .event-console,
body.settings-page .event-console,
body.guest-list-page .event-console {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  max-width: 1180px;
}

/* Sidebar: fixed 220px wide, sits on the left, sticky-scrolls. */
.event-console > .event-sidebar,
.host-body .event-console > .event-sidebar {
  flex: 0 0 220px;
  width: 220px;
  order: 1;
  position: sticky;
  top: 88px;
  align-self: flex-start;
  background: var(--host-card, #fffdf8);
  border: 1px solid rgba(120, 90, 60, 0.12);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(92, 64, 36, 0.06);
  padding: 12px;
  display: block !important;
}

/* Mobile tab bar: full-bleed, spans entire width. */
.event-console > .event-pills {
  flex: 1 1 100%;
  width: 100%;
  order: 0; /* above the sidebar in source-order/visual order on mobile */
}

/* Context-card (only Overview opts in via $showContextCard=true,
   which is currently nothing — but if re-enabled, it spans full
   width on top). */
.event-console > .event-context-card {
  flex: 1 1 100%;
  width: 100%;
  order: -1;
}

/* Everything else: takes the remaining width next to the sidebar.
   The minus 220px (sidebar) and 24px (gap) gives the content
   column its width. */
.event-console > *:not(.event-sidebar):not(.event-pills):not(.event-context-card) {
  flex: 1 1 calc(100% - 244px);
  min-width: 0;
  order: 2;
}

.event-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.event-sidebar-list-secondary {
  margin-top: 4px;
}
.event-sidebar-sep {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 8px 12px;
}
.event-sidebar-link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  color: rgba(40, 35, 30, 0.85);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.event-sidebar-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(40, 35, 30, 1);
}
.event-sidebar-link.active {
  background: rgba(60, 50, 40, 0.92);
  color: #fff;
  font-weight: 600;
}

/* v.189.7 — Unread badge on Messages nav item (sidebar + mobile pill).
   Inline-flex inside the link so it sits to the right of the label
   without breaking the link's overall layout. Orange pill that pops
   against both the inactive cream and active dark backgrounds — same
   visual language as the tab dot below. */
.event-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.event-sidebar-badge,
.event-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ea580c;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  margin-left: auto; /* push to the right end of the sidebar link */
}
.event-sidebar-link.active .event-sidebar-badge {
  background: #fff;
  color: #c2410c;
}
.event-pill-badge {
  margin-left: 6px;
}
.event-pill.active .event-pill-badge {
  background: #fff;
  color: #c2410c;
}

/* Mobile tab bar (v.178). Hidden by default, shown below 720px.
   Underline tabs on a card-colored strip that bleeds full-width
   to the viewport edges (no rounded corners, no side margins) so
   it reads as a navigation chrome bar rather than a contained
   widget. Vertical dividers between inactive tabs; the active
   tab gets a colored underline + darker text.

   Sticky on mobile: pinned to the bottom of the chrome strip
   (which is itself pinned to the top). Together they form a
   stacked sticky chrome on small screens.

   Full-bleed implementation: the .event-console container has
   page padding via .container, so we use negative horizontal
   margins to escape it on mobile. We can't use 100vw because
   that ignores the scrollbar. The negative margin approach is
   simple and predictable. */
.event-pills {
  display: none;
  margin: 0 0 16px;
  background: var(--host-card, #fffdf8);
  border-top: 1px solid rgba(120, 90, 60, 0.12);
  border-bottom: 1px solid rgba(120, 90, 60, 0.12);
}
.event-pills-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Bottom border lives on the track (not the pills) so it
     extends the full width of the scrollable strip. The active
     pill's underline sits flush against it via margin-bottom:
     -1px below. */
  border-bottom: 1px solid rgba(120, 90, 60, 0.12);
  scroll-snap-type: x proximity;
}
.event-pills-track::-webkit-scrollbar { display: none; }
.event-pill {
  flex: 0 0 auto;
  position: relative;
  padding: 12px 16px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(60, 50, 40, 0.7);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  scroll-snap-align: center;
  /* Overlap the track's border-bottom so the active
     underline is flush rather than floating above it. */
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}
/* Vertical divider between adjacent tabs. Anchored at top:0 +
   bottom:0 so the divider doesn't dip below the track's
   border-bottom; sits on the inactive's faded text level. */
.event-pill + .event-pill::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(120, 90, 60, 0.18);
  pointer-events: none;
}
/* Suppress the divider on either side of the active pill so
   the underline reads as a single continuous accent. */
.event-pill.active::before,
.event-pill.active + .event-pill::before {
  display: none;
}
.event-pill:hover {
  color: rgba(40, 35, 30, 1);
}
.event-pill.active {
  color: rgba(40, 35, 30, 1);
  border-bottom-color: var(--host-accent, #f97316);
  font-weight: 700;
}

.event-sidebar-link-locked {
  color: rgba(60, 50, 40, 0.5);
  font-style: italic;
}
.event-sidebar-link-locked:hover {
  background: rgba(0, 0, 0, 0.02);
  color: rgba(60, 50, 40, 0.7);
}
.event-pill-locked {
  color: rgba(60, 50, 40, 0.45);
  font-style: italic;
}

/* Tablet/mobile: hide sidebar, show tab bar, content goes
   full-width.

   Sticky chrome stack on mobile: chrome strip pins to the top,
   nav tabs pin directly below it. The brand topbar scrolls away
   (it's already de-emphasized once the host is inside an event;
   the chrome strip carries event identity).

   The container has horizontal padding (.container has padding:
   0 18px), so we use negative margin to bleed the nav tabs to
   the screen edges. */
@media (max-width: 720px) {
  .event-console,
  .host-body .event-console {
    flex-direction: column !important;
    gap: 0;
  }
  .event-console > * {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  /* The nav escapes the container's padding via 100vw + a
     centering margin. The width:100% rule on .event-console > *
     above would otherwise constrain it to the container's width
     (viewport - 36px from .container padding) and produce a
     visible right-edge gap. We override with the same !important
     specificity here so the nav wins. */
  .event-console > .event-pills,
  .host-body .event-console > .event-pills {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  /* Sidebar specificity must match the desktop rule above
     (.host-body .event-console > .event-sidebar) or it loses
     the !important tiebreak. */
  .event-console > .event-sidebar,
  .host-body .event-console > .event-sidebar,
  body .event-console > .event-sidebar {
    display: none !important;
  }
  /* Kill any container padding-top / margin-top on mobile so
     the nav can sit flush against the chrome strip without a
     visual gap. Earlier rules:
       • .container has margin: 28px auto (base CSS, line ~395)
       • v5.13.8 set padding-top: 28px on .event-console
       • v5.13.9/10 overrode to 8px with !important
     We zero both here with !important to win the cascade. */
  .container.event-console,
  body .container.event-console {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* Mobile nav: full-bleed to the viewport edges, sticky
     directly under the chrome strip. The strip's height varies
     based on content (event title length, etc.), so a JS
     observer on the strip element sets --rsvp-chrome-h on the
     <html> element. We default to 0 so the nav initially sits
     directly under the topbar (which is static on mobile, so
     the document scrolls until the strip hits the top, then
     the strip pins, and the nav follows it). */
  .event-pills {
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 12px;
    position: sticky;
    top: var(--rsvp-chrome-h, 0px);
    z-index: 60;
  }
  /* Lock the track to a single row so vertical overscroll
     can't bounce the text up/down. overflow-y: hidden
     guarantees no y-axis scroll on the track itself, which
     is what was causing the visible vertical play. */
  .event-pills-track {
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }
  /* Chrome strip pins to the top on mobile so the host always
     knows what event they're working in. */
  .event-strip {
    position: sticky;
    top: 0;
    z-index: 70;
  }
  /* Sticky topbar interferes with the strip pinning at top:0.
     The brand topbar is itself sticky on desktop; below 720px
     we let it scroll away so the chrome strip can take its
     place as the visible top. */
  .app-topbar,
  .app-topbar-v2 {
    position: static !important;
  }
}

/* event-card.php back-bar — the editor hides the event nav
   entirely (3-column layout doesn't have room for a 4th), so
   this small bar gives the host a way back. Sits where the
   nav would otherwise be. */
.ec-back-bar {
  margin: 0 0 18px;
  padding: 0;
}
.ec-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 247, 237, 0.9);
  border: 1px solid rgba(254, 215, 170, 0.85);
  color: #9a3412 !important;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}
.ec-back-link:hover {
  background: #fff7ed;
  transform: translateX(-1px);
}

/* ─── v.177 IA refresh: avatar menu + chrome event strip ───
   New nav components introduced when we collapsed the dual-
   hamburger pattern into a single primary nav + an avatar
   dropdown that contains everything else (account settings,
   email templates, current-event card, sign out). The chrome
   strip below the topbar shows the current event with a
   Manage CTA and a dismiss × button.

   Both surfaces (avatar dropdown card + chrome strip) display
   the same event — belt and suspenders by design. */

/* Avatar circle (used as the topbar's account button) */
.avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(60, 50, 40, 0.85);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.avatar-circle-lg {
  width: 48px;
  height: 48px;
  font-size: 0.95rem;
}

/* <details> wrapper. We hijack the browser's native disclosure
   widget so we get keyboard accessibility (Enter / Space)
   without writing a JS dropdown component. */
.avatar-menu {
  position: relative;
  margin-left: auto;
  list-style: none;
}
.avatar-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  /* Suppress the default disclosure triangle in WebKit / Blink. */
  display: flex;
}
.avatar-menu > summary::-webkit-details-marker { display: none; }
.avatar-menu > summary::marker { content: ''; }
.avatar-menu > summary:hover .avatar-circle {
  background: rgba(60, 50, 40, 1);
}
.avatar-menu[open] > summary .avatar-circle {
  outline: 2px solid rgba(60, 50, 40, 0.25);
  outline-offset: 2px;
}

/* The dropdown panel itself. Positioned below the summary,
   right-anchored so it doesn't run off the right edge. */
.avatar-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 12px;
  z-index: 1000;
}
.avatar-panel-id {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.avatar-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(40, 35, 30, 1);
}
.avatar-email {
  font-size: 0.8rem;
  color: rgba(60, 50, 40, 0.65);
  margin-top: 2px;
}

/* Current-event card inside the avatar dropdown. Mirrors the
   chrome-strip data; both render from admin_current_event_row(). */
.avatar-panel-event {
  padding: 12px 8px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}
.avatar-panel-event-empty {
  text-align: center;
}
.avatar-panel-eyebrow {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60, 50, 40, 0.6);
}
.avatar-panel-event-title {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(40, 35, 30, 1);
}
.avatar-panel-event-meta {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: rgba(60, 50, 40, 0.7);
}

/* Secondary links list. */
.avatar-panel-links {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
}
.avatar-panel-links li a {
  display: block;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: rgba(40, 35, 30, 1);
  text-decoration: none;
  border-radius: 8px;
}
.avatar-panel-links li a:hover {
  background: rgba(0, 0, 0, 0.04);
}
.avatar-panel-sep {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Chrome event strip. Sits below the topbar, full-width,
   showing the active event with a Manage CTA. Always-visible
   when there's an active event AND it hasn't been dismissed. */
.event-strip {
  background: rgba(255, 248, 230, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.event-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.event-strip-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.event-strip-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60, 50, 40, 0.6);
}
.event-strip-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(40, 35, 30, 1);
}
.event-strip-meta {
  font-size: 0.85rem;
  color: rgba(60, 50, 40, 0.7);
}
.event-strip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.event-strip-dismiss {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.event-strip-dismiss:hover {
  background: rgba(0, 0, 0, 0.06);
}
.event-strip-dismiss-x::before,
.event-strip-dismiss-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: rgba(60, 50, 40, 0.6);
  border-radius: 1px;
}
.event-strip-dismiss-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.event-strip-dismiss-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.event-strip-dismiss:hover .event-strip-dismiss-x::before,
.event-strip-dismiss:hover .event-strip-dismiss-x::after {
  background: rgba(60, 50, 40, 1);
}

/* Mobile: stack title + meta vertically; keep actions on the right. */
@media (max-width: 720px) {
  .event-strip-inner {
    padding: 10px 16px;
    gap: 10px;
  }
  .event-strip-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .event-strip-eyebrow { display: none; }
  .event-strip-title { font-size: 0.9rem; }
  .event-strip-meta { font-size: 0.8rem; }
  .avatar-panel {
    /* Push the panel away from the right edge a bit so the
       dismiss × isn't right against the screen edge. */
    right: -8px;
    min-width: 260px;
  }
}

/* ─── v.176 RSVP page additions ───

   .rsvp2-autosave-reassurance — small explanatory line above
   the submit button. Tells the guest their changes were already
   saved and the button is just to send a confirmation email.
   Sits inside .rsvp2-submit-bar so it inherits the bar's spacing.

   .rsvp2-suggest-passive — the contact-info panel renders
   even when nothing's missing now (so guests can volunteer
   corrections). When nothing's prompting we tone the styling
   down so it doesn't compete with the rest of the form. The
   non-passive variant keeps the original "Help your host get
   this right" emphasis. */
.rsvp2-autosave-reassurance {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: rgba(60, 50, 40, 0.7);
  text-align: center;
  line-height: 1.4;
}
.rsvp2-suggest-passive {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.rsvp2-suggest-passive .rsvp2-suggest-summary {
  color: rgba(60, 50, 40, 0.75);
}
.rsvp2-suggest-passive .rsvp2-suggest-summary strong {
  font-weight: 500;
}
.rsvp2-suggest-passive .rsvp2-suggest-icon {
  opacity: 0.6;
}

/* ─── v.176 standalone task-qty stepper ───
   Reuses the .rsvp2-task-qty / .rsvp2-qty-stack / .rsvp2-qty-btn
   visual from the potluck stepper EXACTLY (border-radius, fonts,
   color tokens, hover states, the works). The only differences:

   1. The potluck stepper is hidden until the parent task's
      checkbox is checked. The standalone version always shows.
   2. The potluck version sits flush inside a .rsvp2-task
      wrapper that has its own border. The standalone version
      provides its own border + radius so it reads as a complete
      control on its own.

   We tag the wrapper with the .rsvp2-task-qty-standalone
   modifier and override just those two things. Everything else
   inherits from the .rsvp2-task-qty rules later in this file,
   guaranteeing the visual matches the potluck stepper byte for
   byte. */
body[data-rsvp2="1"] .rsvp2-task-qty.rsvp2-task-qty-standalone {
  /* Match the dessert stepper exactly. The base .rsvp2-task-qty
     rule defines width:80px and min-height:88px; we keep both
     unchanged. We only override:
       • display (was 'none' until parent task is checked)
       • margin (the base uses a negative bleed to fit a parent
         row's padding; standalone has no parent row)
     plus add our own border/radius/background since there's no
     wrapping .rsvp2-task to provide them. */
  display: grid;
  margin: 4px 0 0;
  border: 1.5px solid var(--r2-border-strong);
  border-radius: 14px;
  overflow: hidden;
  background: var(--r2-surface-2);
}
/* The dividing border between the buttons and the number, and
   between + and −, inherits color from --r2-border-strong (NOT
   --r2-primary, since the standalone variant has no "checked"
   state to switch into). The base .rsvp2-qty-stack rule and the
   base .rsvp2-qty-up rule already point at --r2-border-strong
   when the parent .rsvp2-task isn't ":has(checked)", so no
   additional override needed here. */

/* Centered submit bar variant. The default .rsvp2-submit-bar lays
   the autosave reassurance and the button out side-by-side which
   pushes the button awkwardly to the right; the centered variant
   stacks them and centers everything. */
.rsvp2-submit-bar-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rsvp2-submit-bar-centered .rsvp2-autosave-reassurance {
  margin-bottom: 4px;
}
.rsvp2-submit-bar-centered .rsvp2-submit {
  min-width: 200px;
  white-space: nowrap;
}

/* ─── v.176 named guest additions ───
   Sits below the household member list when the event allows
   named additions. Each row is name + person_type select +
   yes/maybe/no row + remove button. Visually distinct from the
   pre-loaded household members so the invitee can tell which
   they're allowed to edit/remove. */
.rsvp2-additions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.rsvp2-additions-help {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: rgba(60, 50, 40, 0.75);
}
.rsvp2-additions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}
.rsvp2-addition-row {
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.015);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rsvp2-addition-fields {
  /* Flex row that stretches all children to the same height, set
     by the input's natural height. The X button then fills that
     full height and the cross sits at the geometric center via
     pseudo-elements at 50%/50%. */
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.rsvp2-addition-name {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.rsvp2-addition-type {
  flex: 0 0 110px;
  width: 110px;
}
.rsvp2-addition-remove {
  /* Stretched to the full row height (input height) so the
     button's box matches the input's box exactly. The cross is
     drawn by ::before / ::after at the button's geometric
     center, which is the same Y as the input's center. */
  flex: 0 0 36px;
  width: 36px;
  align-self: stretch;
  border: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  position: relative;
}
.rsvp2-addition-remove::before,
.rsvp2-addition-remove::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: rgba(60, 50, 40, 0.55);
  border-radius: 2px;
}
.rsvp2-addition-remove::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.rsvp2-addition-remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.rsvp2-addition-remove:hover::before,
.rsvp2-addition-remove:hover::after {
  background: #b91c1c;
}
.rsvp2-addition-remove:hover {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.06);
}
/* Compact Yes/Maybe pair below the fields. Default .rsvp2-yesno
   stretches buttons to full width via grid; here we want them
   side-by-side and compact (~120px each), matching the household
   member rows above. */
.rsvp2-addition-row .rsvp2-yesno {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rsvp2-addition-row .rsvp2-yesno-btn {
  flex: 0 0 auto;
  min-width: 80px;
}
@media (max-width: 360px) {
  .rsvp2-addition-fields {
    grid-template-columns: minmax(0, 1fr) 36px;
  }
  .rsvp2-addition-type {
    grid-column: 1 / -1;
  }
}
.rsvp2-additions-add {
  border: 1px dashed rgba(0, 0, 0, 0.25);
  background: transparent;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(60, 50, 40, 0.85);
  cursor: pointer;
  width: 100%;
}
.rsvp2-additions-add:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.35);
}
.rsvp2-additions-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── rsvp2-member-saved ─── per-member "Saved" pill that sits
   inline with each household-member row's name. The household
   top pill is misleading (single answer for what's actually a
   multi-person reply), so we replace it with these per-row pills.

   Inline placement (next to the name) instead of below the
   buttons — keeps the row compact and visually anchors the
   confirmation to the person it's about.

   States:
     [hidden] / data-state="idle"  → not rendered (no answer yet)
     data-state="saving"           → amber dot + "Saving…"
     data-state="saved"            → green dot + "Saved" */
.rsvp2-party-name-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rsvp2-member-saved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;            /* muted gray; the dot carries the color */
  line-height: 1;
  /* baseline-shift the pill so it sits visually next to the name
     rather than dropping below it. */
  position: relative;
  top: -1px;
}
.rsvp2-member-saved[hidden] { display: none; }
.rsvp2-member-saved-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;        /* fallback gray */
  flex-shrink: 0;
}
.rsvp2-member-saved[data-state="saving"] .rsvp2-member-saved-dot {
  background: #f59e0b;        /* amber */
}
.rsvp2-member-saved[data-state="saved"] .rsvp2-member-saved-dot {
  background: #10b981;        /* green */
}

/* ─── rsvp2-hero-card rounded corners (v.175) ───
   The hero card image was rendering edge-to-edge with no
   rounded corners, which made it visually inconsistent with
   the cards below it (key facts, RSVP form). Add rounded
   corners to match. The image inside also needs the radius
   applied via overflow:hidden so it follows the parent's
   curve at the corners. Source-order tie-break wins over
   any earlier rsvp2-hero-card rules later in this file. */
.rsvp2-hero.rsvp2-hero-card {
  border-radius: 18px;
  overflow: hidden;
  margin: 16px 18px 0;       /* sit inside the page gutter, like cards below */
  /* The page background is a soft blue; the hero already has
     a #f5f7fa fill internally. A gentle shadow lifts it off
     the background without competing with the content cards. */
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.rsvp2-hero.rsvp2-hero-card .rsvp2-hero-image-card,
.rsvp2-hero.rsvp2-hero-card .rsvp2-hero-image-card img {
  border-radius: inherit;
}
@media (max-width: 760px) {
  .rsvp2-hero.rsvp2-hero-card {
    margin: 12px 12px 0;
    border-radius: 14px;
  }
}

:root {
  --admin-bg: #f5f7fb;
  --admin-ink: #1f2937;
  --admin-muted: #6b7280;
  --admin-card: #ffffff;
  --admin-blue: #1d4ed8;
}
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--admin-bg); color: var(--admin-ink); }
a { color: var(--admin-blue); }
.header { background: #111827; color: #fff; padding: 18px 28px; }
.header a { color: #fff; text-decoration: none; }
.container { max-width: 1100px; margin: 28px auto; padding: 0 18px; }
.card { background: var(--admin-card); border-radius: 14px; padding: 24px; box-shadow: 0 4px 18px rgba(0,0,0,.08); margin-bottom: 20px; }
h1, h2, h3 { margin-top: 0; }
label { display: block; font-weight: 700; margin-top: 14px; margin-bottom: 6px; }
input, textarea, select { width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 15px; }
/* Prevent iOS Safari zoom on input focus — requires font-size ≥ 16px */
@media (max-width: 820px) { input, textarea, select { font-size: 16px !important; } }
textarea { min-height: 110px; }
button { cursor: pointer; }
.button { display: inline-block; background: var(--admin-blue); color: #fff; border: 0; padding: 11px 16px; border-radius: 9px; font-weight: 700; text-decoration: none; cursor: pointer; margin-top: 16px; }
.button.secondary, button.secondary { background: #4b5563; }
.button.danger, button.danger { background: #b91c1c; }
.notice { padding: 12px 14px; background: #ecfdf5; color: #065f46; border-radius: 9px; margin-bottom: 16px; }
.error { padding: 12px 14px; background: #fef2f2; color: #991b1b; border-radius: 9px; margin-bottom: 16px; }
.table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table th, .table td { border-bottom: 1px solid #e5e7eb; padding: 11px; text-align: left; vertical-align: top; }
.table th { background: #f9fafb; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.meta { color: var(--admin-muted); font-size: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.copy-link { background: #f8fafc; border: 1px solid #e5e7eb; padding: 12px; border-radius: 10px; overflow-wrap: anywhere; }
.radio-row { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.radio-row label, .checkbox-row { display: flex; align-items: center; gap: 7px; margin: 0 0 8px 0; font-weight: 400; }
.radio-row input, .checkbox-row input { width: auto; }
.admin-section-title { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb; }

/* Guest-facing invitation pages */
.invite-body { min-height: 100vh; background: var(--invite-bg, #fbf7f2); color: var(--invite-ink, #2f241f); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.invite-shell { max-width: 920px; margin: 0 auto; padding: 32px 18px 56px; }
.invite-card { background: rgba(255,255,255,.88); border: 1px solid rgba(0,0,0,.08); border-radius: 28px; box-shadow: 0 18px 60px rgba(0,0,0,.12); overflow: hidden; }
.invite-hero { padding: 62px 34px 42px; text-align: center; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.68)); position: relative; }
/* v5.20 invite-card mode: the host has designed a composited
   PNG that already contains the headline/date/address. Render
   it edge-to-edge at the card's native 1200×630 aspect with
   no text overlay — the card IS the composition. Mirrors
   rsvp2-hero-card on rsvp.php so the public preview at
   /event.php matches what guests see at /rsvp.php. */
.invite-hero.invite-hero-card {
  aspect-ratio: 1200 / 630;
  padding: 0;
  background: #f5f7fa;
  position: relative;
  overflow: hidden;
  /* Override the secondary .invite-hero rule (min-height: 300px;
     display: flex; justify-content: center) defined later in
     this stylesheet — for card mode the PNG drives the size. */
  min-height: 0;
  display: block;
}
.invite-hero-card-image {
  position: absolute;
  inset: 0;
}
.invite-hero-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.invite-kicker { text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: var(--invite-accent, #9a6b45); font-family: Arial, sans-serif; font-weight: 800; }
.invite-title { font-size: clamp(42px, 7vw, 74px); line-height: .98; margin: 18px 0 12px; color: var(--invite-primary, #7c3f2c); font-weight: 400; }
.invite-subtitle { font-size: 22px; margin: 0 auto; max-width: 700px; color: rgba(47,36,31,.78); }
.invite-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(0,0,0,.08); }
.invite-detail { background: rgba(255,255,255,.9); padding: 24px; text-align: center; }
.invite-detail strong { display: block; color: var(--invite-primary, #7c3f2c); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-family: Arial, sans-serif; margin-bottom: 8px; }
.invite-content { padding: 30px; }
.invite-message { font-size: 19px; line-height: 1.65; text-align: center; max-width: 720px; margin: 0 auto 22px; }
.invite-extra-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.invite-extra { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 16px; }
.invite-extra strong { display: block; color: var(--invite-primary, #7c3f2c); margin-bottom: 5px; }
.rsvp-panel { background: rgba(255,255,255,.94); border-radius: 24px; padding: 26px; margin-top: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.rsvp-panel h2 { font-family: Georgia, 'Times New Roman', serif; color: var(--invite-primary, #7c3f2c); font-size: 34px; font-weight: 400; }
.rsvp-panel label { font-family: Arial, sans-serif; }
.rsvp-panel input, .rsvp-panel textarea, .rsvp-panel select { background: rgba(255,255,255,.95); }
.rsvp-panel button, .invite-button { background: var(--invite-primary, #7c3f2c); border-radius: 999px; padding: 13px 22px; }
.response-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 8px; }
.response-choices label { border: 1px solid rgba(0,0,0,.12); border-radius: 18px; padding: 14px; text-align: center; background: rgba(255,255,255,.78); cursor: pointer; font-family: Arial, sans-serif; font-weight: 800; }
.response-choices input { width: auto; margin-right: 7px; }
.theme-modern { --invite-bg: #eef4ff; --invite-primary: #254b7a; --invite-accent: #6d8fbd; --invite-ink: #18212f; }
.theme-elegant { --invite-bg: #fbf7f2; --invite-primary: #7c3f2c; --invite-accent: #b88962; --invite-ink: #2f241f; }
.theme-celebration { --invite-bg: #fff7ed; --invite-primary: #b45309; --invite-accent: #f59e0b; --invite-ink: #3b2608; }
.theme-minimal { --invite-bg: #f7f7f7; --invite-primary: #222222; --invite-accent: #777777; --invite-ink: #222222; }
.theme-garden { --invite-bg: #f0f7ef; --invite-primary: #386641; --invite-accent: #6a994e; --invite-ink: #1f3324; }
.theme-night { --invite-bg: #111827; --invite-primary: #d6bc8b; --invite-accent: #facc15; --invite-ink: #f8fafc; }
.theme-night .invite-card, .theme-night .rsvp-panel { background: rgba(17,24,39,.88); border-color: rgba(255,255,255,.18); }
.theme-night .invite-detail, .theme-night .invite-extra { background: rgba(31,41,55,.82); }
.theme-night .invite-subtitle, .theme-night .invite-message, .theme-night .meta { color: rgba(248,250,252,.82); }

@media (max-width: 760px) { .grid-2, .grid-3, .grid-4, .invite-details, .invite-extra-list, .response-choices { grid-template-columns: 1fr; } .header span { float: none !important; display: block; margin-top: 8px; } .invite-hero { padding: 46px 22px 32px; } .invite-content { padding: 22px; } }

.danger-link {
    color: #b91c1c;
    font-weight: 700;
}

.danger-card {
    border: 1px solid #fecaca;
}

.log-view {
    background: #111827;
    color: #e5e7eb;
    padding: 16px;
    border-radius: 10px;
    overflow: auto;
    max-height: 620px;
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.45;
}

code {
    background: #f3f4f6;
    padding: 2px 5px;
    border-radius: 4px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.stat-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}

.stat-card strong {
    display: block;
    font-size: 28px;
    line-height: 1.1;
    color: #111827;
}

.stat-card span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
}

.button-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.button-row a {
    white-space: nowrap;
}

.danger-link {
    color: #b91c1c;
    font-weight: 700;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    background: #e5e7eb;
    color: #374151;
}

.badge.open {
    background: #dcfce7;
    color: #166534;
}

.badge.draft {
    background: #fef3c7;
    color: #92400e;
}

.badge.closed,
.badge.archived {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-table td {
    min-width: 120px;
}


.large-textarea {
    min-height: 260px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.email-preview {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    white-space: normal;
    line-height: 1.45;
}

.small-preview {
    margin-top: 8px;
    max-width: 520px;
    max-height: 240px;
    overflow: auto;
}

.badge.queued {
    background: #dbeafe;
    color: #1e40af;
}

.badge.sent {
    background: #dcfce7;
    color: #166534;
}

.badge.failed,
.badge.bounced {
    background: #fee2e2;
    color: #991b1b;
}

/* v4.6 guest management refinements */
.compact-stats {
    margin-top: 18px;
}

button.small,
.button.small,
.small {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 0;
}

button.secondary,
.small.secondary {
    background: #4b5563;
}

button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.button-row.stacked {
    align-items: flex-start;
    gap: 7px;
}

.copy-link.copied {
    outline: 2px solid #16a34a;
    background: #ecfdf5;
}

.badge.pending,
.badge.not_sent,
.badge.viewed,
.badge.invited {
    background: #fef3c7;
    color: #92400e;
}

.badge.responded,
.badge.yes {
    background: #dcfce7;
    color: #166534;
}

.badge.no {
    background: #fee2e2;
    color: #991b1b;
}

.badge.maybe {
    background: #e0e7ff;
    color: #3730a3;
}

/* v4.7 Event Builder and warmer invitation refinements */
.builder-container { max-width: 1280px; }
.builder-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: center; background: linear-gradient(135deg, #ffffff, #f8fafc); }
.builder-hero h1 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 8px; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-weight: 800; color: #64748b; font-size: 12px; margin: 0 0 8px; }
.builder-hero-panel { background: #111827; color: #fff; border-radius: 18px; padding: 18px; }
.builder-hero-panel ol { margin: 10px 0 0 20px; padding: 0; line-height: 1.6; }
.builder-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; }
.builder-sidebar { position: sticky; top: 16px; }
.builder-action-stack { display: grid; gap: 10px; margin-bottom: 18px; }
.builder-action-stack .button, .builder-action-stack button { width: 100%; text-align: center; margin-top: 0; }
.nav-list { display: grid; gap: 8px; }
.nav-list a { display: block; padding: 9px 10px; border-radius: 9px; background: #f8fafc; text-decoration: none; }
.nav-list a:hover { background: #eef2ff; }
.builder-section { border: 1px solid #e5e7eb; }
.section-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.section-head > span { width: 34px; height: 34px; border-radius: 999px; background: #1d4ed8; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto; }
.section-head h2 { margin-bottom: 3px; }
.section-head p { margin: 0; color: #64748b; }
.sticky-save { position: sticky; bottom: 0; z-index: 2; background: rgba(245,247,251,.92); backdrop-filter: blur(8px); padding: 14px 0; border-top: 1px solid #e5e7eb; }
.sticky-save button { margin-top: 0; min-width: 180px; }
.progress-bar { width: 100%; height: 10px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; margin: 12px 0 8px; }
.progress-bar span { display: block; height: 100%; background: #22c55e; border-radius: 999px; }
.checklist { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checklist span { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.checklist .done span { background: #dcfce7; color: #166534; }
.checklist .todo span { background: #fef3c7; color: #92400e; }

.invite-shell { max-width: 980px; }
.invite-card { position: relative; }
.invite-card::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 22px; pointer-events: none; }
.invite-hero { min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.invite-message { color: var(--invite-ink, #2f241f); }
.rsvp-panel { border: 1px solid rgba(0,0,0,.08); }
.response-choices label { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.response-choices label:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08); border-color: var(--invite-accent, #9a6b45); }
.rsvp-panel button:hover, .invite-button:hover { filter: brightness(.95); }
.theme-classic { --invite-bg: #fbf7ef; --invite-primary: #5b3427; --invite-accent: #a67c52; --invite-ink: #2e211b; }
.theme-formal { --invite-bg: #f6f3ee; --invite-primary: #1f2937; --invite-accent: #9f7a2f; --invite-ink: #111827; }
.theme-fun { --invite-bg: #fff1f2; --invite-primary: #be123c; --invite-accent: #f97316; --invite-ink: #3b0a1e; }
.theme-formal .invite-title { letter-spacing: .02em; }
.theme-fun .invite-card { transform: rotate(-.2deg); }
.theme-night input, .theme-night textarea, .theme-night select { color: #111827; }

@media (max-width: 960px) {
    .builder-hero, .builder-grid { grid-template-columns: 1fr; }
    .builder-sidebar { position: static; }
}

/* v4.8 Contact Book refinements */
.inline-search { display: flex; gap: 10px; align-items: center; }
.inline-search input { flex: 1; }
.inline-search button, .inline-search .button { margin-top: 0; white-space: nowrap; }
.search-row label { margin-top: 0; }
.soft-section { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; margin: 16px 0; }
.badge.valid { background: #dcfce7; color: #166534; }
.badge.bounced { background: #fee2e2; color: #991b1b; }
.badge.unsubscribed { background: #fef3c7; color: #92400e; }
@media (max-width: 720px) { .inline-search { display: grid; } }

.member-checklist {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.member-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-weight: 400;
}

.member-row input {
    width: auto;
    margin-top: 4px;
}

.warning-stat {
    border: 1px solid #f59e0b;
    background: #fffbeb;
}

/* v5.0 Event-first Guest List Builder and Invite Lists */
.mini-panel {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin-top: 14px;
}
.mini-panel h3 { margin-top: 0; }
.scroll-select {
    max-height: 320px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}
.check-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    margin: 0;
    font-weight: 400;
}
.check-option:last-child { border-bottom: 0; }
.check-option input { width: auto; margin-top: 3px; }
.muted-option {
    background: #f9fafb;
    color: #64748b;
}
.details-panel {
    margin-top: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
    background: #fff;
}
.details-panel summary {
    cursor: pointer;
    font-weight: 800;
}
.details-panel form { margin-top: 12px; }
.badge.warn,
.badge.warning {
    background: #fef3c7;
    color: #92400e;
}
.stat-grid > div:not(.stat-card) {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}
.stat-grid > div:not(.stat-card) strong {
    display: block;
    font-size: 26px;
    color: #111827;
}
.stat-grid > div:not(.stat-card) span {
    display: block;
    color: #64748b;
    font-size: 13px;
    margin-top: 4px;
}
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 18px 0; }

.party-edit-table input[type="text"],
.party-edit-table input[type="email"],
.party-edit-table input:not([type]) {
    min-width: 140px;
}

.party-rsvp-list {
    display: grid;
    gap: 12px;
    margin: 14px 0 18px;
}

.party-rsvp-member {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
}

.member-response-choices {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.member-response-choices label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 600;
}

.member-response-choices input {
    width: auto;
}

.party-response-list {
    margin-top: 8px;
    display: grid;
    gap: 5px;
}

.badge.yes { background: #dcfce7; color: #166534; }
.badge.no { background: #fee2e2; color: #991b1b; }
.badge.maybe { background: #fef3c7; color: #92400e; }
.badge.pending { background: #e5e7eb; color: #374151; }

@media (max-width: 760px) {
    .party-rsvp-member {
        grid-template-columns: 1fr;
    }
}

/* v5.6 compact contact/group workflow */
.compact-card {
    padding: 18px;
}
.compact-table th,
.compact-table td {
    padding: 8px 9px;
    font-size: 14px;
}
.group-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 18px;
    align-items: start;
}
.compact-member-list,
.compact-contact-picker {
    display: grid;
    gap: 8px;
}
.compact-contact-picker {
    max-height: 520px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 6px;
    background: #f8fafc;
    margin-top: 10px;
}
.compact-member-item,
.compact-contact-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}
.compact-contact-row {
    cursor: pointer;
    margin: 0;
    font-weight: 400;
    justify-content: flex-start;
}
.compact-contact-row input {
    width: auto;
    margin-top: 3px;
}
.compact-contact-row small,
.compact-contact-row em {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-top: 2px;
}
.compact-member-actions {
    min-width: 76px;
    display: grid;
    justify-items: end;
    gap: 6px;
}
.inline-role-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 7px;
}
.inline-role-form input {
    padding: 7px 8px;
    font-size: 13px;
}
.inline-role-form button,
button.small,
.button.small {
    padding: 7px 9px;
    font-size: 12px;
    margin-top: 0;
}
.compact-picker-toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: end;
    margin-top: 10px;
}
.compact-picker-toolbar input {
    padding: 9px 10px;
}
@media (max-width: 900px) {
    .group-builder-grid,
    .compact-picker-toolbar {
        grid-template-columns: 1fr;
    }
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}

.setting-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    font-weight: 400;
}

.setting-toggle input {
    width: auto;
    margin-top: 3px;
}

.setting-toggle strong {
    display: block;
    margin-bottom: 3px;
}

.setting-toggle em {
    display: block;
    color: #6b7280;
    font-size: 13px;
    font-style: normal;
    line-height: 1.35;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin: 12px 0 18px;
}

.placeholder-chip {
    display: block;
    text-align: left;
    margin: 0;
    padding: 9px 10px;
    background: #f8fafc;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    box-shadow: none;
}

.placeholder-chip code {
    display: block;
    font-weight: 700;
    margin-bottom: 3px;
}

.placeholder-chip span {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.stats-grid > div {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}

.stats-grid strong {
    display: block;
    font-size: 24px;
}

.stats-grid span {
    color: #6b7280;
    font-size: 13px;
}

.filter-row,
.inline-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: end;
    margin: 14px 0;
}

.checkbox-line {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 600;
}

.checkbox-line input {
    width: auto;
}

.medium-textarea {
    min-height: 85px;
}

.email-template-textarea {
    min-height: 340px;
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.formal-email-preview {
    line-height: 1.55;
    background: #fffdf8;
}

/* v5.9.2 Account-wide email template polish */
.template-builder-grid {
    display: grid;
    grid-template-columns: minmax(460px, 1.1fr) minmax(320px, .9fr);
    gap: 22px;
    align-items: start;
}
@media (max-width: 960px) {
    .template-builder-grid { grid-template-columns: 1fr; }
}

/* v5.10 event guest builder polish */
.event-picker-toolbar {
    grid-template-columns: minmax(180px, 1fr) auto auto;
    margin: 10px 0 8px;
}
.event-picker-toolbar button {
    white-space: nowrap;
}
.event-contact-picker {
    max-height: 360px;
}
.contact-option[hidden] {
    display: none !important;
}
.contact-option:hover {
    background: #f8fafc;
}

/* v5.12 consumer-friendly host UX foundation
   v.179 light pass: tokens shifted from warm cream/orange to
   cool slate. Background is a flat cool gray (no radial
   gradient). Cards are pure white. Borders are cool/subtle.
   Orange survives only as the brand accent on CTAs, active
   nav state, brand-mark tile, and badges — see the override
   block at the end of this section. */
:root {
  --host-bg: #f5f7fa;          /* v.179: cool gray (was warm cream #f7f1ea) */
  --host-card: #ffffff;        /* v.179: pure white (was warm cream #fffdf8) */
  --host-ink: #0f172a;         /* v.179: slate-900 — body text only */
  --host-button-dark: #334155; /* v.179: slate-700 — softer than ink for buttons (was harsh #172126) */
  --host-muted: #6b7280;       /* v.179: slate-500 (was warm muted #6f6b65) */
  --host-border: rgba(15, 23, 42, .08);  /* v.179: cool subtle (was warm #eadfd3) */
  --host-accent: #f97316;      /* unchanged — the surviving warm accent */
  --host-accent-dark: #c2410c; /* unchanged */
  --host-soft: #f1f5f9;        /* v.179: cool slate-100 (was warm #fff7ed) */
  --host-green: #22c55e;       /* unchanged */
}
.host-body {
  background: var(--host-bg);  /* v.179: flat cool gray, no radial gradient */
  min-height: 100vh;
  color: var(--host-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* v.179: pseudo-element gradient is gone. The flat background is
   set on .host-body / body directly. We keep the ::before rule
   stubbed so any cascading rule that targets it still resolves
   to nothing visual. */
.host-body::before,
body:not(.invite-body)::before {
  content: none;
}
.host-body .card {
  background: var(--host-card);
  border: 1px solid var(--host-border);    /* v.179: cool subtle */
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);  /* v.179: cooler, lighter */
}
.host-body a { color: var(--host-accent-dark); }  /* v.179: link color from token, not hardcoded warm */
.app-topbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 34px;
  background: rgba(255, 255, 255, .92);   /* v.179: cool white (was warm cream) */
  border-bottom: 1px solid var(--host-border);  /* v.179: cool subtle */
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  color: #172126 !important;
  text-decoration: none;
  letter-spacing: -.03em;
}
.brand-mark span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #fb7185);
  box-shadow: 0 8px 18px rgba(249,115,22,.24);
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.top-nav a {
  color: #374151;
  text-decoration: none;
  padding: 10px 13px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
}
.top-nav a:hover,
.top-nav a.active {
  background: var(--host-soft);   /* v.179: cool slate (was warm cream) */
  color: var(--host-ink);          /* v.179: cool ink (was warm brown) */
}
.top-account {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6b7280;
  font-size: 14px;
}
.top-account a {
  color: #374151;
  font-weight: 800;
  text-decoration: none;
}
/* Anonymous topbar — the "Save your invitation" CTA pulls a host
   from anonymous draft into a registered account. Styled as a
   prominent navy pill so it visually invites the click. The
   "Log in" link to its left stays as a quieter text link. */
.anon-topbar-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: #172126;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(23,33,38,0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
.anon-topbar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(23,33,38,0.22);
}
.anon-topbar-link {
  color: #374151 !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.anon-topbar-link:hover {
  color: #172126 !important;
}
.primary-pill,
.host-body button.primary-pill {
  border-radius: 999px;
  background: #172126;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(23,33,38,.16);
}
.soft-button,
.host-body button.soft-button,
.button.soft-button {
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412 !important;
  border: 1px solid #fed7aa;
  box-shadow: none;
}
.consumer-dashboard { max-width: 1120px; }
.dashboard-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 38px;
  border-radius: 28px;
}
.dashboard-welcome h1 {
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -.05em;
  margin-bottom: 10px;
}
.dashboard-welcome p {
  color: var(--host-muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 720px;
}
.dashboard-hero-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  min-width: 220px;
}
.dashboard-hero-actions .button { text-align: center; margin-top: 0; }
.dashboard-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
}
.dashboard-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-tabs button {
  margin: 0;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 999px;
  padding: 9px 13px;
}
.dashboard-tabs button.active {
  background: #172126;
  border-color: #172126;
  color: #fff;
}
.dashboard-tabs span {
  margin-left: 5px;
  opacity: .76;
}
.dashboard-search-wrap input {
  border-radius: 999px;
  background: #fff;
  padding: 12px 16px;
}
.event-card-list {
  display: grid;
  gap: 14px;
}
.event-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 170px;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,253,248,.92);
  border: 1px solid rgba(120,90,60,.12);
  box-shadow: 0 12px 28px rgba(92,64,36,.07);
}
.event-card[hidden] { display: none; }
.event-art,
.invitation-preview-card {
  min-height: 108px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #fb7185);
  position: relative;
  overflow: hidden;
}
.event-art::after,
.invitation-preview-card::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 16px;
}
.event-art span {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.05em;
  z-index: 1;
}
.theme-chip-modern { background: linear-gradient(135deg, #60a5fa, #818cf8); }
.theme-chip-elegant { background: linear-gradient(135deg, #92400e, #d97706); }
.theme-chip-celebration { background: linear-gradient(135deg, #fb923c, #f43f5e); }
.theme-chip-minimal { background: linear-gradient(135deg, #374151, #6b7280); }
.theme-chip-garden { background: linear-gradient(135deg, #16a34a, #84cc16); }
.theme-chip-night { background: linear-gradient(135deg, #111827, #4c1d95); }
.theme-chip-formal { background: linear-gradient(135deg, #1f2937, #a16207); }
.theme-chip-fun { background: linear-gradient(135deg, #ec4899, #f97316); }
.event-card-title-row {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
}
.event-card h2 {
  font-size: 22px;
  margin: 0 0 5px;
  letter-spacing: -.03em;
}
.event-card p { margin: 0; color: var(--host-muted); }
.event-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
.event-mini-stats span {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 7px 10px;
  color: #7c2d12;
  font-size: 13px;
}
.event-card-actions {
  display: grid;
  gap: 9px;
}
.event-card-actions .button { margin-top: 0; text-align: center; }
.subtle-link {
  text-align: center;
  color: #6b7280 !important;
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
}
.dashboard-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 24px 0 40px;
}
.dashboard-quick-links a {
  background: rgba(255,253,248,.82);
  border: 1px solid rgba(120,90,60,.12);
  padding: 10px 13px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  color: #374151;
}
.empty-state {
  text-align: center;
  padding: 48px 24px;
  border-radius: 28px;
}
.event-console { max-width: 1180px; }
.event-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  margin: 0 0 18px;
  border-radius: 999px;
  background: rgba(255,253,248,.75);
  border: 1px solid rgba(120,90,60,.12);
}
.event-tabs a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  text-decoration: none;
  color: #374151;
  font-weight: 850;
  font-size: 14px;
}
.event-tabs a.active,
.event-tabs a:hover {
  background: #172126;
  color: #fff !important;
}
.event-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 28px;
  align-items: stretch;
  padding: 34px;
  border-radius: 28px;
}
.event-overview-hero h1,
.warm-hero h1 {
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -.05em;
  margin-bottom: 8px;
}
.event-overview-hero p,
.warm-hero p { color: var(--host-muted); line-height: 1.55; }
.invitation-preview-card {
  min-height: 230px;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  padding: 24px;
}
.invitation-preview-card strong {
  font-size: 28px;
  line-height: 1.05;
  z-index: 1;
}
.invitation-preview-card p,
.invite-preview-kicker {
  z-index: 1;
  color: rgba(255,255,255,.92);
}
.invite-preview-kicker {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 8px;
}
.invitation-preview-card .badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.overview-stats { margin: 18px 0; }
.overview-grid {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: 18px;
}
.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.section-title-row h2 { margin-bottom: 0; }
.section-title-row span {
  color: #9a3412;
  font-weight: 900;
  background: #fff7ed;
  border-radius: 999px;
  padding: 6px 10px;
}
.warm-progress { background: #f3e7db; }
.warm-progress span { background: linear-gradient(90deg, #f97316, #fb7185); }
.warm-checklist li a { color: #374151; text-decoration: none; font-weight: 800; }
.quick-action-grid,
.message-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.quick-action-grid a,
.message-action-card {
  display: block;
  padding: 16px;
  border-radius: 18px;
  text-decoration: none;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
}
.quick-action-grid strong,
.message-action-card strong {
  display: block;
  color: #172126;
  font-size: 17px;
  margin-bottom: 5px;
}
.quick-action-grid span,
.message-action-card span {
  display: block;
  color: #6f6b65;
  font-size: 14px;
  line-height: 1.4;
}
.message-action-card.warning {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.link-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  border-radius: 22px;
}
.warm-hero {
  padding: 32px;
  border-radius: 28px;
}
.signup-page-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
}
.signup-item-list {
  display: grid;
  gap: 12px;
}
.signup-admin-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.plain-list {
  margin: 8px 0 0 18px;
  padding: 0;
  color: #6f6b65;
}
.host-body .builder-hero {
  background: linear-gradient(135deg, rgba(255,253,248,.98), rgba(255,247,237,.92));
  border-radius: 28px;
}
.host-body .builder-hero-panel {
  background: #172126;
  border-radius: 22px;
}
.host-body .section-head > span {
  background: #172126;
}
.host-body .sticky-save {
  background: rgba(247,241,234,.88);
}
@media (max-width: 980px) {
  .dashboard-welcome,
  .dashboard-controls,
  .event-card,
  .event-overview-hero,
  .overview-grid,
  .signup-page-grid,
  .link-card {
    grid-template-columns: 1fr;
  }
  .event-card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-card-actions .subtle-link { grid-column: 1 / -1; }
  .invitation-preview-card { min-height: 180px; }
}
@media (max-width: 720px) {
  .app-topbar { padding: 14px 18px; flex-wrap: wrap; position: static; }
  .top-nav { order: 3; width: 100%; overflow-x: auto; }
  .top-account { margin-left: auto; }
  .dashboard-welcome { padding: 26px; }
  .event-card { padding: 15px; }
  .event-art { min-height: 88px; }
  .event-card-actions { grid-template-columns: 1fr; }
  .event-tabs { border-radius: 18px; }
}

/* v5.12.1 warm legacy-page compatibility
   v.179 light pass: same cool-flat treatment as .host-body. */
body:not(.invite-body):not(.host-body) {
  background: var(--host-bg, #f5f7fa);
  min-height: 100vh;
  color: var(--host-ink, #0f172a);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body:not(.invite-body) .header {
  min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 34px;
  background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--host-border, rgba(15,23,42,.08)); color: var(--host-ink, #0f172a);
  backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10;
}
body:not(.invite-body) .header a { color: #374151; text-decoration: none; font-weight: 800; }
body:not(.invite-body) .header > a:first-child { color: var(--host-ink, #0f172a); }
body:not(.invite-body) .container { max-width: 1180px; }
body:not(.invite-body) .card { background: var(--host-card, #fff); border: 1px solid var(--host-border, rgba(15,23,42,.08)); box-shadow: 0 4px 14px rgba(15,23,42,.04); border-radius: 18px; }
body:not(.invite-body) .button, body:not(.invite-body) button:not(.btn-unstyled) { border-radius: 999px; }
body:not(.invite-body) .button:not(.secondary):not(.danger):not(.app-drawer-close), body:not(.invite-body) button:not(.secondary):not(.danger):not(.app-drawer-close):not(.btn-unstyled) { background: #172126; }
body:not(.invite-body) .button.secondary, body:not(.invite-body) button.secondary { background: var(--host-soft, #f1f5f9); color: var(--host-ink, #0f172a) !important; border: 1px solid var(--host-border, rgba(15,23,42,.08)); }
body:not(.invite-body) .table th { background: var(--host-soft, #f1f5f9); color: var(--host-ink, #0f172a); }
body:not(.invite-body) .table th, body:not(.invite-body) .table td { border-bottom-color: var(--host-border, rgba(15,23,42,.08)); }
body:not(.invite-body) input, body:not(.invite-body) textarea, body:not(.invite-body) select { border-color: #cbd5e1; background: #fff; }
body:not(.invite-body) .notice { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
body:not(.invite-body) .error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.host-page-title { margin-bottom: 18px; }
.host-page-title .eyebrow { color: var(--host-muted, #6b7280); }   /* v.179: was warm brown #9a3412 */
.host-page-title h1 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; margin-bottom: 6px; }
.host-page-title p { color: var(--host-muted, #6b7280); max-width: 760px; line-height: 1.5; }
@media (max-width: 720px) { body:not(.invite-body) .header { padding: 14px 18px; flex-wrap: wrap; position: static; } }


/* ============================================================
   CONTACTS PAGE LAYOUT  (unique structural rules, consolidated
   from v5.12.2 – v5.12.14 – keeping layout, removing duplicates)
   ============================================================ */

/* Page card padding */
.contacts-page .contact-actions-card { padding: 14px 18px; }
.contacts-page .contacts-table-card { padding: 18px 20px 20px; overflow: visible; }
.contacts-page .contact-list-header { margin-bottom: 12px; }

/* Action buttons row */
.contacts-page .contact-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.contacts-page .contact-action-buttons .button,
.contacts-page .contact-action-buttons button {
  margin-top: 0;
  min-height: 34px;
  height: 34px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.contacts-page .contact-primary-action { box-shadow: none; }

/* Search + tools row */
.contacts-page .search-row { margin-top: 14px; }
.contacts-page .inline-search { align-items: center; }
.contacts-page #contactLiveSearch { min-height: 42px; font-size: 15px; }
.contacts-page .contact-tools-row {
  display: grid;
  grid-template-columns: minmax(280px,1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}
.contacts-page .contact-tools-row .search-row { margin-top: 0; }
.contacts-page .contact-tools-row .inline-search { width: 100%; }
.contacts-page .contact-selection-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.contacts-page .contact-selection-tools button { margin-top: 0; white-space: nowrap; }

/* Contact list header */
.contacts-page .contact-list-header .badge { flex: 0 0 auto; }
.contacts-page .contact-scroll-toolbar .button.secondary.small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Contact edit page */
.contact-edit-page .contact-method-row { align-items: end; margin-bottom: 10px; }
.contact-edit-page .label-picker,
.contact-edit-page .custom-label-input { width: 100%; }
.contact-edit-page .primary-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Modal for bulk contact actions */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(23,33,38,.42);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.modal-card {
  width: min(620px, 100%);
  background: #fffdf8;
  border: 1px solid rgba(120,90,60,.16);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(23,33,38,.28);
  padding: 28px;
  position: relative;
}
.modal-card h2 { margin-top: 0; margin-bottom: 8px; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  font-size: 22px;
  line-height: 1;
}
.selection-summary {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: #fff7ed;
  color: #7c2d12;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.modal-actions button { margin-top: 0; }

@media (max-width: 760px) {
  .contacts-page .contact-tools-row { grid-template-columns: 1fr; }
  .contacts-page .contact-selection-tools { justify-content: flex-start; }
}

/* v5.12.15: simpler event guest list inspired by consumer invitation dashboards */
.guest-list-page .simple-guest-table {
  min-width: 900px;
}
.guest-list-page .simple-guest-table th:nth-child(1),
.guest-list-page .simple-guest-table td:nth-child(1) { width: 22%; }
.guest-list-page .simple-guest-table th:nth-child(2),
.guest-list-page .simple-guest-table td:nth-child(2) { width: 15%; }
.guest-list-page .simple-guest-table th:nth-child(3),
.guest-list-page .simple-guest-table td:nth-child(3) { width: 25%; }
.guest-list-page .simple-guest-table th:nth-child(4),
.guest-list-page .simple-guest-table td:nth-child(4),
.guest-list-page .simple-guest-table th:nth-child(5),
.guest-list-page .simple-guest-table td:nth-child(5) { width: 12%; }
.guest-list-page .simple-guest-table .actions-header,
.guest-list-page .simple-guest-table .actions-cell {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
}
.guest-list-page .simple-guest-table td {
  height: 44px;
}
.guest-list-page .simple-guest-actions {
  width: 198px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.guest-list-page .simple-guest-actions .inline-form {
  display: block;
  margin: 0;
}
.guest-list-page .simple-guest-actions .row-action-button,
.guest-list-page .simple-guest-actions .button.row-action-button,
.guest-list-page .simple-guest-actions button.row-action-button {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
}
.guest-list-page .guest-contact-cell .contact-lines {
  display: inline-block;
  max-width: 220px;
}
.guest-list-page .simple-guest-table .badge {
  text-transform: capitalize;
}
@media (max-width: 820px) {
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row {
    grid-template-columns: minmax(0, 1fr) 108px;
    grid-template-areas:
      "main actions"
      "detail actions"
      "meta actions";
    min-height: 0;
  }
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td:nth-child(2) { grid-area: detail; }
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td:nth-child(3),
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td:nth-child(4),
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td:nth-child(5) {
    grid-area: meta;
    display: block !important;
    width: auto !important;
    margin-right: 0;
    font-size: 13px;
  }
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td:nth-child(4),
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td:nth-child(5) {
    display: inline-flex !important;
    align-items: center;
    margin-right: 12px;
  }
  .guest-list-page .simple-guest-actions,
  .guest-list-page .guest-row-actions.simple-guest-actions {
    width: 108px !important;
    max-width: 108px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .guest-list-page .simple-guest-actions .inline-form,
  .guest-list-page .simple-guest-actions .row-action-button,
  .guest-list-page .simple-guest-actions .button.row-action-button,
  .guest-list-page .simple-guest-actions button.row-action-button {
    width: 108px !important;
    min-width: 0 !important;
    max-width: 108px !important;
  }
  .guest-list-page .guest-name-cell strong { display: inline; }
  .guest-list-page .guest-contact-cell .contact-lines { max-width: 100%; }
}
@media (max-width: 520px) {
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row {
    grid-template-columns: minmax(0, 1fr) 102px;
  }
  .guest-list-page .simple-guest-actions,
  .guest-list-page .guest-row-actions.simple-guest-actions,
  .guest-list-page .simple-guest-actions .inline-form,
  .guest-list-page .simple-guest-actions .row-action-button,
  .guest-list-page .simple-guest-actions .button.row-action-button,
  .guest-list-page .simple-guest-actions button.row-action-button {
    width: 102px !important;
    max-width: 102px !important;
  }
}

/* v5.12.16: simplify guest list into low-clutter rows with modal actions */
.guest-list-page .guest-data-table.simple-guest-table {
  min-width: 760px;
}
.guest-list-page .simple-guest-table th:nth-child(1),
.guest-list-page .simple-guest-table td:nth-child(1) { width: 26%; }
.guest-list-page .simple-guest-table th:nth-child(2),
.guest-list-page .simple-guest-table td:nth-child(2) { width: 16%; }
.guest-list-page .simple-guest-table th:nth-child(3),
.guest-list-page .simple-guest-table td:nth-child(3) { width: 15%; }
.guest-list-page .simple-guest-table th:nth-child(4),
.guest-list-page .simple-guest-table td:nth-child(4) { width: 16%; }
.guest-list-page .simple-guest-table th:nth-child(5),
.guest-list-page .simple-guest-table td:nth-child(5) { width: 14%; }
.guest-list-page .simple-guest-table .actions-header,
.guest-list-page .simple-guest-table .actions-cell {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: center;
}
.guest-list-page .simple-guest-table td {
  height: 38px;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.guest-list-page .guest-actions-trigger {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 auto !important;
}
.guest-list-page .compact-date,
.guest-list-page .compact-shared {
  margin-left: 5px;
  white-space: nowrap;
}
.guest-list-page .simple-guest-table .badge {
  text-transform: capitalize;
  white-space: nowrap;
}
/* v5.13 account/platform polish */
.top-account .account-link {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.top-account .account-link:hover { color: var(--warm-accent, #a13b1a); }
.account-grid .check-option { align-items: flex-start; }
.compact-check { margin-top: 1.6rem; }
.quick-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .85rem;
}
.quick-link-grid a {
  display: block;
  padding: 1rem;
  border: 1px solid rgba(161,59,26,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  color: inherit;
  text-decoration: none;
}
.quick-link-grid a strong { display: block; margin-bottom: .25rem; }
.quick-link-grid a span { color: #667085; font-size: .9rem; }
.no-horizontal-scroll { overflow-x: visible; }
.guest-data-table th[data-sort="person"],
.guest-data-table td[data-label="Type"] { width: 84px; }
.guest-actions-modal .danger, .compact-action-modal .danger { white-space: normal; }

.contact-list-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  flex-wrap: wrap;
}
.contact-list-header-actions .badge { margin-left: 0; }
@media (max-width: 760px) {
  .contact-list-header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* v5.13.2 event console simplification */
.settings-console { max-width: 1120px; }
.settings-form { display: grid; gap: 1rem; }
.settings-card { padding: 1.25rem; }
.settings-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom: .9rem; }
.settings-card-head h2 { margin:0 0 .2rem; }
.settings-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap:.75rem; }
.setting-toggle, .feature-switch, .feature-switch.no-check {
  display:flex; align-items:flex-start; gap:.75rem; padding:.9rem; border:1px solid rgba(161,59,26,.12); border-radius:18px; background:rgba(255,255,255,.62);
}
.setting-toggle input[type="checkbox"], .feature-switch input[type="checkbox"] { width:20px; height:20px; flex:0 0 auto; margin-top:.15rem; }
.setting-toggle strong, .feature-switch strong { display:block; margin-bottom:.18rem; }
.setting-toggle em, .feature-switch em { display:block; color:#667085; font-style:normal; font-size:.9rem; line-height:1.25; }
.feature-switch-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:.8rem; }
.feature-switch, .feature-switch.no-check { min-height: 116px; align-items:flex-start; flex-wrap:wrap; }
.feature-switch > span, .feature-switch.no-check > span:first-child { flex:1 1 190px; }
.feature-switch a, .feature-switch.no-check a { font-weight:800; color:var(--warm-accent,#9c3519); text-decoration:none; align-self:flex-end; }
.mini-input { display:flex; align-items:center; gap:.4rem; flex:0 0 126px; }
.mini-input.wide { flex:1 1 180px; }
.mini-input label { margin:0; font-size:.8rem; color:#667085; font-weight:800; }
.mini-input input { min-width:0; }
.inline-check { display:flex; align-items:center; gap:.45rem; min-height:42px; }
.inline-check input { width:auto; }
.danger-zone { border-color:rgba(190,24,24,.18); }
@media (max-width:760px){
  .settings-card { padding:1rem; }
  .settings-grid, .feature-switch-grid { grid-template-columns:1fr; }
  .feature-switch, .feature-switch.no-check { min-height:0; }
}

/* v5.13.3 persistent event context + page tips */
.event-context-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 12px;
  padding: 20px 24px;
  border-radius: 26px;
  background: rgba(255,253,248,.86);
  border: 1px solid rgba(120,90,60,.12);
  box-shadow: 0 10px 28px rgba(92,64,36,.07);
}
.event-context-card h1 {
  margin: 2px 0 6px;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -.045em;
  line-height: 1.05;
}
.event-context-meta {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  color: var(--host-muted, #6f6b65);
  font-size: 14px;
  line-height: 1.4;
}
.event-context-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.event-context-meta span:not(:last-child)::after {
  content: '•';
  color: #c7b9a8;
  margin-left: 8px;
}
.event-context-side {
  display: grid;
  justify-items: end;
  gap: 9px;
}
.event-context-features {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 420px;
}
.event-context-features span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  white-space: nowrap;
}
.event-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 760px) {
  .event-context-card {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }
  .event-context-side {
    justify-items: start;
  }
  .event-context-features {
    justify-content: flex-start;
  }
  .event-context-meta {
    display: grid;
    gap: 4px;
  }
  .event-context-meta span:not(:last-child)::after {
    content: none;
  }
}

/* v5.13.4 event context rendering fix */
.event-tabs a[title] {
  cursor: help;
}

/* v5.13.5 event nav cleaner tips + .hamburger-lines (still
   used by admin_contact_tabs_mobile_only() on contacts pages) */
.event-tabs a[title] {
  cursor: pointer;
}
.hamburger-lines {
  width: 38px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 14px;
  background: #172126;
  flex: 0 0 auto;
}
.hamburger-lines span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}

/* v5.13.6 global mobile navigation + sticky event mobile header */
.global-nav-mobile {
  display: none;
  margin-left: auto;
  position: relative;
}
.global-nav-mobile summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 8px 10px 8px 8px;
  border-radius: 20px;
  background: rgba(255,253,248,.9);
  border: 1px solid rgba(120,90,60,.14);
  color: var(--host-ink, #172126);
}
.global-nav-mobile summary::-webkit-details-marker { display: none; }
.global-nav-mobile summary > span:not(.hamburger-lines) {
  font-size: 12px;
  color: var(--host-muted, #6f6b65);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.global-nav-mobile summary strong {
  justify-self: end;
  font-size: 13px;
  color: #9a3412;
  font-weight: 900;
  white-space: nowrap;
}
.global-nav-mobile nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,253,248,.98);
  border: 1px solid rgba(120,90,60,.14);
  box-shadow: 0 18px 40px rgba(92,64,36,.14);
  z-index: 80;
}
.global-nav-mobile nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 16px;
  text-decoration: none;
  color: #374151;
  font-weight: 850;
}
.global-nav-mobile nav a.active,
.global-nav-mobile nav a:hover {
  background: #172126;
  color: #fff !important;
}
.global-nav-mobile nav a.active::after {
  content: 'Current';
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .78;
}
.event-console-nav-shell {
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .app-topbar {
    min-height: 62px;
    padding: 10px 12px;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 70;
  }
  .brand-mark {
    font-size: 18px;
    flex: 0 0 auto;
  }
  .brand-mark span {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }
  .top-nav,
  .top-account {
    display: none !important;
  }
  .global-nav-mobile {
    display: block;
  }
  .global-nav-mobile summary {
    min-width: 0;
    width: min(56vw, 230px);
  }
  .global-nav-mobile nav {
    width: min(86vw, 300px);
  }

  .event-console-nav-shell {
    position: sticky;
    top: 62px;
    z-index: 60;
    margin: -2px 0 14px;
    padding: 8px 0 10px;
    background: linear-gradient(180deg, rgba(247,241,234,.98), rgba(247,241,234,.94));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(120,90,60,.10);
  }
  .event-console-nav-shell .event-context-card {
    margin-bottom: 8px;
    padding: 12px 14px;
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(92,64,36,.06);
  }
  .event-console-nav-shell .event-context-card .eyebrow,
  .event-console-nav-shell .event-context-side,
  .event-console-nav-shell .event-context-features,
  .event-console-nav-shell .event-context-meta span:nth-child(n+3) {
    display: none;
  }
  .event-console-nav-shell .event-context-card h1 {
    font-size: 18px;
    line-height: 1.1;
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .event-console-nav-shell .event-context-meta {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .event-console-nav-shell .event-context-meta span:not(:last-child)::after {
    content: none;
  }
  .event-console-nav-shell .event-tabs-mobile {
    margin-bottom: 0;
  }
  .event-console-nav-shell .event-tabs-mobile summary {
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: 0 8px 18px rgba(92,64,36,.05);
  }
  .event-console-nav-shell .event-tabs-mobile nav {
    max-height: calc(100vh - 190px);
    overflow: auto;
  }
  .event-console-nav-shell .hamburger-lines {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
}

@media (max-width: 420px) {
  .global-nav-mobile summary {
    width: 52vw;
    grid-template-columns: auto 1fr;
  }
  .global-nav-mobile summary strong {
    display: none;
  }
  .event-tabs-mobile summary {
    grid-template-columns: auto 1fr;
  }
  .event-tabs-mobile summary strong {
    display: none;
  }
}

/* v5.13.7 global nav breakpoint + sticky event header polish */
@media (max-width: 1100px) {
  .app-topbar {
    min-height: 62px;
    padding: 10px 12px;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 90;
  }
  .brand-mark {
    font-size: 18px;
    flex: 0 0 auto;
  }
  .brand-mark span {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }
  .top-nav,
  .top-account {
    display: none !important;
  }
  .global-nav-mobile {
    display: block;
  }
  .global-nav-mobile summary {
    min-width: 0;
    width: min(56vw, 230px);
  }
  .global-nav-mobile nav {
    width: min(86vw, 300px);
  }
}

.event-console-nav-shell {
  position: sticky;
  top: 74px;
  z-index: 65;
  padding: 10px 0 12px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(247,241,234,.96), rgba(247,241,234,.88));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(120,90,60,.08);
}

@media (max-width: 1100px) {
  .event-console-nav-shell {
    top: 62px;
    margin: 0 0 14px;
    padding: 8px 0 10px;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
  }
  .event-console-nav-shell .event-context-card {
    margin-bottom: 8px;
    padding: 12px 14px;
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(92,64,36,.06);
  }
  .event-console-nav-shell .event-context-card .eyebrow,
  .event-console-nav-shell .event-context-side,
  .event-console-nav-shell .event-context-features,
  .event-console-nav-shell .event-context-meta span:nth-child(n+3) {
    display: none;
  }
  .event-console-nav-shell .event-context-card h1 {
    font-size: 18px;
    line-height: 1.1;
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .event-console-nav-shell .event-context-meta {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .event-console-nav-shell .event-context-meta span:not(:last-child)::after {
    content: none;
  }
  .event-console-nav-shell .event-tabs-mobile {
    margin-bottom: 0;
  }
  .event-console-nav-shell .event-tabs-mobile summary {
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: 0 8px 18px rgba(92,64,36,.05);
  }
  .event-console-nav-shell .event-tabs-mobile nav {
    max-height: calc(100vh - 190px);
    overflow: auto;
  }
  .event-console-nav-shell .hamburger-lines {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
}

@media (max-width: 420px) {
  .global-nav-mobile summary {
    width: 52vw;
    grid-template-columns: auto 1fr;
  }
  .global-nav-mobile summary strong {
    display: none;
  }
  .event-tabs-mobile summary {
    grid-template-columns: auto 1fr;
  }
  .event-tabs-mobile summary strong {
    display: none;
  }
}

/* v5.13.8 combined sticky event header/navigation polish */
.event-console {
  padding-top: 28px;
}
.event-console-nav-shell {
  position: sticky;
  top: 74px;
  z-index: 65;
  margin: 0 0 18px;
  padding: 12px;
  border-radius: 28px;
  background: var(--host-card, #fffdf8);
  border: 1px solid rgba(120,90,60,.12);
  box-shadow: 0 14px 36px rgba(92,64,36,.08);
  backdrop-filter: none;
  overflow: visible;
}
.event-console-nav-shell .event-context-card {
  margin: 0;
  padding: 10px 12px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.event-console-nav-shell .event-context-card h1 {
  margin-bottom: 3px;
}
.event-console-nav-shell .event-tabs-desktop {
  margin: 4px 0 0;
  padding: 7px;
  border-radius: 999px;
  background: rgba(247,241,234,.74);
  border: 1px solid rgba(120,90,60,.08);
}

@media (max-width: 1100px) {
  .event-console {
    padding-top: 16px;
  }
  .event-console-nav-shell {
    top: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 22px;
    background: var(--host-card, #fffdf8) !important;
    border: 1px solid rgba(120,90,60,.12);
    box-shadow: 0 12px 26px rgba(92,64,36,.10);
    backdrop-filter: none !important;
  }
  .event-console-nav-shell .event-context-card {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .event-console-nav-shell .event-context-card .eyebrow,
  .event-console-nav-shell .event-context-side,
  .event-console-nav-shell .event-context-features,
  .event-console-nav-shell .event-context-meta span:nth-child(n+3) {
    display: none !important;
  }
  .event-console-nav-shell .event-context-card h1 {
    font-size: 18px;
    line-height: 1.12;
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .event-console-nav-shell .event-context-meta {
    display: block;
    min-width: 0;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .event-console-nav-shell .event-context-meta span:not(:last-child)::after {
    content: none !important;
  }
  .event-console-nav-shell .event-tabs-mobile {
    min-width: 0;
    margin: 0 !important;
    justify-self: end;
  }
  .event-console-nav-shell .event-tabs-mobile summary {
    width: auto;
    min-width: 148px;
    max-width: 210px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(247,241,234,.72);
    border: 1px solid rgba(120,90,60,.12);
    box-shadow: none !important;
  }
  .event-console-nav-shell .event-tabs-mobile summary > span:not(.hamburger-lines) {
    display: none !important;
  }
  .event-console-nav-shell .event-tabs-mobile summary strong {
    display: block;
    min-width: 0;
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .event-console-nav-shell .hamburger-lines {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .event-console-nav-shell .event-tabs-mobile nav {
    position: absolute;
    right: 12px;
    top: calc(100% - 6px);
    width: min(86vw, 310px);
    max-height: calc(100vh - 145px);
    overflow: auto;
    z-index: 120;
    background: var(--host-card, #fffdf8);
    box-shadow: 0 18px 44px rgba(92,64,36,.18);
  }
}

@media (max-width: 520px) {
  .event-console {
    padding-top: 10px;
  }
  .event-console-nav-shell {
    top: 62px;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 19px;
  }
  .event-console-nav-shell .event-context-card h1 {
    font-size: 16px;
  }
  .event-console-nav-shell .event-context-meta {
    font-size: 11px;
  }
  .event-console-nav-shell .event-tabs-mobile summary {
    min-width: 54px;
    width: 54px;
    padding: 8px;
  }
  .event-console-nav-shell .event-tabs-mobile summary strong {
    display: none !important;
  }
}

/* v5.13.9 mobile nav simplification + tighter sticky event header spacing */
@media (max-width: 1100px) {
  .event-console {
    padding-top: 8px !important;
  }

  .event-console-nav-shell {
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .event-console-nav-shell .event-tabs-mobile {
    justify-self: end !important;
  }

  .event-console-nav-shell .event-tabs-mobile summary,
  .global-nav-mobile summary {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: auto !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .event-console-nav-shell .event-tabs-mobile summary > span:not(.hamburger-lines),
  .event-console-nav-shell .event-tabs-mobile summary strong,
  .global-nav-mobile summary > span:not(.hamburger-lines),
  .global-nav-mobile summary strong {
    display: none !important;
  }

  .event-console-nav-shell .hamburger-lines,
  .global-nav-mobile .hamburger-lines {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }

  .global-nav-mobile {
    margin-left: auto !important;
    justify-self: end !important;
  }

  .app-topbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

@media (max-width: 520px) {
  .event-console {
    padding-top: 8px !important;
  }
  .event-console-nav-shell {
    margin-bottom: 8px !important;
  }
}

/* v5.13.10 event header spacing correction
   Keep the persistent event card close to the app header and make the
   gap above and below the sticky event card consistent. */
.container.event-console {
  margin-top: 8px !important;
  padding-top: 0 !important;
}

.event-console-nav-shell {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.event-console-nav-shell + .card,
.event-console-nav-shell + .overview-hero,
.event-console-nav-shell + section {
  margin-top: 0 !important;
}

@media (max-width: 1100px) {
  .container.event-console {
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

  .event-console-nav-shell {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 520px) {
  .container.event-console {
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

  .event-console-nav-shell {
    margin-bottom: 8px !important;
  }
}

/* v5.13.11 compact mobile event meta spacing fix
   Keep the date/time and location separated in the sticky mobile event header. */
@media (max-width: 1100px) {
  .event-console-nav-shell .event-context-meta span {
    display: inline !important;
  }

  .event-console-nav-shell .event-context-meta span::after {
    content: none !important;
  }

  .event-console-nav-shell .event-context-meta .event-meta-date.has-location::after {
    content: ' · ' !important;
    color: inherit !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
}

/* v5.13.12: platform button consistency and dashboard cleanup */
.host-body .button, .host-body button:not(.btn-unstyled), body:not(.invite-body) .button, body:not(.invite-body) button:not(.btn-unstyled) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 10px 16px; border-radius: 999px; font-weight: 850; font-size: 14px; line-height: 1.1; text-decoration: none; border: 1px solid transparent; margin-top: 0; white-space: nowrap; }
.host-body .button.small, .host-body button.small, body:not(.invite-body) .button.small, body:not(.invite-body) button.small { min-height: 34px; padding: 8px 13px; font-size: 13px; }
.host-body .button.primary-pill, .host-body button.primary-pill, body:not(.invite-body) .button.primary-pill, body:not(.invite-body) button.primary-pill, .host-body .button.primary, .host-body button.primary, body:not(.invite-body) .button.primary, body:not(.invite-body) button.primary { background: #172126 !important; color: #fff !important; border-color: #172126 !important; box-shadow: 0 10px 22px rgba(23,33,38,.14); }
.host-body .button.soft-button, .host-body button.soft-button, body:not(.invite-body) .button.soft-button, body:not(.invite-body) button.soft-button, .host-body .button.secondary, .host-body button.secondary, body:not(.invite-body) .button.secondary, body:not(.invite-body) button.secondary { background: #fffaf3 !important; color: #9a3412 !important; border-color: #fed7aa !important; box-shadow: none !important; }
.host-body .button.danger, .host-body button.danger, body:not(.invite-body) .button.danger, body:not(.invite-body) button.danger { background: #bf1b1b !important; color: #fff !important; border-color: #bf1b1b !important; }
.host-body .button:hover, .host-body button:not(.btn-unstyled):hover, body:not(.invite-body) .button:hover, body:not(.invite-body) button:not(.btn-unstyled):hover { transform: translateY(-1px); }
/* v.189.2 — .btn-unstyled: opt-out escape hatch for buttons that need
   custom styling (tab bars, inline links, icon buttons, etc). Adding
   this class to a <button> exempts it from the global pill treatment
   (shape rule at line 3272, dark-bg rule below) so the component can
   set its own appearance without !important chains or specificity
   gymnastics. Pattern: add btn-unstyled in HTML, then style normally. */
/* v.189.5 — !important only on the properties that defeat the global
   navy-pill rule (background, color, font-weight via font shorthand,
   pill rounding, hover transform). Borders/padding/margin/display are
   now plain values so consumers can freely override without an
   !important chain — which is the whole point of the opt-out class.
   See comment block above. */
.btn-unstyled,
.host-body button.btn-unstyled,
body:not(.invite-body) button.btn-unstyled {
  appearance: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  transform: none !important;
  border: 0;
  border-radius: 0;
  display: inline;
  margin: 0;
  min-height: 0;
  padding: 0;
  white-space: normal;
}
.dashboard-hero-actions .soft-button, .event-card-actions .soft-button { background: #fffaf3 !important; color: #9a3412 !important; }
.dashboard-quick-links { display: none !important; }
.consumer-dashboard { padding-bottom: 48px; }
.dashboard-welcome .meta { margin-bottom: 0; }
.dashboard-tabs button { color: #9a3412 !important; background: #fffaf3 !important; border-color: #fed7aa !important; box-shadow: none !important; }
.dashboard-tabs button.active { color: #fff !important; background: #172126 !important; border-color: #172126 !important; }
.event-card-actions .subtle-link { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 13px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; }
@media (max-width: 720px) { .dashboard-hero-actions { grid-template-columns: 1fr; width: 100%; min-width: 0; } .dashboard-tabs { gap: 8px; } .dashboard-tabs button { flex: 1 1 calc(50% - 8px); } }

/* v5.13.14: templates page uses the same app navigation behavior as other sections */
.template-console .page-hero h1 { margin-top: 0; }
.template-console .template-type-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.template-console .template-type-tabs .button:not(.secondary) { background: #172126 !important; color: #fff !important; border-color: #172126 !important; }
.template-console .template-builder-grid { align-items: start; }
@media (max-width: 720px) {
  .template-console .template-type-tabs .button { flex: 1 1 calc(50% - 10px); }
  .template-console .template-builder-grid { grid-template-columns: 1fr; }
}

/* v5.13.15: Events page polish, sorting controls, and platform spacing consistency */
.host-body > .container {
  margin-top: 14px;
}
.host-body .card {
  margin-bottom: 14px;
}
.consumer-dashboard {
  max-width: 1120px;
  margin-top: 14px !important;
  display: grid;
  gap: 14px;
}
.consumer-dashboard .card,
.consumer-dashboard .event-card-list {
  margin-bottom: 0;
}
.event-dashboard-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px !important;
}
.event-dashboard-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(100%, 560px);
}
.event-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--host-muted);
  font-weight: 850;
  white-space: nowrap;
}
.event-sort-wrap select {
  width: auto;
  min-width: 156px;
  border-radius: 999px;
  padding: 10px 34px 10px 14px;
  background-color: #fff;
}
.event-dashboard-tools .dashboard-search-wrap {
  display: grid;
  grid-template-columns: minmax(190px, 280px) auto;
  align-items: center;
  gap: 8px;
}
.event-dashboard-tools .dashboard-search-wrap input {
  min-width: 0;
}
.event-dashboard-tools .dashboard-search-wrap .button {
  min-height: 38px;
}
.event-card-list {
  gap: 12px;
}
.event-card {
  grid-template-columns: 112px minmax(0, 1fr) max-content;
  gap: 16px;
  padding: 16px;
}
.event-art,
.invitation-preview-card {
  min-height: 92px;
}
.event-card-title-row {
  gap: 10px;
  align-items: center;
}
.event-card-title-row .badge {
  white-space: nowrap;
  flex: 0 0 auto;
}
.event-card h2 {
  font-size: 21px;
  line-height: 1.15;
}
.event-card p {
  line-height: 1.35;
}
.event-mini-stats {
  gap: 8px;
  margin-top: 11px;
}
.event-mini-stats span {
  padding: 6px 9px;
}
.event-card-actions {
  width: 154px;
}
.event-card-actions .button,
.event-card-actions .subtle-link {
  width: 100%;
}
@media (max-width: 980px) {
  .event-dashboard-controls {
    grid-template-columns: 1fr;
  }
  .event-dashboard-tools {
    justify-content: stretch;
    width: 100%;
  }
  .event-dashboard-tools .dashboard-search-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 1 1 auto;
  }
  .event-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .event-card-actions {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .host-body > .container,
  .consumer-dashboard {
    margin-top: 10px !important;
  }
  .consumer-dashboard {
    gap: 10px;
  }
  .dashboard-welcome {
    padding: 20px !important;
  }
  .dashboard-welcome h1 {
    font-size: clamp(30px, 11vw, 42px);
  }
  .event-dashboard-controls {
    padding: 12px !important;
    gap: 12px;
  }
  .dashboard-tabs button {
    flex: 1 1 calc(50% - 8px);
  }
  .event-dashboard-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .event-sort-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .event-sort-wrap select {
    width: 100%;
    min-width: 0;
  }
  .event-dashboard-tools .dashboard-search-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .event-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .event-art,
  .invitation-preview-card {
    min-height: 64px;
    border-radius: 16px;
  }
  .event-art span {
    font-size: 24px;
  }
  .event-card-title-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .event-mini-stats {
    margin-top: 9px;
  }
  .event-card-actions {
    grid-template-columns: 1fr;
  }
}

/* v5.13.20 contacts select header and events mobile card cleanup */
.contacts-page .contact-table .select-tools-header,
.contacts-page .contact-table td.row-select-cell {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
}
.contacts-page .contact-table thead th.select-tools-header {
  text-align: center !important;
  padding: 0 !important;
}
.contacts-page .contact-table thead th.sortable.select-tools-header::after {
  margin-left: 4px !important;
  display: inline-block;
  transform: translateY(-1px);
}
.contacts-page .contact-table thead th.actions-header {
  text-align: left !important;
}
.event-card h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.event-card h2 .badge {
  font-size: 11px;
  padding: 3px 8px;
  letter-spacing: 0;
  white-space: nowrap;
}
.event-status-line { display: none !important; }
.event-card-actions { width: 156px !important; }
.event-card-actions .button { white-space: nowrap; }

@media (max-width: 980px) {
  .consumer-dashboard .event-card {
    grid-template-columns: 92px minmax(0, 1fr) 118px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px 16px !important;
  }
  .consumer-dashboard .event-art {
    display: flex !important;
    min-height: 86px !important;
    width: 86px !important;
    border-radius: 20px !important;
  }
  .consumer-dashboard .event-art::after { inset: 10px !important; }
  .consumer-dashboard .event-art span { font-size: 28px !important; }
  .consumer-dashboard .event-mini-stats { display: none !important; }
  .consumer-dashboard .event-card-title-row { display: block !important; }
  .consumer-dashboard .event-card h2 {
    font-size: 18px !important;
    line-height: 1.12 !important;
    margin-bottom: 5px !important;
  }
  .consumer-dashboard .event-date-line {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
  .consumer-dashboard .event-card-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .consumer-dashboard .event-card-actions .button {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 720px) {
  .consumer-dashboard .event-card {
    grid-template-columns: 82px minmax(0, 1fr) 104px !important;
    gap: 10px !important;
  }
  .consumer-dashboard .event-art {
    display: flex !important;
    width: 76px !important;
    min-height: 76px !important;
  }
  .consumer-dashboard .event-art span { font-size: 25px !important; }
  .consumer-dashboard .event-card h2 { font-size: 16px !important; }
  .consumer-dashboard .event-card h2 .badge { font-size: 10px !important; padding: 2px 7px !important; }
  .consumer-dashboard .event-card-actions .button { font-size: 11px !important; min-height: 30px !important; }
}

@media (max-width: 430px) {
  .consumer-dashboard .event-card {
    grid-template-columns: 66px minmax(0, 1fr) 84px !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .consumer-dashboard .event-art {
    width: 60px !important;
    min-height: 60px !important;
    border-radius: 16px !important;
  }
  .consumer-dashboard .event-art::after { inset: 7px !important; border-radius: 12px !important; }
  .consumer-dashboard .event-art span { font-size: 20px !important; }
  .consumer-dashboard .event-card h2 { font-size: 15px !important; gap: 5px !important; }
  .consumer-dashboard .event-date-line { font-size: 12px !important; }
  .consumer-dashboard .event-card-actions { gap: 5px !important; }
  .consumer-dashboard .event-card-actions .button {
    font-size: 10.5px !important;
    min-height: 28px !important;
    padding: 5px 6px !important;
  }
}

/* v5.13.21: contacts select sort indicator centering and event image-card support */
.contacts-page .contact-table thead th.sortable::after,
.contacts-page .contact-table thead th.sortable.sorted::after,
.contacts-page .contact-table thead th.sortable.sort-asc::after,
.contacts-page .contact-table thead th.sortable.sort-desc::after {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transform: none !important;
}
.contacts-page .contact-table thead th.sortable.select-tools-header::after {
  margin-left: 5px !important;
  transform: none !important;
}
.event-art.has-event-image {
  background: #fff7ed !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid rgba(120,90,60,.12);
  color: transparent !important;
}
.event-art.has-event-image::after { display: none !important; }
.event-art.has-event-image img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}
.event-art.has-event-image span { display: none !important; }

/* v5.13.22: event image sizing and contact sort indicator polish */
.contacts-page .contact-table thead th.sortable.select-tools-header::after {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  font-size: 9px !important;
  line-height: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: -2px !important;
  margin-left: 4px !important;
  transform: none !important;
}
.consumer-dashboard .event-card {
  min-height: 0 !important;
  grid-template-columns: 150px minmax(0, 1fr) 156px !important;
  padding: 16px !important;
  align-items: center !important;
}
.consumer-dashboard .event-art {
  width: 150px !important;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  border-radius: 18px !important;
  flex: 0 0 150px !important;
}
.consumer-dashboard .event-art.has-event-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.consumer-dashboard .event-card-main { min-width: 0 !important; }
.consumer-dashboard .event-card-actions { width: 156px !important; }

@media (max-width: 980px) {
  .consumer-dashboard .event-card {
    grid-template-columns: 98px minmax(0, 1fr) 112px !important;
    padding: 14px !important;
  }
  .consumer-dashboard .event-art {
    width: 92px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    border-radius: 14px !important;
    flex-basis: 92px !important;
  }
  .consumer-dashboard .event-card-actions { width: 112px !important; }
}
@media (max-width: 720px) {
  .consumer-dashboard .event-card {
    grid-template-columns: 86px minmax(0, 1fr) 104px !important;
  }
  .consumer-dashboard .event-art {
    width: 80px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex-basis: 80px !important;
  }
  .consumer-dashboard .event-card-actions { width: 104px !important; }
}
@media (max-width: 430px) {
  .consumer-dashboard .event-card {
    grid-template-columns: 72px minmax(0, 1fr) 84px !important;
  }
  .consumer-dashboard .event-art {
    width: 66px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex-basis: 66px !important;
  }
  .consumer-dashboard .event-card-actions { width: 84px !important; }
}

.invitation-preview-card.has-event-image {
  background: #fff7ed !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid rgba(120,90,60,.12);
  overflow: hidden;
  padding: 0 !important;
  min-height: 220px;
}
.invitation-preview-card.has-event-image::after { display: none !important; }
.invitation-preview-card.has-event-image img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
  object-fit: cover;
}

/* v5.20 invite-card preview: when the source is the composited
   card PNG (not the legacy uploaded photo), we want to show the
   whole card with letterboxing rather than cropping. The card
   has its own deliberate composition — cropping the top/bottom
   would hide the text the host worked on. The has-card-image
   class is added by event-overview.php when card_image_path
   is the source. */
.invitation-preview-card.has-card-image {
  aspect-ratio: 1200 / 630;
  min-height: 0 !important;
  background: #f5f7fa !important;
  /* Don't let `align-items: stretch` from .event-overview-hero
     stretch this box to match the left column's height. With
     stretch active, the height is forced beyond what aspect-ratio
     prescribes; aspect-ratio then back-computes width from that
     height (see Safari behaviour) and the image overflows the
     310px column. align-self: start lets the box honour its
     aspect ratio at the column's width. */
  align-self: start;
  /* Belt-and-braces clip in case any future override re-introduces
     overflow — preview-card overflow is never desired here. */
  overflow: hidden;
}
.invitation-preview-card.has-card-image img {
  /* Ensure the image fills its container precisely so object-fit
     has bounds to letterbox within. The has-event-image rule
     above already sets these but with min-height: 220px which
     we're overriding to 0 — re-affirm here defensively. */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  min-height: 0 !important;
}

/* v5.13.23 guest list add flow polish */
.guest-list-actions .button,
.guest-list-actions button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  line-height: 1;
}
.add-guest-inline-card {
  margin-top: var(--card-gap, 18px);
}
.guest-add-search-card,
.guest-new-contact-card {
  border: 1px solid rgba(120, 90, 60, .16);
  background: rgba(255, 251, 244, .72);
  border-radius: 22px;
  padding: 18px;
  margin-top: 16px;
}
.guest-entity-search {
  margin-top: 8px;
}
.guest-entity-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}
.guest-entity-result {
  margin: 0;
}
.guest-entity-button {
  width: 100%;
  border: 1px solid rgba(232, 118, 62, .22);
  background: #fffdf8;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--ink, #15202b);
  box-shadow: 0 8px 22px rgba(120, 90, 60, .05);
}
.guest-entity-button:hover,
.guest-entity-button:focus {
  border-color: rgba(232, 118, 62, .46);
  box-shadow: 0 10px 28px rgba(120, 90, 60, .10);
  outline: none;
}
.guest-entity-button strong,
.guest-entity-button small {
  display: block;
}
.guest-entity-button small {
  margin-top: 3px;
  color: #6b7280;
  font-weight: 700;
}
.guest-new-contact-form .button {
  margin-top: 10px;
}
@media (max-width: 700px) {
  .guest-list-actions {
    gap: 8px;
  }
  .guest-list-actions .button,
  .guest-list-actions button.button {
    flex: 1 1 100%;
  }
  .guest-entity-button {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* v5.13.24 inline guest add tabs/table polish */
.guest-add-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  border-bottom: 1px solid rgba(120, 90, 60, .14);
  padding-bottom: 10px;
}
.guest-add-tab {
  border: 1px solid rgba(232, 118, 62, .28);
  background: #fffdf8;
  color: #9a3412;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  cursor: pointer;
}
.guest-add-tab.active {
  background: var(--ink, #14212b);
  border-color: var(--ink, #14212b);
  color: #fff;
}
.guest-add-panel { display: none; margin-top: 14px; }
.guest-add-panel.active { display: block; }
.guest-add-source-table th,
.guest-add-source-table td { vertical-align: middle; }
.guest-add-source-table .actions-cell form { margin: 0; }
.guest-add-table-scroll { max-height: 430px; overflow: auto; }
.add-guest-errors { margin-top: 12px; }
.add-guest-errors ul { margin: 6px 0 0 18px; }
.mobile-only-inline { display: none; }
@media (max-width: 700px) {
  .guest-add-tabs { display: grid; grid-template-columns: 1fr; }
  .guest-add-tab { width: 100%; }
  .guest-add-table-scroll { max-height: none; overflow: visible; }
  .mobile-only-inline { display: block; margin-top: 3px; }
}

/* v5.13.25 guest list/add guest cohesive card polish */
.guest-list-combined-card {
  overflow: visible;
  padding: 22px 24px 18px !important;
}
.guest-list-card-header {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 0 !important;
}
.guest-list-page .guest-list-title-block .host-page-title { margin-bottom: 4px; }
.guest-list-page .guest-list-title-block .host-page-title h1 { margin: 0; line-height: 1.1; }
.guest-list-page .guest-list-title-block .eyebrow { margin-bottom: 4px; }
.guest-list-page .guest-list-title-block .meta { margin: 2px 0 0; line-height: 1.35; }
.guest-list-page .guest-list-title-block .guest-mode-summary { margin-top: 4px; font-size: 12px; }
.guest-list-page .guest-mode-nav-row { margin: 12px 0 0 !important; }
.guest-list-page .guest-list-table-section { margin-top: 14px !important; }
/* Mobile title — only shown <820px (matches Contacts h1 styling) */
.guest-list-page .guest-list-mobile-title { display: none; }
/* Mobile-only event banner inside guest list card — hidden on desktop */
.guest-list-page .guest-list-mobile-event-banner { display: none; }
.guest-summary-strip {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  max-width: 520px;
}
.guest-summary-strip span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(232, 118, 62, .22);
  border-radius: 999px;
  background: rgba(255, 253, 248, .82);
  color: #9a3412;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.guest-summary-strip strong {
  color: var(--ink, #14212b);
  font-size: .88rem;
}
.guest-summary-strip .warning-stat {
  background: rgba(254, 243, 199, .72);
  border-color: rgba(245, 158, 11, .36);
}
.guest-list-results-header {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 10px;
}
.add-guest-inline-card {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(120, 90, 60, .12);
}
.guest-list-table-section {
  margin-top: 8px;
}
.guest-add-added,
.guest-add-added:hover,
.guest-add-added:focus {
  background: #d1fae5 !important;
  border-color: #86efac !important;
  color: #166534 !important;
  cursor: default !important;
}
.guest-add-row-added td {
  background: rgba(220, 252, 231, .36) !important;
}
.guest-add-row-error td {
  background: rgba(254, 226, 226, .32) !important;
}
@media (max-width: 800px) {
  .guest-list-card-header {
    flex-direction: column;
  }
  .guest-summary-strip {
    margin-left: 0;
    justify-content: flex-start;
    max-width: none;
  }
}

/* v5.13.26 guest add undo + truly combined guest card */
.guest-list-main-header {
  align-items: flex-start;
  border-bottom: 1px solid rgba(120, 90, 60, .12);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.guest-list-title-block {
  min-width: 260px;
  flex: 1 1 auto;
}
.guest-list-title-block .host-page-title {
  margin-bottom: 4px;
}
.guest-list-header-side {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: 560px;
}
.guest-list-header-side .guest-summary-strip {
  margin-left: 0;
}
.guest-list-header-side .guest-list-actions {
  justify-content: flex-end;
  margin: 0;
}
.guest-add-inline-status {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 197, 94, .28);
  background: rgba(220, 252, 231, .45);
  color: #14532d;
  border-radius: 16px;
  font-weight: 800;
}
.guest-add-inline-status span {
  min-width: 0;
}
.guest-add-undo-button {
  flex: 0 0 auto;
  border-color: rgba(22, 101, 52, .28) !important;
  color: #166534 !important;
  background: #fffdf8 !important;
}
@media (max-width: 800px) {
  .guest-list-main-header,
  .guest-list-header-side {
    align-items: stretch;
  }
  .guest-list-header-side {
    margin-left: 0;
    width: 100%;
    max-width: none;
  }
  .guest-list-header-side .guest-list-actions {
    justify-content: stretch;
  }
  .guest-add-inline-status {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* v5.13.27 guest page tab cleanup */
.guest-list-main-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.guest-list-header-side {
  align-self: flex-start;
}
.guest-list-header-side .guest-summary-strip {
  border: 1px solid rgba(232, 118, 62, .18);
  background: rgba(255, 247, 237, .72);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 10px 26px rgba(120, 90, 60, .06);
  max-width: 500px;
}
.guest-list-header-side .guest-summary-strip span {
  padding: 4px 7px;
  font-size: .72rem;
  background: #fffdf8;
}
.guest-list-header-side .guest-summary-strip strong {
  font-size: .84rem;
}
.guest-mode-tabs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guest-mode-tabs .guest-mode-tab {
  border-radius: 999px;
  border-color: rgba(232, 118, 62, .28) !important;
  background: #fffdf8 !important;
  color: #9a3412 !important;
}
.guest-mode-tabs .guest-mode-tab.active {
  background: var(--ink, #14212b) !important;
  border-color: var(--ink, #14212b) !important;
  color: #fff !important;
}
.guest-add-tabs { display: none !important; }
.guest-add-panel { display: none; }
.guest-add-panel.active { display: block; }
.guest-add-undo-inline,
.guest-add-undo-inline:hover,
.guest-add-undo-inline:focus {
  background: #fffdf8 !important;
  border: 1.5px solid rgba(220,38,38,.45) !important;
  color: #991b1b !important;
}
.guest-add-undo-inline:hover {
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.7) !important;
}
.guest-add-inline-status {
  justify-content: flex-start;
  font-size: .86rem;
  padding: 8px 10px;
}
@media (max-width: 700px) {
  .guest-mode-tabs:not(.guest-mode-tabs-inline) { display: grid; grid-template-columns: 1fr; }
  .guest-mode-tabs:not(.guest-mode-tabs-inline) .guest-mode-tab { width: 100%; }
}

/* v5.13.28 guest page tab placement and quieter inline feedback */
.guest-list-main-header {
  align-items: flex-start;
}
.guest-list-title-block {
  min-width: 0;
  flex: 1 1 auto;
}
.guest-list-header-side {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: flex-start;
}
.guest-list-header-side .guest-summary-strip {
  margin-top: 0;
  max-width: 420px;
  justify-content: flex-end;
}
.guest-mode-tabs-inline {
  margin: 22px 0 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.guest-mode-tabs-inline .guest-mode-tab {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  border: 0;
  padding: 9px 13px;
  border-radius: 999px;
  background: transparent;
  color: #374151;
  font-weight: 850;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.guest-mode-tabs-inline .guest-mode-tab.active,
.guest-mode-tabs-inline .guest-mode-tab:hover,
.guest-mode-tabs-inline .guest-mode-tab:focus-visible {
  background: #172126;
  color: #fff !important;
  outline: none;
}
.guest-add-inline-status {
  display: none !important;
}
@media (max-width: 900px) {
  .guest-list-header-side {
    width: 100%;
    margin-left: 0;
  }
  .guest-list-header-side .guest-summary-strip {
    max-width: none;
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  .guest-mode-tabs-inline:not(.guest-list-page .guest-mode-tabs-inline) {
    border-radius: 22px;
    flex-direction: column;
    overflow: visible;
  }
  .guest-mode-tabs-inline:not(.guest-list-page .guest-mode-tabs-inline) .guest-mode-tab {
    width: 100%;
    text-align: left;
  }
}
.guest-mode-tabs-inline .guest-mode-tab {
  border: 0 !important;
  background: transparent !important;
  color: #374151 !important;
}
.guest-mode-tabs-inline .guest-mode-tab.active,
.guest-mode-tabs-inline .guest-mode-tab:hover,
.guest-mode-tabs-inline .guest-mode-tab:focus-visible {
  background: #172126 !important;
  color: #fff !important;
}


/* v5.13.29 guest list nav and live refresh polish */
.guest-list-page .guest-list-main-header {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
}
.guest-list-page .add-guest-inline-card {
  border-top: 0 !important;
  padding-top: 0 !important;
}
.guest-list-page .guest-list-results-header {
  display: none !important;
}
.guest-list-page .guest-visible-badge {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 2px;
  padding: 7px 10px;
  font-size: .78rem;
  white-space: nowrap;
  background: rgba(255, 253, 248, .92);
}
.guest-list-page .guest-list-table-section.guest-list-refreshing {
  opacity: .72;
  transition: opacity .15s ease;
}
@media (max-width: 700px) {
  .guest-list-page .contact-search-wrap {
    flex-wrap: wrap;
  }
  .guest-list-page .guest-visible-badge {
    order: 3;
  }
}

/* v5.13.31: keep guest mode navigation full-width and one-line on desktop */
.guest-list-page .guest-mode-nav-row {
  width: 100%;
  margin: 18px 0 16px;
  padding: 0;
  border: 0 !important;
  display: flex;
  justify-content: flex-start;
}
.guest-list-page .guest-add-open-btn {
  margin: 0 !important;
  height: 38px;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255,126,45,.55) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.guest-list-page .guest-add-open-btn:hover {
  background: rgba(255,126,45,.12) !important;
  border-color: rgba(255,126,45,.85) !important;
}
.guest-list-page .guest-list-main-header {
  margin-bottom: 0 !important;
}
@media (max-width: 980px) {
  .guest-list-page .guest-mode-nav-row .guest-mode-tabs-inline {
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  .guest-list-page .guest-mode-nav-row .guest-mode-tabs-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 999px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .guest-list-page .guest-mode-nav-row .guest-mode-tabs-inline::-webkit-scrollbar {
    display: none;
  }
  .guest-list-page .guest-mode-nav-row .guest-mode-tab {
    flex: 0 0 auto;
    width: auto;
    text-align: center;
  }
}

/* v5.13.32 nav collapse breakpoint correction
   The top navigation was collapsing to hamburger at 1100px, hiding the main
   nav links on most laptops and all tablets. This override moves the
   show/hide threshold to 720px so the full nav is visible on any device
   wider than a phone in landscape. The event console and major-page compact
   layouts remain at their existing breakpoints since those are about layout
   density, not navigation visibility. */

/* --- Restore full top nav between 721px and 1100px --- */
@media (min-width: 721px) {
  .app-topbar {
    min-height: 74px !important;
    padding: 0 34px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
  }
  .top-nav,
  .top-account {
    display: flex !important;
  }
  .global-nav-mobile {
    display: none !important;
  }
}

/* --- Collapse to hamburger only at 720px and below --- */
@media (max-width: 720px) {
  .app-topbar {
    min-height: 62px !important;
    padding: 10px 14px !important;
    flex-wrap: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
  }
  .brand-mark {
    font-size: 18px !important;
    flex: 0 0 auto !important;
  }
  .brand-mark span {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }
  .top-nav,
  .top-account {
    display: none !important;
  }
  .global-nav-mobile {
    display: block !important;
    margin-left: auto !important;
  }
}

/* v5.13.33 event card 3-button actions layout
   The event card now has three actions: Overview, Guests, Preview.
   Widen the actions column slightly and stack them cleanly at all sizes. */
.consumer-dashboard .event-card-actions {
  width: 130px !important;
  gap: 6px !important;
}
.consumer-dashboard .event-card-actions .button {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}
@media (max-width: 980px) {
  .consumer-dashboard .event-card-actions {
    width: 116px !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
}
@media (max-width: 720px) {
  .consumer-dashboard .event-card-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }
  .consumer-dashboard .event-card-actions .button {
    font-size: 11px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 430px) {
  .consumer-dashboard .event-card-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  .consumer-dashboard .event-card-actions .button:last-child {
    grid-column: 1 / -1 !important;
  }
}


/* ============================================================
   CONTACT BOOK HEADER  (replaces v5.13.34 + v5.13.35 + v5.13.36)
   major-page-nav-shell on contact pages: vertical-stack layout,
   title on top, full-width underline tab row below.
   ============================================================ */

.contacts-section .major-page-nav-shell,
.contacts-page .major-page-nav-shell,
.groups-page .major-page-nav-shell,
.invite-lists-page .major-page-nav-shell,
.contact-import-page .major-page-nav-shell {
  display: block;
  padding: 12px 14px 10px;
}

.contacts-section .major-page-title,
.contacts-page .major-page-title,
.groups-page .major-page-title,
.invite-lists-page .major-page-title,
.contact-import-page .major-page-title {
  padding: 4px 6px 10px;
}

/* Description truncates to one line so it never pushes down the tab row */
.contacts-page .major-page-title .meta,
.groups-page .major-page-title .meta,
.invite-lists-page .major-page-title .meta,
.contact-import-page .major-page-title .meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 820px) {
  .contacts-page .major-page-title .meta,
  .groups-page .major-page-title .meta,
  .invite-lists-page .major-page-title .meta,
  .contact-import-page .major-page-title .meta {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* Tab-nav wrapper: full-width row below title */
.contacts-section .major-page-actions,
.contacts-page .major-page-actions,
.groups-page .major-page-actions,
.invite-lists-page .major-page-actions,
.contact-import-page .major-page-actions {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  align-self: stretch;
}

.contacts-section .contact-section-nav-wrap,
.contacts-page .contact-section-nav-wrap,
.groups-page .contact-section-nav-wrap,
.invite-lists-page .contact-section-nav-wrap,
.contact-import-page .contact-section-nav-wrap {
  width: 100%;
  justify-content: flex-start;
}

/* Mobile ≤900px: flex-column stack */
@media (max-width: 900px) {
  .contacts-page .major-page-nav-shell,
  .groups-page .major-page-nav-shell,
  .invite-lists-page .major-page-nav-shell,
  .contact-import-page .major-page-nav-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .contacts-page .major-page-title,
  .groups-page .major-page-title,
  .invite-lists-page .major-page-title,
  .contact-import-page .major-page-title {
    padding-bottom: 0;
  }
  .contacts-page .major-page-actions,
  .groups-page .major-page-actions,
  .invite-lists-page .major-page-actions,
  .contact-import-page .major-page-actions {
    width: 100%;
    margin: 0;
  }
  .contacts-page .contact-section-nav-wrap,
  .groups-page .contact-section-nav-wrap,
  .invite-lists-page .contact-section-nav-wrap,
  .contact-import-page .contact-section-nav-wrap {
    width: 100%;
    justify-content: stretch;
  }
  /* All contacts pages use the same column-stacked layout below
     900px. Earlier builds had a special row-direction layout for
     contact-import + deactivated-contacts (no description, so
     title + tiny hamburger fit in one row). Now the nav is the
     full pill bar, so that compact layout no longer applies and
     all six pages share the column-stack. */
}


/* ============================================================
   CONTACT SECTION TABS  (replaces v5.13.1 + v5.13.18 + v5.13.34–v5.13.47)
   Desktop underline tab bar.  Mobile hamburger dropdown at 900px.
   ============================================================ */

/* Nav-wrap container */
.contact-section-nav-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  position: relative;
}
.major-page-actions .contact-section-nav-wrap { margin: 0; }

/* ── Desktop tab bar ── */
.contact-section-tabs-desktop {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  border-bottom: 1px solid rgba(120,90,60,.12);
  padding: 0 4px;
  gap: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.contact-section-tabs-desktop::-webkit-scrollbar { display: none; }

.contact-section-tabs-desktop a {
  display: inline-block;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none;
  transition: color .15s, border-color .15s;
}
.contact-section-tabs-desktop a:hover { color: #374151; background: none; }
.contact-section-tabs-desktop a.active {
  color: #172126;
  border-bottom-color: #ff7e2d;
  background: none;
  box-shadow: none;
}

/* .contact-section-tabs class (used in some PHP templates) */
.contacts-section .contact-section-tabs,
.contacts-page .contact-section-tabs,
.groups-page .contact-section-tabs,
.invite-lists-page .contact-section-tabs,
.contact-import-page .contact-section-tabs {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(120,90,60,.12);
  box-shadow: none;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
}
.contacts-section .contact-section-tabs a,
.contacts-page .contact-section-tabs a,
.groups-page .contact-section-tabs a,
.invite-lists-page .contact-section-tabs a,
.contact-import-page .contact-section-tabs a {
  display: inline-block;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  text-decoration: none;
}
.contacts-section .contact-section-tabs a:hover,
.contacts-page .contact-section-tabs a:hover,
.groups-page .contact-section-tabs a:hover,
.invite-lists-page .contact-section-tabs a:hover,
.contact-import-page .contact-section-tabs a:hover { background: none; color: #374151; }
.contacts-section .contact-section-tabs a.active,
.contacts-page .contact-section-tabs a.active,
.groups-page .contact-section-tabs a.active,
.invite-lists-page .contact-section-tabs a.active,
.contact-import-page .contact-section-tabs a.active {
  background: none;
  color: #172126;
  box-shadow: none;
  border-bottom-color: #ff7e2d;
}

/* ── Mobile hamburger dropdown ── */
.contact-section-tabs-mobile {
  display: none;
  position: relative;
  margin: 0;
}
.contact-section-tabs-mobile summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(247,241,234,.72);
  border: 1px solid rgba(120,90,60,.12);
  font-weight: 900;
}
.contact-section-tabs-mobile summary::-webkit-details-marker { display: none; }
/* Active label sits left of hamburger */
.contact-section-tabs-mobile summary strong {
  order: 1;
  justify-self: end;
  text-align: right;
  font-size: 13px;
  color: #9a3412;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.contact-section-tabs-mobile summary .hamburger-lines { order: 2; flex: 0 0 auto; }
/* Suppress any extra "Menu" text span */
.contact-section-tabs-mobile summary > span:not(.hamburger-lines) { display: none; }

.contact-section-tabs-mobile nav {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(86vw,310px);
  max-height: calc(100vh - 145px);
  overflow: auto;
  z-index: 140;
  display: grid;
  align-items: stretch;
  padding: 10px;
  border-radius: 18px;
  background: var(--host-card,#fffdf8);
  border: 1px solid rgba(120,90,60,.12);
  box-shadow: 0 18px 44px rgba(92,64,36,.18);
}
.contact-section-tabs-mobile nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 14px;
  text-decoration: none;
  color: #374151;
  font-weight: 850;
}
.contact-section-tabs-mobile nav a:hover { background: rgba(120,90,60,.08); color: #172126; }
.contact-section-tabs-mobile nav a.active { background: #172126; color: #fff; border-bottom: none; }
.contact-section-tabs-mobile nav a.active::after { content: ''; }

/* ── Responsive breakpoints ── */
/* Section tabs flip to mobile hamburger at the same point the rest of the
   contact pages flip to mobile single-card layout (820px). */
@media (max-width: 820px) {
  .contact-section-tabs-desktop { display: none; }
  /* Hide the desktop nav regardless of page-class specificity */
  .contacts-section .contact-section-tabs,
  .contacts-page .contact-section-tabs,
  .groups-page .contact-section-tabs,
  .invite-lists-page .contact-section-tabs,
  .contact-import-page .contact-section-tabs,
  nav.contact-section-tabs { display: none; }
  .contact-section-tabs-mobile { display: inline-block; margin-left: auto; width: auto; }
  .contact-section-nav-wrap { justify-content: flex-end; }
}
@media (min-width: 821px) {
  .contact-section-tabs-mobile { display: none; }
  .contact-section-tabs-desktop { display: flex; }
  .contacts-section .contact-section-tabs,
  .contacts-page .contact-section-tabs,
  .groups-page .contact-section-tabs,
  .invite-lists-page .contact-section-tabs,
  .contact-import-page .contact-section-tabs,
  nav.contact-section-tabs { display: flex; }
}
@media (max-width: 520px) {
  .contact-section-tabs-mobile summary strong { display: block; }
}

/* On the Import Contacts page mobile view, suppress the boxed
   "Import Contacts ☰" pill that admin_contact_tabs() produces. We
   inject admin_contact_tabs_mobile_only() alongside it, which renders
   as the clean dark-circle hamburger that the rest of the contact
   subpages use. Without this, both end up visible on mobile. */
@media (max-width: 820px) {
  .contact-import-page .major-page-actions .contact-section-tabs-mobile:not(.contacts-mobile-nav) {
    display: none !important;
  }
}


/* ============================================================
   CONTACT ROW ACTIONS  (replaces v5.12.2–v5.13.47)
   Flex row of compact action buttons inside table cells.
   The base .inline-form uses display:grid — override to inline
   so buttons stay auto-width and don't stretch.
   ============================================================ */

.contact-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.contact-row-actions form { margin: 0; }

/* Prevent inline-form grid from stretching delete buttons */
.contact-row-actions .inline-form {
  display: inline;
  grid-template-columns: none;
  gap: 0;
  width: auto;
  min-width: 0;
  margin: 0;
}

/* All buttons inside a contact-row-actions */
.contact-row-actions .row-action-button,
.contact-row-actions .button.row-action-button,
.contact-row-actions button.row-action-button,
.contact-row-actions .inline-form button,
.contact-row-actions .button,
.contact-row-actions button {
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 30px;
  height: auto;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Danger button */
body:not(.invite-body) .contact-row-actions button.danger,
body:not(.invite-body) .contact-row-actions button.danger.row-action-button {
  background: #b91c1c;
  color: #fff;
  border: 1px solid #b91c1c;
}

/* Contacts + Groups page mobile ≤820px: stack buttons vertically, equal width */
@media (max-width: 820px) {

}


/* ============================================================
   CONTACT TABLE  (replaces v5.12.2–v5.13.47)
   Desktop: horizontal-scroll wrapper, min-width 980px.
   Checkbox column: centered at all widths.
   ============================================================ */

.contact-table-scroll {
  max-height: calc(100vh - 360px);
  min-height: 340px;
  overflow: auto;
  border: 1px solid rgba(120,90,60,.14);
  border-radius: 18px;
  background: #fffdf8;
}
.contact-table { margin-top: 0; }

/* Contacts table column widths */
.contacts-page .contact-table { table-layout: fixed; }
.contacts-page .contact-table th[data-col="contact"],
.contacts-page .contact-table td[data-col="contact"] { width: 22%; min-width: 160px; }
.contacts-page .contact-table th[data-col="preference"],
.contacts-page .contact-table td[data-col="preference"] { width: 90px; }
.contacts-page .contact-table th[data-col="email"],
.contacts-page .contact-table td[data-col="email"] { width: 22%; }
.contacts-page .contact-table th[data-col="phone"],
.contacts-page .contact-table td[data-col="phone"] { width: 130px; }
.contacts-page .contact-table th[data-col="events"],
.contacts-page .contact-table td[data-col="events"] { width: 70px; text-align: center; }
.contacts-page .contact-table th[data-col="groups"],
.contacts-page .contact-table td[data-col="groups"] { width: 70px; text-align: center; }
.contacts-page .contact-table .actions-header,
.contacts-page .contact-table .actions-cell { width: 110px; padding-right: 14px; }
/* Hide method pill in contact column on desktop — shown on mobile only */
.contacts-page .contact-table td[data-col="contact"] .mobile-contact-method { display: none; }

/* Title row: normal block on desktop, flex only on mobile */
.contacts-title-block { min-width: 0; }
/* + button: hidden on desktop always */
.contacts-mobile-add-btn { display: none !important; }
/* Hide mobile-only contact meta (email/phone lines) on desktop */
.contacts-page .contact-mobile-meta { display: none; }

/* ── Contacts sticky header ────────────────────────────────── */
/* Sticky header — sits above the scrolling table */
.contacts-sticky-header {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: #fffdf8;
  border-radius: 22px 22px 0 0;
  padding-bottom: 10px;
}
@media (max-width: 1100px) { .contacts-sticky-header { top: 62px; } }
@media (max-width: 720px)  { .contacts-sticky-header { top: 60px; } }

/* Mobile action bar: hidden by default */
.contacts-mobile-actions { display: none; }

/* ── Mobile ≤820px ────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Hide the separate nav shell card — title lives inside the table
     card, and the icon-only hamburger sits in its upper-right corner
     via the inline admin_contact_tabs_mobile_only() helper. */
  .contacts-page .major-page-nav-shell { display: none !important; }

  /* Single unified card */
  .contacts-page .contacts-table-card {
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 24px !important;
  }
  /* Sticky header: rounded top, sticks below topbar */
  .contacts-sticky-header {
    position: sticky !important;
    top: 60px !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fffdf8 !important;
    padding: 16px 14px 10px !important;
    border-bottom: 1px solid rgba(120,90,60,.08) !important;
    z-index: 90 !important;
  }
  /* Inner table-scroll wrapper: on mobile it has no border, no background,
     and no scrollbar of its own (max-height: none lets it grow with the
     content). The previous `overflow: hidden` was a vestige of a styled
     wrapper that no longer exists, and on a filtered list with one or
     two rows it clipped the row Actions popover at the wrapper's bottom
     edge. Visible overflow lets the popover bleed out into the card's
     padding area as intended; the outer card (.contacts-table-card)
     still owns the rounded corners. */
  .contacts-page .contact-table-scroll,
  .groups-page .groups-table-scroll {
    overflow: visible !important;
    border-radius: 0 0 22px 22px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* Hide desktop-only text */
  .contacts-desktop-only { display: none !important; }

  /* Hide desktop bulk toolbar */
  .contacts-page .bulk-tools-row,
  .guest-list-page .bulk-tools-row { display: none !important; }

  /* Search: force flex so Clear stays inline (overrides the 720px grid rule) */
  .contacts-page .contact-search-wrap,
  .contacts-page .inline-search,
  .guest-list-page .contact-search-wrap,
  .guest-list-page .inline-search {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .contacts-page .contact-search-wrap input,
  .contacts-page .inline-search input,
  .guest-list-page .contact-search-wrap input,
  .guest-list-page .inline-search input { flex: 1 1 auto !important; min-width: 0 !important; }
  .contacts-page .contact-search-wrap .search-clear-button,
  .contacts-page .inline-search .search-clear-button,
  .guest-list-page .contact-search-wrap .search-clear-button,
  .guest-list-page .inline-search .search-clear-button {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .contacts-page .contact-tools-row { margin-bottom: 8px; }

  /* Title row: flex on mobile */
  .contacts-title-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
  .contacts-title-block { flex: 1 1 auto !important; min-width: 0 !important; }

  /* Title actions: + button + hamburger side by side */
  .contacts-title-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  /* + button */
  .contacts-mobile-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Mobile hamburger nav inside sticky header.
     Renders as a small black rounded-square (not circular) with
     three white lines, anchored to the upper-right of the table
     card. Matches the global-nav-mobile aesthetic. */
  .contacts-mobile-nav {
    position: relative !important;
  }
  .contacts-mobile-nav > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #172126 !important;
    cursor: pointer !important;
    list-style: none !important;
  }
  .contacts-mobile-nav > summary::-webkit-details-marker { display: none; }
  .contacts-mobile-nav > summary .hamburger-lines span { background: #fff !important; }
  .contacts-mobile-nav > nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    background: #fffdf8 !important;
    border: 1px solid rgba(120,90,60,.15) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(92,64,36,.15) !important;
    min-width: 180px !important;
    z-index: 200 !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .contacts-mobile-nav > nav a {
    display: block !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
  }
  .contacts-mobile-nav > nav a.active {
    background: rgba(255,126,45,.10) !important;
    color: #9a3412 !important;
  }
  .contacts-mobile-nav > nav a:hover { background: rgba(120,90,60,.08) !important; }

  /* Mobile action bar: just Clear Selected pill */
  .contacts-mobile-actions {
    display: flex !important;
    margin-top: 6px;
  }
  .cma-btn {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-size: 13px !important;
  }
}

/* Contact name: no wrap, left-aligned */
.contacts-page .contact-table th[data-col="contact"],
.contacts-page .contact-table td[data-col="contact"] { text-align: left !important; padding-left: 12px !important; }
.contacts-page .contact-table td[data-col="contact"] strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ── Groups page ─────────────────────────────────────────── */
/* Desktop: tighten actions column to fit buttons only */
.groups-page .contact-table .actions-header,
.groups-page .contact-table .actions-cell { width: 180px; }
/* Hide mobile-only elements on desktop */
.groups-page .contact-mobile-meta { display: none; }
/* Type pill inline with name — mobile only */
.grp-inline-type { display: none !important; }
@media (max-width: 820px) {
  .grp-inline-type {
    display: inline !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}
/* Name cell contents — apply always */
.grp-name { display: block; font-size: 14px; font-weight: 700; color: #172126; margin-bottom: 3px; }
.grp-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grp-type-pill { font-size: 11px !important; padding: 2px 7px !important; }
.grp-members, .grp-lists { font-size: 12px; color: #6b7280; }
.grp-notes { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }

/* Hide the mobile-only search row on desktop. We use .contact-tools-row
   in the selector to match the same specificity as the .contacts-page
   .contact-tools-row grid rule that would otherwise force display: grid. */
.groups-page .contact-tools-row.groups-mobile-search-row,
.invite-lists-page .contact-tools-row.lists-mobile-search-row { display: none; }
@media (max-width: 820px) {
  .groups-page .major-page-nav-shell { display: none !important; }
  .groups-page .groups-table-card {
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 24px !important;
  }
  .groups-page .groups-sticky-header {
    position: sticky !important;
    top: 60px !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fffdf8 !important;
    padding: 16px 14px 10px !important;
    border-bottom: 1px solid rgba(120,90,60,.08) !important;
    z-index: 90 !important;
  }
  .groups-page .groups-table-scroll {
    overflow: visible !important;
    border-radius: 0 0 22px 22px !important;
  }
  /* Hide desktop search/sort on mobile */
  .groups-desktop-only { display: none !important; }
  /* Show mobile search row */
  .groups-mobile-search-row {
    display: block !important;
    margin-top: 8px;
  }
  .groups-mobile-search-row .inline-search,
  .groups-mobile-search-row .contact-search-wrap {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .groups-mobile-search-row input { flex: 1 1 auto !important; min-width: 0 !important; }
  .groups-mobile-search-row .secondary { flex-shrink: 0 !important; width: auto !important; }
  /* Groups page uses contact-table + contact-data-row — contacts CSS handles layout.
     Hide desktop-only columns. (Visible overflow on the scroll wrapper —
     see note above — keeps the row Actions popover from getting clipped
     when the list is filtered down to a small number of rows.) */
  .groups-page .groups-table-scroll {
    overflow: visible !important;
    border-radius: 0 0 22px 22px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
  }
  .groups-page .contact-table tbody tr.contact-data-row td[data-col="type"],
  .groups-page .contact-table tbody tr.contact-data-row td[data-col="members"],
  .groups-page .contact-table tbody tr.contact-data-row td[data-col="lists"] { display: none !important; }

}

/* Note: there used to be a rule here that hid the "Import Contacts" tab on
   mobile because CSV upload was awkward on phones. With vCard support and
   mobile browsers' native file pickers (which can pull files from iCloud,
   Google Drive, Files app, email attachments, etc.), import works fine on
   phones now — keep it visible. */

/* Row visual state. The leftmost checkbox column drives selection, but
   on desktop clicking anywhere on the row body also toggles the checkbox
   — so we bring the pointer cursor back and use a slightly stronger
   hover tint to invite that interaction. Mobile (≤820px) keeps the
   default cursor and a softer tint since taps on the row body don't
   toggle anything there. */
.contacts-page .contact-table tbody tr.contact-data-row {
  cursor: pointer;
  transition: background .12s;
}
.contacts-page .contact-table tbody tr.contact-data-row:hover {
  background: rgba(255,126,45,.08);
}
.contacts-page .contact-table tbody tr.contact-data-row.contact-row-selected {
  background: rgba(255,126,45,.12) !important;
}
.contacts-page .contact-table tbody tr.contact-data-row.contact-row-selected:hover {
  background: rgba(255,126,45,.16) !important;
}
.contacts-page .contact-table tbody tr.contact-data-row.contact-row-selected td {
  border-bottom-color: rgba(255,126,45,.15) !important;
}
/* Inside the row, the action cell + form controls keep their normal
   cursor so it's clear those are interactive in their own right. */
.contacts-page .contact-table tbody tr.contact-data-row .actions-cell,
.contacts-page .contact-table tbody tr.contact-data-row button,
.contacts-page .contact-table tbody tr.contact-data-row a,
.contacts-page .contact-table tbody tr.contact-data-row input,
.contacts-page .contact-table tbody tr.contact-data-row select,
.contacts-page .contact-table tbody tr.contact-data-row label {
  cursor: auto;
}
.contacts-page .contact-table tbody tr.contact-data-row .contact-row-checkbox {
  cursor: pointer;
}
/* Leftmost row-select column: narrow, centered, vertically aligned with
   the row content. Match warm-data-table behavior elsewhere. */
.contacts-page .contact-table th.row-select-header,
.contacts-page .contact-table td.row-select-cell {
  width: 36px;
  min-width: 36px;
  padding-left: 12px;
  padding-right: 4px;
  text-align: center;
}
.contacts-page .contact-table td.row-select-cell {
  vertical-align: middle;
}
.contacts-page .contact-table input.contact-row-checkbox,
.contacts-page .contact-table input#contactSelectAll {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}

/* Match warm-data-table header style */
.contacts-page .contact-table thead th {
  background: #fff9f4 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #6b7280 !important;
  font-weight: 700 !important;
  white-space: nowrap;
  padding: 10px 12px !important;
}
.contacts-page .contact-table th,
.contacts-page .contact-table td {
  border-bottom: 1px solid rgba(120,90,60,.08) !important;
}
.contacts-page .contact-table thead th.sortable::after { content: ' ↕'; opacity: .45; font-size: 11px; }
.contacts-page .contact-table thead th.sortable.sorted { color: #172126 !important; }
.contacts-page .contact-table thead th.sortable.sort-asc::after  { content: ' ↑'; opacity: .9; }
.contacts-page .contact-table thead th.sortable.sort-desc::after { content: ' ↓'; opacity: .9; }

.contact-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  vertical-align: middle;
  line-height: 1.2;
  padding-top: 13px;
  padding-bottom: 13px;
  white-space: nowrap;
}
.contact-table thead th.select-tools-header,
.contact-table thead th.actions-header { text-align: center; }

.contact-table.compact-table th,
.contact-table.compact-table td { padding: 6px 9px; vertical-align: middle; }
.contact-table.compact-table tr { height: auto; }
.contact-table .contact-lines { line-height: 1.18; font-size: 12.5px; white-space: nowrap; }
.contact-table .contact-note { font-size: 11.5px; line-height: 1.15; }
.contact-table strong { font-size: 12.8px; }

.contact-table thead th.sortable { cursor: pointer; user-select: none; }
.contact-table thead th.sortable::after { content: ' ↕'; opacity: .45; font-size: 11px; }
.contact-table thead th.sortable.sorted::after { opacity: .9; }
.contact-table thead th.sortable.sort-asc::after { content: ' ↑'; opacity: .9; }
.contact-table thead th.sortable.sort-desc::after { content: ' ↓'; opacity: .9; }
.contact-table thead th.draggable-col { cursor: grab; }
.contact-table thead th.draggable-col.dragging { opacity: .55; }

.contact-table .expand-header,
.contact-table .expand-cell { width: 34px; min-width: 34px; padding: 0 4px; text-align: center; }
.contact-table .expand-cell { padding-left: 4px; padding-right: 4px; }
.contact-table .expand-toggle,
.contact-table .expand-spacer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.contact-table .expand-toggle { background: rgba(120,90,60,.08); }
.contact-table .expand-spacer { visibility: hidden; }

.contact-table .select-tools-header {
  min-width: 42px; width: 42px; padding: 0; text-align: center;
}
.contact-table .select-tools-mini {
  display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: nowrap;
}
.contact-table .select-tools-mini span { font-size: 11px; color: #6b7280; }
.contact-table .mini-link {
  font-size: 11px; font-weight: 700; color: #9a3412;
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.contact-table .actions-header,
.contact-table .actions-cell { text-align: center; }

.contact-table .pref-pill {
  display: inline-block; border-radius: 999px;
  padding: 2px 7px; font-size: 11px; font-weight: 700;
  background: #e5e7eb; color: #374151;
}
.contact-table .pref-sms  { background: #ecfdf5; color: #166534; }
.contact-table .pref-both { background: #fef9c3; color: #854d0e; }
.contact-table .pref-do_not_contact { background: #fee2e2; color: #991b1b; }

/* Contacts-page specific */
.contacts-page .contact-table-scroll { max-height: calc(100vh - 405px); }

/* Desktop: horizontal scroll so table never squishes below 980px */
@media (min-width: 821px) {
  .contacts-page .contact-table-scroll { overflow-x: auto; overflow-y: auto; }
  .contacts-page .contact-table { min-width: 980px; }
}

/* Checkbox column — centered everywhere */


/* Mobile ≤820px: card-row layout matching invite lists style */
@media (max-width: 820px) {
  .contacts-page .contact-table-scroll {
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 0 22px 22px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Table as block — reset table-layout so fixed column widths don't apply */
  .contacts-page .contact-table,
  .groups-page .contact-table {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  .contacts-page .contact-table tbody,
  .groups-page .contact-table tbody { display: block; width: 100% !important; }
  .contacts-page .contact-table thead,
  .groups-page .contact-table thead { display: none !important; }

  /* Each row: contacts-page has [select|main|actions], groups-page is unchanged. */
  .contacts-page .contact-table tbody tr.contact-data-row[style*='display: none'] { display: none !important; }
  .contacts-page .contact-table tbody tr.contact-data-row {
    display: grid !important;
    grid-template-columns: 32px minmax(0,1fr) 90px !important;
    grid-template-areas: "select main actions" !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdf8 !important;
    overflow: visible !important;
    cursor: default !important;
    gap: 8px;
  }
  /* Suppress the desktop hover tint on mobile — there's no row-click
     selection here, so the affordance would be misleading. */
  .contacts-page .contact-table tbody tr.contact-data-row:hover {
    background: #fffdf8 !important;
  }
  .contacts-page .contact-table tbody tr.contact-data-row.contact-row-selected:hover {
    background: rgba(255,126,45,.10) !important;
  }
  .groups-page .contact-table tbody tr.contact-data-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 90px !important;
    grid-template-areas: "main actions" !important;
    align-items: start !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdf8 !important;
    overflow: visible !important;
    cursor: pointer;
  }
  .contacts-page .contact-table tbody tr.contact-data-row.contact-row-selected {
    background: rgba(255,126,45,.10) !important;
  }
  /* Place the leftmost row-select cell into the grid's "select" slot. */
  .contacts-page .contact-table tbody tr.contact-data-row td.row-select-cell {
    grid-area: select !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  /* Suppress all data-label::before */
  .contacts-page .contact-table tbody tr.contact-data-row td::before,
  .contacts-page .contact-table tbody tr.contact-data-row td[data-label]::before,
  .groups-page .contact-table tbody tr.contact-data-row td::before,
  .groups-page .contact-table tbody tr.contact-data-row td[data-label]::before {
    content: "" !important; display: none !important;
  }

  /* Show mobile meta on mobile */
  .contacts-page .contact-mobile-meta,
  .groups-page .contact-mobile-meta { display: flex !important; }

  /* Contact/name cell: grid-area main */
  .contacts-page .contact-table tbody tr.contact-data-row td[data-col="contact"],
  .groups-page .contact-table tbody tr.contact-data-row td[data-col="name"] {
    grid-area: main !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
    text-align: left !important;
  }
  /* Make sure inline-by-default tags inside the name cell stack
     into separate lines on mobile so the name reads as a header
     with the type pill underneath, both flush to the left edge.
     Without these the <strong> + <span> would flow inline and
     wrap unpredictably in narrow columns. */
  .groups-page .contact-mobile-name { min-width: 0; text-align: left; }
  .groups-page .contact-mobile-name strong {
    font-size: 14px;
    font-weight: 700;
    color: #172126;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
    text-align: left;
  }
  .groups-page .contact-mobile-name .grp-inline-type {
    display: inline-block;
    margin-top: 4px;
  }
  .groups-page .contact-mobile-meta { text-align: left; }
  .groups-page .contact-mobile-line { text-align: left; }
  /* Name line */
  .contacts-page .contact-mobile-name {
    min-width: 0;
  }
  .contacts-page .contact-mobile-name strong {
    font-size: 14px;
    font-weight: 700;
    color: #172126;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
  }
  /* Email / phone lines below name */
  .contacts-page .contact-mobile-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
  }
  .contacts-page .contact-mobile-line {
    display: block;
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }
  /* Prevent browser auto-linking phone numbers */
  .contacts-page .contact-mobile-phone {
    color: #6b7280 !important;
    text-decoration: none !important;
    pointer-events: none;
    -webkit-touch-callout: none;
  }

  /* Hide: method col, email col, phone col, events col, groups col */
  .contacts-page .contact-table tbody tr.contact-data-row td[data-col="preference"],
  .contacts-page .contact-table tbody tr.contact-data-row td[data-col="email"],
  .contacts-page .contact-table tbody tr.contact-data-row td[data-col="phone"],
  .contacts-page .contact-table tbody tr.contact-data-row td[data-col="events"],
  .contacts-page .contact-table tbody tr.contact-data-row td[data-col="groups"] { display: none !important; }

  /* Actions cell */
  .contacts-page .contact-table tbody tr.contact-data-row .actions-cell,
  .groups-page .contact-table tbody tr.contact-data-row .actions-cell {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-self: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .contacts-page .contact-table .contact-row-actions,
  .groups-page .contact-table .contact-row-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-items: stretch !important;
    max-width: 90px !important;
  }
  .contacts-page .contact-table .contact-row-actions .button,
  .contacts-page .contact-table .contact-row-actions button,
  .groups-page .contact-table .contact-row-actions .button,
  .groups-page .contact-table .contact-row-actions button {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    font-size: 12px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
    padding: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .contacts-page .contact-table .contact-row-actions .inline-form,
  .groups-page .contact-table .contact-row-actions .inline-form {
    display: block !important;
    width: 90px !important;
    max-width: 90px !important;
  }
  /* Ensure row-actions container is exactly the right width */
  .contacts-page .contact-table .contact-row-actions,
  .groups-page .contact-table .contact-row-actions {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
  }
}


/* ============================================================
   WARM DATA TABLE  (replaces v5.12.14)
   Shared table pattern for Groups, Invite Lists, Guest List.
   ============================================================ */

.warm-data-page .warm-table-card { padding: 18px 20px 20px; overflow: visible; }
.warm-data-page .warm-table-tools {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 14px;
}
.warm-data-page .warm-search-wrap { flex: 1 1 220px; min-width: 0; }
.warm-data-page .warm-search-wrap label { margin-top: 0; }
.warm-data-page .dismissible-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: #ecfdf5; color: #065f46; margin-bottom: 14px;
}
.warm-data-page .status-close {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: inherit; margin-top: 0;
  min-height: 0; padding: 2px 6px; font-size: 18px;
}
.warm-data-page .warm-data-table-scroll {
  overflow-x: auto;
  border: 1px solid rgba(120,90,60,.14);
  border-radius: 18px;
  background: #fffdf8;
}
.warm-data-page .warm-data-table { width: 100%; border-collapse: collapse; margin: 0; }
.warm-data-page .guest-data-table { min-width: 760px; }
.warm-data-page .warm-data-table th,
.warm-data-page .warm-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(120,90,60,.08);
  vertical-align: middle;
}
.warm-data-page .warm-data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fff9f4; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: #6b7280; font-weight: 700;
}
.warm-data-page .warm-data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.warm-data-page .warm-data-table th.sortable::after { content: ' ↕'; opacity: .45; font-size: 11px; }
.warm-data-page .warm-data-table th.sortable.sorted { color: #172126; }
.warm-data-page .warm-data-table th.sortable.sort-asc::after  { content: ' ↑'; opacity: .9; }
.warm-data-page .warm-data-table th.sortable.sort-desc::after { content: ' ↓'; opacity: .9; }
.warm-data-page .warm-data-table .actions-header,
.warm-data-page .warm-data-table .actions-cell { text-align: center; width: 160px; min-width: 120px; }
.warm-data-page .warm-data-table .numeric,
.warm-data-page .warm-data-table .numeric-cell { text-align: right; }
.warm-data-page .guest-row-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.warm-data-page .pref-pill {
  display: inline-block; border-radius: 999px;
  padding: 3px 8px; font-size: 11px; font-weight: 700;
  background: #e5e7eb; color: #374151;
}
.warm-data-page .contact-lines,
.warm-data-page .copy-link { font-size: 13px; line-height: 1.25; }
.warm-data-page .multi-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: #172126; color: #fff; font-size: 10px; font-weight: 800; margin-left: 4px;
}
.warm-data-page .mobile-sort-control { display: none; align-items: center; gap: 8px; margin-left: auto; }
.warm-data-page .mobile-sort-control select { width: auto; border-radius: 999px; padding: 8px 28px 8px 12px; }
.warm-data-page .search-clear-button {
  background: none; border: none; color: #6b7280; cursor: pointer;
  padding: 0 6px; min-height: 0; margin-top: 0;
}
.warm-data-page .contact-action-buttons .button,
.warm-data-page .contact-action-buttons button { margin-top: 0; }

@media (max-width: 820px) {
  .warm-data-page .container { padding-left: 12px; padding-right: 12px; }
  .warm-data-page .builder-hero { display: block; padding: 20px; }
  .warm-data-page .builder-hero-panel { margin-top: 14px; }
  .warm-data-page .warm-table-card,
  .warm-data-page .contact-actions-card { padding: 14px; border-radius: 20px; }
  .warm-data-page .contact-list-header { align-items: flex-start; }
  .warm-data-page .contact-list-header .badge { flex: 0 0 auto; }
  .warm-data-page .warm-table-tools { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .warm-data-page .contact-search-wrap { grid-template-columns: minmax(0,1fr) auto; }
  .warm-data-page .mobile-sort-control { display: inline-flex; justify-content: flex-start; margin-left: 0; }
  .warm-data-page .mobile-sort-control select { flex: 1; }
  .warm-data-page .warm-data-table-scroll {
    max-height: calc(100vh - 350px); min-height: 300px;
    overflow-y: auto; overflow-x: hidden; border: 0; background: transparent; padding-right: 0;
  }
  .warm-data-page .warm-data-table,
  .warm-data-page .warm-data-table tbody,
  .warm-data-page .warm-data-table tr,
  .warm-data-page .warm-data-table td { display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .warm-data-page .warm-data-table { min-width: 0 !important; table-layout: auto; border-collapse: separate; border-spacing: 0; }
  .warm-data-page .warm-data-table thead { display: none; }
  .warm-data-page .warm-data-table tbody tr.warm-data-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 112px;
    grid-template-areas: "main actions" "detail actions" "meta actions";
    gap: 4px 10px;
    margin: 0 0 10px;
    padding: 12px 10px;
    background: #fffdf8;
    border: 1px solid rgba(120,90,60,.14);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(92,64,36,.05);
    overflow: hidden;
  }
  .warm-data-page .warm-data-table tbody tr.warm-data-row[style*="display: none"] { display: none !important; }
  .warm-data-page .warm-data-table tbody tr.warm-data-row td { padding: 0 !important; border-bottom: 0 !important; min-height: 0; }
  .warm-data-page .warm-data-table tbody tr.warm-data-row td:first-child { grid-area: main; min-width: 0; }
  .warm-data-page .warm-data-table tbody tr.warm-data-row td:nth-child(2) { grid-area: detail; }
  .warm-data-page .warm-data-table tbody tr.warm-data-row td:nth-child(3),
  .warm-data-page .warm-data-table tbody tr.warm-data-row td:nth-child(4),
  .warm-data-page .warm-data-table tbody tr.warm-data-row td:nth-child(5),
  .warm-data-page .warm-data-table tbody tr.warm-data-row td:nth-child(6) {
    grid-area: meta; display: inline-flex !important; align-items: center; width: auto !important; margin-right: 14px; font-size: 13px;
  }
  .warm-data-page .warm-data-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 800; color: #7c2d12; }
  .warm-data-page .warm-data-table td:first-child::before,
  .warm-data-page .warm-data-table .actions-cell::before { content: ""; }
  .warm-data-page .warm-data-table .actions-cell {
    grid-area: actions !important; justify-self: stretch; align-self: start; overflow: visible;
  }
  .warm-data-page .contact-row-actions {
    display: flex !important; flex-direction: column !important; gap: 6px !important;
    align-items: stretch !important; width: auto !important; max-width: 112px !important; min-width: 0 !important;
  }
  .warm-data-page .contact-row-actions .inline-form { display: block !important; width: 112px !important; max-width: 112px !important; }
  .warm-data-page .contact-row-actions .row-action-button,
  .warm-data-page .contact-row-actions .button.row-action-button,
  .warm-data-page .contact-row-actions button.row-action-button {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: 31px !important; min-height: 31px !important; padding: 0 8px !important;
    font-size: 11px !important; line-height: 1 !important;
  }
  .warm-data-page .contact-lines,
  .warm-data-page .copy-link { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
  .warm-data-page .contact-search-wrap { grid-template-columns: 1fr; }
  .warm-data-page .search-clear-button { width: 100%; }
  .warm-data-page .warm-data-table tbody tr.warm-data-row {
    grid-template-columns: minmax(0,1fr) 106px;
  }
  .warm-data-page .contact-row-actions,
  .warm-data-page .contact-row-actions .inline-form,
  .warm-data-page .contact-row-actions .row-action-button,
  .warm-data-page .contact-row-actions .button.row-action-button,
  .warm-data-page .contact-row-actions button.row-action-button {
    width: auto !important; max-width: none !important;
  }
}

/* Groups page: override warm-data-page button rules */
@media (max-width: 820px) {
  .groups-page .contact-table .contact-row-actions {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .groups-page .contact-table .contact-row-actions .inline-form {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
    display: block !important;
  }
  .groups-page .contact-table .contact-row-actions button,
  .groups-page .contact-table .contact-row-actions .button,
  .groups-page .contact-table .contact-row-actions .row-action-button,
  .groups-page .contact-table .contact-row-actions button.row-action-button,
  .groups-page .contact-table .contact-row-actions .inline-form button {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* Groups page: desktop search row layout — search left, add button right */
@media (min-width: 821px) {
  .groups-page .contact-tools-row.groups-desktop-only {
    display: flex !important;
    align-items: flex-end !important;
    gap: 14px !important;
    margin-top: 8px !important;
  }
  .groups-page .contact-tools-row.groups-desktop-only .search-row {
    flex: 1 1 auto !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }
  .groups-page .groups-desktop-add-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: #ff7e2d !important;
    color: #fff !important;
    border-radius: 10px !important;
  }
  .groups-page .groups-desktop-add-btn:hover { background: #ea580c !important; }
}
.groups-desktop-add-btn { display: inline-flex; }
@media (max-width: 820px) {
  .groups-desktop-add-btn { display: none !important; }
}

/* ============================================================
   INVITE LISTS PAGE — mirror Families & Groups page treatment
   Desktop: contact-style table with fixed actions column
   Mobile: single-card sticky-header pattern
   ============================================================ */

/* Desktop: fixed actions column width */
.invite-lists-page .contact-table .actions-header,
.invite-lists-page .contact-table .actions-cell { width: 180px; }
.invite-lists-page .contact-mobile-meta { display: none; }

.lists-mobile-search-row { display: none; }
@media (max-width: 820px) {
  .invite-lists-page .major-page-nav-shell { display: none !important; }
  .invite-lists-page .lists-table-card {
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 24px !important;
  }
  .invite-lists-page .lists-sticky-header {
    position: sticky !important;
    top: 60px !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fffdf8 !important;
    padding: 16px 14px 10px !important;
    border-bottom: 1px solid rgba(120,90,60,.08) !important;
    z-index: 90 !important;
  }
  /* See note on .contact-table-scroll above — same vestigial overflow
     issue, same fix. The wrapper has no border or background on mobile;
     hidden overflow only served to clip the row Actions popover. */
  .invite-lists-page .lists-table-scroll {
    overflow: visible !important;
    border-radius: 0 0 22px 22px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
  }
  .lists-desktop-only { display: none !important; }
  .lists-mobile-search-row {
    display: block !important;
    margin-top: 8px;
  }
  .lists-mobile-search-row .inline-search,
  .lists-mobile-search-row .contact-search-wrap {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .lists-mobile-search-row input { flex: 1 1 auto !important; min-width: 0 !important; }
  .lists-mobile-search-row .secondary { flex-shrink: 0 !important; width: auto !important; }
  /* Hide stats columns on mobile — info shown in mobile-meta line */
  .invite-lists-page .contact-table tbody tr.contact-data-row td[data-col="contacts"],
  .invite-lists-page .contact-table tbody tr.contact-data-row td[data-col="groups"],
  .invite-lists-page .contact-table tbody tr.contact-data-row td[data-col="used"] { display: none !important; }
}

/* Lists desktop add button — same treatment as groups */
@media (min-width: 821px) {
  .invite-lists-page .contact-tools-row.lists-desktop-only {
    display: flex !important;
    align-items: flex-end !important;
    gap: 14px !important;
    margin-top: 8px !important;
  }
  .invite-lists-page .contact-tools-row.lists-desktop-only .search-row {
    flex: 1 1 auto !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }
  .invite-lists-page .lists-desktop-add-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: #ff7e2d !important;
    color: #fff !important;
    border-radius: 10px !important;
  }
  .invite-lists-page .lists-desktop-add-btn:hover { background: #ea580c !important; }
}
.lists-desktop-add-btn { display: inline-flex; }
@media (max-width: 820px) {
  .lists-desktop-add-btn { display: none !important; }
}

/* Lists page mobile table reflow — mirror groups-page treatment so rows
   render as cards instead of an HTML table with sticky headers. */
@media (max-width: 820px) {
  /* Table as block; hide thead */
  .invite-lists-page .contact-table {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  .invite-lists-page .contact-table tbody { display: block; width: 100% !important; }
  .invite-lists-page .contact-table thead { display: none !important; }

  /* Each row: name left, actions right (90px) */
  .invite-lists-page .contact-table tbody tr.contact-data-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 90px !important;
    grid-template-areas: "main actions" !important;
    align-items: start !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdf8 !important;
    overflow: visible !important;
  }

  /* Suppress data-label::before pseudo-elements */
  .invite-lists-page .contact-table tbody tr.contact-data-row td::before,
  .invite-lists-page .contact-table tbody tr.contact-data-row td[data-label]::before {
    content: "" !important; display: none !important;
  }

  /* Show mobile meta (stats line under name) */
  .invite-lists-page .contact-mobile-meta { display: flex !important; flex-direction: column; margin-top: 2px; }
  .invite-lists-page .contact-mobile-line {
    display: block;
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }

  /* Name cell goes to the main grid area */
  .invite-lists-page .contact-table tbody tr.contact-data-row td[data-col="name"] {
    grid-area: main !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
  }
  .invite-lists-page .contact-mobile-name { min-width: 0; }
  .invite-lists-page .contact-mobile-name strong {
    font-size: 14px;
    font-weight: 700;
    color: #172126;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
  }

  /* Actions cell goes to the actions grid area */
  .invite-lists-page .contact-table tbody tr.contact-data-row .actions-cell {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-self: start !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }
}
@media (max-width: 820px) {
  .invite-lists-page .contact-table .contact-row-actions {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .invite-lists-page .contact-table .contact-row-actions .inline-form {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
    display: block !important;
  }
  .invite-lists-page .contact-table .contact-row-actions button,
  .invite-lists-page .contact-table .contact-row-actions .button,
  .invite-lists-page .contact-table .contact-row-actions .row-action-button,
  .invite-lists-page .contact-table .contact-row-actions button.row-action-button,
  .invite-lists-page .contact-table .contact-row-actions .inline-form button {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   WARM MODAL  (replaces v5.12.16 duplicate + v5.13.38 definitive)
   Single canonical rule set.
   ============================================================ */

.warm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23,33,38,.48);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.warm-modal-backdrop[hidden] { display: none; }

.warm-modal {
  background: #fffdf8;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(23,33,38,.18);
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  animation: modalIn .18s ease;
  padding: 0;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.warm-modal h2 { margin: 0 0 6px; }

.warm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 18px; border-bottom: none;
}
.warm-modal-header h2 {
  margin: 0; font-size: 22px; font-weight: 900; color: #172126; letter-spacing: -.01em;
}
.warm-modal-close {
  background: rgba(120,90,60,.09) !important;
  border: none !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transition: background .15s, color .15s !important;
}
.warm-modal-close:hover { background: rgba(120,90,60,.18) !important; color: #374151 !important; }

.warm-modal-body {
  padding: 4px 24px 20px; display: flex; flex-direction: column; gap: 14px;
}
.warm-modal-body label {
  display: block; font-size: 12px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px;
}
.warm-modal-body input[type="text"],
.warm-modal-body textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid rgba(120,90,60,.18);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
  background: #fff; color: #172126;
  transition: border-color .15s, box-shadow .15s;
}
.warm-modal-body input[type="text"]:focus,
.warm-modal-body textarea:focus {
  outline: none; border-color: #ff7e2d;
  box-shadow: 0 0 0 3px rgba(255,126,45,.12);
}
.warm-modal-body textarea { resize: vertical; min-height: 80px; }
.warm-modal-body .error { margin: 0; font-size: 13px; padding: 8px 12px; border-radius: 8px; }

.warm-modal-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 4px 24px 22px; border-top: none;
}
.required-mark { color: #dc2626; font-weight: 700; }

/* modal-action-stack (bulk actions, guest modal) */
.modal-action-stack { display: grid; gap: 10px; margin-top: 16px; }
.modal-action-stack form { margin: 0; }
.modal-action-stack .button,
.modal-action-stack button.button { width: 100%; justify-content: center; }

@media (max-width: 480px) {
  .warm-modal { border-radius: 18px; }
  .warm-modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .warm-modal-footer .button { width: 100%; justify-content: center; text-align: center; }
}


/* ============================================================
   GUEST LIST ACTION MODAL  (replaces v5.12.17–v5.12.20)
   ============================================================ */

body.guest-list-page #guestActionsModal.warm-modal-backdrop {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000000 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15,23,42,.44) !important;
  backdrop-filter: blur(2px);
  padding: 22px !important;
}
body.guest-list-page #guestActionsModal.warm-modal-backdrop.is-open { display: flex !important; }

/* ── Guest Actions modal (ilm-modal pattern: header + stacked action body) ── */
body.guest-list-page #guestActionsModal .warm-modal.ilm-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(120,90,60,.18) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.32) !important;
  padding: 0 !important;
  position: relative !important;
  margin: 0 !important;
  transform: none !important;
  inset: auto !important;
  overflow: hidden !important;
}
/* Bottom-sheet on mobile (matches Contact Edit modal but with all 4 corners rounded) */
@media (max-width: 600px) {
  #guestActionsModal.warm-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 12px 16px !important;
  }
  body.guest-list-page #guestActionsModal .warm-modal.ilm-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 80vh !important;
    max-height: 80dvh !important;
    border-radius: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}
/* Header row: title block left, Close right */
body.guest-list-page #guestActionsModal .warm-modal-header.ilm-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(120,90,60,.10) !important;
  background: transparent !important;
}
body.guest-list-page #guestActionsModal .ilm-header-title { flex: 1 1 auto; min-width: 0; }
body.guest-list-page #guestActionsModal .ilm-header-title .eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  margin: 0 0 4px !important;
}
body.guest-list-page #guestActionsModal .ilm-header-title h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #172126 !important;
  word-break: break-word;
}
body.guest-list-page #guestActionsModal .ilm-header-actions {
  display: flex !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

/* Body: stacked action list (each row is a tappable button with label + hint) */
body.guest-list-page #guestActionsModal .ilm-action-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 16px 22px !important;
  overflow-y: auto !important;
}
body.guest-list-page #guestActionsModal .ilm-action-form {
  margin: 0 !important;
  display: contents !important;
}
body.guest-list-page #guestActionsModal .ilm-action-btn,
body.guest-list-page #guestActionsModal a.ilm-action-btn,
body.guest-list-page #guestActionsModal button.ilm-action-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: #fffaf2 !important;
  border: 1px solid rgba(120,90,60,.18) !important;
  color: #172126 !important;
  font-weight: 700 !important;
  cursor: pointer;
  margin: 0 !important;
  text-decoration: none !important;
  transition: background .12s, border-color .12s, transform .08s;
  min-height: 0 !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
body.guest-list-page #guestActionsModal .ilm-action-btn:hover {
  background: #fff5e6 !important;
  border-color: rgba(120,90,60,.30) !important;
}
body.guest-list-page #guestActionsModal .ilm-action-btn:active {
  transform: scale(.98);
}
body.guest-list-page #guestActionsModal .ilm-action-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #172126;
  line-height: 1.25;
}
/* Danger action (Remove) — outlined red */
body.guest-list-page #guestActionsModal .ilm-action-btn.ilm-action-danger {
  background: #fffaf2 !important;
  border: 1.5px solid rgba(220,38,38,.30) !important;
  color: #991b1b !important;
}
body.guest-list-page #guestActionsModal .ilm-action-btn.ilm-action-danger:hover {
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.55) !important;
}
body.guest-list-page #guestActionsModal .ilm-action-btn.ilm-action-danger .ilm-action-label { color: #991b1b; }

/* Guest table: fixed-layout col widths, no horizontal scroll */
.guest-list-page .warm-table-card { overflow: visible; }
.guest-list-page .guest-table-scroll,
.guest-list-page .warm-data-table-scroll.guest-table-scroll {
  overflow-x: hidden; max-width: 100%; padding-bottom: 0;
}
.guest-list-page .guest-data-table.simple-guest-table {
  width: 100%; max-width: 100%; min-width: 0;
  table-layout: fixed; border-collapse: separate; border-spacing: 0;
}
.guest-list-page .simple-guest-table col.guest-col-name    { width: auto; }
.guest-list-page .simple-guest-table col.guest-col-type    { width: 86px; }
.guest-list-page .simple-guest-table col.guest-col-person  { width: 96px; }
.guest-list-page .simple-guest-table col.guest-col-rsvptype{ width: 96px; }
.guest-list-page .simple-guest-table col.guest-col-invite  { width: 118px; }
.guest-list-page .simple-guest-table col.guest-col-rsvp    { width: 126px; }
.guest-list-page .simple-guest-table col.guest-col-actions { width: 86px; }

.guest-list-page .simple-guest-table th,
.guest-list-page .simple-guest-table td {
  box-sizing: border-box; width: auto; min-width: 0; max-width: none;
  padding-left: 8px; padding-right: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guest-list-page .simple-guest-table .actions-header,
.guest-list-page .simple-guest-table .actions-cell {
  width: 86px; min-width: 0; max-width: 86px;
  text-align: center; padding-left: 4px; padding-right: 4px;
}
.guest-list-page .guest-actions-trigger {
  width: 72px; max-width: 72px; min-width: 0;
  height: 28px; padding-left: 8px; padding-right: 8px; margin: 0 auto;
}
.guest-list-page .guest-name-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-list-page .guest-inline-count { display: none; }
.guest-list-page .simple-guest-table .badge { font-size: 11px; }
.guest-list-page .compact-date,
.guest-list-page .compact-shared { font-size: 11px; margin-left: 4px; }

/* Shared-family grouping rows */
/* Parent row looks identical to regular rows when collapsed; the small ▸/▾
   toggle button on the right of the name is the only visual indicator. */
.guest-list-page .shared-parent-row td { background: transparent; }
.guest-list-page .guest-name-cell .contact-mobile-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.guest-list-page .guest-name-cell .contact-mobile-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guest-list-page .guest-group-pill {
  display: inline-block !important;
  margin: 0 0 0 8px !important;
  padding: 4px 9px !important;
  border: 0 !important;
  background: #e5e7eb !important;
  color: #374151 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: capitalize !important;
  border-radius: 999px !important;
  cursor: pointer;
  line-height: 1.2 !important;
  vertical-align: middle;
  white-space: nowrap;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  transition: background .12s, color .12s;
}
.guest-list-page .guest-group-pill:hover {
  background: #d1d5db !important;
}
.guest-list-page .guest-group-pill[aria-expanded="true"] {
  background: #fed7aa !important;
  color: #9a3412 !important;
}
.guest-list-page .guest-group-pill:focus-visible {
  outline: 2px solid #ff7e2d; outline-offset: 1px;
}
.guest-list-page .guest-member-row td {
  background: rgba(255,253,248,.5); border-top: 0;
  border-bottom-color: rgba(120,90,60,.08);
}
.guest-list-page .guest-subtle-source {
  display: block; color: #64748b; font-size: 11px; line-height: 1.1;
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.guest-list-page .guest-member-row .member-name-cell {
  padding-left: 32px; position: relative;
}
.guest-list-page .guest-member-row .member-name-cell::before {
  content: ''; position: absolute; left: 16px; top: 0; bottom: 0;
  width: 2px; background: rgba(251,146,60,.26);
}
.guest-list-page .guest-member-row .member-prefix {
  color: #9a3412; width: 14px; margin-right: 3px; font-weight: 900;
}
.guest-list-page .guest-member-row .badge.muted-badge { background: #f1f5f9; }
.guest-list-page .muted-badge { background: #e5e7eb; color: #374151; }

/* Not Sent badge — soft amber/gray (different from active pending RSVP) */
.guest-list-page .badge.not-sent-badge {
  background: #fef3c7; color: #92400e;
}
.guest-list-page .badge.sent {
  background: #dbeafe; color: #1e40af;
}

/* Copy-link button — identical to Actions button */
.guest-list-page .copy-header,
.guest-list-page .copy-cell {
  width: 96px;
  text-align: center;
}
.guest-list-page .guest-copy-link-btn {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 auto !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 !important;
}
.guest-list-page .guest-copy-link-btn.is-copied {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

/* Hide mobile-meta on desktop */
.guest-list-page .contact-mobile-meta { display: none; }
.guest-list-page .contact-mobile-line { display: block; }

/* Tighten desktop row vertical rhythm */
.guest-list-page .simple-guest-table tbody tr.simple-guest-row td { padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 900px) {
  .guest-list-page .simple-guest-table col.guest-col-rsvptype{ width: 92px; }
  .guest-list-page .simple-guest-table col.guest-col-invite  { width: 92px; }
  .guest-list-page .simple-guest-table col.guest-col-rsvp    { width: 88px; }
  .guest-list-page .simple-guest-table col.guest-col-actions { width: 84px; }
  .guest-list-page .simple-guest-table th,
  .guest-list-page .simple-guest-table td { padding-left: 6px; padding-right: 6px; font-size: 12px; }
}

/* ── MOBILE ≤820px: single-card sticky-header pattern (matches Invite Lists / Groups) ── */
@media (max-width: 820px) {
  /* Hide the standalone sub-event nav block (kept on bigger screens for tab navigation) */
  .guest-list-page .guest-list-table-section { margin-top: 0 !important; }

  /* Card with no padding — header section pads itself, rows flush to edges */
  .guest-list-page .guest-list-combined-card {
    padding: 0 !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
    border-radius: 24px !important;
  }

  /* Hide the standalone event context card and event-tabs-mobile on guest-list
     mobile — event info is shown inline at the top of the unified card and
     navigation happens via the top-right + button / global topbar nav. */
  .guest-list-page .event-console-nav-shell .event-context-card,
  .guest-list-page .event-tabs-mobile {
    display: none !important;
  }
  /* Collapse the nav-shell to zero height so it doesn't take any space */
  body.guest-list-page .event-console-nav-shell {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Inline event banner at the top of the unified card */
  .guest-list-page .guest-list-mobile-event-banner {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px 16px !important;
    background: #fffdf8 !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    position: relative;
  }
  .guest-list-page .guest-list-mobile-event-banner .banner-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .guest-list-page .guest-list-mobile-event-banner .banner-info strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #172126;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .guest-list-page .guest-list-mobile-event-banner .banner-info .meta {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.3;
  }
  /* Event nav hamburger in the banner */
  .guest-list-page .banner-event-nav,
  .signups-page .banner-event-nav,
  .questions-page .banner-event-nav,
  .settings-page .banner-event-nav,
  .messages-page .banner-event-nav {
    flex: 0 0 auto;
    position: relative;
  }
  .guest-list-page .banner-event-nav summary,
  .signups-page .banner-event-nav summary,
  .questions-page .banner-event-nav summary,
  .settings-page .banner-event-nav summary,
  .messages-page .banner-event-nav summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(23, 33, 38, .92);
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
  }
  .guest-list-page .banner-event-nav summary::-webkit-details-marker,
  .signups-page .banner-event-nav summary::-webkit-details-marker,
  .questions-page .banner-event-nav summary::-webkit-details-marker,
  .settings-page .banner-event-nav summary::-webkit-details-marker,
  .messages-page .banner-event-nav summary::-webkit-details-marker { display: none; }
  .guest-list-page .banner-event-nav summary::marker,
  .signups-page .banner-event-nav summary::marker,
  .questions-page .banner-event-nav summary::marker,
  .settings-page .banner-event-nav summary::marker,
  .messages-page .banner-event-nav summary::marker { content: ''; }
  .guest-list-page .banner-event-nav .hamburger-lines,
  .signups-page .banner-event-nav .hamburger-lines,
  .questions-page .banner-event-nav .hamburger-lines,
  .settings-page .banner-event-nav .hamburger-lines,
  .messages-page .banner-event-nav .hamburger-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
  }
  .guest-list-page .banner-event-nav .hamburger-lines span,
  .signups-page .banner-event-nav .hamburger-lines span,
  .questions-page .banner-event-nav .hamburger-lines span,
  .settings-page .banner-event-nav .hamburger-lines span,
  .messages-page .banner-event-nav .hamburger-lines span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
  }
  .guest-list-page .banner-event-nav[open] nav,
  .signups-page .banner-event-nav[open] nav,
  .questions-page .banner-event-nav[open] nav,
  .settings-page .banner-event-nav[open] nav,
  .messages-page .banner-event-nav[open] nav {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fffdf8;
    border: 1px solid rgba(120,90,60,.18);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(92,64,36,.18);
    padding: 6px;
    min-width: 200px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .guest-list-page .banner-event-nav nav a,
  .signups-page .banner-event-nav nav a,
  .questions-page .banner-event-nav nav a,
  .settings-page .banner-event-nav nav a,
  .messages-page .banner-event-nav nav a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: #172126;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .guest-list-page .banner-event-nav nav a.active,
  .signups-page .banner-event-nav nav a.active,
  .questions-page .banner-event-nav nav a.active,
  .settings-page .banner-event-nav nav a.active,
  .messages-page .banner-event-nav nav a.active {
    background: rgba(255,126,45,.12);
    color: #9a3412;
  }
  .guest-list-page .banner-event-nav nav a:hover,
  .signups-page .banner-event-nav nav a:hover,
  .questions-page .banner-event-nav nav a:hover,
  .settings-page .banner-event-nav nav a:hover,
  .messages-page .banner-event-nav nav a:hover {
    background: rgba(120,90,60,.08);
  }
  /* Mobile + Add Guests button — themed cream w/ orange border */
  .guest-list-page .contacts-mobile-add-btn {
    background: #fffaf2 !important;
    color: #9a3412 !important;
    border: 1.5px solid rgba(255,126,45,.55) !important;
    box-shadow: none !important;
  }
  .guest-list-page .contacts-mobile-add-btn:hover {
    background: rgba(255,126,45,.12) !important;
    border-color: rgba(255,126,45,.85) !important;
  }

  /* Sticky wrap — banner + title + search stick together as one unit so
     the rows scroll under them. The topbar is static on mobile, so top:0. */
  .guest-list-page .guest-list-sticky-wrap {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    background: #fffdf8 !important;
    z-index: 5 !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 4px 8px -6px rgba(92,64,36,.18);
    align-self: flex-start;
    display: block !important;
    width: 100% !important;
  }

  /* Title row + search row sit together at the top with their own padding */
  .guest-list-page .guest-list-main-header,
  .guest-list-page .warm-table-tools.contact-tools-row {
    padding-left: 16px !important;
    padding-right: 16px !important;
    background: #fffdf8 !important;
  }
  .guest-list-page .guest-list-main-header {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .guest-list-page .warm-table-tools.contact-tools-row {
    padding-bottom: 12px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }
  .guest-list-page .guest-list-title-block { flex: 1 1 auto !important; min-width: 0 !important; }
  .guest-list-page .guest-list-mobile-title {
    display: block !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    font-weight: 800;
  }
  .guest-list-page .guest-mode-summary { display: none !important; }
  .guest-list-page .guest-list-header-side {
    width: auto !important;
    margin: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    padding-top: 0 !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  /* Hide the desktop "+ Add Guests" button on mobile (the small + button takes its place) */
  .guest-list-page .guest-add-open-btn { display: none !important; }

  /* Hide the inline visible-count badge and search label */
  .guest-list-page .guest-visible-badge { display: none !important; }
  .guest-list-page .warm-search-wrap > label,
  .guest-list-page .warm-table-tools > label.mobile-sort-control { display: none !important; }

  /* Force search row inline (input + Clear side-by-side) — high specificity */
  body.guest-list-page .warm-table-tools .inline-search.contact-search-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
  }
  body.guest-list-page .warm-table-tools .inline-search.contact-search-wrap input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  body.guest-list-page .warm-table-tools .inline-search.contact-search-wrap .search-clear-button {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Table card → flat single-card */
  .guest-list-page .guest-table-scroll,
  .guest-list-page .warm-data-table-scroll.guest-table-scroll { overflow-x: hidden; padding: 0 !important; border: none !important; background: transparent !important; border-radius: 0 0 24px 24px !important; }
  .guest-list-page .guest-data-table.simple-guest-table { display: block; }
  .guest-list-page .simple-guest-table colgroup { display: none; }
  .guest-list-page .simple-guest-table thead { display: none !important; }
  .guest-list-page .simple-guest-table tbody { display: block; width: 100% !important; }
  .guest-list-page .simple-guest-table th,
  .guest-list-page .simple-guest-table td {
    white-space: normal; overflow: visible; text-overflow: clip;
  }

  /* Each row: name on the left, copy + actions side by side on the right.
     Single-row 3-column grid. */
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 78px 78px !important;
    grid-template-areas: none !important;
    grid-template-rows: auto !important;
    column-gap: 6px !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdf8 !important;
    overflow: visible !important;
    min-height: 56px;
  }
  /* Override the desktop min-width: 760px on the guest table */
  body.guest-list-page.warm-data-page .simple-guest-table.guest-data-table {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Override the desktop actions-cell width: 110px (line 1518) so the cell
     stays inside its 78px grid track on mobile */
  body.guest-list-page.warm-data-page .simple-guest-table .actions-cell,
  body.guest-list-page.warm-data-page .simple-guest-table .actions-header {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* Override the desktop fixed-percent column widths (lines 1507-1516)
     so the grid layout decides cell widths */
  body.guest-list-page.warm-data-page .simple-guest-table th,
  body.guest-list-page.warm-data-page .simple-guest-table td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row:last-child {
    border-bottom: 0 !important;
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
  }

  /* Reset all td borders/padding in mobile rows */
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row > td {
    border: 0 !important;
    background: transparent !important;
  }

  /* Hide the separate badge cells — info is collapsed into mobile-meta */
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td[data-col="rsvptype"],
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td[data-col="invitation"],
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td[data-col="rsvp"] { display: none !important; }

  /* Suppress data-label::before pseudo-elements */
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td::before,
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td[data-label]::before {
    content: "" !important; display: none !important;
  }

  /* Name cell — column 1 */
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td[data-col="name"] {
    grid-column: 1 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
  }

  .guest-list-page .contact-mobile-meta {
    display: flex !important;
    flex-direction: column;
    margin-top: 2px;
  }
  .guest-list-page .contact-mobile-line {
    display: block;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .guest-list-page .contact-mobile-line .mobile-meta-rsvptype,
  .guest-list-page .contact-mobile-line .mobile-meta-invite,
  .guest-list-page .contact-mobile-line .mobile-meta-rsvp {
    display: inline-block;
  }
  .guest-list-page .contact-mobile-line .mobile-meta-invite.is-not-sent,
  .guest-list-page .contact-mobile-line .mobile-meta-rsvp.rsvp-no { color: #92400e; }
  .guest-list-page .contact-mobile-line .mobile-meta-rsvp.rsvp-yes { color: #166534; font-weight: 600; }
  .guest-list-page .contact-mobile-line .mobile-meta-rsvp.rsvp-pending { color: #6b7280; }

  .guest-list-page .guest-name-cell .contact-mobile-name {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }
  .guest-list-page .guest-name-cell .contact-mobile-name strong {
    font-size: 14px;
    font-weight: 700;
    color: #172126;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .guest-list-page .guest-subtle-source { display: none; }

  /* Group pill on mobile — slightly smaller */
  .guest-list-page .guest-group-pill {
    margin: 0 0 0 6px !important;
    padding: 1px 7px !important;
    font-size: 10px !important;
  }

  /* Copy Link → column 2 */
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row td[data-col="copy"] {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Actions → column 3 */
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row .actions-cell {
    grid-column: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  /* Both buttons sized identically, side by side */
  .guest-list-page .guest-actions-trigger,
  .guest-list-page .guest-copy-link-btn {
    width: 78px !important;
    max-width: 78px !important;
    min-width: 78px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 11px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Member row: simpler — name + status on a single line, no buttons.
     Switch to display:block (not grid) so we don't inherit the multi-row
     grid-template-areas from the generic .warm-data-row rule. */
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 4px 16px 4px 34px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(120,90,60,.06) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdf8 !important;
    line-height: 1.3 !important;
  }
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td[data-col="name"] {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    line-height: 1.3 !important;
  }
  /* Kill any pseudo-element labels that could expand height */
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td::before,
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td::after {
    content: "" !important;
    display: none !important;
  }
  /* Kill the desktop ::before vertical bar on member-name-cell that
     might be expanding the row */
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row .member-name-cell::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
  }
  .guest-list-page .guest-member-row .member-inline-status {
    margin-left: 10px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    flex-shrink: 0;
  }
  .guest-list-page .guest-member-row .member-inline-status.rsvp-yes { color: #166534; }
  .guest-list-page .guest-member-row .member-inline-status.rsvp-no { color: #92400e; }
  .guest-list-page .guest-member-row .member-prefix { color: #9a3412; }
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row .contact-mobile-name {
    width: auto !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row .contact-mobile-name strong {
    flex: 0 0 auto !important;
    line-height: 1.3 !important;
  }
  /* Hide all cells except name in member rows (max specificity to beat
     all earlier .simple-guest-row td rules) */
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td.actions-cell,
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td[data-col="copy"],
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td[data-col="rsvptype"],
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td[data-col="invitation"],
  body.guest-list-page .simple-guest-table tbody tr.simple-guest-row.guest-member-row td[data-col="rsvp"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────
     OVERRIDE: nullify the generic .warm-data-page mobile rules
     (lines 4562-4615) that compete with our guest-list grid layout.
     Without these overrides:
       - rows get extra borders/shadow/margin (boxed look)
       - scroll container gets a max-height that makes the card end mid-page
       - rows get conflicting grid-template-areas
       - cells get display:block which kills the 3-col grid
     ───────────────────────────────────────────────────────────── */
  body.guest-list-page.warm-data-page .warm-data-table-scroll {
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: visible !important;
  }
  body.guest-list-page.warm-data-page .simple-guest-table,
  body.guest-list-page.warm-data-page .simple-guest-table tbody {
    display: block !important;
    width: 100% !important;
  }
  body.guest-list-page.warm-data-page .simple-guest-table tr.simple-guest-row {
    /* Force OUR layout (already set above), but nullify the generic
       warm-data-row card chrome */
    border: 0 !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: #fffdf8 !important;
    grid-template-areas: none !important;
  }
  body.guest-list-page.warm-data-page .simple-guest-table tr.simple-guest-row:last-child {
    border-bottom: 0 !important;
  }
  /* Cells inside guest rows: kill the generic display:block + width:100%
     from .warm-data-page rules. We DON'T blanket-reset grid-area because
     our explicit grid-column rules above need to win — instead, we
     specifically nuke the auto-generated grid-area assignments by
     re-asserting the column on each visible cell. */
  body.guest-list-page.warm-data-page .simple-guest-table tr.simple-guest-row td {
    width: auto !important;
    margin-right: 0 !important;
  }
  /* Re-assert the 3-column placement (overrides any leftover grid-area) */
  body.guest-list-page.warm-data-page .simple-guest-table tr.simple-guest-row td[data-col="name"] {
    grid-area: auto !important;
    grid-column: 1 !important;
  }
  body.guest-list-page.warm-data-page .simple-guest-table tr.simple-guest-row td[data-col="copy"] {
    grid-area: auto !important;
    grid-column: 2 !important;
  }
  body.guest-list-page.warm-data-page .simple-guest-table tr.simple-guest-row td.actions-cell {
    grid-area: auto !important;
    grid-column: 3 !important;
  }
  /* Nullify the data-label::before "Guest:" / "Actions:" labels from
     the generic warm-data-page rule */
  body.guest-list-page.warm-data-page .simple-guest-table td[data-label]::before {
    content: "" !important;
    display: none !important;
  }
}

@media (max-width: 520px) {
  .guest-list-page .simple-guest-table tbody tr.simple-guest-row { grid-template-columns: minmax(0,1fr) 70px 70px !important; }
  .guest-list-page .guest-actions-trigger,
  .guest-list-page .guest-copy-link-btn { width: 70px !important; max-width: 70px !important; min-width: 70px !important; font-size: 10px !important; }
}
@media (max-width: 520px) {
  body.guest-list-page #guestActionsModal .modal-action-stack { grid-template-columns: 1fr !important; }
  body.guest-list-page #guestActionsModal #guestModalInviteButton,
  body.guest-list-page #guestActionsModal #guestModalDeleteForm button { grid-column: span 1 !important; }
}


/* ============================================================
   MAJOR PAGE NAV SHELL  (replaces v5.13.16–v5.13.19)
   Shared sticky header: Events, Contacts, Templates pages.
   ============================================================ */

.major-page-console,
.host-body .container.major-page-console,
.host-body .container.event-console.major-page-console,
.host-body > .container.major-page-console,
.host-body > .container.event-console.major-page-console {
  padding-top: 18px;
  margin-top: 0;
}

.major-page-nav-shell {
  position: sticky;
  top: 72px;
  z-index: 160;
  margin: 0 0 18px;
  padding: 12px;
  border-radius: 28px;
  background: var(--host-card,#fffdf8);
  border: 1px solid rgba(120,90,60,.12);
  box-shadow: 0 16px 38px rgba(92,64,36,.12);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
}

.major-page-title { min-width: 0; padding: 8px 10px; }
.major-page-title .eyebrow { margin: 0 0 4px; }
.major-page-title h1 { margin: 0 0 4px; font-size: clamp(28px,4vw,44px); letter-spacing: -.045em; }
.major-page-title .meta { margin: 0; max-width: 720px; line-height: 1.45; }

.major-page-actions {
  display: flex; gap: 10px; align-items: center;
  justify-content: flex-end; flex-wrap: wrap;
}
.major-page-actions .button { margin-top: 0; white-space: nowrap; }
.major-page-actions .builder-hero-panel.compact {
  min-width: 118px; padding: 12px 14px; border-radius: 18px; margin: 0;
}
.major-page-actions .builder-hero-panel.compact strong { font-size: 24px; line-height: 1; }
.major-page-actions .builder-hero-panel.compact p { margin: 2px 0 0; font-size: 12px; }

/* Old pill-style tabs hidden — contact pages use underline tab bars */
.major-page-tabs,
.major-page-tabs-desktop,
.major-page-tabs-mobile { display: none !important; }

/* Event dashboard controls */
.consumer-dashboard .event-dashboard-controls {
  position: sticky; top: 214px; z-index: 150;
  background: var(--host-card,#fffdf8);
  box-shadow: 0 14px 34px rgba(92,64,36,.11);
}
.consumer-dashboard .event-card-list { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .major-page-console,
  .host-body .container.major-page-console,
  .host-body .container.event-console.major-page-console,
  .host-body > .container.major-page-console,
  .host-body > .container.event-console.major-page-console { padding-top: 18px; margin-top: 0; }
  .major-page-nav-shell {
    top: 62px; grid-template-columns: minmax(0,1fr) auto;
    align-items: center; gap: 10px;
    margin: 0 0 8px; padding: 8px 10px; border-radius: 22px;
  }
  .major-page-title { padding: 0; }
  .major-page-title h1 {
    font-size: 26px; line-height: 1.1; margin: 0 0 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .major-page-title .meta {
    display: block; font-size: 12px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .major-page-actions { flex-wrap: nowrap; }
  .major-page-actions .builder-hero-panel.compact { display: none; }
  .consumer-dashboard .event-dashboard-controls { top: 132px; }
}
@media (max-width: 720px) {
  .host-body > .container.major-page-console,
  .host-body > .container.event-console.major-page-console,
  .consumer-dashboard.major-page-console { padding-top: 14px; margin-top: 0; }
  .major-page-nav-shell { top: 60px; grid-template-columns: 1fr; align-items: stretch; }
  .major-page-actions { justify-content: stretch; }
  .major-page-actions .button { width: 100%; text-align: center; }
  .consumer-dashboard .event-dashboard-controls { top: 154px; }
}
@media (max-width: 520px) {
  .major-page-nav-shell { top: 58px; border-radius: 19px; padding: 8px; }
  .major-page-title h1 { font-size: 22px; }
  .major-page-title .meta { font-size: 11px; }
  .consumer-dashboard .event-dashboard-controls { top: 160px; }
}

.page-status-card:empty { display: none; }
.page-status-card { margin-bottom: 18px; }


/* ============================================================
   GLOBAL NAV Z-INDEX  (v5.13.35)
   Nav dropdown always above sticky cards.
   ============================================================ */

.global-nav-mobile  { z-index: 9000 !important; }
.global-nav-mobile nav { z-index: 9001 !important; }
.app-topbar { z-index: 9000 !important; isolation: isolate; }


/* ============================================================
   EVENT NAV MOBILE SUMMARY  (replaces v5.13.35–v5.13.36)
   Active section name left of hamburger on standalone pages.
   event-console-nav-shell stays icon-only.
   ============================================================ */

.event-tabs-mobile:not(.event-console-nav-shell .event-tabs-mobile) summary {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
}
.event-tabs-mobile summary strong {
  display: block !important; order: 1 !important;
  justify-self: start !important; font-size: 13px !important;
  color: #9a3412 !important; font-weight: 900 !important;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.event-tabs-mobile summary .hamburger-lines { order: 2 !important; flex: 0 0 auto !important; }
/* Keep event-console-nav-shell compact: icon-only */
.event-console-nav-shell .event-tabs-mobile summary { grid-template-columns: auto !important; }
.event-console-nav-shell .event-tabs-mobile summary strong { display: none !important; }


/* ============================================================
   DASHBOARD EVENT CARDS  (replaces v5.13.33 + v5.13.35 + v5.13.36)
   3 stacked action buttons at all widths.
   ============================================================ */

.consumer-dashboard .event-card {
  grid-template-columns: 150px minmax(0,1fr) 130px;
  align-items: start;
}
.consumer-dashboard .event-card-actions {
  width: 130px; display: grid; grid-template-columns: 1fr; gap: 6px; align-self: center;
}
.consumer-dashboard .event-card-actions .button {
  width: 100%; min-height: 32px; padding: 6px 8px; font-size: 12px;
  text-align: center; justify-content: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 980px) {
  .consumer-dashboard .event-card { grid-template-columns: 92px minmax(0,1fr) 108px; align-items: start; }
  .consumer-dashboard .event-art { width: 86px; height: 58px; min-height: 58px; max-height: 58px; flex-basis: 86px; }
  .consumer-dashboard .event-card-actions { grid-column: auto; width: 108px; gap: 6px; }
  .consumer-dashboard .event-card-actions .button { width: 100%; min-height: 30px; padding: 5px 8px; font-size: 11.5px; }
}
@media (max-width: 720px) {
  .consumer-dashboard .event-card { grid-template-columns: 72px minmax(0,1fr) 90px; gap: 10px; padding: 12px; }
  .consumer-dashboard .event-art { width: 66px; height: 44px; min-height: 44px; max-height: 44px; border-radius: 14px; flex-basis: 66px; }
  .consumer-dashboard .event-card-main { min-width: 0; }
  .consumer-dashboard .event-card h2 { font-size: 14px; line-height: 1.2; margin-bottom: 3px; }
  .consumer-dashboard .event-card h2 .badge { font-size: 10px; padding: 2px 6px; }
  .consumer-dashboard .event-date-line { font-size: 11px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  .consumer-dashboard .event-mini-stats { display: none !important; }
  .consumer-dashboard .event-card-actions { width: 90px; gap: 5px; align-self: start; padding-top: 2px; }
  .consumer-dashboard .event-card-actions .button { min-height: 28px; padding: 4px 6px; font-size: 11px; }
}
@media (max-width: 430px) {
  .consumer-dashboard .event-card { grid-template-columns: 56px minmax(0,1fr) 80px; gap: 8px; padding: 10px; }
  .consumer-dashboard .event-art { width: 50px; height: 36px; min-height: 36px; max-height: 36px; border-radius: 12px; flex-basis: 50px; }
  .consumer-dashboard .event-card-actions { width: 80px; }
  .consumer-dashboard .event-card-actions .button { font-size: 10px; min-height: 26px; }
}




/* Invite Lists page: sticky header inside card, list scrolls under */
.invite-list-sticky-header {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: #fffdf8;
  border-radius: 22px 22px 0 0;
  padding: 0 0 12px;
  margin-bottom: 0;
}
@media (max-width: 1100px) { .invite-list-sticky-header { top: 62px; } }
@media (max-width: 720px)  { .invite-list-sticky-header { top: 60px; } }

.invite-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding-top: 4px;
}
.invite-list-title-block { min-width: 0; flex: 1 1 auto; }
.invite-list-title-block h2 { margin: 0 0 2px; }
.invite-list-title-block .meta { margin: 0; }
.invite-list-create-btn { flex: 0 0 auto; margin: 0; align-self: center; }

.invite-list-sticky-header .warm-table-tools { margin-bottom: 0; }

/* Invite List Edit Modal (ILM) */
.ilm-modal {
  max-width: 860px !important;
  width: 100% !important;
  height: 80vh !important;
  height: 80dvh !important;
  max-height: 700px !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fffdf8 !important;
  padding: 0 !important;
}

/* Header */
.ilm-header {
  border-bottom: 1px solid rgba(120,90,60,.10);
}
.ilm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Eyebrow — hide on mobile to reduce header clutter in create mode */
@media (max-width: 680px) { .ilm-eyebrow-desktop-only { display: none; } }

/* "(optional)" hint in field labels — smaller and lighter than the label itself */
.ilm-optional-hint { font-size: 10px; font-weight: 400; color: #9ca3af; text-transform: none; letter-spacing: 0; }

/* Settings panel */
.ilm-settings-panel {
  background: rgba(247,241,234,.7);
  border-bottom: 1px solid rgba(120,90,60,.10);
  padding: 10px 20px;
  flex-shrink: 0;
}
.ilm-settings-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Each row: label left, input right */
.ilm-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ilm-field-row .ilm-field-label {
  flex: 0 0 80px;
  text-align: right;
  margin: 0;
}
.ilm-field-row .ilm-field-input {
  flex: 1 1 auto;
  min-width: 0;
}
/* Mobile: keep horizontal layout, narrower label column */
@media (max-width: 680px) {
  .ilm-field-row { gap: 8px; }
  .ilm-field-row .ilm-field-label { flex: 0 0 56px; font-size: 10px; }
}

/* Desktop two-column body */
.ilm-desktop-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* Left panel — members */
.ilm-left-panel {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid rgba(120,90,60,.10);
  display: flex;
  flex-direction: column;
  background: rgba(247,241,234,.4);
  overflow: hidden;
}
.ilm-panel-header {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  padding: 12px 16px 4px;
  flex-shrink: 0;
}
.ilm-left-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px 16px;
  min-height: 0;
}

/* Right panel — picker */
.ilm-right-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.ilm-right-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 16px 16px;
  min-height: 0;
}

/* Mobile body — hidden on desktop */
.ilm-mobile-body { display: none; }
.ilm-mobile-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px 16px;
  min-height: 0;
}

/* Tab bar */
.ilm-tabs {
  display: flex;
  border-bottom: 1px solid rgba(120,90,60,.12);
  padding: 0 8px;
  gap: 0;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: #fff;
}
.ilm-tabs::-webkit-scrollbar { display: none; }
.ilm-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
  transition: color .15s, border-color .15s;
}
.ilm-tab:hover { color: #374151; }
.ilm-tab.is-active { color: #172126; border-bottom-color: #ff7e2d; }

/* Loading */
.ilm-loading {
  text-align: center;
  color: #9ca3af;
  padding: 40px 0;
  font-size: 14px;
}

/* Section labels */
.ilm-section-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  margin-bottom: 8px;
}

/* Member rows */
.ilm-member-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ilm-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(120,90,60,.10);
  border-radius: 10px;
}
.ilm-member-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.ilm-member-info strong {
  font-size: 13px;
  color: #172126;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ilm-meta {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ilm-empty {
  font-size: 13px;
  color: #9ca3af;
  margin: 8px 0;
}

/* Search input */
.ilm-search {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(120,90,60,.18);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  background: #fff;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.ilm-search:focus {
  outline: none;
  border-color: #ff7e2d;
  box-shadow: 0 0 0 3px rgba(255,126,45,.12);
}

/* Pick list */
.ilm-pick-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ilm-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(120,90,60,.10);
  border-radius: 10px;
  background: #fff;
  transition: background .1s;
}
.ilm-pick-row.is-added {
  background: rgba(247,241,234,.7);
  border-color: rgba(120,90,60,.16);
}

/* Settings fields */
.ilm-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.ilm-field-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(120,90,60,.18);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.ilm-field-input:focus {
  outline: none;
  border-color: #ff7e2d;
  box-shadow: 0 0 0 3px rgba(255,126,45,.12);
}

/* Mobile: switch to single-column tabbed layout */
@media (max-width: 680px) {
  .ilm-modal {
    height: 92vh !important;
    max-height: 92vh !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    max-width: calc(100vw - 20px) !important;
  }
  .ilm-desktop-body { display: none !important; }
  .ilm-mobile-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .ilm-mobile-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px 16px;
    min-height: 0;
  }
  .ilm-settings-panel { padding: 10px 14px; }
  .ilm-settings-field { min-width: 0; width: 100%; }
  .ilm-tab { padding: 9px 10px; font-size: 12px; }
}

/* ── ILM "create" mode — hide empty member panels until group is saved ── */
/* In create mode there are no members yet — hide the Members tab on
   mobile and the Members panel on desktop. The Add Contacts picker stays
   visible so the user can pre-select contacts before clicking Create. */
.ilm-modal.is-creating .ilm-left-panel { display: none !important; }
.ilm-modal.is-creating .ilm-right-panel { width: 100% !important; border-left: 0 !important; }
.ilm-modal.is-creating [data-cgm-tab="members"],
.ilm-modal.is-creating [data-mobile-tab="members"] { display: none !important; }
.ilm-modal.is-creating .ilm-settings-panel { border-bottom: 0; }

/* ── Desktop actions footer — Duplicate + Delete pinned at the
   bottom of the modal on desktop. Hidden on mobile (≤820px) since
   those actions live in the mobile Actions tab instead. Right-
   aligned forms with a faint top border to separate it from the
   body content above. */
.ilm-desktop-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(120,90,60,.10);
  background: rgba(247,241,234,.5);
  flex-shrink: 0;
}
.ilm-desktop-actions .inline-form { display: inline-flex; margin: 0; }
.ilm-desktop-actions .inline-form button { margin-top: 0 !important; }

/* Subtle styling on the mobile Actions tab so it reads as a
   meta/utility tab rather than peer content. */
.ilm-tab.ilm-tab-actions { color: #6b7280; }
.ilm-tab.ilm-tab-actions.is-active { color: #9a3412; }

@media (max-width: 820px) {
  .ilm-desktop-actions { display: none !important; }
}
@media (max-width: 680px) {
  .ilm-modal.is-creating .ilm-settings-panel { padding: 14px 16px 18px !important; }
}

/* ── Add Guests modal body ────────────────────────────────────
   Modal is flex column; body flex-grows to fill remaining height
   and scrolls. Each panel's table sits inside. */
.add-guest-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 18px;
  background: rgba(247,241,234,.4);
}
.add-guest-modal-body .ilm-right-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fffdf8;
  padding: 8px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(120,90,60,.10);
}
.add-guest-modal-body .guest-add-table-scroll {
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
}

/* ── cgm-style pill rows (matches Group/Family edit modal) ── */
.add-guest-modal-body .guest-add-cgm-style {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
}
.add-guest-modal-body .guest-add-cgm-style thead { display: none !important; }
.add-guest-modal-body .guest-add-cgm-style tbody { background: transparent !important; }
.add-guest-modal-body .guest-add-cgm-style tr.guest-add-source-row {
  background: #ffffff !important;
  border: 1px solid rgba(120,90,60,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
.add-guest-modal-body .guest-add-cgm-style tr.guest-add-source-row > td {
  padding: 12px 14px !important;
  border: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
}
.add-guest-modal-body .guest-add-cgm-style tr.guest-add-source-row > td:first-child {
  border-radius: 12px 0 0 12px !important;
}
.add-guest-modal-body .guest-add-cgm-style tr.guest-add-source-row > td.actions-cell {
  border-radius: 0 12px 12px 0 !important;
  text-align: right !important;
  width: auto !important;
}
.add-guest-modal-body .guest-add-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.add-guest-modal-body .guest-add-row-info strong {
  font-size: 15px;
  font-weight: 700;
  color: #172126;
  line-height: 1.25;
}
.add-guest-modal-body .guest-add-row-info .guest-add-row-meta {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
}
/* Add button — solid dark pill (matches cgm "contact-primary-action") */
.add-guest-modal-body .guest-add-cgm-style .row-action-button {
  background: #172126 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.add-guest-modal-body .guest-add-cgm-style .row-action-button:hover {
  background: #0f1419 !important;
}
/* When toggled to Remove (after add) — red pill */
.add-guest-modal-body .guest-add-cgm-style .row-action-button.guest-add-undo-inline,
.add-guest-modal-body .guest-add-cgm-style .row-action-button.guest-add-undo-inline:hover,
.add-guest-modal-body .guest-add-cgm-style .row-action-button.guest-add-undo-inline:focus {
  background: #dc2626 !important;
  border: 0 !important;
  color: #ffffff !important;
}
.add-guest-modal-body .guest-add-cgm-style .row-action-button.guest-add-undo-inline:hover {
  background: #b91c1c !important;
}
/* Highlight added rows softly so user sees which are pending in this session */
.add-guest-modal-body .guest-add-cgm-style tr.guest-add-row-added {
  background: #fff8ee !important;
  border-color: rgba(255,126,45,.30) !important;
}

@media (max-width: 680px) {
  .add-guest-modal-body { padding: 12px 14px 16px; }

  /* Mobile: rows stay as cgm pill rows but go full width with smaller padding */
  .add-guest-modal-body .guest-add-cgm-style tr.guest-add-source-row > td { padding: 10px 12px !important; }
  .add-guest-modal-body .guest-add-row-info strong { font-size: 14px; }
  .add-guest-modal-body .guest-add-row-info .guest-add-row-meta { font-size: 12px; }

  /* Old mobile-stack rules — DISABLED for cgm-style tables; rows already render as pills */
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style thead { display: none !important; }
  /* Don't apply the flex-row override to cgm-style tables — let them keep tr/td layout so border-radius works */
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style,
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style tbody { display: table !important; }
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style tbody { display: table-row-group !important; }
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style tr.guest-add-source-row {
    display: table-row !important;
    flex-direction: initial !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style tr.guest-add-source-row > td {
    display: table-cell !important;
  }
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style tr.guest-add-source-row > td::before,
  #addGuestsModal .guest-add-source-table.guest-add-cgm-style tr.guest-add-source-row > td::after {
    display: none !important;
    content: none !important;
  }
}

/* ILM header buttons — unified style */
.ilm-hdr-btn {
  margin: 0 !important;
  padding: 0 13px !important;
  height: 32px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s, color .15s, opacity .2s !important;
  box-shadow: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  user-select: none !important;
}
/* Revert/Close */
.ilm-revert-btn {
  background: rgba(120,90,60,.08) !important;
  color: #6b7280 !important;
}
.ilm-revert-btn:hover {
  background: rgba(120,90,60,.16) !important;
  color: #374151 !important;
}
/* Save — gray when no changes, green when changes pending, green+check when saved */
.ilm-save-btn {
  background: #d1d5db !important;
  color: #9ca3af !important;
  pointer-events: none !important;
}
.ilm-save-btn[data-active="1"] {
  background: #16a34a !important;
  color: #fff !important;
  pointer-events: auto !important;
}
.ilm-save-btn[data-active="saved"] {
  background: #15803d !important;
  color: #fff !important;
  pointer-events: none !important;
}

/* Left panel sticky search */
.ilm-left-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(247,241,234,.97);
  padding: 8px 12px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(120,90,60,.08);
}
.ilm-left-sticky .ilm-search { margin-bottom: 0; }

/* Right panel sticky search */
.ilm-right-sticky {
  flex-shrink: 0;
  background: rgba(255,253,248,.97);
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(120,90,60,.08);
}
.ilm-right-sticky .ilm-search { margin-bottom: 0; }

/* ILM header title with eyebrow */
.ilm-header-title { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ilm-header-title h2 { margin: 0; }

/* ── Contact Edit Modal ───────────────────────────────────── */
.cem-modal {
  max-width: 540px !important;
  width: min(540px, calc(100vw - 32px)) !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
@media (max-width: 600px) {
  /* Scope bottom-sheet only to the cem backdrop, not all modals */
  #cemModal.warm-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .cem-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    /* Shrink with keyboard using dvh */
    max-height: 85vh !important;
    max-height: 85dvh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}
.cem-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cem-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
/* Ensure all direct children of scroll can't overflow */
.cem-scroll > * {
  max-width: 100%;
  box-sizing: border-box;
}
.cem-section { margin-bottom: 18px; }
.cem-section:last-child { margin-bottom: 0; }
/* When the deactivate section follows another section, the notes/etc.
   section above doesn't need its full 18px breathing room — the divider
   provides the visual break, so collapse the gap. */
.cem-section:has(+ .cem-deactivate-section) { margin-bottom: 0; }
.cem-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cem-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
}
/* 2-col grid — collapses to 1-col on narrow screens */
.cem-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 460px) {
  .cem-row-2 { grid-template-columns: 1fr; }
}
.cem-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 4px;
  margin-top: 0;
}
.cem-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(120,90,60,.18);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #172126;
}
.cem-input:focus { outline: none; border-color: #ff7e2d; }
textarea.cem-input { resize: vertical; min-height: 70px; }

/* Email / phone method rows — flex: fields left, Remove button right */
.cem-method-row {
  background: rgba(247,241,234,.5);
  border: 1px solid rgba(120,90,60,.10);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}
/* Left side: input + dropdowns stacked */
.cem-method-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cem-method-main { }
.cem-method-main .cem-input { width: 100%; }

/* 3 dropdowns on one row */
.cem-method-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cem-input-sm {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 4px;
  border: 1px solid rgba(120,90,60,.18);
  border-radius: 6px;
  font-size: 11px;
  background: #fff;
  color: #374151;
}

/* Remove button: right side, vertically centered */
.cem-remove-btn {
  flex-shrink: 0 !important;
  align-self: center !important;
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #9a3412 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.cem-remove-btn:hover { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #991b1b !important; }

/* Validation */
.cem-input.is-invalid { border-color: #ef4444 !important; background: #fff8f8 !important; }
.cem-field-error { font-size: 11px; color: #dc2626; margin-top: 3px; display: none; }
.cem-field-error.is-visible { display: block; }

/* Role/relationship input inside group member rows */
.cgm-role-input {
  width: 100%;
  font-size: 11px;
  padding: 3px 7px;
  margin-top: 4px;
  min-height: 0;
  border-radius: 6px;
  border: 1px solid rgba(120,90,60,.18);
  background: rgba(255,255,255,.7);
  color: #6b7280;
}
.cgm-role-input:focus {
  outline: none;
  border-color: #ff7e2d;
  background: #fff;
  color: #172126;
}

/* ══ Events Dashboard Table ════════════════════════════════════ */
.events-table-card {
  padding: 8px 16px 16px;
  margin-top: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  border-top: none !important;
}

/* Outer card: always one unified card */
.events-table-card-outer {
  overflow: visible;
  padding: 0 !important;
}

.events-sticky-header {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: #fffdf8;
  border-bottom: 1px solid rgba(120,90,60,.08);
  border-radius: 24px 24px 0 0;
  padding: 16px 20px 12px;
  margin-bottom: 0;
}
@media (max-width: 1100px) { .events-sticky-header { top: 62px; } }
@media (max-width: 720px)  { .events-sticky-header { top: 60px; } }

/* Filter tabs */
.events-header-row { margin-bottom: 12px; }
.events-tab-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.evt-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(120,90,60,.15);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all .12s;
}
.evt-tab:hover { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.evt-tab.is-active { background: #172126 !important; color: #fff !important; border-color: #172126 !important; }
.evt-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 4px;
  color: inherit;
}
.evt-tab.is-active .evt-tab-count { background: rgba(255,255,255,.25); }
.evt-tab:not(.is-active) .evt-tab-count { background: rgba(120,90,60,.1); color: #6b7280; }

/* Search + sort row */
.events-tools-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.events-search-wrap { flex: 1 1 auto; }
.events-sort-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.events-sort-wrap select {
  padding: 6px 10px;
  border: 1px solid rgba(120,90,60,.18);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: #172126;
}

/* Table scroll container */
.events-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid rgba(120,90,60,.14);
  border-radius: 14px;
  background: #fffdf8;
  margin-top: 4px;
}

/* Table headers */
.events-dashboard-page .events-table thead th {
  background: #fff9f4;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  font-weight: 700;
  white-space: nowrap;
  padding: 10px 12px;
}
.events-dashboard-page .events-table th,
.events-dashboard-page .events-table td {
  border-bottom: 1px solid rgba(120,90,60,.08);
}
.events-dashboard-page .events-table th.sortable { cursor: pointer; user-select: none; }
.events-dashboard-page .events-table th.sortable::after { content: ' ↕'; opacity: .45; font-size: 11px; }
.events-dashboard-page .events-table th.sorted.sort-asc::after  { content: ' ↑'; opacity: .9; }
.events-dashboard-page .events-table th.sorted.sort-desc::after { content: ' ↓'; opacity: .9; }

/* Table layout */
.events-table { table-layout: fixed; min-width: 680px; margin-top: 0; }
.events-table th[data-sort="name"], .events-table td.evt-name-cell { width: auto; min-width: 200px; text-align: left; padding-left: 14px; }
.events-table th[data-sort="status"] { width: 110px; }
.events-table th[data-sort="guests"],
.events-table th[data-sort="responses"],
.events-table th[data-sort="attending"] { width: 80px; text-align: center; }
.events-table td.numeric-cell { text-align: center; }
.events-table .actions-header, .events-table .actions-cell { width: 110px; }

/* Name cell: art + text side by side */
.evt-name-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Small square art thumbnail — all dimensions locked with !important to beat .event-art rules */
.evt-art {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  min-height: 0 !important;
  max-height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f97316, #fb7185);
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  position: relative !important;
}
.evt-art img {
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  max-width: 48px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
/* When the source is a composited invite card (1.9:1 aspect),
   cropping it to a 48×48 square via object-fit: cover would
   show only the middle slice of the artwork — usually unrecognisable.
   For card-image thumbnails we letterbox with contain instead and
   sit the image on a soft background tint so the letterbox bars
   don't read as broken. The result is a tiny but recognisable
   preview of the actual card. */
.evt-art.has-card-image {
  background: #f5ede2 !important;
}
.evt-art.has-card-image img {
  object-fit: contain !important;
  background: #f5ede2 !important;
}
.evt-art::after { display: none !important; }
.evt-art span { font-size: 18px !important; font-weight: 900 !important; z-index: 1; }
/* Theme colours */
.evt-art.theme-chip-modern     { background: linear-gradient(135deg, #60a5fa, #818cf8); }
.evt-art.theme-chip-elegant    { background: linear-gradient(135deg, #92400e, #d97706); }
.evt-art.theme-chip-celebration{ background: linear-gradient(135deg, #fb923c, #f43f5e); }
.evt-art.theme-chip-minimal    { background: linear-gradient(135deg, #374151, #6b7280); }
.evt-art.theme-chip-garden     { background: linear-gradient(135deg, #16a34a, #84cc16); }
.evt-art.theme-chip-night      { background: linear-gradient(135deg, #111827, #4c1d95); }
.evt-art.theme-chip-formal     { background: linear-gradient(135deg, #1f2937, #a16207); }
.evt-art.theme-chip-fun        { background: linear-gradient(135deg, #ec4899, #f97316); }

.evt-name-text { min-width: 0; flex: 1 1 auto; }
/* Clickable event title */
.evt-title-link {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #172126;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.evt-title-link:hover { color: #9a3412; text-decoration: underline; }
.evt-meta { display: block; font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Row hover */
.events-dashboard-page .events-table tbody tr.evt-row { transition: background .1s; cursor: default; }
.events-dashboard-page .events-table tbody tr.evt-row:hover { background: rgba(255,126,45,.04); }

/* Actions: horizontal row */
.events-table .contact-row-actions { flex-direction: row; flex-wrap: nowrap; gap: 5px; }

/* Mobile controls: hidden on wider screens */
.evt-mobile-controls { display: none; }

/* Mobile-only in-card header: hidden on desktop */
.evt-card-mobile-header { display: none; }

/* ── Mobile ≤820px: everything in one card ──────────────── */
@media (max-width: 820px) {
  /* Hide the standalone nav shell card on mobile */
  .events-dashboard-page .major-page-nav-shell { display: none !important; }

  /* Outer card becomes the one true card — overflow visible so sticky works */
  .events-table-card-outer {
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 24px !important;
    margin-top: 0 !important;
  }
  /* Table card clips rows to rounded bottom corners */
  .events-table-card {
    overflow: hidden !important;
    border-radius: 0 0 22px 22px !important;
  }
  /* In-card mobile header — inside sticky block */
  .evt-card-mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 10px;
  }
  .evt-card-mobile-header h2 { margin: 0; font-size: 22px; }

  /* Sticky header with rounded top corners */
  .events-sticky-header {
    position: sticky !important;
    top: 60px !important;
    border-radius: 22px 22px 0 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 14px 10px !important;
    background: #fffdf8 !important;
    border-bottom: 1px solid rgba(120,90,60,.08) !important;
  }

  .events-table-card {
    padding: 0 12px 12px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* Hide desktop tab pills + sort row */
  .evt-desktop-controls { display: none !important; }

  /* Show mobile single-row controls */
  .evt-mobile-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
  }
  /* Filter dropdown */
  .evt-mobile-filter-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(120,90,60,.18);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    color: #172126;
  }
  /* Search + clear inline */
  .evt-mobile-search {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .evt-mobile-search input {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid rgba(120,90,60,.18);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
  }
  .evt-mobile-search .secondary {
    flex-shrink: 0;
  }

  /* Compact page nav on mobile — hide description */
  .events-dashboard-page .major-page-nav-shell .meta { display: none; }
  /* Make Create Invitation button compact */
  .events-dashboard-page .major-page-nav-shell .button.primary-pill {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  .events-tools-row { flex-wrap: wrap; }
  .events-search-wrap { min-width: 0; }

  /* Table scroll */
  .events-table-scroll {
    overflow: hidden;
    border: none;
    background: transparent;
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
  }
  .events-table { table-layout: auto !important; min-width: 0 !important; display: block; }
  .events-table thead { display: none !important; }
  .events-table tbody { display: block; width: 100%; }

  /* Each row: tappable, name left, Overview button right */
  .events-table tbody tr.evt-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 90px !important;
    grid-template-areas: "main actions" !important;
    align-items: center !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    overflow: visible !important;
    cursor: pointer !important;
  }
  .events-table tbody tr.evt-row td::before { content: "" !important; display: none !important; }

  /* Name cell takes main area, show date below */
  .events-table tbody tr.evt-row td.evt-name-cell {
    grid-area: main !important;
    padding: 0 !important; border: 0 !important;
    align-self: center !important;
  }
  .evt-name-cell strong { font-size: 14px; }
  .evt-meta { white-space: normal; }

  /* Hide stat columns */
  .events-table tbody tr.evt-row td:nth-child(2),
  .events-table tbody tr.evt-row td:nth-child(3),
  .events-table tbody tr.evt-row td:nth-child(4),
  .events-table tbody tr.evt-row td:nth-child(5) { display: none !important; }

  /* Actions: stacked in right column */
  .events-table tbody tr.evt-row td.actions-cell {
    grid-area: actions !important;
    padding: 0 !important; border: 0 !important;
    overflow: visible !important;
    align-self: center !important;
  }
  .events-table .contact-row-actions {
    flex-direction: column !important;
    gap: 5px !important;
    align-items: stretch !important;
  }
  .events-table .contact-row-actions .button {
    width: 90px !important; min-width: 90px !important;
    font-size: 11px !important; height: 30px !important;
    padding: 0 4px !important; text-align: center !important;
    justify-content: center !important; margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Mobile: single Manage button fills the column */
  .events-table .contact-row-actions .button { width: 90px !important; min-width: 90px !important; }

  /* Row selected state for display:grid[style*=none] */
  .events-table tbody tr.evt-row[style*="display: none"] { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   Sign-up Items page (event-signups.php)
   Mirrors the Guest List unified-card pattern: sticky title + Add Item
   button, list of clean white pill rows below, mobile bottom-sheet modal.
   ════════════════════════════════════════════════════════════════════ */
/* Mobile banner is hidden by default; only shown in mobile media query below */
.signups-page .guest-list-mobile-event-banner { display: none; }

.signups-page .signups-combined-card {
  padding: 0;
  overflow: visible;
  border-radius: 24px;
}
.signups-page .signups-sticky-wrap {
  background: #fffdf8;
  border-radius: 24px 24px 0 0;
}
.signups-page .signups-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
}
.signups-page .signups-title-block { flex: 1 1 auto; min-width: 0; }
.signups-page .signups-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #172126;
}
.signups-page .signups-header-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.signups-page .signup-add-open-btn {
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255,126,45,.55) !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.signups-page .signup-add-open-btn:hover {
  background: rgba(255,126,45,.10) !important;
  border-color: rgba(255,126,45,.85) !important;
}

/* Item list */
.signups-page .signups-list-section { padding: 16px 24px 22px; }
.signups-page .signups-empty { color: #6b7280; text-align: center; padding: 24px 8px; }
.signups-page .signups-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signups-page .signups-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.12);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.signups-page .signups-row-info { flex: 1 1 auto; min-width: 0; }
.signups-page .signups-row-info strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #172126;
  line-height: 1.25;
}
.signups-page .signups-row-meta {
  display: block;
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.3;
}
.signups-page .signups-claim-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.signups-page .signups-claim-list li {
  font-size: 12.5px;
  color: #4b5563;
  padding-left: 14px;
  position: relative;
}
.signups-page .signups-claim-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: #9ca3af;
  font-weight: 900;
}
.signups-page .signups-row-actions {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: flex-start;
}
.signups-page .signups-row-delete-form { margin: 0; }
.signups-page .signups-edit-btn {
  background: #fffaf2 !important;
  border: 1.5px solid rgba(255,126,45,.55) !important;
  color: #9a3412 !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.signups-page .signups-edit-btn:hover {
  background: rgba(255,126,45,.10) !important;
  border-color: rgba(255,126,45,.85) !important;
}
.signups-page .signups-remove-btn {
  background: #fffaf2 !important;
  border: 1.5px solid rgba(220,38,38,.30) !important;
  color: #991b1b !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.signups-page .signups-remove-btn:hover {
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.55) !important;
}

/* Add Item modal — matches Guest Actions modal sheet style */
body.signups-page #addSignupModal .warm-modal.ilm-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(120,90,60,.18) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.32) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.signups-page #addSignupModal .warm-modal-header.ilm-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(120,90,60,.10) !important;
}
body.signups-page #addSignupModal .ilm-header-title { flex: 1 1 auto; min-width: 0; }
body.signups-page #addSignupModal .ilm-header-title .eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  margin: 0 0 4px !important;
}
body.signups-page #addSignupModal .ilm-header-title h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #172126 !important;
}
body.signups-page #addSignupModal .signup-add-body {
  padding: 18px 20px 22px !important;
  overflow-y: auto !important;
  display: block !important;
}
body.signups-page #addSignupModal .signup-add-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.signups-page #addSignupModal .signup-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 6px;
  text-transform: none;
  letter-spacing: 0;
}
body.signups-page #addSignupModal .signup-field-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,90,60,.18);
  background: #ffffff;
  font-size: 16px;
  color: #172126;
  margin: 0 0 14px;
  box-sizing: border-box;
}
body.signups-page #addSignupModal .signup-field-input:focus {
  outline: none;
  border-color: rgba(255,126,45,.55);
  box-shadow: 0 0 0 3px rgba(255,126,45,.10);
}
body.signups-page #addSignupModal .signup-field-hint {
  font-size: 12px;
  color: #6b7280;
  margin: -10px 0 14px;
  line-height: 1.35;
}
body.signups-page #addSignupModal .signup-add-submit {
  background: #172126 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin: 8px 0 0 !important;
  cursor: pointer;
  align-self: flex-start;
}
body.signups-page #addSignupModal .signup-add-submit:hover {
  background: #0f1419 !important;
}

/* Bottom-sheet on mobile */
@media (max-width: 600px) {
  #addSignupModal.warm-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 12px 16px !important;
  }
  body.signups-page #addSignupModal .warm-modal.ilm-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 80vh !important;
    max-height: 80dvh !important;
    border-radius: 20px !important;
  }
}

/* Mobile: signups page mirrors guest-list mobile pattern */
@media (max-width: 820px) {
  /* Hide standalone event-context-card and event-tabs-mobile (we use the inline banner) */
  .signups-page .event-console-nav-shell .event-context-card,
  .signups-page .event-tabs-mobile {
    display: none !important;
  }
  body.signups-page .event-console-nav-shell {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Show inline event banner with hamburger inside the card on mobile */
  .signups-page .guest-list-mobile-event-banner {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px !important;
    background: #fffdf8 !important;
    border-radius: 24px 24px 0 0 !important;
    position: relative;
  }
  .signups-page .guest-list-mobile-event-banner .banner-info { flex: 1 1 auto; min-width: 0; }
  .signups-page .guest-list-mobile-event-banner .banner-info strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #172126;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .signups-page .guest-list-mobile-event-banner .banner-info .meta {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.3;
  }

  .signups-page .signups-combined-card {
    padding: 0 !important;
    margin-bottom: 14px !important;
    border-radius: 24px !important;
  }
  .signups-page .signups-sticky-wrap {
    position: sticky !important;
    top: 0 !important;
    background: #fffdf8 !important;
    z-index: 5 !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .signups-page .signups-main-header {
    padding: 12px 16px 14px !important;
    border-radius: 0 !important;
  }
  .signups-page .signups-title { font-size: 22px !important; }
  .signups-page .signup-add-open-btn { display: none !important; }
  .signups-page .contacts-mobile-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: #fffaf2 !important;
    color: #9a3412 !important;
    border: 1.5px solid rgba(255,126,45,.55) !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .signups-page .signups-list-section {
    padding: 12px 14px 16px !important;
  }
  .signups-page .signups-row {
    padding: 12px 14px !important;
  }
  .signups-page .signups-row-info strong { font-size: 15px; }
  .signups-page .signups-row-meta { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   Questions page (questions.php)
   Mirrors the Sign-up Items unified-card pattern with per-question
   response summaries and an "All Responses" feed below.
   ════════════════════════════════════════════════════════════════════ */
.questions-page .guest-list-mobile-event-banner { display: none; }

.questions-page .questions-combined-card,
.questions-page .questions-responses-card {
  padding: 0;
  overflow: visible;
  border-radius: 24px;
}
.questions-page .questions-responses-card { margin-top: 14px; }
.questions-page .questions-sticky-wrap {
  background: #fffdf8;
  border-radius: 24px 24px 0 0;
}
.questions-page .questions-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
}
.questions-page .questions-title-block { flex: 1 1 auto; min-width: 0; }
.questions-page .questions-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #172126;
}
.questions-page .questions-subtitle {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: #172126;
}
.questions-page .questions-subtitle-meta { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.questions-page .questions-header-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.questions-page .question-add-open-btn {
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255,126,45,.55) !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.questions-page .question-add-open-btn:hover {
  background: rgba(255,126,45,.10) !important;
  border-color: rgba(255,126,45,.85) !important;
}

/* Question rows */
.questions-page .questions-list-section { padding: 16px 24px 22px; }
.questions-page .questions-empty { color: #6b7280; text-align: center; padding: 24px 8px; }
.questions-page .questions-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.questions-page .questions-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.12);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.questions-page .questions-row.is-inactive {
  background:
    repeating-linear-gradient(135deg,
      rgba(120,90,60,.04) 0 14px,
      rgba(120,90,60,.10) 14px 28px),
    #fafaf7;
  border-color: rgba(120,90,60,.18);
  border-style: dashed;
}
.questions-page .questions-row.is-inactive .questions-row-text,
.questions-page .questions-row.is-inactive .questions-row-meta,
.questions-page .questions-row.is-inactive .questions-summary-label,
.questions-page .questions-row.is-inactive .questions-summary-count,
.questions-page .questions-row.is-inactive .questions-text-summary summary {
  opacity: .55;
}
.questions-page .questions-row.is-inactive .questions-summary-fill {
  background: linear-gradient(90deg, #c7c2b8, #a39d92);
}
.questions-page .questions-hidden-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(154, 52, 18, .10);
  color: #9a3412;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.questions-page .questions-hidden-eyebrow span[aria-hidden] {
  font-size: 13px;
  line-height: 1;
}
.questions-page .questions-row-info { flex: 1 1 auto; min-width: 0; }
.questions-page .questions-row-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 6px;
}
.questions-page .questions-row-text {
  font-size: 16px;
  font-weight: 700;
  color: #172126;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.questions-page .questions-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}
.questions-page .questions-row-tags .badge {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.questions-page .questions-tag-required {
  background: rgba(255,126,45,.14);
  color: #9a3412;
}
.questions-page .questions-row-meta,
.questions-page .questions-row-empty {
  font-size: 13px;
  color: #6b7280;
  margin: 6px 0 0;
}

/* Per-question summary bars (radio/select/checkbox) */
.questions-page .questions-summary-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.questions-page .questions-summary-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.questions-page .questions-summary-label {
  color: #172126;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.questions-page .questions-summary-track {
  position: relative;
  height: 8px;
  background: rgba(120,90,60,.08);
  border-radius: 999px;
  overflow: hidden;
}
.questions-page .questions-summary-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #ff7e2d, #ea580c);
  border-radius: 999px;
}
.questions-page .questions-summary-count {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  min-width: 20px;
  text-align: right;
}

/* Free-text response sample (collapsed by default) */
.questions-page .questions-text-summary { margin-top: 4px; }
.questions-page .questions-text-summary summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: #9a3412;
  padding: 4px 0;
}
.questions-page .questions-text-summary summary::-webkit-details-marker { display: none; }
.questions-page .questions-text-summary summary::marker { content: ''; }
.questions-page .questions-text-summary summary::after {
  content: ' ▾';
  font-size: 11px;
  color: #9ca3af;
}
.questions-page .questions-text-summary[open] summary::after {
  content: ' ▴';
}
.questions-page .questions-text-recent {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.questions-page .questions-text-recent li {
  background: #fffaf2;
  border: 1px solid rgba(120,90,60,.10);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #172126;
  line-height: 1.35;
}

/* Row actions: Edit / Hide-Show / Remove */
.questions-page .questions-row-actions {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.questions-page .questions-row-toggle-form,
.questions-page .questions-row-delete-form { margin: 0; }
.questions-page .questions-edit-btn,
.questions-page .questions-toggle-btn,
.questions-page .questions-remove-btn {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100%;
  min-width: 78px;
  background: #fffaf2 !important;
}
.questions-page .questions-edit-btn {
  border: 1.5px solid rgba(255,126,45,.55) !important;
  color: #9a3412 !important;
}
.questions-page .questions-edit-btn:hover {
  background: rgba(255,126,45,.10) !important;
  border-color: rgba(255,126,45,.85) !important;
}
.questions-page .questions-toggle-btn {
  border: 1.5px solid rgba(120,90,60,.30) !important;
  color: #4b5563 !important;
}
.questions-page .questions-toggle-btn:hover {
  background: rgba(120,90,60,.06) !important;
  border-color: rgba(120,90,60,.50) !important;
}
.questions-page .questions-remove-btn {
  border: 1.5px solid rgba(220,38,38,.30) !important;
  color: #991b1b !important;
}
.questions-page .questions-remove-btn:hover {
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.55) !important;
}

/* All Responses feed (collapsible per-RSVP) */
.questions-page .questions-response-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.questions-page .questions-response-row {
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.12);
  border-radius: 14px;
  overflow: hidden;
}
.questions-page .questions-response-row > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  /* Fixed-width badge column so "Yes" / "No" / "Maybe" all line up the
     subsequent name column at the same x-position. The 64px is chosen to
     comfortably fit "Maybe" with horizontal padding inside the badge. */
  grid-template-columns: 64px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
}
.questions-page .questions-response-row.has-no-details > summary { cursor: default; }
.questions-page .questions-response-row > summary::-webkit-details-marker { display: none; }
.questions-page .questions-response-row > summary::marker { content: ''; }
.questions-page .questions-response-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.questions-page .questions-response-name strong {
  color: #172126;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.questions-page .questions-response-meta {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
}
.questions-page .questions-response-party,
.questions-page .questions-response-date {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
.questions-page .questions-response-badge {
  text-transform: capitalize;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  justify-self: center;
  width: 100%;
  box-sizing: border-box;
}
.questions-page .questions-response-body {
  border-top: 1px solid rgba(120,90,60,.08);
  padding: 12px 16px 14px;
  background: #fffdf8;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.questions-page .questions-response-block-label {
  font-size: 11px;
  font-weight: 800;
  color: #6b7280;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 2px;
}
.questions-page .questions-response-block-value {
  font-size: 14px;
  color: #172126;
  line-height: 1.4;
  margin: 0;
}
.questions-page .questions-response-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.questions-page .questions-response-members li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #172126;
}

/* Add/Edit Question modal — same pattern as Sign-up Items modal */
body.questions-page #addQuestionModal .warm-modal.ilm-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(480px, calc(100vw - 32px)) !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(120,90,60,.18) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.32) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.questions-page #addQuestionModal .warm-modal-header.ilm-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(120,90,60,.10) !important;
}
body.questions-page #addQuestionModal .ilm-header-title { flex: 1 1 auto; min-width: 0; }
body.questions-page #addQuestionModal .ilm-header-title .eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  margin: 0 0 4px !important;
}
body.questions-page #addQuestionModal .ilm-header-title h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #172126 !important;
}
body.questions-page #addQuestionModal .question-add-body {
  padding: 18px 20px 22px !important;
  overflow-y: auto !important;
  display: block !important;
}
body.questions-page #addQuestionModal .question-add-form {
  display: flex;
  flex-direction: column;
}
body.questions-page #addQuestionModal .question-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 6px;
  text-transform: none;
}
body.questions-page #addQuestionModal .question-field-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,90,60,.18);
  background: #ffffff;
  font-size: 16px;
  color: #172126;
  margin: 0 0 14px;
  box-sizing: border-box;
  font-family: inherit;
}
body.questions-page #addQuestionModal textarea.question-field-input {
  min-height: 100px;
  resize: vertical;
}
body.questions-page #addQuestionModal .question-field-input:focus {
  outline: none;
  border-color: rgba(255,126,45,.55);
  box-shadow: 0 0 0 3px rgba(255,126,45,.10);
}
body.questions-page #addQuestionModal .question-required-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #172126;
  margin: 0 0 14px;
}
body.questions-page #addQuestionModal .question-add-submit {
  background: #172126 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin: 8px 0 0 !important;
  cursor: pointer;
  align-self: flex-start;
}
body.questions-page #addQuestionModal .question-add-submit:hover {
  background: #0f1419 !important;
}

/* Bottom-sheet on mobile */
@media (max-width: 600px) {
  #addQuestionModal.warm-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 12px 16px !important;
  }
  body.questions-page #addQuestionModal .warm-modal.ilm-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 80vh !important;
    max-height: 80dvh !important;
    border-radius: 20px !important;
  }
}

/* Mobile: questions page mirrors guest-list/signups mobile pattern */
@media (max-width: 820px) {
  /* Hide standalone event-context-card and event-tabs-mobile (we use the inline banner) */
  .questions-page .event-console-nav-shell .event-context-card,
  .questions-page .event-tabs-mobile {
    display: none !important;
  }
  body.questions-page .event-console-nav-shell {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Show inline event banner with hamburger inside the card on mobile */
  .questions-page .guest-list-mobile-event-banner {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px !important;
    background: #fffdf8 !important;
    border-radius: 24px 24px 0 0 !important;
    position: relative;
  }
  .questions-page .guest-list-mobile-event-banner .banner-info { flex: 1 1 auto; min-width: 0; }
  .questions-page .guest-list-mobile-event-banner .banner-info strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #172126;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .questions-page .guest-list-mobile-event-banner .banner-info .meta {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.3;
  }

  .questions-page .questions-combined-card,
  .questions-page .questions-responses-card {
    padding: 0 !important;
    margin-bottom: 14px !important;
    border-radius: 24px !important;
  }
  .questions-page .questions-sticky-wrap {
    position: sticky !important;
    top: 0 !important;
    background: #fffdf8 !important;
    z-index: 5 !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .questions-page .questions-main-header {
    padding: 12px 16px 14px !important;
    border-radius: 0 !important;
  }
  .questions-page .questions-title { font-size: 22px !important; }
  .questions-page .questions-subtitle { font-size: 18px !important; }
  .questions-page .question-add-open-btn { display: none !important; }
  .questions-page .contacts-mobile-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: #fffaf2 !important;
    color: #9a3412 !important;
    border: 1.5px solid rgba(255,126,45,.55) !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .questions-page .questions-list-section {
    padding: 12px 14px 16px !important;
  }
  .questions-page .questions-row {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px !important;
  }
  /* All five action controls share a single row, separated by a gap.
     ▲▼ are compact square-ish buttons on the left, Edit / Hide / Remove
     are flex-grow pills filling the remaining space. */
  .questions-page .questions-row-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
  }
  .questions-page .questions-row-move-mobile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: auto;
  }
  .questions-page .questions-row-move-mobile .questions-move-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 32px;
    border-radius: 8px;
  }
  /* Edit / Hide / Remove pills fill the remaining row width equally */
  .questions-page .questions-row-actions > .button,
  .questions-page .questions-row-actions > form > .button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 6px 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .questions-page .questions-row-actions > form { flex: 1 1 0; display: flex; min-width: 0; }
  .questions-page .questions-row-actions > form > .button { width: 100%; }
  .questions-page .questions-row-text { font-size: 15px; }
  .questions-page .questions-row-meta { font-size: 12.5px; }

  .questions-page .questions-response-row > summary {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 10px;
  }
  .questions-page .questions-response-badge { grid-row: 1; grid-column: 1; }
  .questions-page .questions-response-name { grid-row: 1; grid-column: 2; }
  .questions-page .questions-response-party { grid-row: 2; grid-column: 1 / 3; font-size: 11.5px; }
  .questions-page .questions-response-date { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Questions page — drag-handle, mobile move buttons, modal option rows
   ════════════════════════════════════════════════════════════════════ */
/* Desktop drag handle column on each question row */
.questions-page .questions-row { cursor: default; }
.questions-page .questions-row-drag {
  flex: 0 0 auto;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #9ca3af;
  user-select: none;
  align-self: stretch;
  padding: 4px 0;
  margin-left: -4px;
}
.questions-page .questions-row-drag:active { cursor: grabbing; }
.questions-page .questions-drag-handle {
  display: inline-block;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -2px;
}
.questions-page .questions-drag-handle::before {
  content: '⋮⋮';
}
.questions-page .questions-drag-handle span { display: none; }
.questions-page .questions-row.is-dragging {
  opacity: .55;
  box-shadow: 0 8px 24px rgba(15,23,42,.18);
}
/* Drop-target indicator: a thick orange line above OR below the hovered row */
.questions-page .questions-row { position: relative; }
.questions-page .questions-row.drop-above::before,
.questions-page .questions-row.drop-below::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 4px;
  background: linear-gradient(90deg, #ff7e2d, #ea580c);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 2px 6px rgba(234,88,12,.40);
  pointer-events: none;
  z-index: 2;
}
.questions-page .questions-row.drop-above::before { top: -7px; }
.questions-page .questions-row.drop-below::after  { bottom: -7px; }

/* Same drop-target indicator for editable option rows inside the modal,
   so the reorder UX matches between the question list and the option list. */
body.questions-page .question-option-row { position: relative; }
body.questions-page .question-option-row.drop-above::before,
body.questions-page .question-option-row.drop-below::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  background: linear-gradient(90deg, #ff7e2d, #ea580c);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,253,248,.98), 0 2px 5px rgba(234,88,12,.40);
  pointer-events: none;
  z-index: 2;
}
body.questions-page .question-option-row.drop-above::before { top: -5px; }
body.questions-page .question-option-row.drop-below::after  { bottom: -5px; }
body.questions-page .question-option-row.is-dragging {
  opacity: .55;
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
}

/* Mobile-only ▲▼ move buttons (default: hidden on desktop) */
.questions-page .questions-row-move-mobile { display: none; }
.questions-page .questions-move-btn {
  background: #fffaf2 !important;
  border: 1.5px solid rgba(120,90,60,.30) !important;
  color: #4b5563 !important;
  width: 36px;
  height: 32px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.questions-page .questions-move-btn:hover {
  background: rgba(120,90,60,.06) !important;
  border-color: rgba(120,90,60,.50) !important;
}
.questions-page .questions-move-btn:disabled { opacity: .35; cursor: default; }

/* ── Modal: editable options rows + Add option button ───────────────── */
body.questions-page .question-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
body.questions-page .question-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.18);
  border-radius: 10px;
  padding: 6px 8px 6px 6px;
}
body.questions-page .question-option-row.is-dragging {
  opacity: .5;
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
}
body.questions-page .question-option-drag {
  flex: 0 0 auto;
  width: 22px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #9ca3af;
  font-size: 16px;
  letter-spacing: -2px;
}
body.questions-page .question-option-drag::before { content: '⋮⋮'; }
body.questions-page .question-option-drag span { display: none; }
body.questions-page .question-option-drag:active { cursor: grabbing; }
body.questions-page .question-option-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  /* 16px keeps iOS Safari from zooming the viewport on focus. Anything
     smaller triggers the auto-zoom which also blurs the layout. */
  font-size: 16px !important;
  color: #172126 !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  outline: none;
  box-shadow: none !important;
}
body.questions-page .question-option-input:focus { outline: none; }
body.questions-page .question-option-remove {
  flex: 0 0 auto;
  background: transparent !important;
  border: 0 !important;
  color: #9ca3af !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
}
body.questions-page .question-option-remove:hover {
  background: rgba(220,38,38,.08) !important;
  color: #991b1b !important;
}
body.questions-page .question-add-option-btn {
  background: transparent !important;
  border: 1.5px dashed rgba(255,126,45,.55) !important;
  color: #9a3412 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  cursor: pointer;
  align-self: flex-start;
}
body.questions-page .question-add-option-btn:hover {
  background: rgba(255,126,45,.06) !important;
  border-color: rgba(255,126,45,.85) !important;
  border-style: solid !important;
}

/* ── Modal: Required toggle row ────────────────────────────────────── */
body.questions-page .question-required-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.18);
  margin: 4px 0 16px !important;
  cursor: pointer;
  font-size: 14px;
  color: #172126;
}
body.questions-page .question-required-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.questions-page .question-required-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #172126;
}
body.questions-page .question-required-hint {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  line-height: 1.3;
}
body.questions-page .question-required-toggle {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
}
body.questions-page .question-required-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
body.questions-page .question-required-track {
  display: inline-block;
  width: 38px;
  height: 22px;
  background: rgba(120,90,60,.22);
  border-radius: 999px;
  position: relative;
  transition: background .15s ease;
}
body.questions-page .question-required-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15,23,42,.20);
  transition: transform .15s ease;
}
body.questions-page .question-required-toggle input[type="checkbox"]:checked + .question-required-track {
  background: #ea580c;
}
body.questions-page .question-required-toggle input[type="checkbox"]:checked + .question-required-track .question-required-thumb {
  transform: translateX(16px);
}

/* ── Mobile: hide drag handle, show ▲▼ buttons inline ──────────────── */
@media (max-width: 820px) {
  .questions-page .questions-row { cursor: default; }
  .questions-page .questions-row-drag { display: none; }
  .questions-page .questions-row[draggable] { /* native dnd not used on mobile */ }
  .questions-page .questions-row-move-mobile {
    display: flex !important;
    flex-direction: row;
    gap: 4px;
    margin-bottom: 4px;
  }
  .questions-page .questions-row-move-mobile .questions-move-btn { flex: 1 1 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Questions modal — option-disable toggle + per-option locking
   Wires up the per-option "Show / Hidden" pill toggle. Options with
   existing responses get a small response-count chip and a disabled
   × button — the host can rename or hide them, but not delete them.
   ════════════════════════════════════════════════════════════════════ */
/* Per-option response count chip — small, subtle indicator that the row
   has answers attached and therefore is "delete-protected" (× hides it
   instead). Visible only on rows with responses. */
body.questions-page .question-option-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  background: rgba(120,90,60,.10);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  min-width: 22px;
  text-align: center;
}

body.questions-page .question-option-row.has-responses .question-option-remove {
  /* Slightly muted appearance on rows where × means "hide" rather than
     "delete" — keeps the affordance visible without screaming "danger". */
  color: #6b7280 !important;
}
body.questions-page .question-option-row.has-responses .question-option-remove:hover {
  background: rgba(255,126,45,.10) !important;
  color: #9a3412 !important;
}
body.questions-page .question-option-row.is-disabled .question-option-remove {
  /* On a hidden row, × shows a circular-arrow ↺ to communicate "tap to
     un-hide". Color picks up the orange accent so the action stands out. */
  color: #9a3412 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Disabled option row: faded, with strikethrough on the label input */
body.questions-page .question-option-row.is-disabled .question-option-input {
  text-decoration: line-through;
  color: #9ca3af !important;
}
body.questions-page .question-option-row.is-disabled {
  background: #fafaf7;
  border-style: dashed;
}

/* Hint above the options list (replaces the old global lock notice) */
body.questions-page .question-options-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b7280;
  margin: 0 0 10px;
}
body.questions-page .question-options-hint strong { color: #4b5563; }

/* ── Disabled-option marker in the per-question summary bars ──────── */
.questions-page .questions-summary-bar.is-disabled-option .questions-summary-label {
  color: #9ca3af;
  text-decoration: line-through;
}
.questions-page .questions-summary-bar.is-disabled-option .questions-summary-fill {
  background: linear-gradient(90deg, #d4cfc4, #a39d92);
}
.questions-page .questions-summary-flag {
  display: inline-block;
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(120,90,60,.14);
  color: #6b7280;
  padding: 1px 6px;
  border-radius: 999px;
  text-decoration: none;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════
   v5.14 · Details & Settings page refactor
   Unified single-card pattern matching Guest List / Sign-ups / Questions.
   iOS-style toggle switches replace the boxy checkbox tiles.
   ════════════════════════════════════════════════════════════════════ */

/* Hide the desktop standalone event-context-card on mobile (banner replaces it) */
.settings-page .guest-list-mobile-event-banner { display: none; }

/* Mobile: settings page mirrors guest-list/signups/questions mobile pattern.
   The standalone event-context-card and event-tabs-mobile (rendered by
   admin_event_nav()) get hidden, and the inline banner inside the unified
   card takes their place — same approach as the other refactored pages. */
@media (max-width: 820px) {
  /* Hide standalone event-context-card and event-tabs-mobile (we use the inline banner) */
  .settings-page .event-console-nav-shell .event-context-card,
  .settings-page .event-tabs-mobile {
    display: none !important;
  }
  body.settings-page .event-console-nav-shell {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Show inline event banner with hamburger inside the card on mobile */
  .settings-page .guest-list-mobile-event-banner {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px !important;
    background: #fffdf8 !important;
    border-radius: 24px 24px 0 0 !important;
    position: relative;
  }
  .settings-page .guest-list-mobile-event-banner .banner-info { flex: 1 1 auto; min-width: 0; }
  .settings-page .guest-list-mobile-event-banner .banner-info strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #172126;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .settings-page .guest-list-mobile-event-banner .banner-info .meta {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Settings-page hamburger styles are inherited from the canonical
   guest-list/signups/questions ruleset (the comma-extended block higher up
   in this file). DO NOT add a divergent settings-page hamburger block here —
   keeping these consistent across pages was a deliberate design call. */

/* Unified card shell */
.settings-page .settings-combined-card {
  padding: 0;
  overflow: visible;
  border-radius: 24px;
}
.settings-page .settings-sticky-wrap {
  background: #fffdf8;
  border-radius: 24px 24px 0 0;
}
.settings-page .settings-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
}
.settings-page .settings-title-block { flex: 1 1 auto; min-width: 0; }
.settings-page .settings-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #172126;
}
.settings-page .settings-subtitle {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.4;
}
.settings-page .settings-header-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Top action toolbar (Back / Preview / Copy link) */
.settings-page .settings-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 18px;
}
.settings-page .settings-toolbar .toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fffaf2;
  color: #9a3412;
  border: 1.5px solid rgba(255,126,45,.55);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.settings-page .settings-toolbar .toolbar-btn:hover {
  background: rgba(255,126,45,.10);
  border-color: rgba(255,126,45,.85);
}
.settings-page .settings-toolbar .toolbar-btn.copied {
  background: rgba(34,139,84,.10);
  border-color: rgba(34,139,84,.55);
  color: #1f6f43;
}

/* Inner sections (no nested cards — section headers + content) */
.settings-page .settings-form-body { padding: 0 24px 22px; }
.settings-page .settings-section {
  border-top: 1px solid rgba(120,90,60,.10);
  padding: 22px 0 4px;
}
.settings-page .settings-section:first-child {
  border-top: none;
  padding-top: 6px;
}
.settings-page .settings-section-head {
  margin: 0 0 14px;
}
.settings-page .settings-section-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: #172126;
  letter-spacing: -.01em;
}
.settings-page .settings-section-head p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

/* Compact form fields */
.settings-page .settings-form .field { margin-bottom: 12px; }
.settings-page .settings-form label.field-label,
.settings-page .settings-form .field > label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #4b5563;
  letter-spacing: .01em;
  margin-bottom: 5px;
}
.settings-page .settings-form input[type="text"],
.settings-page .settings-form input[type="email"],
.settings-page .settings-form input[type="url"],
.settings-page .settings-form input[type="number"],
.settings-page .settings-form input[type="date"],
.settings-page .settings-form input[type="time"],
.settings-page .settings-form select,
.settings-page .settings-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 12px;
  font-size: 16px; /* iOS no-zoom */
  font-family: inherit;
  color: #172126;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.18);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.settings-page .settings-form input:focus,
.settings-page .settings-form select:focus,
.settings-page .settings-form textarea:focus {
  outline: none;
  border-color: rgba(255,126,45,.65);
  box-shadow: 0 0 0 3px rgba(255,126,45,.15);
}
.settings-page .settings-form textarea { min-height: 78px; resize: vertical; line-height: 1.4; }
.settings-page .settings-form .field-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}
.settings-page .settings-form .field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.settings-page .settings-form .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
  .settings-page .settings-form .field-row.cols-2,
  .settings-page .settings-form .field-row.cols-3 { grid-template-columns: 1fr; }
}

/* iOS-style toggle switch */
.settings-page .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: #fffdf8;
  border: 1px solid rgba(120,90,60,.10);
  border-radius: 14px;
  margin-bottom: 8px;
}
.settings-page .toggle-row + .toggle-row { margin-top: 0; }
.settings-page .toggle-row .toggle-text { flex: 1 1 auto; min-width: 0; }
.settings-page .toggle-row .toggle-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #172126;
  line-height: 1.25;
}
.settings-page .toggle-row .toggle-text em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.35;
}
.settings-page .toggle-row .toggle-text .toggle-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #9a3412;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,126,45,.45);
  padding-bottom: 1px;
}
.settings-page .toggle-row .toggle-text .toggle-link:hover {
  color: #7a2a0e;
  border-bottom-color: rgba(255,126,45,.9);
}
.settings-page .toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  display: inline-block;
}
.settings-page .toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.settings-page .toggle-switch .toggle-track {
  position: absolute;
  inset: 0;
  background: #d6d3cc;
  border-radius: 999px;
  transition: background .18s ease;
  cursor: pointer;
}
.settings-page .toggle-switch .toggle-track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.settings-page .toggle-switch input:checked + .toggle-track {
  background: #ea580c;
}
.settings-page .toggle-switch input:checked + .toggle-track::before {
  transform: translateX(20px);
}
.settings-page .toggle-switch input:focus-visible + .toggle-track {
  box-shadow: 0 0 0 3px rgba(255,126,45,.30);
}
.settings-page .toggle-switch input:disabled + .toggle-track {
  opacity: .55;
  cursor: not-allowed;
}

/* Toggle row with inline numeric (e.g. "Limit" beside a switch) */
.settings-page .toggle-row .toggle-inline-input {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
}
.settings-page .toggle-row .toggle-inline-input label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin: 0;
}
.settings-page .toggle-row .toggle-inline-input input {
  width: 64px;
  padding: 6px 8px !important;
  font-size: 14px !important;
  text-align: center;
  border-radius: 8px !important;
}

/* Compact extras row (e.g. RSVP deadline + max extras) */
.settings-page .settings-extras-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .settings-page .settings-extras-row { grid-template-columns: 1fr; }
}

/* Status pill row at top right of card (Status + Theme select) */
.settings-page .settings-quick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.settings-page .settings-quick-meta .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,126,45,.10);
  color: #9a3412;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* Save bar */
.settings-page .settings-save-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 24px 24px;
  border-top: 1px solid rgba(120,90,60,.10);
  margin-top: 18px;
  background: #fffdf8;
  border-radius: 0 0 24px 24px;
}
.settings-page .settings-save-bar button {
  background: #172126;
  color: #ffffff;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  transition: background .15s;
}
.settings-page .settings-save-bar button:hover { background: #0c1316; }

/* Danger / advanced actions */
.settings-page .settings-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}
.settings-page .settings-danger-actions a,
.settings-page .settings-danger-actions button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  border: 1.5px solid;
  transition: background .15s, border-color .15s;
}
.settings-page .settings-danger-actions a.cancel-link,
.settings-page .settings-danger-actions button.cancel-link {
  background: #fffaf2 !important;
  color: #4b5563 !important;
  border-color: rgba(120,90,60,.30) !important;
}
.settings-page .settings-danger-actions a.cancel-link:hover,
.settings-page .settings-danger-actions button.cancel-link:hover {
  background: rgba(120,90,60,.06) !important;
  border-color: rgba(120,90,60,.55) !important;
}
.settings-page .settings-danger-actions button.cancel-link {
  /* Buttons inherit some base styles we don't want — explicit reset */
  display: inline-block !important;
  margin: 0 !important;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.settings-page .settings-danger-actions a.delete-link {
  background: #fffaf2;
  color: #991b1b;
  border-color: rgba(220,38,38,.30);
}
.settings-page .settings-danger-actions a.delete-link:hover {
  background: rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.55);
}

/* Responsive: tighten card padding on small screens */
@media (max-width: 700px) {
  .settings-page .settings-main-header { padding: 16px 16px 12px; }
  .settings-page .settings-toolbar { padding: 0 16px 14px; }
  .settings-page .settings-form-body { padding: 0 16px 16px; }
  .settings-page .settings-save-bar { padding: 14px 16px 18px; }
  .settings-page .settings-title { font-size: 22px; }
}

/* Reminder schedule row with inline action button */
.settings-page .settings-extras-row--with-action { align-items: end; }
.settings-page .settings-extras-action {
  display: flex;
  align-items: center;
  padding-bottom: 4px;
}


/* ════════════════════════════════════════════════════════════════════
   v5.14 · Reminder schedule (rich rows with stepper + time-of-day)
   Selectors use body.settings-page to outrank the global
   `body:not(.invite-body) button:not(.secondary)` rule that otherwise
   paints every plain <button> solid black.
   ════════════════════════════════════════════════════════════════════ */
body.settings-page .reminder-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
body.settings-page .reminder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.18);
  border-radius: 12px;
}
/* ── Generic mini-stepper: ▲ [number] ▼ ───────────────────────────────
   Used for reminder day count AND for the inline max-plus-ones / max-named-
   additions inputs in the Extra-guests toggle rows. */
body.settings-page .mini-stepper {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(120,90,60,.22);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  height: 38px;
}
body.settings-page .mini-stepper .mini-stepper-input {
  width: 52px !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 16px !important; /* iOS no-zoom */
  font-weight: 700 !important;
  color: #172126 !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
body.settings-page .mini-stepper .mini-stepper-input::-webkit-outer-spin-button,
body.settings-page .mini-stepper .mini-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.settings-page .mini-stepper .mini-stepper-input:focus { outline: none !important; }
body.settings-page .mini-stepper .mini-stepper-btn {
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1;
  min-height: 0 !important;
  cursor: pointer;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  box-shadow: none !important;
}
body.settings-page .mini-stepper .mini-stepper-up   { order: 1; border-right: 1px solid rgba(120,90,60,.18) !important; }
body.settings-page .mini-stepper .mini-stepper-input { order: 2; }
body.settings-page .mini-stepper .mini-stepper-down { order: 3; border-left: 1px solid rgba(120,90,60,.18) !important; }
body.settings-page .mini-stepper .mini-stepper-btn:hover  { background: rgba(255,126,45,.16) !important; }
body.settings-page .mini-stepper .mini-stepper-btn:active { background: rgba(255,126,45,.28) !important; }

/* Disabled stepper (toggle is OFF) */
body.settings-page .toggle-stepper-wrap.is-disabled .mini-stepper { opacity: .55; }
body.settings-page .toggle-stepper-wrap.is-disabled .mini-stepper-btn { cursor: not-allowed !important; }

/* Toggle-row inline stepper container */
body.settings-page .toggle-row--with-stepper {
  flex-wrap: wrap;
}
body.settings-page .toggle-stepper-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.settings-page .toggle-stepper-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Day label + time dropdown */
body.settings-page .reminder-row-label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
body.settings-page .reminder-row-day-label {
  flex: 0 0 auto;
  font-size: 14px;
  color: #4b5563;
  font-weight: 500;
  white-space: nowrap;
}
body.settings-page .reminder-time-select {
  flex: 1 1 auto;
  min-width: 110px;
  height: 38px;
  padding: 6px 28px 6px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #172126 !important;
  background: #ffffff !important;
  border: 1px solid rgba(120,90,60,.22) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'><path fill='%239a3412' d='M0 0l6 7 6-7z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 9px 6px !important;
}
body.settings-page .reminder-time-select:focus {
  outline: none;
  border-color: rgba(255,126,45,.65) !important;
  box-shadow: 0 0 0 3px rgba(255,126,45,.15) !important;
}

/* Small subtle × remove button (matches the question-option-remove pattern).
   margin-left: auto pins it to the right edge of the row regardless of how
   much horizontal space sits between it and the type select. */
body.settings-page .reminder-row-remove {
  flex: 0 0 auto;
  margin-left: auto !important;
  background: transparent !important;
  border: 0 !important;
  color: #9ca3af !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
body.settings-page .reminder-row-remove:hover {
  background: rgba(220,38,38,.10) !important;
  color: #991b1b !important;
}

/* + Add reminder — boxy dashed pill, matches the questions page +Add option */
body.settings-page .reminder-add-btn {
  background: transparent !important;
  border: 1.5px dashed rgba(255,126,45,.55) !important;
  color: #9a3412 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  min-height: 0 !important;
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
body.settings-page .reminder-add-btn:hover {
  background: rgba(255,126,45,.06) !important;
  border-color: rgba(255,126,45,.85) !important;
  border-style: solid !important;
}
body.settings-page .reminder-add-btn.is-disabled,
body.settings-page .reminder-add-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed;
  background: transparent !important;
  border-color: rgba(120,90,60,.25) !important;
  color: #9ca3af !important;
}
body.settings-page .reminder-schedule-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Inline-link styling used in section descriptions ("Sending still happens from Messages") */
body.settings-page .settings-section-head a.inline-link {
  color: #9a3412;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,126,45,.45);
}
body.settings-page .settings-section-head a.inline-link:hover {
  color: #7a2a0e;
  border-bottom-color: rgba(255,126,45,.9);
}

/* Outrank the global save/toolbar/danger button rules so my custom buttons
   don't get painted solid black. */
body.settings-page .settings-toolbar .toolbar-btn,
body.settings-page .settings-toolbar button.toolbar-btn {
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255,126,45,.55) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  min-height: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}
body.settings-page .settings-toolbar .toolbar-btn:hover,
body.settings-page .settings-toolbar button.toolbar-btn:hover {
  background: rgba(255,126,45,.10) !important;
  border-color: rgba(255,126,45,.85) !important;
}
body.settings-page .settings-toolbar button.toolbar-btn.copied {
  background: rgba(34,139,84,.10) !important;
  border-color: rgba(34,139,84,.55) !important;
  color: #1f6f43 !important;
}
body.settings-page .settings-save-bar button[type="submit"] {
  background: #172126 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(23,33,38,.14) !important;
}
body.settings-page .settings-save-bar button[type="submit"]:hover {
  background: #0c1316 !important;
}

/* Mobile reminder rows: the row itself is a single flex row containing the
   stepper, the label-block (which wraps internally), and the remove button.
   The label-block holds "days before" on the top line and the time-of-day
   select on its own line below. */
@media (max-width: 600px) {
  body.settings-page .reminder-row {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 10px;
    gap: 8px;
  }
  body.settings-page .reminder-row .mini-stepper {
    flex: 0 0 auto;
    /* Slight bump in size for tap targets; matches stepper height */
  }
  body.settings-page .reminder-row-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }
  body.settings-page .reminder-row-day-label {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    /* Match the stepper's vertical center on the top line */
    line-height: 38px;
    white-space: nowrap;
  }
  body.settings-page .reminder-time-select {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 2px;
  }
  body.settings-page .reminder-row-remove {
    flex: 0 0 auto;
    align-self: flex-start;
    /* Vertically center to the stepper height (38px tall) */
    margin-top: 4px;
  }
}

/* Mobile: keep date/time/all inputs from running off the card edge */
@media (max-width: 600px) {
  body.settings-page .settings-form input[type="text"],
  body.settings-page .settings-form input[type="email"],
  body.settings-page .settings-form input[type="url"],
  body.settings-page .settings-form input[type="number"],
  body.settings-page .settings-form input[type="date"],
  body.settings-page .settings-form input[type="time"],
  body.settings-page .settings-form select,
  body.settings-page .settings-form textarea {
    box-sizing: border-box !important;
    max-width: 100%;
    min-width: 0;
  }
  body.settings-page .field-row.cols-2,
  body.settings-page .field-row.cols-3,
  body.settings-page .settings-extras-row {
    grid-template-columns: 1fr !important;
  }
  body.settings-page .settings-form .field { min-width: 0; }
}

/* iOS Safari's native date/time inputs stretch beyond their declared width
   when their pseudo-elements (calendar icon, AM/PM block, internal padding)
   are larger than the box content. The fix is a hard width constraint plus
   tighter padding so the pseudo-elements have room to breathe inside. */
body.settings-page .settings-form input[type="date"],
body.settings-page .settings-form input[type="time"] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box !important;
  min-width: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 600px) {
  body.settings-page .settings-form input[type="date"],
  body.settings-page .settings-form input[type="time"] {
    padding: 10px 8px !important;
  }
  /* Avoid grid blowouts: each grid cell must be allowed to shrink below
     content size, otherwise a wide native input forces the column wider
     than the parent card. */
  body.settings-page .settings-form .field-row,
  body.settings-page .settings-form .settings-extras-row { min-width: 0; }
  body.settings-page .settings-form .field-row > .field,
  body.settings-page .settings-form .settings-extras-row > .field { min-width: 0; }
}

/* Section helper lines */
body.settings-page .settings-hint-line {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.45;
}
body.settings-page .settings-hint-line strong {
  color: #4b5563;
  font-weight: 700;
}

/* Conditional field row: animate to hidden when the controlling toggle is off */
body.settings-page .is-hidden-conditional {
  display: none !important;
}

/* Color pickers */
body.settings-page .color-picker-row { gap: 14px; }
body.settings-page .color-picker-field {
  background: #fffdf8;
  border: 1px solid rgba(120,90,60,.12);
  border-radius: 14px;
  padding: 12px;
}
body.settings-page .color-picker-field .field-label {
  margin-bottom: 8px;
}
body.settings-page .color-picker-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.settings-page .color-picker-swatch {
  flex: 0 0 auto;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(120,90,60,.22) !important;
  border-radius: 10px !important;
  background: transparent !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 38px !important;
  margin: 0 !important;
}
body.settings-page .color-picker-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
body.settings-page .color-picker-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 7px;
}
body.settings-page .color-picker-swatch::-moz-color-swatch {
  border: none;
  border-radius: 7px;
}
body.settings-page .color-picker-state {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.settings-page .color-picker-state.is-set {
  color: #172126;
  font-weight: 700;
  text-transform: uppercase;
}
body.settings-page .color-picker-reset {
  flex: 0 0 auto;
  background: transparent !important;
  color: #9a3412 !important;
  border: 1px solid rgba(255,126,45,.45) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  min-height: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
body.settings-page .color-picker-reset:hover {
  background: rgba(255,126,45,.10) !important;
  border-color: rgba(255,126,45,.85) !important;
}
body.settings-page .color-picker-reset:disabled,
body.settings-page .color-picker-reset.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  body.settings-page .color-picker-row { grid-template-columns: 1fr !important; }
}

/* Public-page Maps link below address (event.php / rsvp.php) */
.invite-extra .invite-map-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--invite-accent, #9a3412);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.invite-extra .invite-map-link:hover {
  border-bottom-style: solid;
}

/* ════════════════════════════════════════════════════════════════════
   v5.14 · Unsaved-changes affordance
   Triple defense:
     1. A subtle "● Unsaved" pill in the toolbar — gentle informational cue.
     2. The save bar gets a pulse-once treatment + sticks to the viewport
        bottom while the page is scrollable, so the user never loses sight
        of it while there's work to commit.
     3. Save button label flips from "Saved" to "Save changes" + a tiny
        breathing animation to draw the eye.
   ════════════════════════════════════════════════════════════════════ */

/* Toolbar dirty pill — hidden by default, only visible when dirty */
body.settings-page .dirty-pill {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(234,88,12,.10);
  color: #9a3412;
  border: 1px solid rgba(255,126,45,.40);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  /* Smooth fade-in on first dirty event */
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .25s ease, transform .25s ease;
}
body.settings-page .dirty-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ea580c;
  /* Gentle pulse so the eye notices without being startled */
  animation: dirty-dot-pulse 2.4s ease-in-out infinite;
}
body.settings-page.is-dirty .dirty-pill {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
}
@keyframes dirty-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* The save bar always sits at the bottom of the card. Sticky on dirty. */
body.settings-page .settings-save-bar {
  /* Defensive: outrank generic .card overflow rules so sticky can work */
  position: relative;
  transition: box-shadow .25s ease, background .25s ease;
}
body.settings-page.is-dirty .settings-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  box-shadow: 0 -10px 24px rgba(92,64,36,.10);
  background: rgba(255,253,248,.96);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}

/* When clean, hint that no save is needed (subtle, not loud) */
body.settings-page .settings-save-bar .save-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #6b7280;
}
body.settings-page.is-dirty .settings-save-bar .save-status { color: #9a3412; }
body.settings-page.is-saving .settings-save-bar .save-status { color: #6b7280; }
body.settings-page .settings-save-bar .save-status .save-status-saved,
body.settings-page .settings-save-bar .save-status .save-status-dirty,
body.settings-page .settings-save-bar .save-status .save-status-saving {
  display: none;
}
body.settings-page:not(.is-dirty):not(.is-saving) .settings-save-bar .save-status .save-status-saved { display: inline; }
body.settings-page.is-dirty:not(.is-saving) .settings-save-bar .save-status .save-status-dirty { display: inline; }
body.settings-page.is-saving .settings-save-bar .save-status .save-status-saving { display: inline; }

body.settings-page .settings-save-bar .save-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Save button: passive when clean, prominent when dirty */
body.settings-page:not(.is-dirty) .settings-save-bar button[type="submit"] {
  background: #d1d5db !important;
  color: #6b7280 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
body.settings-page.is-dirty .settings-save-bar button[type="submit"] {
  background: #dc2626 !important;
  color: #ffffff !important;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(220,38,38,.22) !important;
}
body.settings-page.is-dirty .settings-save-bar button[type="submit"]:hover {
  background: #b91c1c !important;
}

/* Mobile: pill collapses to dot-only to save horizontal space; save bar
   gets safe-area-inset bottom padding so it doesn't sit under the home bar. */
@media (max-width: 600px) {
  body.settings-page .dirty-pill .dirty-pill-text { display: none; }
  body.settings-page .dirty-pill {
    padding: 6px 8px;
    margin-left: 8px;
  }
  body.settings-page.is-dirty .settings-save-bar {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Honor the HTML `hidden` attribute on toolbar buttons. Without this, the
   `display: inline-flex` rule above outranks the user-agent `[hidden]
   { display: none }` and the button stays visible even when hidden=""
   is set. */
body.settings-page .settings-toolbar .toolbar-btn[hidden],
body.settings-page .settings-toolbar button.toolbar-btn[hidden] {
  display: none !important;
}

/* Inline "(optional)" tag inside a field label */
body.settings-page .settings-form .field-label-muted {
  font-weight: 500;
  color: #9ca3af;
  font-size: .9em;
  margin-left: 4px;
  letter-spacing: 0;
}


/* ════════════════════════════════════════════════════════════════════
   v5.14 · Messages page refactor
   Three changes only:
     1. Unified-card pattern matching Guest List / Sign-ups / Questions /
        Settings — body class scoping, sticky-wrap header, mobile inline
        event banner with dark hamburger (inherited from canonical rules).
     2. (No CSS needed; warm-hero removed in PHP.)
     3. Action cards grouped under section headings — minimal heading styles.
   ════════════════════════════════════════════════════════════════════ */

/* Hide the desktop standalone event-context-card on mobile (banner replaces it) */
.messages-page .guest-list-mobile-event-banner { display: none; }

@media (max-width: 820px) {
  /* Hide the standalone event-context-card and the event-tabs-mobile we
     get from admin_event_nav() — the inline banner inside the unified card
     replaces both on mobile. Same approach as the other refactored pages. */
  .messages-page .event-console-nav-shell .event-context-card,
  .messages-page .event-tabs-mobile {
    display: none !important;
  }
  body.messages-page .event-console-nav-shell {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Show inline event banner with hamburger inside the card on mobile */
  .messages-page .guest-list-mobile-event-banner {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px !important;
    background: #fffdf8 !important;
    border-radius: 24px 24px 0 0 !important;
    position: relative;
  }
  .messages-page .guest-list-mobile-event-banner .banner-info { flex: 1 1 auto; min-width: 0; }
  .messages-page .guest-list-mobile-event-banner .banner-info strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #172126;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .messages-page .guest-list-mobile-event-banner .banner-info .meta {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Unified card shell */
.messages-page .messages-combined-card {
  padding: 0;
  overflow: visible;
  border-radius: 24px;
}
.messages-page .messages-sticky-wrap { background: #fffdf8; border-radius: 24px 24px 0 0; }
.messages-page .messages-main-header { padding: 22px 24px 12px; }
.messages-page .messages-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #172126;
}
.messages-page .messages-body { padding: 0 24px 22px; }
.messages-page .messages-mail-mode {
  margin: 4px 0 18px;
  font-size: 13px;
  color: #6b7280;
}

/* Section grouping for action cards — minimal headings only.
   The cards themselves still use the existing .message-card-grid /
   .message-action-card classes; we don't restyle them here. */
.messages-page .messages-section {
  border-top: 1px solid rgba(120,90,60,.10);
  padding: 18px 0 6px;
}
.messages-page .messages-section:first-of-type {
  border-top: none;
  padding-top: 22px;
}
.messages-page .messages-section-head { margin: 0 0 12px; }
.messages-page .messages-section-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #172126;
  letter-spacing: -.005em;
}

@media (max-width: 600px) {
  .messages-page .messages-main-header { padding: 16px 16px 10px; }
  .messages-page .messages-body { padding: 0 16px 16px; }
  .messages-page .messages-title { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.14 · Invites & Messages page — reminder editor + SMS handoff +
   activity log. Reminder rules mirror the body.settings-page versions
   above so the editor looks and behaves identically on both pages.
   ════════════════════════════════════════════════════════════════════ */

/* Reminder editor (mirrors body.settings-page rules) */
body.messages-page .reminder-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
body.messages-page .reminder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.18);
  border-radius: 12px;
}
body.messages-page .mini-stepper {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(120,90,60,.22);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  height: 38px;
}
body.messages-page .mini-stepper .mini-stepper-input {
  width: 52px !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #172126 !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
body.messages-page .mini-stepper .mini-stepper-input::-webkit-outer-spin-button,
body.messages-page .mini-stepper .mini-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.messages-page .mini-stepper .mini-stepper-input:focus { outline: none !important; }
body.messages-page .mini-stepper .mini-stepper-btn {
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1;
  min-height: 0 !important;
  cursor: pointer;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  box-shadow: none !important;
}
body.messages-page .mini-stepper .mini-stepper-up   { order: 1; border-right: 1px solid rgba(120,90,60,.18) !important; }
body.messages-page .mini-stepper .mini-stepper-input { order: 2; }
body.messages-page .mini-stepper .mini-stepper-down { order: 3; border-left: 1px solid rgba(120,90,60,.18) !important; }
body.messages-page .mini-stepper .mini-stepper-btn:hover  { background: rgba(255,126,45,.16) !important; }
body.messages-page .mini-stepper .mini-stepper-btn:active { background: rgba(255,126,45,.28) !important; }

body.messages-page .reminder-row-label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.messages-page .reminder-row-day-label {
  font-size: 13.5px;
  color: #4b5563;
  font-weight: 600;
  white-space: nowrap;
}
body.messages-page .reminder-time-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(120,90,60,.22) !important;
  border-radius: 10px;
  background: #ffffff;
  font-size: 14px !important;
  color: #172126 !important;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%;
  appearance: auto;
}
body.messages-page .reminder-time-select:focus {
  outline: 2px solid rgba(255,126,45,.35);
  outline-offset: 1px;
}
body.messages-page .reminder-row-remove {
  flex: 0 0 auto;
  margin-left: auto !important;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent !important;
  color: #6b7280 !important;
  border: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1;
  cursor: pointer;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.messages-page .reminder-row-remove:hover {
  background: rgba(220,38,38,.10) !important;
  color: #991b1b !important;
}
body.messages-page .reminder-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px !important;
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 1.5px dashed rgba(255,126,45,.55) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  min-height: 0 !important;
  box-shadow: none !important;
  transition: background .12s, border-color .12s;
}
body.messages-page .reminder-add-btn:hover {
  background: rgba(255,126,45,.10) !important;
  border-color: rgba(255,126,45,.85) !important;
}
body.messages-page .reminder-add-btn.is-disabled,
body.messages-page .reminder-add-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: #fffaf2 !important;
  border-color: rgba(255,126,45,.30) !important;
}
body.messages-page .reminder-schedule-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Mobile reminder rows: stepper + label-block + remove on top line; time
   select drops below within the label-block. */
@media (max-width: 600px) {
  body.messages-page .reminder-row {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 10px;
    gap: 8px;
  }
  body.messages-page .reminder-row .mini-stepper { flex: 0 0 auto; }
  body.messages-page .reminder-row-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }
  body.messages-page .reminder-row-day-label {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    line-height: 38px;
    white-space: nowrap;
  }
  body.messages-page .reminder-time-select {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 2px;
  }
  body.messages-page .reminder-row-remove {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 4px;
  }
}

/* Reminder save bar (Messages only — Settings has its own save flow) */
body.messages-page .messages-reminder-savebar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
body.messages-page .messages-reminder-save {
  background: #172126 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(23,33,38,.16) !important;
  min-height: 0 !important;
  transition: background .12s;
}
body.messages-page .messages-reminder-save:hover { background: #0c1316 !important; }

/* ── SMS handoff list ──────────────────────────────────────────────── */
body.messages-page .sms-handoff-list {
  display: flex;
  flex-direction: column;
  /* gap is fine; the divider does the visual separation */
  gap: 0;
}
body.messages-page .sms-handoff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Zero horizontal padding so row content (name, buttons) aligns with
     the modal body's content edge — matching the filter chips and intro
     paragraph above. */
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(120,90,60,.10);
  border-radius: 0;
}
body.messages-page .sms-handoff-row:last-child { border-bottom: 0; }
body.messages-page .sms-handoff-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.messages-page .sms-handoff-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #172126;
}
body.messages-page .sms-handoff-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: #6b7280;
}
body.messages-page .sms-handoff-phone {
  font-variant-numeric: tabular-nums;
}
body.messages-page .sms-handoff-last {
  color: #16a34a;
  font-weight: 600;
}
body.messages-page .sms-handoff-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px !important;
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255,126,45,.55) !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  min-height: 0 !important;
  box-shadow: none !important;
  transition: background .12s, border-color .12s;
}
body.messages-page .sms-handoff-btn:hover {
  background: rgba(255,126,45,.12) !important;
  border-color: rgba(255,126,45,.85) !important;
}
body.messages-page .sms-handoff-btn:disabled {
  opacity: .55;
  cursor: progress;
}
body.messages-page .sms-handoff-btn-icon { font-size: 14px; line-height: 1; }

/* RSVP status pill */
body.messages-page .rsvp-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
body.messages-page .rsvp-pill.rsvp-yes     { background: rgba(34,139,84,.14); color: #1f6f43; }
body.messages-page .rsvp-pill.rsvp-no      { background: rgba(220,38,38,.10); color: #991b1b; }
body.messages-page .rsvp-pill.rsvp-maybe   { background: rgba(217,119,6,.14); color: #92400e; }
body.messages-page .rsvp-pill.rsvp-pending { background: rgba(120,90,60,.10); color: #6b7280; }

/* ── Activity list (recent log entries, per-recipient) ─────────────── */
body.messages-page .activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.messages-page .activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(120,90,60,.10);
  border-radius: 12px;
}
body.messages-page .activity-row--failed {
  background: rgba(220,38,38,.04);
  border-color: rgba(220,38,38,.30);
}
body.messages-page .activity-row--queued {
  background: rgba(217,119,6,.04);
  border-color: rgba(217,119,6,.20);
}
body.messages-page .activity-channel-badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(120,90,60,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
body.messages-page .activity-channel-badge.is-sms { background: rgba(34,139,84,.10); }
body.messages-page .activity-row-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.messages-page .activity-row-line1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: #172126;
}
body.messages-page .activity-row-line1 strong { font-weight: 700; }
body.messages-page .activity-channel-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 2px 7px;
  background: rgba(120,90,60,.08);
  border-radius: 999px;
}
body.messages-page .activity-status {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
body.messages-page .activity-status--failed { background: rgba(220,38,38,.12); color: #991b1b; }
body.messages-page .activity-status--queued { background: rgba(217,119,6,.12); color: #92400e; }
body.messages-page .activity-row-line2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: #6b7280;
}
body.messages-page .activity-recipient-name { font-weight: 600; color: #4b5563; }
body.messages-page .activity-recipient-name::after { content: ' · '; color: #9ca3af; }
body.messages-page .activity-row-error {
  margin-top: 4px;
  font-size: 12px;
  color: #991b1b;
  font-style: italic;
}
body.messages-page .activity-row-when {
  flex: 0 0 auto;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding-top: 4px;
}
body.messages-page .activity-list-footer {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #6b7280;
  text-align: center;
}

body.messages-page .messages-empty-block {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-size: 13.5px;
  color: #6b7280;
  background: #fffdf8;
  border: 1px dashed rgba(120,90,60,.20);
  border-radius: 12px;
}

@media (max-width: 600px) {
  /* Compact SMS handoff row — fit more rows on a phone screen by tightening
     padding, inlining the pending status with the meta line, and putting
     the two action buttons side-by-side instead of stacked. */
  body.messages-page .sms-handoff-row {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 6px;
  }
  body.messages-page .sms-handoff-info { gap: 2px; }
  body.messages-page .sms-handoff-name { font-size: 13.5px; }
  body.messages-page .sms-handoff-meta { font-size: 11.5px; gap: 6px; }
  body.messages-page .sms-handoff-phone { font-size: 11.5px; }
  body.messages-page .sms-handoff-pending { font-size: 11px; }
  body.messages-page .sms-handoff-last { font-size: 11px; }

  body.messages-page .activity-row { flex-direction: column; gap: 8px; }
  body.messages-page .activity-row-when { align-self: flex-end; padding-top: 0; }
  body.messages-page .activity-channel-badge { width: 28px; height: 28px; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.14 · Invites & Messages — action card buttons + action modals
   The action cards under "Send messages" are now <button> elements
   (so they can open modals via onclick). The global rule that paints
   plain <button>s solid black needs to be outranked, plus we want
   left-aligned text since buttons default to center.
   ════════════════════════════════════════════════════════════════════ */

body.messages-page .message-card-grid button.message-action-card {
  display: block !important;
  text-align: left;
  font: inherit;
  width: 100%;
  margin: 0 !important;
  cursor: pointer;
  background: #fff7ed !important;
  color: #7c2d12 !important;
  border: 1px solid #fed7aa !important;
  box-shadow: none !important;
  padding: 16px !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
body.messages-page .message-card-grid button.message-action-card strong {
  display: block !important;
  color: #172126 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  margin: 0 0 5px !important;
  line-height: 1.2 !important;
}
body.messages-page .message-card-grid button.message-action-card span {
  display: block !important;
  color: #6f6b65 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
body.messages-page .message-card-grid button.message-action-card:hover {
  border-color: rgba(255,126,45,.55) !important;
  box-shadow: 0 8px 22px rgba(92,64,36,.08);
  transform: translateY(-1px);
}
body.messages-page .message-card-grid button.message-action-card.warning {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}
body.messages-page .message-card-grid button.message-action-card.warning strong {
  color: #991b1b !important;
}
body.messages-page .message-card-grid button.message-action-card.warning:hover {
  border-color: rgba(220,38,38,.55) !important;
  box-shadow: 0 8px 22px rgba(190,24,24,.10);
}

/* ── Action modal internals ────────────────────────────────────────── */

.msg-modal-card {
  /* Inherits sizing from .compact-action-modal; just enforce a consistent
     comfortable width for the body content. */
  max-width: 460px !important;
  width: 100% !important;
}

.msg-modal-body {
  padding: 18px 22px 22px;
}

.msg-modal-intro {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}
.msg-modal-intro--danger {
  color: #4b5563;
}
.msg-modal-intro--danger strong { color: #991b1b; }

.msg-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}
.msg-modal-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fffdf8;
  border: 1px solid rgba(120,90,60,.12);
  border-radius: 12px;
}
.msg-modal-stat strong {
  font-size: 22px;
  font-weight: 800;
  color: #172126;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.msg-modal-stat span {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.msg-modal-stat--muted {
  background: rgba(120,90,60,.04);
}
.msg-modal-stat--muted strong { color: #6b7280; }
.msg-modal-stat--danger {
  background: rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.20);
}
.msg-modal-stat--danger strong { color: #991b1b; }

.msg-modal-note {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.45;
  background: rgba(120,90,60,.04);
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid rgba(120,90,60,.20);
}
.msg-modal-note strong { color: #172126; text-transform: capitalize; }

.msg-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(120,90,60,.10);
  margin-top: 4px;
  padding-top: 16px;
}
.msg-modal-cancel {
  background: #fffaf2 !important;
  color: #6b7280 !important;
  border: 1px solid rgba(120,90,60,.18) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  min-height: 0 !important;
  box-shadow: none !important;
  transition: background .12s, color .12s;
}
.msg-modal-cancel:hover {
  background: rgba(120,90,60,.10) !important;
  color: #374151 !important;
}
.msg-modal-confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #172126 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer;
  min-height: 0 !important;
  box-shadow: 0 6px 14px rgba(23,33,38,.16);
  text-decoration: none;
  transition: background .12s;
}
.msg-modal-confirm:hover { background: #0c1316 !important; }
.msg-modal-confirm--danger {
  background: #991b1b !important;
  box-shadow: 0 6px 14px rgba(190,24,24,.20);
}
.msg-modal-confirm--danger:hover { background: #7f1d1d !important; }

/* Danger-eyebrow color override */
.msg-modal-card--danger .eyebrow-danger {
  color: #991b1b !important;
}

@media (max-width: 600px) {
  .msg-modal-stats { grid-template-columns: 1fr 1fr; }
  .msg-modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .msg-modal-cancel, .msg-modal-confirm { width: 100%; justify-content: center; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.14 · Invites & Messages — uninvited callout, workflow modals,
   activity bins.
   ════════════════════════════════════════════════════════════════════ */

/* ── "Not yet invited" callout ─────────────────────────────────────── */

body.messages-page .messages-uninvited-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 6px;
  padding: 14px 16px;
  background: #fffaf2;
  border: 1px solid rgba(255,126,45,.40);
  border-left: 4px solid #ea580c;
  border-radius: 14px;
}
body.messages-page .messages-uninvited-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ea580c;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.messages-page .messages-uninvited-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.messages-page .messages-uninvited-text strong {
  font-size: 14.5px;
  font-weight: 800;
  color: #172126;
}
body.messages-page .messages-uninvited-text span {
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.4;
}
body.messages-page .messages-uninvited-action {
  flex: 0 0 auto;
  background: #172126 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
  min-height: 0 !important;
  margin: 0 !important;
  box-shadow: 0 6px 14px rgba(23,33,38,.16) !important;
}
body.messages-page .messages-uninvited-action:hover { background: #0c1316 !important; }

@media (max-width: 600px) {
  body.messages-page .messages-uninvited-callout { flex-wrap: wrap; }
  body.messages-page .messages-uninvited-action { width: 100%; }
}

/* ── Workflow modal ────────────────────────────────────────────────── */

.workflow-modal-card {
  /* Wider than the simple action modal — needs room for the recipient table */
  max-width: 720px !important;
  width: 100% !important;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.workflow-modal-card .ilm-action-body.workflow-modal-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;          /* the inner table-wrap scrolls instead */
  min-height: 0;
}

.workflow-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.workflow-filter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
}
.workflow-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.workflow-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px !important;
  background: #fffaf2 !important;
  color: #6b7280 !important;
  border: 1.5px solid rgba(120,90,60,.18) !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  min-height: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: background .12s, border-color .12s, color .12s;
}
.workflow-filter-chip:hover {
  background: rgba(255,126,45,.08) !important;
  border-color: rgba(255,126,45,.40) !important;
}
.workflow-filter-chip.is-active {
  background: #172126 !important;
  color: #ffffff !important;
  border-color: #172126 !important;
}
.workflow-filter-chip .filter-count {
  font-weight: 600;
  opacity: .75;
  font-size: 11.5px;
}

.workflow-recipient-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(120,90,60,.05);
  border-radius: 10px;
  border-left: 3px solid #ea580c;
}
.workflow-recipient-summary strong {
  font-size: 22px;
  font-weight: 800;
  color: #172126;
  font-variant-numeric: tabular-nums;
}
.workflow-recipient-summary span {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
}
.workflow-recipient-summary--danger {
  background: rgba(220,38,38,.06);
  border-left-color: #991b1b;
}
.workflow-recipient-summary--danger strong { color: #991b1b; }

.workflow-recipient-table-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 340px;
  border: 1px solid rgba(120,90,60,.12);
  border-radius: 12px;
  background: #ffffff;
}
.workflow-recipient-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.workflow-recipient-table th {
  position: sticky;
  top: 0;
  background: #fffdf8;
  z-index: 1;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(120,90,60,.12);
}
.workflow-recipient-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(120,90,60,.08);
  color: #172126;
  vertical-align: middle;
}
.workflow-recipient-table tr:last-child td { border-bottom: none; }
.workflow-recipient-table .check-col {
  width: 32px;
  padding-right: 6px;
}
.workflow-recipient-table .email-col {
  color: #6b7280;
  font-size: 12.5px;
  word-break: break-all;
}
.workflow-recipient-table .status-col {
  width: 110px;
  text-align: right;
  font-size: 12.5px;
  color: #6b7280;
}
.workflow-recipient-table .workflow-row-check,
.workflow-recipient-table .workflow-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #ea580c;
}
.workflow-recipient-table .status-pending {
  color: #9ca3af;
  font-style: italic;
}
.workflow-empty-msg {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
}

.workflow-compose-hint {
  margin: 0;
  font-size: 12.5px;
  color: #6b7280;
  font-style: italic;
}
.workflow-mode-note {
  margin: 0;
  font-size: 11.5px;
  color: #9ca3af;
  text-align: center;
}
.workflow-mode-note strong {
  color: #6b7280;
  text-transform: capitalize;
}

.workflow-action-form { margin: 0; }
.workflow-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(120,90,60,.10);
}
.workflow-actions .msg-modal-confirm[disabled],
.workflow-actions .msg-modal-confirm:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  /* Bottom-sheet on mobile — overrides the inline padding:22px set by JS so
     the modal can claim the full screen width. Same pattern as the signups
     and questions Add modals. */
  #workflowModalInvitations.warm-modal-backdrop,
  #workflowModalReminders.warm-modal-backdrop,
  #workflowModalEventUpdate.warm-modal-backdrop,
  #workflowModalCancellation.warm-modal-backdrop,
  #workflowModalSmsHandoff.warm-modal-backdrop {
    padding: 8px 8px 12px !important;
    align-items: flex-end !important;
  }
  .workflow-modal-card {
    max-height: 92vh;
    max-height: 92dvh;
    max-width: 100% !important;
    width: calc(100vw - 16px) !important;
    border-radius: 20px !important;
  }
  .workflow-modal-card .ilm-action-body.workflow-modal-body {
    padding: 14px 12px 16px;
    gap: 10px;
  }
  /* Give the SMS list specifically as much vertical room as we can. The
     filter chip row and the intro paragraph already take space; the rest
     should be the scrollable list. The 0-padding override is needed
     because the base mobile rule above sets 4px which would inset the
     rows from the body edge. */
  .workflow-modal-body--sms .workflow-recipient-table-wrap {
    max-height: none;
    flex: 1 1 auto;
    padding: 0;
  }
  .workflow-recipient-table-wrap { max-height: 240px; }
  .workflow-recipient-table .email-col { display: none; }
  .workflow-actions { flex-direction: column-reverse; align-items: stretch; }
  .workflow-actions .msg-modal-cancel,
  .workflow-actions .msg-modal-confirm { width: 100%; justify-content: center; text-align: center; }
  /* SMS modal's "Done" sits alone — keep it as a single button */
  .workflow-actions--sms-only { flex-direction: row; }

  /* Tighten the filter chips and intro on mobile so more list fits */
  .workflow-modal-body--sms .workflow-filter-row { gap: 6px; }
  .workflow-modal-body--sms .workflow-filter-chip {
    padding: 6px 11px !important;
    font-size: 12px !important;
  }
  .workflow-modal-body--sms .workflow-sms-intro {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
  }
}

/* ── Activity bins (replaces flat activity list) ───────────────────── */

body.messages-page .activity-bin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.messages-page .activity-bin {
  background: #ffffff !important;
  border: 1px solid rgba(120,90,60,.12);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s;
}
body.messages-page .activity-bin[open] {
  border-color: rgba(120,90,60,.22);
  box-shadow: 0 4px 14px rgba(92,64,36,.06);
}
body.messages-page .activity-bin--failed {
  background: rgba(220,38,38,.04) !important;
  border-color: rgba(220,38,38,.30);
}
/* The "logged but not sent" state used to tint the row peach, but that
   reads visually as "this row is a different type" rather than "this
   send was logged but not actually delivered." The Logged (not sent)
   pill in the row's headline conveys the state plainly without the
   background change. The !important above defeats stale cached rules
   from prior CSS versions. */
body.messages-page .activity-bin-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
body.messages-page .activity-bin-summary::-webkit-details-marker { display: none; }
body.messages-page .activity-bin-summary::marker { content: ''; }
body.messages-page .activity-bin-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(120,90,60,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
body.messages-page .activity-bin-icon.is-sms { background: rgba(34,139,84,.10); }
body.messages-page .activity-bin-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.messages-page .activity-bin-line1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: #172126;
}
body.messages-page .activity-bin-line1 strong { font-weight: 700; }
body.messages-page .activity-bin-size-pill {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  background: rgba(255,126,45,.12);
  color: #9a3412;
  border-radius: 999px;
  letter-spacing: .02em;
}
body.messages-page .activity-bin-size-pill--single {
  background: rgba(120,90,60,.10);
  color: #6b7280;
}
body.messages-page .activity-bin-line2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: #6b7280;
}
body.messages-page .activity-bin-filter { font-weight: 600; color: #4b5563; }
body.messages-page .activity-bin-by { font-size: 11.5px; }
body.messages-page .activity-bin-when {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding-top: 4px;
}
body.messages-page .activity-bin-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  color: #9ca3af;
  transition: transform .2s;
}
body.messages-page .activity-bin[open] .activity-bin-chevron { transform: rotate(180deg); }
body.messages-page .activity-bin-detail {
  border-top: 1px solid rgba(120,90,60,.10);
  background: #fffdf8;
  padding: 6px 0 0;
}
body.messages-page .activity-bin-empty {
  margin: 0;
  padding: 14px;
  font-size: 12.5px;
  color: #9ca3af;
  font-style: italic;
  text-align: center;
}
body.messages-page .activity-bin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
body.messages-page .activity-bin-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9ca3af;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(120,90,60,.08);
}
body.messages-page .activity-bin-table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(120,90,60,.06);
  color: #172126;
  vertical-align: middle;
}
body.messages-page .activity-bin-table tr:last-child td { border-bottom: none; }
body.messages-page .activity-bin-table .email-col {
  color: #6b7280;
  font-size: 12px;
  /* Only break on whitespace by default; let truly long unbroken strings
     break anywhere as a last resort (long emails on tight columns). Phone
     numbers and short emails stay on one line. */
  overflow-wrap: anywhere;
  word-break: normal;
}
body.messages-page .activity-bin-table .status-col { width: 130px; }
body.messages-page .activity-bin-table .time-col {
  width: 110px;
  text-align: right;
  font-size: 11.5px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.messages-page .activity-bin-row-error {
  margin-top: 4px;
  font-size: 11.5px;
  color: #991b1b;
  font-style: italic;
}
body.messages-page .activity-status--sent {
  background: rgba(34,139,84,.10);
  color: #1f6f43;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  /* Compact recipient table on mobile but keep all columns — the address
     (email or phone) is the most actionable bit when scanning history. */
  body.messages-page .activity-bin-table .time-col { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.14 · Invites & Messages — workflow modal textarea + SMS modal +
   disabled action card state.
   ════════════════════════════════════════════════════════════════════ */

/* Workflow modal textareas (event update + cancellation message bodies) */
.workflow-textarea-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 6px;
  letter-spacing: 0;
  text-transform: none;
}
.workflow-textarea {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,90,60,.18);
  background: #ffffff;
  font-size: 14px;
  line-height: 1.45;
  color: #172126;
  margin: 0 0 6px;
  box-sizing: border-box;
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
}
.workflow-textarea:focus {
  outline: none;
  border-color: rgba(255,126,45,.55);
  box-shadow: 0 0 0 3px rgba(255,126,45,.10);
}
.workflow-textarea-hint {
  margin: 0 0 4px;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Disabled SMS action card (when no guests have phone numbers on file) */
body.messages-page .message-card-grid button.message-action-card.sms-card[disabled],
body.messages-page .message-card-grid button.message-action-card.sms-card:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: rgba(120,90,60,.06) !important;
  border-color: rgba(120,90,60,.18) !important;
}
body.messages-page .message-card-grid button.message-action-card.sms-card[disabled]:hover,
body.messages-page .message-card-grid button.message-action-card.sms-card:disabled:hover {
  border-color: rgba(120,90,60,.18) !important;
  box-shadow: none !important;
  transform: none;
}

/* SMS workflow modal — dense list of guests, no submit form */
.workflow-modal-body--sms {
  /* Tighter inner spacing since each row is the action */
  gap: 12px;
}
.workflow-sms-intro {
  margin: 0;
  padding: 10px 14px;
  background: rgba(120,90,60,.05);
  border-radius: 10px;
  border-left: 3px solid #ea580c;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.45;
}
.workflow-sms-intro strong { color: #172126; }
.workflow-modal-body--sms .workflow-recipient-table-wrap {
  /* No table inside — just the list of rows. Strip the card chrome
     (border, background, padding) that the recipient-table wrap normally
     uses; the dividers between rows are enough visual separation. */
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.workflow-modal-body--sms .sms-handoff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}
/* The .sms-handoff-row / .sms-handoff-btn rules already exist scoped to
   body.messages-page; they'll work inside the modal too since the modal
   is re-parented to <body> which still has .messages-page. */
.workflow-actions--sms-only {
  justify-content: flex-end;
}
.workflow-actions--sms-only .msg-modal-cancel {
  /* "Done" button is the only action — give it a bit more presence */
  background: #172126 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 10px 22px !important;
  font-weight: 800 !important;
}
.workflow-actions--sms-only .msg-modal-cancel:hover {
  background: #0c1316 !important;
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════════
   v5.14 · Reminder type select + reminder-form dirty state +
   SMS handoff actions split (Open text vs Mark sent).
   Applies on both Settings and Invites & Messages because the reminder
   editor lives on both pages with the same markup.
   ════════════════════════════════════════════════════════════════════ */

/* Reminder type select — sits between the time picker and the remove button.
   Capped width so long labels don't squeeze the time picker out of the row. */
body.settings-page .reminder-type-select,
body.messages-page .reminder-type-select {
  flex: 0 0 auto;
  width: 210px;
  max-width: 210px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(120,90,60,.22) !important;
  border-radius: 10px;
  background: #ffffff;
  font-size: 13px !important;
  color: #172126 !important;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  appearance: auto;
  min-width: 0;
  text-overflow: ellipsis;
}
body.settings-page .reminder-type-select:focus,
body.messages-page .reminder-type-select:focus {
  outline: 2px solid rgba(255,126,45,.35);
  outline-offset: 1px;
}

/* "for" word prefix to the recipient cluster. Sits inline after the time
   picker with a small left margin for visual separation — no auto-grow,
   so the row doesn't have a giant empty gap in the middle. */
body.settings-page .reminder-row-recipient-prefix,
body.messages-page .reminder-row-recipient-prefix {
  flex: 0 0 auto;
  margin-left: 4px;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
  align-self: center;
}

/* Keep the label-block from collapsing below its content. */
body.settings-page .reminder-row-label,
body.messages-page .reminder-row-label {
  min-width: 140px;
  /* Natural width — let the recipient cluster sit just to the right of
     the time picker with a normal gap, instead of being yanked to the
     row's far edge. */
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  body.settings-page .reminder-row,
  body.messages-page .reminder-row {
    flex-wrap: wrap;
  }
  body.settings-page .reminder-type-select,
  body.messages-page .reminder-type-select {
    /* On mobile, type-select and time-select share the second line. The
     time select gets the remaining horizontal space; type takes a sane
     min-width. See mobile rules block below for details. */
    width: auto;
    max-width: none;
    flex: 1 1 50%;
    margin-top: 0;
    font-size: 12.5px !important;
  }
  body.settings-page .reminder-row-recipient-prefix,
  body.messages-page .reminder-row-recipient-prefix {
    margin-left: 0;
    font-size: 12.5px;
  }
}

/* ── Reminder save bar dirty state (Invites & Messages only) ───────── */

body.messages-page .messages-reminder-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
}
body.messages-page .reminder-save-status {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.messages-page .reminder-save-status .reminder-save-status-dirty,
body.messages-page .reminder-save-status .reminder-save-status-saved {
  display: none;
}
/* Default state: form has no dirty/saved class → show "All changes saved" */
body.messages-page .messages-reminder-form .reminder-save-status .reminder-save-status-pristine {
  display: inline;
}
body.messages-page .messages-reminder-form.is-dirty .reminder-save-status .reminder-save-status-pristine,
body.messages-page .messages-reminder-form.is-saved .reminder-save-status .reminder-save-status-pristine {
  display: none;
}
body.messages-page .messages-reminder-form.is-dirty .reminder-save-status .reminder-save-status-dirty {
  display: inline;
  color: #9a3412;
  font-weight: 700;
}
body.messages-page .messages-reminder-form.is-saved .reminder-save-status .reminder-save-status-saved {
  display: inline;
  color: #1f6f43;
  font-weight: 700;
}

/* Save button: gray-and-disabled when no changes, dark when dirty,
   green-with-check briefly after save. */
body.messages-page .messages-reminder-save {
  background: #d1d5db !important;
  color: #6b7280 !important;
  border: 0 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: not-allowed;
  box-shadow: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  transition: background .15s, color .15s, box-shadow .15s;
}
body.messages-page .messages-reminder-form.is-dirty .messages-reminder-save {
  background: #dc2626 !important;
  color: #ffffff !important;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(220,38,38,.22) !important;
}
body.messages-page .messages-reminder-form.is-dirty .messages-reminder-save:hover {
  background: #b91c1c !important;
}
body.messages-page .messages-reminder-form.is-saved .messages-reminder-save {
  background: #16a34a !important;
  color: #ffffff !important;
  cursor: default;
}
body.messages-page .messages-reminder-form.is-saved .messages-reminder-save::before {
  content: '✓ ';
}

/* ── SMS handoff: split Open vs Mark sent ──────────────────────────── */

body.messages-page .sms-handoff-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 130px;
}
body.messages-page .sms-handoff-btn--open {
  /* Primary action — opens the texting app */
  background: #fffaf2 !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255,126,45,.55) !important;
}
body.messages-page .sms-handoff-btn--open:hover {
  background: rgba(255,126,45,.12) !important;
  border-color: rgba(255,126,45,.85) !important;
}
body.messages-page .sms-handoff-btn--mark {
  /* Secondary action — explicit confirmation that logs. Neutral cream/gray
     until the host has marked it sent in this session. Same size as the
     Send text button so both buttons in a row look matched. */
  background: #ffffff !important;
  color: #6b7280 !important;
  border: 1.5px solid rgba(120,90,60,.30) !important;
  transition: background .15s, color .15s, border-color .15s;
}
body.messages-page .sms-handoff-btn--mark:hover {
  background: rgba(120,90,60,.06) !important;
  color: #374151 !important;
  border-color: rgba(120,90,60,.50) !important;
}
body.messages-page .sms-handoff-btn--mark:disabled {
  opacity: .55;
  cursor: progress;
}
/* Confirmed state — turns green AFTER the host has clicked Mark sent
   in this session. JS adds .is-marked. */
body.messages-page .sms-handoff-btn--mark.is-marked {
  background: rgba(34,139,84,.10) !important;
  color: #1f6f43 !important;
  border-color: rgba(34,139,84,.55) !important;
}
body.messages-page .sms-handoff-btn--mark.is-marked:hover {
  background: rgba(34,139,84,.18) !important;
  border-color: rgba(34,139,84,.85) !important;
}
body.messages-page .sms-handoff-pending {
  color: #9ca3af;
  font-size: 12px;
  font-style: italic;
}
body.messages-page .sms-handoff-last--fresh {
  background: rgba(34,139,84,.12);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

@media (max-width: 600px) {
  body.messages-page .sms-handoff-actions {
    min-width: 0;
    width: 100%;
    flex-direction: row;
    gap: 6px;
    margin-top: 4px;
  }
  body.messages-page .sms-handoff-actions .sms-handoff-btn {
    flex: 1 1 50%;
    justify-content: center;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    min-height: 0 !important;
  }
  body.messages-page .sms-handoff-actions .sms-handoff-btn--mark {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  body.messages-page .sms-handoff-actions .sms-handoff-btn-icon {
    font-size: 13px;
  }
}

/* Group/household indicator in the SMS handoff list */
body.messages-page .sms-handoff-group-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255,126,45,.14);
  color: #9a3412;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.messages-page .sms-handoff-phone--list {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #6b7280;
  word-break: break-all;
}

@media (max-width: 600px) {
  body.messages-page .sms-handoff-group-tag {
    font-size: 10px;
    padding: 2px 7px;
  }
  body.messages-page .sms-handoff-phone--list {
    font-size: 11px;
  }
}

/* RSVP deadline preset dropdown — sits inline with the date input on
   desktop, stacks on mobile. Hint text below clarifies the relationship
   to the event date. */
body.settings-page .deadline-input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
body.settings-page .deadline-preset-select {
  flex: 1 1 220px;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(120,90,60,.25);
  border-radius: 10px;
  background: #ffffff;
  font-size: 13.5px;
  color: #172126;
  font-weight: 600;
  cursor: pointer;
}
body.settings-page .deadline-input-row input[type="date"]#se-deadline {
  flex: 0 0 180px;
  margin: 0;
}
body.settings-page .deadline-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #6b7280;
  font-style: italic;
}

@media (max-width: 600px) {
  body.settings-page .deadline-input-row {
    flex-direction: column;
    gap: 8px;
  }
  body.settings-page .deadline-preset-select,
  body.settings-page .deadline-input-row input[type="date"]#se-deadline {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Reminder anchor select — sits inside the label block between the
   "days before / on the day of" text and the time picker. Capped width
   so a long option label ("RSVP deadline") doesn't push the time picker
   out of the row, mirroring the type-select cap. */
body.settings-page .reminder-anchor-select,
body.messages-page .reminder-anchor-select {
  flex: 0 0 auto;
  width: 130px;
  max-width: 130px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(120,90,60,.22) !important;
  border-radius: 10px;
  background: #ffffff;
  font-size: 13px !important;
  color: #172126 !important;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  appearance: auto;
  min-width: 0;
}
body.settings-page .reminder-anchor-select:focus,
body.messages-page .reminder-anchor-select:focus {
  outline: 2px solid rgba(255,126,45,.35);
  outline-offset: 1px;
}

/* Row warning when the anchor references a deadline that isn't set */
body.settings-page .reminder-row-warning,
body.messages-page .reminder-row-warning {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 6px 10px;
  background: rgba(255,126,45,.10);
  color: #9a3412;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Keep label-block's children inline on desktop (the existing rules above
   already declare flex-wrap: nowrap; we don't want to override that). The
   anchor select + "at" label + time select must sit on one row. */
body.settings-page .reminder-row-label,
body.messages-page .reminder-row-label {
  /* Min-width matches the smallest sane combination of children:
     day-label (~70) + anchor (130) + at (~14) + time (130) ≈ 360 */
  min-width: 0;
}

/* Cap time-select width so it doesn't claim flex grow space and force a
   wrap. Same pattern as the type select — fixed width keeps the row
   predictable. */
body.settings-page .reminder-time-select,
body.messages-page .reminder-time-select {
  flex: 0 0 auto !important;
  width: 130px !important;
  max-width: 130px !important;
}

/* Inline "at" word between the anchor and time selects, e.g.
     "7 days before event start  at  9:00 AM" */
body.settings-page .reminder-row-at,
body.messages-page .reminder-row-at {
  flex: 0 0 auto;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

/* Anchor select looks "locked" — visually grayed out — when the row's
   anchor option set is effectively a single choice (no deadline configured
   AND this row isn't already on rsvp_deadline). The browser-native disabled
   state (applied via the `disabled` attribute) does most of the work; the
   class is here so we can ALSO override the cursor and opacity to match
   the rest of the design system. */
body.settings-page .reminder-anchor-select.is-locked,
body.messages-page .reminder-anchor-select.is-locked,
body.settings-page .reminder-anchor-select[disabled],
body.messages-page .reminder-anchor-select[disabled] {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  border-color: rgba(120,90,60,.15) !important;
  cursor: not-allowed;
  opacity: 1;  /* override browser default of ~0.6 — we control the look */
}

@media (max-width: 720px) {
  /* Compact reminder row on phones. Goal: a clean two-line layout that
     mirrors the desktop reading order:
         Line 1:  [▲ N ▼]  days before  [anchor ▾]
         Line 2:  at [time ▾]  for [type ▾]                          ×
     with the × pinned to the right edge (matching desktop behavior).

     Trick: `display: contents` on the label-block removes its box from
     layout while keeping its children, so they become direct flex
     children of the row. Combined with `flex-wrap: wrap` on the row,
     the elements pack naturally and wrap when there isn't room. */
  body.settings-page .reminder-row-label,
  body.messages-page .reminder-row-label {
    display: contents;
  }
  body.settings-page .reminder-row,
  body.messages-page .reminder-row {
    padding: 10px 12px;
    gap: 6px 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  body.settings-page .reminder-row-day-label,
  body.messages-page .reminder-row-day-label {
    font-size: 13px;
    flex: 0 0 auto;
  }
  body.settings-page .reminder-row-at,
  body.messages-page .reminder-row-at {
    font-size: 13px;
    flex: 0 0 auto;
  }
  body.settings-page .reminder-anchor-select,
  body.messages-page .reminder-anchor-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 130px;
    max-width: none;
    height: 34px;
    margin-top: 0;
    font-size: 12.5px !important;
  }
  body.settings-page .reminder-time-select,
  body.messages-page .reminder-time-select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 100px;
    max-width: none !important;
    height: 34px !important;
    font-size: 12.5px !important;
  }
  body.settings-page .reminder-row-recipient-prefix,
  body.messages-page .reminder-row-recipient-prefix {
    margin-left: 0;
    font-size: 12.5px;
    flex: 0 0 auto;
  }
  body.settings-page .reminder-type-select,
  body.messages-page .reminder-type-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 130px;
    max-width: none;
    height: 34px;
    margin-top: 0;
    font-size: 12.5px !important;
  }
  /* Stepper a touch smaller too */
  body.settings-page .reminder-row .mini-stepper,
  body.messages-page .reminder-row .mini-stepper {
    height: 34px;
  }
  body.settings-page .reminder-row .mini-stepper-input,
  body.messages-page .reminder-row .mini-stepper-input {
    width: 36px;
    height: 34px;
    font-size: 14px;
  }
  /* The `margin-left: auto !important` from the global rule pins the ×
     to the right edge of whichever wrapped line it lands on — same
     behavior as desktop. */
}

@media (max-width: 720px) {
  /* On phones, give the savebar room: keep the status text + button on
     one row but allow the button to shrink/wrap if labels overflow.
     Status text on the left, button on the right — same as desktop, just
     tighter. */
  body.messages-page .messages-reminder-savebar {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  body.messages-page .messages-reminder-save {
    padding: 10px 16px !important;
    font-size: 13px !important;
    flex: 0 1 auto;
  }
  body.messages-page .reminder-save-status {
    font-size: 12px;
    flex: 0 1 auto;
  }
}

@media (max-width: 720px) {
  /* Compact mobile activity rows. Icon stays on the left (matching desktop);
     we just trim padding and font sizes for phones. */
  body.messages-page .activity-bin-summary {
    padding: 10px 12px;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  body.messages-page .activity-bin-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    flex: 0 0 auto;
  }
  body.messages-page .activity-bin-info {
    flex: 1 1 auto;
    /* min-width:0 lets the column shrink below its min-content so wide
       pills inside line1 wrap onto multiple lines instead of pushing
       siblings (icon, when) off the row. */
    min-width: 0;
    gap: 2px;
  }
  body.messages-page .activity-bin-when {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    align-self: flex-start;
    padding-top: 2px;
    font-size: 11px;
    gap: 4px;
  }
  body.messages-page .activity-bin-line1 {
    font-size: 13px;
    gap: 6px;
  }
  body.messages-page .activity-bin-line1 strong { font-weight: 700; }
  body.messages-page .activity-bin-size-pill {
    font-size: 10.5px;
    padding: 1px 7px;
  }
  body.messages-page .activity-bin-line2 {
    font-size: 11.5px;
    gap: 6px;
  }
  body.messages-page .activity-bin-by { display: none; }
  body.messages-page .activity-bin-chevron { font-size: 12px; }
}

/* When a workflow modal is open, pin the body in place so finger-drag
   inside the modal doesn't leak through to scrolling the page underneath.
   The JS stores window.scrollY in a data attr, sets body.style.top to the
   negative offset (so the page stays visually in place), and restores
   the scroll position on close. */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* SMS handoff row: name + RSVP pill on the same line.
   The RSVP pill sits to the right of the name on both desktop and mobile —
   prior placement had it in the meta row, which made the response status
   feel disconnected from who it belonged to. */
body.messages-page .sms-handoff-name-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.messages-page .sms-handoff-name-line .sms-handoff-name {
  /* Override the column-layout name color/size from the original rule.
     margin-right adds extra breathing room before the rsvp pill on top
     of the flex gap, so the name reads as a unit before the indicator. */
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 2px;
}

@media (max-width: 720px) {
  /* Hide the phone number on phones — the host doesn't need to verify
     the digits in the recipient list since the phone's own messaging app
     will surface them when the sms: link opens. Saves vertical space. */
  body.messages-page .sms-handoff-meta .sms-handoff-phone,
  body.messages-page .sms-handoff-meta .sms-handoff-phone--list {
    display: none;
  }
  /* Also hide the "Group · 2 numbers" tag here on mobile since the
     button label already says "Send group text". The list of numbers
     is the noise we're cutting. */
  body.messages-page .sms-handoff-meta .sms-handoff-group-tag {
    display: none;
  }
  /* If the meta row is now empty (no phone, only last-sent or pending),
     keep its visual gap minimal so it doesn't look hollow. */
  body.messages-page .sms-handoff-meta:empty {
    display: none;
  }
}

@media (max-width: 720px) {
  /* Tighter expanded recipient table on phones — less wasted space. */
  body.messages-page .activity-bin-detail { padding-top: 2px; }
  body.messages-page .activity-bin-table th { padding: 6px 10px; }
  body.messages-page .activity-bin-table td { padding: 7px 10px; }
  body.messages-page .activity-bin-table .status-col { width: auto; }
}

/* ─── Contact import preview ───────────────────────────────────────────
   Reuses .contact-table for visual consistency with the rest of the
   contacts surface; only adds the include checkbox column and the
   bulk-toggle row above the table. */

/* The "Update matching" toggle row sits on its own line so it reads as
   a setting that applies to the import (not as a control sibling to
   Select-all / Select-none). The bulk-toggle buttons sit right above
   the table, next to it visually. */
.contact-import-preview-options {
  margin: 8px 0 12px;
}
.contact-import-preview-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 10px;
}
.contact-import-preview-bulk {
  display: flex;
  gap: 8px;
}
.contact-import-preview-table .ci-pre-include-col {
  width: 36px;
  text-align: center;
  padding-left: 12px;
  padding-right: 4px;
}
/* The shared .contact-table-scroll wrapper has a min-height of 340px
   tuned for the All Contacts page (so an empty filter result doesn't
   collapse to nothing). Import previews are typically just a handful of
   rows, so we override that here to keep the panel tight.

   We also drop the wrapper's border + background here — for the import
   preview we just want the per-row horizontal dividers, not a boxed
   panel inside the card. */
.contact-import-page .contact-table-scroll {
  min-height: 0;
  max-height: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  /* Pull the table flush to the card edges so we get a bit more
     horizontal room on phones. */
  margin-left: -4px;
  margin-right: -4px;
}
/* Status badges in the preview need to be visually distinct so a host
   can scan and immediately see new vs update vs skipped. The shared
   .badge.valid / .badge.sent both happen to be green which collapses
   the distinction; scope new colors here. */
.contact-import-preview-table .badge.ci-status-new {
  background: #dcfce7;
  color: #166534;
}
.contact-import-preview-table .badge.ci-status-update {
  background: #dbeafe;
  color: #1e40af;
}
.contact-import-preview-table .badge.ci-status-match {
  background: #f3f4f6;
  color: #4b5563;
}
.contact-import-preview-table .badge.ci-status-skipped {
  background: #f3f4f6;
  color: #6b7280;
}
/* Warning treatment for rows with name mismatch or within-file dups.
   The badge is amber (matches the dedup-warning notice on contact-edit
   page); the row gets a subtle amber tint and a left border so it's
   easy to spot in a long preview list. */
.contact-import-preview-table .badge.ci-status-warning {
  background: #fef3c7;
  color: #92400e;
}
.contact-import-preview-table tr.ci-pre-row--warn td {
  background: rgba(245,158,11,.06);
}
.contact-import-preview-table tr.ci-pre-row--warn td:first-child {
  border-left: 3px solid #f59e0b;
}
.ci-row-warning-desktop {
  margin-top: 4px;
  font-size: 12px;
  color: #92400e;
}
.ci-row-warning-line {
  line-height: 1.45;
}
.ci-mobile-warn {
  color: #92400e !important;
  font-size: 11px !important;
  white-space: normal !important;
  margin-top: 2px;
}
/* On desktop the dedicated Status column carries the warning badge, so
   the inline desktop note sits in the Name cell where it's most visible
   next to the actual data being warned about. The mobile-meta block hides
   the desktop note (and shows .ci-mobile-warn lines instead). */
@media (max-width: 720px) {
  .ci-row-warning-desktop { display: none; }
}
@media (min-width: 721px) {
  .ci-mobile-warn { display: none !important; }
}
.contact-import-preview-table tr.ci-pre-row--empty td {
  color: #9ca3af;
  background: rgba(0,0,0,.015);
}
.contact-import-preview-form .actions {
  margin-top: 16px;
}
/* Desktop: keep the dedicated columns visible, hide the mobile-meta block
   that lives inside the Name cell (it duplicates info that's already in
   the Email/Phone/Notes/Status columns on wide screens). */
.contact-import-preview-table .contact-mobile-meta { display: none; }
.contact-import-preview-table .ci-mobile-notes,
.contact-import-preview-table .ci-mobile-status { display: none; }

@media (max-width: 720px) {
  /* Mobile: collapse the row down to a single Name cell that stacks the
     name + email/phone/status underneath (matches the All Contacts page
     pattern). The dedicated email/phone/notes/status columns are hidden
     since their info is now stacked inside the Name cell. */
  .contact-import-preview-table thead { display: none !important; }
  .contact-import-preview-table tbody tr.contact-data-row {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-areas: "include main" !important;
    align-items: start !important;
    padding: 10px 4px !important;
    border-bottom: 1px solid rgba(120,90,60,.10) !important;
    background: transparent !important;
  }
  .contact-import-preview-table tbody tr.contact-data-row td::before,
  .contact-import-preview-table tbody tr.contact-data-row td[data-label]::before {
    content: "" !important; display: none !important;
  }
  .contact-import-preview-table tbody td.ci-pre-include-col {
    grid-area: include !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: center !important;
  }
  .contact-import-preview-table tbody td[data-col="name"] {
    grid-area: main !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
  }
  .contact-import-preview-table thead th[data-col="email"],
  .contact-import-preview-table thead th[data-col="phone"],
  .contact-import-preview-table thead th[data-col="notes"],
  .contact-import-preview-table thead th[data-col="status"],
  .contact-import-preview-table tbody td[data-col="email"],
  .contact-import-preview-table tbody td[data-col="phone"],
  .contact-import-preview-table tbody td[data-col="notes"],
  .contact-import-preview-table tbody td[data-col="status"] {
    display: none !important;
  }
  /* Name + meta lines, modeled on .contacts-page .contact-mobile-* */
  .contact-import-preview-table .contact-mobile-name { min-width: 0; }
  .contact-import-preview-table .contact-mobile-name strong {
    font-size: 14px;
    font-weight: 700;
    color: #172126;
    display: block;
    min-width: 0;
    /* Allow names to wrap (preview rows can be tall, unlike the dense
       All Contacts page) so long names aren't ellipsed away. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .contact-import-preview-table .contact-mobile-meta {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
  }
  .contact-import-preview-table .contact-mobile-line {
    display: block;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Strip browser auto-linking on phone numbers so they don't render
       as underlined orange links. Mirrors .contact-mobile-phone in the
       All Contacts page. */
    text-decoration: none !important;
  }
  .contact-import-preview-table .contact-mobile-line a {
    color: #6b7280 !important;
    text-decoration: none !important;
    pointer-events: none;
    -webkit-touch-callout: none;
  }
  .contact-import-preview-table .ci-mobile-status {
    display: inline-block;
    margin-top: 4px;
    white-space: normal;
  }
  .contact-import-preview-table .ci-mobile-notes {
    color: #9ca3af;
    font-style: italic;
    white-space: normal;
  }
}
@media (max-width: 720px) {
  .contact-import-preview-controls { flex-direction: column; align-items: stretch; }
  .contact-import-preview-bulk { justify-content: flex-end; }
}

/* ─── Contact merge modal ─────────────────────────────────────────────── */
.merge-keeper-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 16px;
  max-height: 320px;
  overflow-y: auto;
}
.merge-keeper-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(120,90,60,.14);
  border-radius: 10px;
  cursor: pointer;
  background: #fffdf8;
  transition: background .12s, border-color .12s;
}
.merge-keeper-option:hover { background: rgba(255,126,45,.06); border-color: rgba(255,126,45,.30); }
.merge-keeper-option input[type="radio"] {
  margin: 3px 0 0 0;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.merge-keeper-option:has(input:checked) { background: rgba(255,126,45,.10); border-color: rgba(255,126,45,.55); }
.merge-keeper-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;        /* take remaining width inside the option box */
  word-break: break-word; /* let long emails wrap instead of pushing out */
}
.merge-keeper-text strong {
  font-size: 14px;
  color: #172126;
  white-space: normal;   /* don't force per-char vertical stacking */
  overflow-wrap: anywhere;
}
.merge-keeper-text .meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
}


/* Global dismissible-status styling so the X-to-close button looks like
   a subtle close glyph, not the platform's default dark filled button.
   Applies on every page (the older .warm-data-page-scoped version still
   wins on those pages, but covers the rest of the app). */
.dismissible-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dismissible-status > span { flex: 1 1 auto; min-width: 0; }
.dismissible-status .status-close {
  margin-left: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  color: inherit !important;
  margin-top: 0 !important;
  min-height: 0;
  padding: 2px 8px;
  font-size: 18px;
  line-height: 1;
  border-radius: 999px;
  opacity: .55;
  transition: opacity .12s, background .12s;
}
.dismissible-status .status-close:hover {
  opacity: 1;
  background: rgba(0,0,0,.06) !important;
}

/* ─── Deactivated Contacts page ──────────────────────────────────────
   Faded look on rows so the host can immediately tell these are not in
   their active book. The Reactivate button is full-strength so it
   stands out as the "do something" affordance. */
.deactivated-contacts-page .contact-row-deactivated td:not(.actions-cell) {
  opacity: .65;
}
.deactivated-contacts-page .contact-row-deactivated:hover td:not(.actions-cell) {
  opacity: .85;
}
.deactivated-contacts-page .contact-table tbody tr.contact-data-row {
  cursor: default !important;
}
.deactivated-contacts-page .contact-table tbody tr.contact-data-row:hover {
  background: rgba(0,0,0,.025);
}

/* ─── Contact-edit modal: Deactivate section ─────────────────────────
   Placed at the bottom of the modal body, visually separated by a
   horizontal rule and a slight tonal shift. The section has its own
   header text so it reads as a deliberate destructive action, not as
   another form field that gets saved with Save.

   Important: the small Deactivate button below uses the standard
   .small.danger style so it picks up the platform's red destructive
   button visuals. We give it a left margin of 0 to defeat any
   button-stacking margin from sibling form elements. */
.cem-deactivate-section {
  margin-top: 8px;
  padding-top: 14px;
}
.cem-deactivate-divider {
  border: 0;
  border-top: 1px solid rgba(120,90,60,.18);
  margin: 0 0 14px 0;
}
.cem-deactivate-label {
  font-size: 13px;
  font-weight: 700;
  color: #7c2d12;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px 0;
}
.cem-deactivate-help {
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.45;
}
.cem-deactivate-section .inline-form {
  margin: 0;
}
.cem-deactivate-section button.danger {
  margin-top: 0;
}

/* ─── Mobile: equalize hamburger padding around the card title row ───
   The card has 14px padding all around, but the H2 inside the title row
   has the browser-default ~0.83em top/bottom margin which makes the
   visual space above the H2 (and so above the hamburger that vertically
   centers against it) noticeably larger than the right-edge gap. Zero
   the H2's vertical margins so the title row's natural height matches
   the hamburger size and the four corner gaps read as equal. */
@media (max-width: 820px) {
  .contacts-page .contacts-title-block h2,
  .groups-page .contacts-title-block h2,
  .invite-lists-page .contacts-title-block h2,
  .warm-data-page .contact-list-header h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
  }
}

/* ─── Import Contacts: All-Contacts-style mobile combined card ───────
   On mobile (≤820px) the standalone page-nav title card is hidden and
   the page title + hamburger live inline at the top of the first
   content card, exactly like the All Contacts page. The Upload heading
   becomes secondary on mobile and shows below. Desktop is unaffected:
   page-nav stays as the title card; Upload heading reads as the card's
   own H2. */
.contact-import-page .import-mobile-title-row { display: none; }
.contact-import-page .import-mobile-h2 { display: none; }
@media (max-width: 820px) {
  .contact-import-page .major-page-nav-shell { display: none !important; }
  .contact-import-page .import-mobile-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    margin-bottom: 12px;
  }
  .contact-import-page .import-mobile-h2 { display: block; }
  /* On mobile the page title is "Import Contacts"; the secondary
     "Upload CSV or vCard" heading drops to a smaller weight so it
     reads as a section heading inside the unified card rather than
     a competing card title. */
  .contact-import-page .import-desktop-h2 {
    font-size: 18px;
    margin-top: 4px;
    margin-bottom: 6px;
  }
  /* Eliminate stray top padding so the title row hugs the card top */
  .contact-import-page .import-upload-card { padding-top: 14px; }
}

/* ─── Contact subpages: unified mobile look ──────────────────────────
   Switching between All Contacts, Import, Families & Groups, Invite
   Lists, and Deactivated Contacts felt jittery because the underlying
   markup uses two different body classes (`contacts-page` vs
   `warm-data-page`) with slightly different card padding, border
   radius, and container side padding. This block normalizes all five
   pages on mobile so the first card sits at the same X coordinate, has
   the same corner radius, and has the same internal padding regardless
   of which page you're on. */
@media (max-width: 820px) {
  /* Same outer page padding regardless of body class. */
  .host-body.contacts-page .container,
  .host-body.groups-page .container,
  .host-body.invite-lists-page .container,
  .host-body.contact-import-page .container,
  .host-body.deactivated-contacts-page .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Same first-card visual: 20px radius, no outer padding/border-radius
     conflicts. The contacts-page sticky-header pattern uses padding 0
     on the card and adds inner padding via .contacts-sticky-header;
     the other pages use padding 14px on the card itself. We keep both
     working but force matching radius and a consistent inset. */
  .host-body.contacts-page .card,
  .host-body.contacts-page .contacts-table-card,
  .host-body.groups-page .card,
  .host-body.groups-page .warm-table-card,
  .host-body.invite-lists-page .card,
  .host-body.invite-lists-page .warm-table-card,
  .host-body.contact-import-page .card,
  .host-body.contact-import-page .warm-table-card,
  .host-body.deactivated-contacts-page .card {
    border-radius: 22px !important;
  }

  /* Cards that DON'T use the sticky-header pattern get unified inner
     padding so their content sits at the same inset as All Contacts.
     Groups and Invite Lists DO use the sticky-header pattern (their
     warm-table-card is padding 0, with the sticky-header providing
     16/14/10 inner inset) — adding 14px on top of that would double-
     pad the content and push it 14px further inward than All Contacts.
     So only the cards that use a flat layout get the 14px treatment. */
  .host-body.contact-import-page .card.import-upload-card,
  .host-body.contact-import-page .card,
  .host-body.deactivated-contacts-page .card {
    padding: 14px !important;
  }
  /* Groups + Invite Lists keep the sticky-header pattern matching All
     Contacts — outer card has zero padding, inner sticky-header carries
     the 16/14/10 inset, content lines up at the same X coordinate. */
  .host-body.groups-page .warm-table-card,
  .host-body.invite-lists-page .warm-table-card {
    padding: 0 !important;
  }

  /* Title-row inside each card: same vertical alignment treatment. The
     H2 zero-margin rule from earlier already covers most pages — this
     just makes sure every page's title row uses the same flex layout
     and bottom gap. */
  .host-body.contacts-page .contacts-title-row,
  .host-body.groups-page .contacts-title-row,
  .host-body.invite-lists-page .contacts-title-row,
  .host-body.contact-import-page .contacts-title-row,
  .host-body.deactivated-contacts-page .contacts-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  /* Title H2 size + line-height + margin reset. We use a doubled-up
     selector (.host-body.contacts-page.contacts-page) to bump the
     specificity above any older warm-data-page H2 sizing rules that
     might otherwise shrink the heading on Families & Groups and
     Invite Lists. */
  .host-body.contacts-page.contacts-page .contacts-title-block h2,
  .host-body.groups-page.groups-page .contacts-title-block h2,
  .host-body.invite-lists-page.invite-lists-page .contacts-title-block h2,
  .host-body.contact-import-page.contact-import-page .contacts-title-block h2,
  .host-body.contact-import-page.contact-import-page .contacts-title-block .import-mobile-h2,
  .host-body.deactivated-contacts-page.deactivated-contacts-page .contacts-title-block h2 {
    margin: 0 !important;
    line-height: 1.15 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
  }
}

/* ─── Title-to-search gap unification on Groups + Invite Lists ──────
   The title row already uses the unified 12px bottom margin (see the
   block above). The mobile search rows on Groups + Invite Lists added
   their own 8px top margin, stacking on top of that and pushing the
   search bar 8px lower than it sits on All Contacts. Zero the top
   margin so the visual rhythm matches across the three list pages. */
@media (max-width: 820px) {
  .host-body.groups-page .groups-mobile-search-row,
  .host-body.invite-lists-page .lists-mobile-search-row {
    margin-top: 0 !important;
  }
}

/* ─── Delete-at-bottom section for group/list edit modals ────────────
   Lives inside the modal's scrollable area as the last block, so users
   scroll past their members/contacts list to reach it. The top border
   and tonal shift mark it visually as a destructive zone separate from
   the main content above. */
.ilm-delete-bottom {
  margin: 18px -14px 0;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(120,90,60,.18);
  background: #fffaf3;
}
.ilm-delete-bottom .cem-deactivate-label {
  font-size: 13px;
  font-weight: 700;
  color: #7c2d12;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 4px 0;
}
.ilm-delete-bottom .cem-deactivate-help {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.4;
}
.ilm-delete-bottom .inline-form { margin: 0; }
.ilm-delete-bottom button.danger { margin-top: 0; }

/* ─── Desktop table-header unification: Families & Groups + Invite Lists
   The All Contacts page styles its `.contact-table` thead with a small
   uppercase grey label (12px, .06em letter-spacing, #6b7280) on a
   #fff9f4 background. Groups and Invite Lists use the same `.contact-
   table` markup but inherit the global `.table th` rule that paints
   them with a darker background (#fff7ed) and dark-red text — making
   them look like pink pill chips. Override with the same All-Contacts
   styling so all three list pages share one header look. */
.host-body.groups-page .contact-table thead th,
.host-body.invite-lists-page .contact-table thead th {
  background: #fff9f4 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #6b7280 !important;
  font-weight: 700 !important;
  white-space: nowrap;
  padding: 10px 12px !important;
}
.host-body.groups-page .contact-table th,
.host-body.groups-page .contact-table td,
.host-body.invite-lists-page .contact-table th,
.host-body.invite-lists-page .contact-table td {
  border-bottom: 1px solid rgba(120,90,60,.08) !important;
}
.host-body.groups-page .contact-table thead th.sortable.sorted,
.host-body.invite-lists-page .contact-table thead th.sortable.sorted {
  color: #172126 !important;
}

/* ─── Numeric column alignment: center the count cells AND headers so
   the digits sit visually under their column label rather than hugging
   the left edge. Applies on Groups (Members, Invite Lists) and Invite
   Lists (Contacts, Groups, Used By Events). */
.host-body.groups-page .contact-table thead th.numeric,
.host-body.invite-lists-page .contact-table thead th.numeric {
  text-align: center !important;
}
.host-body.groups-page .contact-table td.numeric-cell,
.host-body.invite-lists-page .contact-table td.numeric-cell {
  text-align: center !important;
}

/* ─── Actions column: shared treatment across All Contacts, Groups, and
   Invite Lists. Tight column width so the View / Edit button sits close
   to the table edge with a small right inset, header label centered
   above the button cluster. */
.host-body.contacts-page .contact-table thead th.actions-header,
.host-body.groups-page .contact-table thead th.actions-header,
.host-body.invite-lists-page .contact-table thead th.actions-header {
  text-align: center !important;
  width: 120px !important;
  min-width: 120px !important;
  padding-right: 14px !important;
}
.host-body.contacts-page .contact-table td.actions-cell,
.host-body.groups-page .contact-table td.actions-cell,
.host-body.invite-lists-page .contact-table td.actions-cell {
  text-align: center !important;
  width: 120px !important;
  min-width: 120px !important;
  padding-right: 14px !important;
}
.host-body.contacts-page .contact-table td.actions-cell .contact-row-actions,
.host-body.groups-page .contact-table td.actions-cell .contact-row-actions,
.host-body.invite-lists-page .contact-table td.actions-cell .contact-row-actions {
  justify-content: center !important;
}

/* ─── Duplicate-list section in the invite-list edit modal ──────────
   Sits inside the modal scroll area just above the Delete section.
   Same visual treatment as the Delete bottom (top border + cream
   inset) but neutral rather than destructive. */
.ilm-duplicate-bottom {
  margin: 18px -14px 0;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(120,90,60,.18);
  background: #fffaf3;
}
.ilm-duplicate-bottom .cem-deactivate-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 4px 0;
}
.ilm-duplicate-bottom .cem-deactivate-help {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.4;
}
.ilm-duplicate-bottom .inline-form { margin: 0; }
/* When both Duplicate and Delete are visible, the Delete section's
   top border doubles up against the Duplicate section's bottom edge.
   Drop the cream background on Duplicate so the two adjacent blocks
   read as a single "footer actions" zone. */
.ilm-duplicate-bottom + .ilm-delete-bottom {
  margin-top: 0;
}

/* ─── Invite list modal: panel header lays Members + import button on
   one row. The button is small and quiet so it doesn't compete with
   the actual member list below. */
.ilm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ilm-panel-header .ilm-import-btn {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 12px;
  padding: 4px 10px;
  min-height: 26px;
  margin: 0;
}

/* ─── Mobile page-info disclosure ──────────────────────────────────
   A small (i) circle next to the H2 on Families & Groups + Invite
   Lists. Tapping toggles a brief explainer panel below the title
   row. Hidden on desktop where the regular meta paragraph carries
   the same context. */
.contacts-mobile-only { display: none; }
@media (max-width: 820px) {
  .contacts-mobile-only { display: revert; }
}

/* H2 + (i) button laid out on one baseline. Title is allowed to
   shrink so the (i) stays inline beside it on narrow phones. */
.title-with-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.title-with-info > h2 {
  margin: 0 !important;
  min-width: 0;
}
/* (i) info button — sized and shaped to match the adjacent
   .contacts-mobile-add-btn ("+") in the same title row. Inherits
   .button.secondary visuals (cream bg, orange text, peach border)
   from the global stylesheet, so we only need to lock down size,
   shape, and the italic-serif glyph. */
.title-info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 999px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.title-info-toggle > span {
  display: inline-block;
  transform: translateY(-1px);
}
.title-info-toggle[aria-expanded="true"] {
  background: #fed7aa !important;
  border-color: #fdba74 !important;
}

/* Panel uses a 0fr → 1fr grid row trick for a smooth height
   transition without needing to know the panel's actual height. */
.page-info-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease, opacity .2s ease, margin-top .2s ease;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
}
.page-info-panel > p {
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  background: #fff5e8;
  border: 1px solid rgba(255,126,45,.22);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #4b3a2a;
}
.page-info-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

/* Bridge to existing rules: the [hidden] attribute defaults to
   display:none which would block the transition. Use !important to
   beat browser defaults but keep the transition usable. */
.page-info-panel[hidden] { display: none; }

/* ─── Event console nav: hamburger only at true mobile ───────────
   Older breakpoints (lines 2074, 2185, 2311, 2393) collapse the
   event nav shell into a 2-column grid + hamburger at ≤1100px.
   That kicks in too early — there's still plenty of horizontal
   room above ~760px to keep the full pill row stacked below the
   event title. These overrides re-assert the wide-desktop layout
   for the 761–1100px band and only let the compact grid +
   hamburger appear at true mobile (≤760px), where the existing
   760px rules already handle it. */
@media (min-width: 761px) {
  .event-console-nav-shell {
    display: block !important;
    grid-template-columns: none !important;
    align-items: initial !important;
    /* Restore the wide-desktop card chrome that the 1100px rules
       strip away. */
    margin: 0 0 18px !important;
    padding: 12px !important;
    border-radius: 28px !important;
    background: var(--host-card, #fffdf8) !important;
    border: 1px solid rgba(120,90,60,.12) !important;
    box-shadow: 0 14px 36px rgba(92,64,36,.08) !important;
    backdrop-filter: none !important;
  }
  .event-console-nav-shell .event-context-card {
    /* Restore the desktop title card padding (10/12/8) over the
       compact 1100px override. */
    padding: 10px 12px 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
  }
  .event-console-nav-shell .event-context-card .eyebrow,
  .event-console-nav-shell .event-context-side,
  .event-console-nav-shell .event-context-features {
    display: revert !important;
  }
  .event-console-nav-shell .event-context-card h1 {
    /* Bring back the larger, multi-line title sizing from desktop
       defaults; the compact 1100px override truncates it. */
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.05 !important;
    margin: 2px 0 6px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .event-console-nav-shell .event-context-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .event-console-nav-shell .event-context-meta span {
    display: inline-flex !important;
  }
  .event-console-nav-shell .event-context-meta span:nth-child(n+3) {
    display: inline-flex !important;
  }
  .event-console-nav-shell .event-context-meta span:not(:last-child)::after {
    content: '•' !important;
    color: #c7b9a8 !important;
    margin-left: 8px !important;
  }
  /* Show desktop pill row, hide hamburger. */
  .event-console-nav-shell .event-tabs-desktop {
    display: flex !important;
    margin: 4px 0 0 !important;
    padding: 7px !important;
    border-radius: 999px !important;
    background: rgba(247,241,234,.74) !important;
    border: 1px solid rgba(120,90,60,.08) !important;
  }
  .event-console-nav-shell .event-tabs-mobile {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RSVP page v2 — modern, theme-aware, polished
   ───────────────────────────────────────────────────────────────────
   Scoped under body.invite-body[data-rsvp2="1"] so the older
   .invite-* and .rsvp-panel rules can keep serving event.php and any
   other invite-style page until those are migrated too.

   Design decisions:
   • All color/contrast comes from --invite-primary / --invite-accent
     / --invite-bg / --invite-ink, which the theme classes (theme-modern,
     theme-elegant, etc.) and inline `theme_style()` already populate.
     We additively derive a couple of mix-* tokens from those for
     surface tints and borders so each theme renders a coherent palette
     without per-theme overrides.
   • Typography pair: Fraunces (display, optical-sized serif) + Inter
     (body). Wedding/elegant themes lean on the serif; playful themes
     get the same pair but with more accent saturation via the theme
     variables.
   • Custom Yes/Maybe/No: hidden native radio + label-as-button. State
     driven by :has(:checked) on the wrapping label so we don't need
     JS. Color tokens for each response (yes=green, maybe=amber, no=
     muted red) blend with --invite-primary at the active state.
   • Checkbox cards: same pattern, with an animated checkmark drawn in
     a 16x16 SVG-less mask using clip-path so it stays crisp at any
     scale.
   • Hero image fills full width on mobile, 16:9 on desktop. Falls back
     to a themed gradient pattern when no image is uploaded.
   ═══════════════════════════════════════════════════════════════════ */

body.invite-body[data-rsvp2="1"] {
  --r2-primary: var(--invite-primary, #7c3f2c);
  --r2-accent: var(--invite-accent, #b88962);
  --r2-bg: var(--invite-bg, #fbf7f2);
  --r2-ink: var(--invite-ink, #2f241f);
  /* Surface tokens derived from the theme primary so cards and borders
     feel cohesive on every theme. color-mix gives broad browser
     support (Safari 16.2+, Chrome 111+, Firefox 113+). */
  --r2-surface: color-mix(in srgb, var(--r2-bg) 78%, #ffffff 22%);
  --r2-surface-2: color-mix(in srgb, var(--r2-bg) 92%, #ffffff 8%);
  --r2-border: color-mix(in srgb, var(--r2-primary) 12%, transparent);
  --r2-border-strong: color-mix(in srgb, var(--r2-primary) 22%, transparent);
  --r2-muted: color-mix(in srgb, var(--r2-ink) 58%, transparent);
  --r2-shadow-sm: 0 2px 6px color-mix(in srgb, var(--r2-primary) 8%, transparent);
  --r2-shadow-md: 0 8px 24px color-mix(in srgb, var(--r2-primary) 10%, transparent);
  --r2-shadow-lg: 0 18px 48px color-mix(in srgb, var(--r2-primary) 14%, transparent);
  --r2-radius: 18px;
  --r2-radius-lg: 26px;
  --r2-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --r2-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--r2-body);
  background: var(--r2-bg);
  color: var(--r2-ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Page wrapper — single column, centered, max-width keeps long lines
   readable on big monitors. */
body[data-rsvp2="1"] .rsvp2-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* HERO ────────────────────────────────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: 0;
}
/* v5.19 — composited invite card hero. The PNG is 1200×630 (~1.91:1)
   and already contains the title/details art, so we use the image's
   natural aspect ratio instead of the legacy 16:10 box, and use
   contain (not cover) so nothing gets cropped. The scrim/text
   overlay layers are intentionally absent in this mode — the card
   IS the composition. */
body[data-rsvp2="1"] .rsvp2-hero.rsvp2-hero-card {
  aspect-ratio: 1200 / 630;
  background: var(--r2-surface-2);
}
body[data-rsvp2="1"] .rsvp2-hero-image-card {
  position: absolute;
  inset: 0;
}
body[data-rsvp2="1"] .rsvp2-hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
body[data-rsvp2="1"] .rsvp2-hero-image {
  position: absolute;
  inset: 0;
  background: var(--r2-surface-2);
}
body[data-rsvp2="1"] .rsvp2-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Themed pattern fallback when no image is uploaded. Uses two
   layered radial gradients tinted from the theme primary + accent
   to give a soft, distinctive backdrop without resorting to a flat
   color block. */
body[data-rsvp2="1"] .rsvp2-hero-pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 20% 10%, color-mix(in srgb, var(--r2-accent) 35%, transparent), transparent 60%),
    radial-gradient(100% 90% at 90% 100%, color-mix(in srgb, var(--r2-primary) 30%, transparent), transparent 65%),
    linear-gradient(160deg, color-mix(in srgb, var(--r2-bg) 70%, var(--r2-primary) 30%), var(--r2-bg));
}
body[data-rsvp2="1"] .rsvp2-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, #000 0%, transparent) 30%, color-mix(in srgb, #000 55%, transparent) 100%);
  pointer-events: none;
}
body[data-rsvp2="1"] .rsvp2-hero.no-image .rsvp2-hero-scrim {
  background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--r2-primary) 28%, transparent) 100%);
}
body[data-rsvp2="1"] .rsvp2-hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 24px 26px;
  color: #fff;
}
body[data-rsvp2="1"] .rsvp2-hero.no-image .rsvp2-hero-text {
  color: var(--r2-ink);
}
body[data-rsvp2="1"] .rsvp2-kicker {
  font-family: var(--r2-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: .92;
}
body[data-rsvp2="1"] .rsvp2-hero.no-image .rsvp2-kicker {
  color: var(--r2-primary);
  opacity: 1;
}
body[data-rsvp2="1"] .rsvp2-kicker-name {
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 500;
}
body[data-rsvp2="1"] .rsvp2-title {
  font-family: var(--r2-display);
  font-weight: 500;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  font-variation-settings: 'opsz' 96;
}
body[data-rsvp2="1"] .rsvp2-subtitle {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  opacity: .92;
  max-width: 540px;
}
body[data-rsvp2="1"] .rsvp2-hero.no-image .rsvp2-subtitle {
  color: var(--r2-muted);
}

/* MAIN CONTAINER ──────────────────────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-main {
  padding: 28px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* KEY FACTS ────────────────────────────────────────────────────────
   Three-column grid on desktop, stacked on mobile. Each fact is its
   own card so the visual rhythm is preserved when one of the three
   is absent (RSVP deadline only renders if set). */
body[data-rsvp2="1"] .rsvp2-keyfacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
body[data-rsvp2="1"] .rsvp2-keyfact {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--r2-surface);
  border: 1px solid var(--r2-border);
  border-radius: var(--r2-radius);
  box-shadow: var(--r2-shadow-sm);
}
body[data-rsvp2="1"] .rsvp2-keyfact-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--r2-primary) 9%, transparent);
  color: var(--r2-primary);
}
body[data-rsvp2="1"] .rsvp2-keyfact-icon svg { width: 20px; height: 20px; }
body[data-rsvp2="1"] .rsvp2-keyfact-body { min-width: 0; }
body[data-rsvp2="1"] .rsvp2-keyfact-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--r2-muted);
  margin-bottom: 4px;
}
body[data-rsvp2="1"] .rsvp2-keyfact-value {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--r2-ink);
  line-height: 1.35;
}
body[data-rsvp2="1"] .rsvp2-keyfact-sub {
  font-weight: 400;
  color: var(--r2-muted);
  font-size: 14px;
}
body[data-rsvp2="1"] .rsvp2-keyfact-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--r2-primary);
  text-decoration: none;
}
body[data-rsvp2="1"] .rsvp2-keyfact-link:hover { text-decoration: underline; }

/* CONTEXT (host message + extras) ────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-context {
  background: var(--r2-surface);
  border: 1px solid var(--r2-border);
  border-radius: var(--r2-radius-lg);
  padding: 24px 22px;
  box-shadow: var(--r2-shadow-sm);
}
body[data-rsvp2="1"] .rsvp2-message {
  font-family: var(--r2-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--r2-ink);
  margin: 0 0 16px;
  font-variation-settings: 'opsz' 14;
}
body[data-rsvp2="1"] .rsvp2-context > .rsvp2-message:last-child { margin-bottom: 0; }
body[data-rsvp2="1"] .rsvp2-extras {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--r2-border);
}
body[data-rsvp2="1"] .rsvp2-message + .rsvp2-extras { margin-top: 4px; }
body[data-rsvp2="1"] .rsvp2-extra { margin: 0; }
body[data-rsvp2="1"] .rsvp2-extra dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--r2-muted);
  margin: 0 0 4px;
}
body[data-rsvp2="1"] .rsvp2-extra dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--r2-ink);
}
body[data-rsvp2="1"] .rsvp2-extra a {
  color: var(--r2-primary);
  font-weight: 600;
  text-decoration: none;
}
body[data-rsvp2="1"] .rsvp2-extra a:hover { text-decoration: underline; }

/* RSVP CARD ───────────────────────────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-card {
  background: var(--r2-surface);
  border: 1px solid var(--r2-border);
  border-radius: var(--r2-radius-lg);
  padding: 26px 22px;
  box-shadow: var(--r2-shadow-md);
}
body[data-rsvp2="1"] .rsvp2-card-header { margin-bottom: 18px; }
body[data-rsvp2="1"] .rsvp2-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--r2-accent);
  margin: 0 0 4px;
}
body[data-rsvp2="1"] .rsvp2-card-title {
  font-family: var(--r2-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -.02em;
  color: var(--r2-primary);
  margin: 0;
  line-height: 1.05;
  font-variation-settings: 'opsz' 64;
}

/* Banners (success, error, info) ──────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-banner {
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 16px;
  border: 1px solid;
}
body[data-rsvp2="1"] .rsvp2-banner-success {
  background: color-mix(in srgb, #16a34a 10%, var(--r2-surface));
  border-color: color-mix(in srgb, #16a34a 30%, transparent);
  color: #166534;
}
body[data-rsvp2="1"] .rsvp2-banner-error {
  background: color-mix(in srgb, #dc2626 10%, var(--r2-surface));
  border-color: color-mix(in srgb, #dc2626 30%, transparent);
  color: #991b1b;
}

/* Post-RSVP contact info prompt ──────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-contact-prompt {
  position: relative;
  display: flex; gap: 14px; align-items: flex-start;
  background: color-mix(in srgb, #2563eb 8%, var(--r2-surface));
  border: 1px solid color-mix(in srgb, #2563eb 25%, transparent);
  border-radius: 14px; padding: 16px; margin: 0 0 20px;
}
body[data-rsvp2="1"] .rsvp2-contact-prompt-close {
  position: absolute; top: 10px; right: 12px;
  font-size: 18px; line-height: 1; color: var(--r2-ink-3);
  cursor: pointer; padding: 2px 4px;
}
body[data-rsvp2="1"] .rsvp2-contact-prompt-close:hover { color: var(--r2-ink); }
body[data-rsvp2="1"] .rsvp2-contact-prompt-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-body { flex: 1; padding-right: 20px; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-body strong { display: block; font-size: 15px; color: var(--r2-ink); margin-bottom: 4px; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-body p { font-size: 13px; color: var(--r2-ink-2); margin: 0 0 12px; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-form { display: flex; gap: 8px; flex-wrap: wrap; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-form .rsvp2-input { flex: 1; min-width: 160px; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-btn {
  background: #2563eb; color: #fff; border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
body[data-rsvp2="1"] .rsvp2-contact-prompt-btn:hover { background: #1d4ed8; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-btn:disabled { opacity: .6; cursor: not-allowed; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-member {
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, #2563eb 15%, transparent);
}
body[data-rsvp2="1"] .rsvp2-contact-prompt-member:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-member-name { display: block; font-size: 13px; font-weight: 600; color: var(--r2-ink); margin-bottom: 6px; }
body[data-rsvp2="1"] .rsvp2-contact-prompt-error { font-size: 12px; color: #dc2626; margin: 6px 0 0; }

/* Existing-RSVP indicator ────────────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-existing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: var(--r2-surface-2);
  border: 1px solid var(--r2-border);
  border-radius: 999px;
  font-size: 13px;
  margin-bottom: 16px;
}
body[data-rsvp2="1"] .rsvp2-existing-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--r2-muted);
  flex-shrink: 0;
}
body[data-rsvp2="1"] .rsvp2-dot-yes { background: #16a34a; }
body[data-rsvp2="1"] .rsvp2-dot-maybe { background: #d97706; }
body[data-rsvp2="1"] .rsvp2-dot-no { background: #dc2626; }

/* Form sections ──────────────────────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-form { display: flex; flex-direction: column; gap: 22px; }
body[data-rsvp2="1"] .rsvp2-section { display: flex; flex-direction: column; gap: 10px; }
body[data-rsvp2="1"] .rsvp2-section-title {
  font-family: var(--r2-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--r2-ink);
  margin: 6px 0 2px;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 24;
}
body[data-rsvp2="1"] .rsvp2-section-help {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--r2-muted);
  line-height: 1.45;
}

/* Field primitives ───────────────────────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-field { display: flex; flex-direction: column; gap: 6px; }
body[data-rsvp2="1"] .rsvp2-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--r2-ink);
}
body[data-rsvp2="1"] .rsvp2-req { color: #dc2626; font-weight: 700; }
body[data-rsvp2="1"] .rsvp2-help {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--r2-muted);
  line-height: 1.4;
}
body[data-rsvp2="1"] .rsvp2-input {
  font-family: var(--r2-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--r2-border-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--r2-ink);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
body[data-rsvp2="1"] .rsvp2-input:focus {
  outline: none;
  border-color: var(--r2-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2-primary) 15%, transparent);
}
body[data-rsvp2="1"] .rsvp2-input-narrow { max-width: 140px; }
body[data-rsvp2="1"] .rsvp2-textarea { resize: vertical; min-height: 80px; line-height: 1.45; }

/* v.189.6 — public Messages section (rsvp.php). Sits in its own card
   below the RSVP form. Two parts: scrollable thread of bubbles + a
   compose form. Outbound (host→guest) bubbles align left in a neutral
   cream, inbound (guest→host) bubbles align right using the theme
   primary, so the guest's own messages are the "highlighted" side —
   mirror of the host-side conv-* styles in event-messages.php.

   The thread has no scroll cap (it can grow with the card) but the
   default render only shows the most recent 3; older rows have a
   [hidden] attribute and a "Show N earlier messages" button reveals
   them. JS toggle lives at the bottom of this file. */
body[data-rsvp2="1"] .rsvp2-messages-card { }
body[data-rsvp2="1"] .rsvp2-messages-empty {
  text-align: left;
  margin: 4px 0 18px;
  color: #6c6357;
  font-style: italic;
}
body[data-rsvp2="1"] .rsvp2-thread {
  display: flex; flex-direction: column; gap: 12px;
  margin: 4px 0 20px;
}
body[data-rsvp2="1"] .rsvp2-thread-toggle {
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--r2-primary, #7c3f2c);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 10px;
  cursor: pointer;
}
body[data-rsvp2="1"] .rsvp2-thread-toggle:hover { color: var(--r2-primary-strong, #5a2c1d); }
body[data-rsvp2="1"] .rsvp2-thread-row {
  max-width: 80%;
  display: flex; flex-direction: column;
}
body[data-rsvp2="1"] .rsvp2-thread-bubble-out {
  /* Guest's own messages — align right, use theme primary. */
  align-self: flex-end; align-items: flex-end;
}
body[data-rsvp2="1"] .rsvp2-thread-bubble-in {
  /* Host messages — align left, neutral cream. */
  align-self: flex-start; align-items: flex-start;
}
body[data-rsvp2="1"] .rsvp2-thread-bubble {
  padding: 10px 15px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  word-break: break-word;
}
body[data-rsvp2="1"] .rsvp2-thread-bubble-out .rsvp2-thread-bubble {
  background: var(--r2-primary, #7c3f2c);
  color: #fff;
  border-bottom-right-radius: 5px;
}
body[data-rsvp2="1"] .rsvp2-thread-bubble-in .rsvp2-thread-bubble {
  background: #f3ede6;
  color: #2c2118;
  border-bottom-left-radius: 5px;
}
body[data-rsvp2="1"] .rsvp2-thread-meta {
  font-size: 11.5px;
  color: #9b8f84;
  margin-top: 4px;
  padding: 0 6px;
}
body[data-rsvp2="1"] .rsvp2-messages-form {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(120,90,60,.12);
}
body[data-rsvp2="1"] .rsvp2-messages-from {
  display: flex; align-items: center; gap: 10px;
}
body[data-rsvp2="1"] .rsvp2-messages-from .rsvp2-label {
  margin: 0; font-size: 13px; min-width: 50px;
}
body[data-rsvp2="1"] .rsvp2-messages-from .rsvp2-select {
  flex: 1; max-width: 280px;
}
body[data-rsvp2="1"] .rsvp2-messages-label { margin-top: 2px; }
body[data-rsvp2="1"] .rsvp2-messages-textarea { min-height: 90px; }
body[data-rsvp2="1"] .rsvp2-messages-actions {
  display: flex; justify-content: flex-end;
}
body[data-rsvp2="1"] .rsvp2-messages-send {
  /* Inherit the main submit pill styling but allow it inline. */
  width: auto; min-width: 160px;
}

body[data-rsvp2="1"] .rsvp2-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%237c3f2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
body[data-rsvp2="1"] .rsvp2-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  body[data-rsvp2="1"] .rsvp2-grid-2 { grid-template-columns: 1fr; }
}

/* YES / MAYBE / NO buttons — the centerpiece ─────────────────────
   Each label wraps a hidden native radio + a visible label. State
   styles are driven by :has(:checked) on the wrapping label, with
   :focus-within for keyboard focus rings. Color tokens for each
   choice (yes=green, maybe=amber, no=red) come from a hardcoded
   semantic palette and don't depend on the theme — that way Yes
   always reads "yes" regardless of which theme the host picked. */
body[data-rsvp2="1"] .rsvp2-yesno {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body[data-rsvp2="1"] .rsvp2-yesno:has(.rsvp2-yesno-btn:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-rsvp2="1"] .rsvp2-yesno-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--r2-surface-2);
  border: 1.5px solid var(--r2-border-strong);
  border-radius: 14px;
  font-family: var(--r2-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--r2-ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
  user-select: none;
}
body[data-rsvp2="1"] .rsvp2-yesno-btn input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
body[data-rsvp2="1"] .rsvp2-yesno-btn:hover { transform: translateY(-1px); }
body[data-rsvp2="1"] .rsvp2-yesno-btn:focus-within {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2-primary) 18%, transparent);
}
/* Active states — the colour palette is fixed for semantic clarity. */
body[data-rsvp2="1"] .rsvp2-yesno-btn:has(input:checked).rsvp2-yesno-yes {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, #16a34a 35%, transparent);
}
body[data-rsvp2="1"] .rsvp2-yesno-btn:has(input:checked).rsvp2-yesno-maybe {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, #f59e0b 35%, transparent);
}
body[data-rsvp2="1"] .rsvp2-yesno-btn:has(input:checked).rsvp2-yesno-no {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, #dc2626 35%, transparent);
}
/* Larger tap targets for the single-person variant. */
body[data-rsvp2="1"] .rsvp2-yesno-large .rsvp2-yesno-btn {
  min-height: 60px;
  font-size: 17px;
  border-radius: 16px;
}

/* Autosave indicator ─────────────────────────────────────────────
   Inline pill that appears below the Yes/Maybe/No selector while an
   autosave is in flight or just completed. Three states keyed off
   the data-state attr written by the JS: 'saving', 'saved', 'idle'.
   Idle uses the [hidden] attr so the element collapses entirely and
   doesn't reserve vertical space.

   Visually unobtrusive: small gray text + colored dot. Reading the
   indicator should feel like a confirmation, not an interruption.
*/
body[data-rsvp2="1"] .rsvp2-autosave-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 2px 0;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.01em;
  transition: opacity .25s ease;
}
body[data-rsvp2="1"] .rsvp2-autosave-indicator[hidden] {
  display: none;
}
body[data-rsvp2="1"] .rsvp2-autosave-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #9ca3af;
}
body[data-rsvp2="1"] .rsvp2-autosave-indicator[data-state="saving"] .rsvp2-autosave-dot {
  background: #f59e0b;
  animation: rsvp2AutosavePulse 1.1s ease-in-out infinite;
}
body[data-rsvp2="1"] .rsvp2-autosave-indicator[data-state="saved"] .rsvp2-autosave-dot {
  background: #16a34a;
}
@keyframes rsvp2AutosavePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-rsvp2="1"] .rsvp2-autosave-indicator[data-state="saving"] .rsvp2-autosave-dot {
    animation: none;
  }
}

/* PARTY (household per-person rows) ─────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-party-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body[data-rsvp2="1"] .rsvp2-party-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 14px 16px;
  background: var(--r2-surface-2);
  border: 1px solid var(--r2-border);
  border-radius: 16px;
}
body[data-rsvp2="1"] .rsvp2-party-who { line-height: 1.3; }
body[data-rsvp2="1"] .rsvp2-party-who strong {
  display: block;
  font-size: 16px;
  color: var(--r2-ink);
  font-weight: 600;
}
body[data-rsvp2="1"] .rsvp2-party-meta {
  display: block;
  font-size: 12px;
  color: var(--r2-muted);
  margin-top: 2px;
}
body[data-rsvp2="1"] .rsvp2-party-row .rsvp2-yesno-btn {
  min-height: 42px;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
}
@media (min-width: 560px) {
  body[data-rsvp2="1"] .rsvp2-party-row {
    grid-template-columns: minmax(140px, 1fr) auto;
    align-items: center;
  }
  body[data-rsvp2="1"] .rsvp2-party-row .rsvp2-yesno {
    width: auto;
    min-width: 280px;
  }
  body[data-rsvp2="1"] .rsvp2-party-row .rsvp2-suggest {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

/* CHECKBOX TASK CARDS (sign-up items) ──────────────────────────── */
body[data-rsvp2="1"] .rsvp2-task-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) {
  body[data-rsvp2="1"] .rsvp2-task-list { grid-template-columns: 1fr 1fr; }
}
body[data-rsvp2="1"] .rsvp2-task {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: stretch;
  padding: 12px 0 12px 14px;
  background: var(--r2-surface-2);
  border: 1.5px solid var(--r2-border-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  user-select: none;
  overflow: hidden;
}
/* When the row has no stepper (single-quantity items, fully
   claimed items), restore right padding so the text doesn't
   crash into the row's border. */
body[data-rsvp2="1"] .rsvp2-task:not(:has(.rsvp2-task-qty)),
body[data-rsvp2="1"] .rsvp2-task:has(.rsvp2-task-qty):not(:has(input[type=checkbox]:checked)) {
  padding-right: 14px;
}
/* The checkbox mark and the body text should still be vertically
   centered even though the row uses align-items: stretch (so the
   stepper can fill height). */
body[data-rsvp2="1"] .rsvp2-task-mark,
body[data-rsvp2="1"] .rsvp2-task-text {
  align-self: center;
}
body[data-rsvp2="1"] .rsvp2-task input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
body[data-rsvp2="1"] .rsvp2-task-mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid var(--r2-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
body[data-rsvp2="1"] .rsvp2-task-mark::after {
  content: "";
  position: absolute;
  width: 11px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.6);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  margin-top: -2px;
}
body[data-rsvp2="1"] .rsvp2-task:has(input:checked) {
  border-color: var(--r2-primary);
  background: color-mix(in srgb, var(--r2-primary) 7%, var(--r2-surface));
  box-shadow: var(--r2-shadow-sm);
}
body[data-rsvp2="1"] .rsvp2-task:has(input:checked) .rsvp2-task-mark {
  background: var(--r2-primary);
  border-color: var(--r2-primary);
}
body[data-rsvp2="1"] .rsvp2-task:has(input:checked) .rsvp2-task-mark::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}
body[data-rsvp2="1"] .rsvp2-task:focus-within {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2-primary) 18%, transparent);
}
body[data-rsvp2="1"] .rsvp2-task-text { display: flex; flex-direction: column; }
body[data-rsvp2="1"] .rsvp2-task-name { font-size: 15px; font-weight: 600; color: var(--r2-ink); }
body[data-rsvp2="1"] .rsvp2-task-meta { font-size: 12px; color: var(--r2-muted); margin-top: 2px; }

/* ── Quantity stepper (multi-quantity sign-up items) ──
   Hidden until the parent checkbox is checked. Fixed size so we
   guarantee comfortable tap targets regardless of row height —
   88px tall, 80px wide, with each button getting half the
   height (~44px, the iOS HIG minimum). The number readout takes
   the left third and the +/- buttons take the right two-thirds.
   No outer container chrome — just internal dividers between
   the number and buttons, and between + and −. The stepper
   sits flush against the row's right edge. */
body[data-rsvp2="1"] .rsvp2-task-qty {
  display: none;
  background: transparent;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  align-self: stretch;
  width: 80px;
  min-height: 88px;
  grid-template-columns: 32px 1fr;
  /* Negate the row's vertical padding so the stepper bleeds to
     the row's actual top/bottom borders. The row has overflow:
     hidden + border-radius, so the corners stay cleanly clipped. */
  margin: -12px 0;
}
body[data-rsvp2="1"] .rsvp2-task:has(input[type=checkbox]:checked) .rsvp2-task-qty {
  display: grid;
}
body[data-rsvp2="1"] .rsvp2-qty-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--r2-ink);
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
  margin: 0;
  display: block;
  border-radius: 0;
}
body[data-rsvp2="1"] .rsvp2-qty-input:focus { outline: none; }
body[data-rsvp2="1"] .rsvp2-qty-input::-webkit-outer-spin-button,
body[data-rsvp2="1"] .rsvp2-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Stacked +/− buttons fill the right column. Two equal-height
   rows (1fr 1fr) so each button is exactly half the stepper.
   The left border separates the buttons visually from the
   number readout. */
body[data-rsvp2="1"] .rsvp2-qty-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1.5px solid var(--r2-border-strong);
  height: 100%;
  width: 100%;
}
body[data-rsvp2="1"] .rsvp2-task:has(input[type=checkbox]:checked) .rsvp2-qty-stack {
  border-left-color: var(--r2-primary);
}
body[data-rsvp2="1"] .rsvp2-qty-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--r2-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  transition: background .12s ease, color .12s ease;
}
body[data-rsvp2="1"] .rsvp2-qty-btn:hover,
body[data-rsvp2="1"] .rsvp2-qty-btn:focus-visible {
  background: color-mix(in srgb, var(--r2-primary) 14%, transparent);
  color: var(--r2-primary);
  outline: none;
}
body[data-rsvp2="1"] .rsvp2-qty-btn:active {
  background: color-mix(in srgb, var(--r2-primary) 22%, transparent);
}
body[data-rsvp2="1"] .rsvp2-qty-up {
  border-bottom: 1px solid var(--r2-border-strong);
}
body[data-rsvp2="1"] .rsvp2-task:has(input[type=checkbox]:checked) .rsvp2-qty-up {
  border-bottom-color: var(--r2-primary);
}

/* When the item is fully claimed already, dim the row and disable
   pointer interaction. The checkbox is also marked disabled in PHP. */
body[data-rsvp2="1"] .rsvp2-task-full {
  opacity: .5;
  cursor: not-allowed;
}
body[data-rsvp2="1"] .rsvp2-task-full input[type=checkbox] {
  pointer-events: none;
}

/* CUSTOM RADIO/CHECKBOX CHOICES (for questions) ─────────────────── */
body[data-rsvp2="1"] .rsvp2-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
body[data-rsvp2="1"] .rsvp2-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--r2-surface-2);
  border: 1.5px solid var(--r2-border-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--r2-ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  user-select: none;
}
body[data-rsvp2="1"] .rsvp2-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
body[data-rsvp2="1"] .rsvp2-choice-mark {
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--r2-border-strong);
  background: #fff;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
body[data-rsvp2="1"] .rsvp2-choice-checkbox .rsvp2-choice-mark {
  border-radius: 5px;
}
body[data-rsvp2="1"] .rsvp2-choice-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .15s ease;
}
body[data-rsvp2="1"] .rsvp2-choice-checkbox .rsvp2-choice-mark::after {
  width: 8px; height: 4px;
  background: transparent;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
body[data-rsvp2="1"] .rsvp2-choice:has(input:checked) {
  background: var(--r2-primary);
  border-color: var(--r2-primary);
  color: #fff;
}
body[data-rsvp2="1"] .rsvp2-choice:has(input:checked) .rsvp2-choice-mark {
  background: var(--r2-primary);
  border-color: #fff;
}
body[data-rsvp2="1"] .rsvp2-choice:has(input:checked) .rsvp2-choice-mark::after { opacity: 1; }
body[data-rsvp2="1"] .rsvp2-choice:focus-within {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2-primary) 18%, transparent);
}
body[data-rsvp2="1"] .rsvp2-choice:hover:not(:has(input:checked)) {
  border-color: var(--r2-primary);
}

/* SUBMIT — a generous primary button ─────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-submit-bar {
  margin-top: 8px;
  display: flex;
  justify-content: stretch;
}
body[data-rsvp2="1"] .rsvp2-submit {
  flex: 1;
  font-family: var(--r2-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 16px 24px;
  background: var(--r2-primary);
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: var(--r2-shadow-md);
}
body[data-rsvp2="1"] .rsvp2-submit:hover { filter: brightness(.96); transform: translateY(-1px); box-shadow: var(--r2-shadow-lg); }
body[data-rsvp2="1"] .rsvp2-submit:active { transform: translateY(0); }
body[data-rsvp2="1"] .rsvp2-submit:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2-primary) 22%, transparent), var(--r2-shadow-md); }

/* Footer credit — tiny, unobtrusive ──────────────────────────────── */
body[data-rsvp2="1"] .rsvp2-foot {
  text-align: center;
  padding: 28px 16px 0;
}
body[data-rsvp2="1"] .rsvp2-foot-mark {
  font-family: var(--r2-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--r2-muted);
  font-variation-settings: 'opsz' 14;
}

/* Generic meta paragraph used for "RSVPs closed" type states. */
body[data-rsvp2="1"] .rsvp2-meta {
  margin: 0;
  font-size: 15px;
  color: var(--r2-muted);
  line-height: 1.5;
}

/* DESKTOP REFINEMENTS ───────────────────────────────────────────── */
@media (min-width: 720px) {
  body[data-rsvp2="1"] .rsvp2-page { padding-bottom: 60px; }
  body[data-rsvp2="1"] .rsvp2-hero { aspect-ratio: 21 / 9; }
  body[data-rsvp2="1"] .rsvp2-hero-text { padding: 36px 38px 32px; }
  body[data-rsvp2="1"] .rsvp2-main { padding: 32px 32px 0; gap: 26px; }
  body[data-rsvp2="1"] .rsvp2-keyfacts {
    grid-template-columns: repeat(3, 1fr);
  }
  body[data-rsvp2="1"] .rsvp2-keyfacts:has(.rsvp2-keyfact:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-rsvp2="1"] .rsvp2-card { padding: 32px; }
}

/* DARK THEMES (theme-night) ─────────────────────────────────────── */
body[data-rsvp2="1"].theme-night {
  --r2-surface: color-mix(in srgb, var(--r2-bg) 70%, #fff 6%);
  --r2-surface-2: color-mix(in srgb, var(--r2-bg) 80%, #fff 4%);
  --r2-border: color-mix(in srgb, #fff 10%, transparent);
  --r2-border-strong: color-mix(in srgb, #fff 18%, transparent);
  --r2-muted: color-mix(in srgb, var(--r2-ink) 65%, transparent);
}
body[data-rsvp2="1"].theme-night .rsvp2-input {
  background: color-mix(in srgb, var(--r2-bg) 60%, #000 12%);
  color: var(--r2-ink);
  border-color: var(--r2-border-strong);
}
body[data-rsvp2="1"].theme-night .rsvp2-yesno-btn,
body[data-rsvp2="1"].theme-night .rsvp2-task,
body[data-rsvp2="1"].theme-night .rsvp2-choice {
  background: color-mix(in srgb, var(--r2-bg) 70%, #fff 4%);
  color: var(--r2-ink);
}

/* Reduced motion — keep transitions but kill the small lift. */
@media (prefers-reduced-motion: reduce) {
  body[data-rsvp2="1"] *,
  body[data-rsvp2="1"] *::before,
  body[data-rsvp2="1"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  body[data-rsvp2="1"] .rsvp2-yesno-btn:hover,
  body[data-rsvp2="1"] .rsvp2-submit:hover { transform: none; }
}

/* ─── Contact-info suggestion panel (RSVP page v2) ─────────────────
   Collapsed-by-default disclosure that lets a guest correct their
   name or pick a preferred email/phone. Theme-aware via the existing
   --r2-* tokens. */
body[data-rsvp2="1"] .rsvp2-suggest {
  margin-top: 12px;
  background: var(--r2-surface-2);
  border: 1px dashed var(--r2-border-strong);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
body[data-rsvp2="1"] .rsvp2-suggest[open] {
  background: var(--r2-surface);
  border-style: solid;
  border-color: var(--r2-border-strong);
}
body[data-rsvp2="1"] .rsvp2-suggest-summary {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
body[data-rsvp2="1"] .rsvp2-suggest-summary::-webkit-details-marker { display: none; }
body[data-rsvp2="1"] .rsvp2-suggest-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--r2-primary) 10%, transparent);
  color: var(--r2-primary);
}
body[data-rsvp2="1"] .rsvp2-suggest-icon svg { width: 16px; height: 16px; }
body[data-rsvp2="1"] .rsvp2-suggest-summary-text { display: flex; flex-direction: column; min-width: 0; }
body[data-rsvp2="1"] .rsvp2-suggest-summary-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--r2-ink);
}
body[data-rsvp2="1"] .rsvp2-suggest-sub {
  font-size: 12px;
  color: var(--r2-muted);
  margin-top: 1px;
}
body[data-rsvp2="1"] .rsvp2-suggest-chevron {
  font-family: var(--r2-display);
  font-size: 22px;
  line-height: 1;
  color: var(--r2-muted);
  transform: rotate(0deg);
  transition: transform .2s ease;
}
body[data-rsvp2="1"] .rsvp2-suggest[open] .rsvp2-suggest-chevron {
  transform: rotate(90deg);
}
body[data-rsvp2="1"] .rsvp2-suggest-body {
  padding: 4px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body[data-rsvp2="1"] .rsvp2-suggest-help {
  font-size: 13px;
  color: var(--r2-muted);
  margin: 0;
  line-height: 1.45;
}
body[data-rsvp2="1"] .rsvp2-suggest-field { display: flex; flex-direction: column; gap: 6px; }

/* Existing-options chooser — same vibe as the question pills but
   stacked one-per-line for readability with email/phone strings. */
body[data-rsvp2="1"] .rsvp2-suggest-radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-rsvp2="1"] .rsvp2-suggest-radio {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--r2-border-strong);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
body[data-rsvp2="1"] .rsvp2-suggest-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
body[data-rsvp2="1"] .rsvp2-suggest-radio-mark {
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--r2-border-strong);
  background: #fff;
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
body[data-rsvp2="1"] .rsvp2-suggest-radio-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .15s ease;
}
body[data-rsvp2="1"] .rsvp2-suggest-radio-label {
  font-size: 14px;
  color: var(--r2-ink);
  word-break: break-word;
}
body[data-rsvp2="1"] .rsvp2-suggest-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--r2-primary) 12%, transparent);
  color: var(--r2-primary);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
body[data-rsvp2="1"] .rsvp2-suggest-radio:has(input:checked) {
  border-color: var(--r2-primary);
  background: color-mix(in srgb, var(--r2-primary) 6%, #fff);
}
body[data-rsvp2="1"] .rsvp2-suggest-radio:has(input:checked) .rsvp2-suggest-radio-mark {
  background: var(--r2-primary);
  border-color: var(--r2-primary);
}
body[data-rsvp2="1"] .rsvp2-suggest-radio:has(input:checked) .rsvp2-suggest-radio-mark::after { opacity: 1; }
body[data-rsvp2="1"] .rsvp2-suggest-radio:focus-within {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2-primary) 18%, transparent);
}
body[data-rsvp2="1"] .rsvp2-suggest-newinput { margin-top: 6px; }

/* ─── Contact suggestions review page (host side) ─────────────────
   Polished layout: each contact = a card with a small avatar header,
   then a clean stack of "field → value change" rows. The current →
   suggested arrow pattern reads at a glance; unsubscribe rows get a
   distinct soft-red treatment so the host doesn't apply them by
   reflex. */
.suggestions-page .suggestions-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
}

/* Empty state */
.suggestions-page .suggestions-empty {
  text-align: center;
  padding: 56px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.suggestions-page .suggestions-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7ed, #fef3e8);
  color: #c2410c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.suggestions-page .suggestions-empty-icon svg { width: 36px; height: 36px; }
.suggestions-page .suggestions-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #172126;
  margin: 0;
}
.suggestions-page .suggestions-empty-help {
  font-size: 14px;
  color: #6f6b65;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Group cards (one per contact) */
.suggestions-page .suggestions-list {
  padding: 8px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.suggestions-page .suggestions-group {
  border: 1px solid rgba(120,90,60,.12);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(120,90,60,.04);
}
.suggestions-page .suggestions-group-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fffaf3, #fff7ed);
  border-bottom: 1px solid rgba(120,90,60,.08);
}
.suggestions-page .suggestions-group-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #c2410c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.suggestions-page .suggestions-group-title { display: flex; flex-direction: column; min-width: 0; }
.suggestions-page .suggestions-group-title strong {
  font-size: 16px;
  color: #172126;
  font-weight: 600;
  letter-spacing: -.005em;
}
.suggestions-page .suggestions-group-sub {
  font-size: 12px;
  color: #9a3412;
  margin-top: 2px;
}
.suggestions-page .suggestions-group-count {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9a3412;
  background: rgba(194,65,12,.08);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Individual change rows */
.suggestions-page .suggestions-rows { display: flex; flex-direction: column; }
.suggestions-page .suggestion-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(120,90,60,.08);
}
.suggestions-page .suggestion-row:last-child { border-bottom: 0; }
.suggestions-page .suggestion-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff7ed;
  color: #c2410c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.suggestions-page .suggestion-icon svg { width: 18px; height: 18px; }

/* Unsubscribe rows get a softer red palette to set expectations. */
.suggestions-page .suggestion-row-unsub .suggestion-icon {
  background: #fef2f2;
  color: #b91c1c;
}

.suggestions-page .suggestion-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.suggestions-page .suggestion-field-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.suggestions-page .suggestion-field-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6f6b65;
}
.suggestions-page .suggestion-source {
  font-size: 11px;
  color: #9ca3af;
}
.suggestions-page .suggestion-source-event {
  color: #6f6b65;
  font-weight: 600;
}
.suggestions-page .suggestion-change {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.4;
}
.suggestions-page .suggestion-from {
  color: #6b7280;
  text-decoration: line-through;
  text-decoration-color: rgba(107,114,128,.4);
  word-break: break-word;
}
.suggestions-page .suggestion-from em {
  font-style: italic;
  color: #9ca3af;
  text-decoration: none;
}
.suggestions-page .suggestion-arrow {
  color: #9ca3af;
  font-size: 16px;
}
.suggestions-page .suggestion-to {
  color: #15803d;
  font-weight: 600;
  word-break: break-word;
}
.suggestions-page .suggestion-unsub-value {
  color: #b91c1c;
  font-weight: 600;
  word-break: break-word;
}
.suggestions-page .suggestion-unsub-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #b91c1c;
  background: #fef2f2;
  padding: 3px 9px;
  border-radius: 999px;
}

/* Action buttons — uses the platform's standard .button / .button.secondary
   / .button.danger pattern so this page stays visually consistent with
   the rest of the admin. We only define layout/spacing here. */
.suggestions-page .suggestion-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.suggestions-page .suggestion-actions .inline-form { margin: 0; }
.suggestions-page .suggestion-actions .button { margin-top: 0 !important; white-space: nowrap; }

/* Pending-count badge in the contact-tabs strip. */
.contact-section-tabs .contact-tab-badge,
.contact-section-tabs-mobile .contact-tab-badge,
.event-tabs .contact-tab-badge,
.event-tabs-mobile .contact-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.contact-section-tabs a.active .contact-tab-badge,
.event-tabs a.active .contact-tab-badge,
.event-tabs-mobile a.active .contact-tab-badge { background: #fff7ed; color: #c2410c; }

@media (max-width: 720px) {
  .suggestions-page .suggestions-list { padding: 6px 0 16px; gap: 12px; }
  .suggestions-page .suggestions-group-header { padding: 12px 14px; }
  .suggestions-page .suggestions-group-count { display: none; }
  .suggestions-page .suggestion-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .suggestions-page .suggestion-icon {
    width: 32px; height: 32px; border-radius: 9px;
  }
  .suggestions-page .suggestion-icon svg { width: 16px; height: 16px; }
  .suggestions-page .suggestion-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
  }
  /* Make sure each form fills its grid cell so the buttons stretch
     side-by-side instead of bunching on the right. */
  .suggestions-page .suggestion-actions .inline-form { display: block; width: 100%; }
  .suggestions-page .suggestion-actions .button { width: 100%; padding: 10px 14px; }
}
@media (max-width: 480px) {
  .suggestions-page .suggestions-group { border-radius: 14px; }
}

/* ─── "Keep using this" address checklists ───────────────────────
   Used inside .rsvp2-suggest when a contact has multiple emails or
   phones on file. Default state is checked (we assume the host is
   correct unless the guest tells us otherwise). Unchecking queues
   an unsubscribe suggestion the host approves. */
body[data-rsvp2="1"] .rsvp2-suggest-fieldhelp {
  margin: -2px 0 8px;
  font-size: 12px;
  color: var(--r2-muted);
  line-height: 1.45;
}
body[data-rsvp2="1"] .rsvp2-suggest-keeps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-rsvp2="1"] .rsvp2-suggest-keep {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--r2-border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
  font-size: 14px;
}
body[data-rsvp2="1"] .rsvp2-suggest-keep input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
body[data-rsvp2="1"] .rsvp2-suggest-keep-mark {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--r2-border-strong);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
body[data-rsvp2="1"] .rsvp2-suggest-keep-mark::after {
  content: "";
  position: absolute;
  width: 10px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.7);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  margin-top: -2px;
}
body[data-rsvp2="1"] .rsvp2-suggest-keep:has(input:checked) {
  border-color: var(--r2-primary);
  background: color-mix(in srgb, var(--r2-primary) 6%, #fff);
}
body[data-rsvp2="1"] .rsvp2-suggest-keep:has(input:checked) .rsvp2-suggest-keep-mark {
  background: var(--r2-primary);
  border-color: var(--r2-primary);
}
body[data-rsvp2="1"] .rsvp2-suggest-keep:has(input:checked) .rsvp2-suggest-keep-mark::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}
/* Visually de-emphasise the row when unchecked so it reads as
   "we won't use this anymore". */
body[data-rsvp2="1"] .rsvp2-suggest-keep:not(:has(input:checked)) {
  opacity: .55;
}
body[data-rsvp2="1"] .rsvp2-suggest-keep:not(:has(input:checked)) .rsvp2-suggest-keep-label {
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.3);
}
body[data-rsvp2="1"] .rsvp2-suggest-keep:focus-within {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2-primary) 18%, transparent);
}
body[data-rsvp2="1"] .rsvp2-suggest-keep-label {
  color: var(--r2-ink);
  word-break: break-word;
  transition: text-decoration-color .15s ease;
}

/* "Add a different email/phone" inline disclosure */
body[data-rsvp2="1"] .rsvp2-suggest-addmore {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--r2-border);
}
body[data-rsvp2="1"] .rsvp2-suggest-addmore > summary {
  font-size: 12px;
  color: var(--r2-primary);
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
  list-style: none;
}
body[data-rsvp2="1"] .rsvp2-suggest-addmore > summary::-webkit-details-marker { display: none; }
body[data-rsvp2="1"] .rsvp2-suggest-addmore > summary::before {
  content: "+ ";
  display: inline-block;
}
body[data-rsvp2="1"] .rsvp2-suggest-addmore[open] > summary::before {
  content: "− ";
}
body[data-rsvp2="1"] .rsvp2-suggest-addmore > .rsvp2-input {
  margin-top: 6px;
}

/* ─── Contact → Add to Event modal ────────────────────────────────
   Reuses the .warm-modal + .ilm-modal shell, and the .ilm-pick-row
   row pattern from contact-groups.php. The bits below just add
   status pills for event state, an "already added" tag, and the
   inline send-invite affordance that appears after a successful
   add to an open event. */
.cae-modal {
  max-width: 560px;
  width: 100%;
  /* Put a hard cap on the modal's total height and lay it out as a
     column so the body can scroll while the header stays pinned.
     Without this the cae-body's max-height fights against the
     parent's natural height and rows at the bottom get clipped on
     short viewports (iPhone landscape, small desktop windows). */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.cae-modal .warm-modal-header {
  flex-shrink: 0;
}
.cae-body {
  /* Flex item that fills remaining height after the header. The
     overflow-y here is what creates the actual scroll surface. */
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 22px 22px;
  overflow-y: auto;
}
.cae-modal-sub { color: #6f6b65; font-size: 13px; }

.cae-status {
  margin: 8px 0 6px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid;
}
.cae-status-error {
  background: color-mix(in srgb, #dc2626 8%, #fff);
  border-color: color-mix(in srgb, #dc2626 30%, transparent);
  color: #991b1b;
}

/* The picker list re-uses ilm-pick-list / ilm-pick-row so spacing
   and alignment match the family/group modal exactly. */
.cae-event-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cae-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0.5px solid var(--host-border, rgba(15,23,42,.08));
  border-radius: 10px;
  background: #fff;
}
.cae-event-row.is-added { opacity: 0.7; }

.cae-event-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.cae-event-info strong {
  font-size: 14px;
  color: #172126;
  word-break: break-word;
}
.cae-status-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cae-status-pill.cae-status-open {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #166534;
}
.cae-status-pill.cae-status-draft {
  background: color-mix(in srgb, #c2410c 12%, transparent);
  color: #9a3412;
}

/* Right-side action area on each row — Add button by default,
   replaced on success with a status tag or the inline send-prompt
   buttons. */
.cae-event-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cae-already-tag {
  font-size: 12px;
  font-weight: 600;
  color: #9a3412;
}
.cae-sent-tag { color: #166534; }
.cae-row-status { font-size: 12px; color: #6f6b65; }
.cae-row-status-error { color: #991b1b; font-weight: 600; }

/* Action cell on the contacts list — single Actions popover button.
   Uses native <details>/<summary> like .global-nav-mobile so the
   open/close state is built-in. The panel is absolutely positioned
   so it doesn't expand the row's height. */
.contacts-page .contact-row-actions,
body .contact-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

.row-actions-menu {
  position: relative;
  display: inline-block;
}
/* The trigger summary still inherits .button .secondary .small —
   we just need to clean up the marker bullet that <summary> would
   otherwise draw. */
.row-actions-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.row-actions-menu summary::-webkit-details-marker { display: none; }
.row-actions-menu summary::marker { display: none; content: ''; }
.row-actions-caret {
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
  opacity: .7;
  transition: transform .15s ease;
}
.row-actions-menu[open] .row-actions-caret { transform: rotate(180deg); }

/* The popover panel — modeled on .global-nav-mobile nav. Includes
   a small tail (CSS triangle) that points at the trigger button so
   the visual association is unambiguous when multiple rows have
   the same control. */
.row-actions-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  /* No min-width — width: max-content sizes the panel to the
     widest item, so centered text actually looks centered. */
  min-width: 0;
  width: max-content;
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,253,248,.98);
  border: 1px solid rgba(120,90,60,.14);
  box-shadow: 0 14px 30px rgba(92,64,36,.16);
  z-index: 50;
}
/* Flipped-up state: the JS adds .row-actions-panel-up when opening
   the popover near the bottom of the viewport would push the panel
   off-screen. We render the panel above the trigger and flip the
   tail accordingly. */
.row-actions-panel.row-actions-panel-up {
  top: auto;
  bottom: calc(100% + 10px);
}
/* Tail: two stacked pseudo-elements so we get a border + fill. */
.row-actions-panel::before,
.row-actions-panel::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  /* Anchor to the right side, roughly above the trigger's center. */
  right: 16px;
}
.row-actions-panel::before {
  top: -8px;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent rgba(120,90,60,.14) transparent;
}
.row-actions-panel::after {
  top: -7px;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent rgba(255,253,248,.98) transparent;
}
/* When flipped above, the tail flips too — points down to the
   trigger button below the panel. */
.row-actions-panel.row-actions-panel-up::before {
  top: auto;
  bottom: -8px;
  border-width: 8px 8px 0 8px;
  border-color: rgba(120,90,60,.14) transparent transparent transparent;
}
.row-actions-panel.row-actions-panel-up::after {
  top: auto;
  bottom: -7px;
  border-width: 7px 7px 0 7px;
  border-color: rgba(255,253,248,.98) transparent transparent transparent;
}

/* The form wrapper around the Delete item must not introduce its
   own padding/margin/grid. `display: contents` makes the form
   invisible to layout — the button inside lays out as if it were
   a direct child of .row-actions-panel. */
.row-actions-form {
  margin: 0;
  padding: 0;
  display: contents;
}

/* Items are <button> elements but we explicitly defeat the global
   button styles (the body-level rule that paints buttons black/blue
   and the "all buttons get a top margin" rule from the base styles)
   so they look like menu items, not buttons. */
.row-actions-panel .row-actions-item,
body:not(.invite-body) .row-actions-panel .row-actions-item,
body:not(.invite-body) .row-actions-panel button.row-actions-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 9px 48px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 10px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Mobile: roomier still — bigger tap targets, taller items, extra
   horizontal padding so the menu doesn't feel cramped on phones. */
@media (max-width: 760px) {
  .row-actions-panel {
    /* No min-width on mobile — let width: max-content shrink to the
       longest item's natural width so centered items actually look
       centered. A min-width creates extra empty space that makes the
       arrow notch on the right feel uneven against the text. */
    min-width: 0;
    padding: 12px;
    gap: 6px;
  }
  .row-actions-panel .row-actions-item,
  body:not(.invite-body) .row-actions-panel .row-actions-item,
  body:not(.invite-body) .row-actions-panel button.row-actions-item {
    min-height: 46px !important;
    padding: 12px 52px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }
}
.row-actions-panel .row-actions-item:hover,
.row-actions-panel .row-actions-item:focus,
body:not(.invite-body) .row-actions-panel .row-actions-item:hover,
body:not(.invite-body) .row-actions-panel .row-actions-item:focus {
  background: #172126 !important;
  color: #fff !important;
  outline: none !important;
}
.row-actions-panel .row-actions-item-danger,
body:not(.invite-body) .row-actions-panel .row-actions-item-danger {
  color: #991b1b !important;
}
.row-actions-panel .row-actions-item-danger:hover,
.row-actions-panel .row-actions-item-danger:focus,
body:not(.invite-body) .row-actions-panel .row-actions-item-danger:hover,
body:not(.invite-body) .row-actions-panel .row-actions-item-danger:focus {
  background: #991b1b !important;
  color: #fff !important;
}

@media (max-width: 540px) {
  .cae-modal { max-width: 100%; margin: 0 8px; }
  .cae-event-action { flex-wrap: wrap; justify-content: flex-end; }
}

/* ─── "Send invitation now?" inline prompt (guest-list add modal) ── */
.guest-add-send-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid color-mix(in srgb, #c2410c 25%, transparent);
  border-radius: 12px;
  font-size: 13px;
}
.guest-add-send-prompt-text {
  color: #9a3412;
  font-weight: 600;
  flex: 1;
  min-width: 220px;
}
.guest-add-send-prompt-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.guest-add-send-prompt-result {
  flex: 1 0 100%;
  font-size: 12px;
  margin-top: 2px;
}
.guest-add-send-prompt-ok { color: #166534; font-weight: 600; }
.guest-add-send-prompt-error { color: #991b1b; font-weight: 600; }

/* ─── "Send invitations now?" inline prompt on event-edit page ─────
   Appears below the page notice after a host has added guest(s) via
   the server-rendered POST flows on event-edit.php. Same visual
   treatment as the guest-list modal's inline send-prompt — soft
   orange bar with Skip + Send buttons. */
.event-edit-send-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fff7ed;
  border: 1px solid color-mix(in srgb, #c2410c 25%, transparent);
  border-radius: 12px;
  font-size: 13px;
}
.event-edit-send-prompt-text {
  color: #9a3412;
  font-weight: 600;
  flex: 1;
  min-width: 240px;
}
.event-edit-send-prompt-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .event-edit-send-prompt-actions { width: 100%; justify-content: flex-end; }
}

/* ─── Publish call-to-action on event-overview hero ────────────────
   Two states share the same shell:
     .publish-cta             — ready to publish; warm/active styling
     .publish-cta-blocked     — needs more info; quiet/neutral styling
   The button-row that follows is the existing primary actions; this
   block sits above it as a focused callout for the publish step. */
.publish-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 14px 18px;
  background: #fff4e0;
  border: 1px solid #f4d9a5;
  border-left: 4px solid #c2562d;
  border-radius: 10px;
}
.publish-cta-blocked {
  background: #faf5ec;
  border-color: #ead9be;
  border-left-color: #b8a37c;
}
.publish-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 280px;
  min-width: 0;
}
.publish-cta-text strong { color: #2b2017; font-size: 15px; }
.publish-cta-text span   { color: #6e574a; font-size: 14px; line-height: 1.45; }
.publish-cta-form { margin: 0; }
.publish-cta-button {
  background: #c2562d;
  color: #fff;
  border: 1px solid #a84720;
  font-weight: 600;
  padding: 10px 18px;
}
.publish-cta-button:hover { background: #a84720; }

/* Status line shown in place of the publish CTA once the event has
   moved past draft. Quiet — the host already knows it's live; this
   is just a glance-confirmation. */
.publish-status-line {
  margin: 12px 0 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.publish-status-open    { color: #1f7a4d; }
.publish-status-closed,
.publish-status-archived { color: #6e574a; }
.publish-status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1f7a4d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 540px) {
  .publish-cta { flex-direction: column; align-items: stretch; }
  .publish-cta-form,
  .publish-cta .button { width: 100%; }
  .publish-cta-button { width: 100%; }
}

/* ============================================================
   v.179 LIGHT PASS — cool / quiet override block
   v.179.1 patch: softer button color + dismiss-button fix
   ============================================================

   Pulls warm cream/orange out of the host UI and replaces with
   cool slate. Orange survives ONLY as a deliberate accent on
   primary CTAs, active nav state, the brand-mark tile, and
   status badges. Everything else — warm hover backgrounds,
   warm pill backgrounds, warm border colors, warm muted text
   — gets neutralized here.

   This block is deliberately at the END of app.css so it wins
   source-order ties against the v5.12 / v5.12.1 / v5.13.x
   rules that hardcoded warm colors before tokens existed.

   Token reference (v.179 values):
     --host-bg     #f5f7fa   (cool gray page background)
     --host-card   #ffffff   (pure white cards)
     --host-ink    #0f172a   (slate-900 body text)
     --host-muted  #6b7280   (slate-500 secondary text)
     --host-border rgba(15,23,42,.08) (cool subtle borders)
     --host-soft   #f1f5f9   (slate-100 hover/pill background)
     --host-accent #f97316   (the surviving warm accent)
   ============================================================ */

/* --- Cards: lighter shadows, cooler borders ------------------ */
.host-body .card,
body:not(.invite-body) .card {
  border-color: var(--host-border);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

/* --- Event card on dashboard --------------------------------- */
.event-card {
  background: var(--host-card);
  border-color: var(--host-border);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
  padding: 24px;       /* v.179: bump density (was 16-20px) */
}
.event-card h2 {
  color: var(--host-ink);
}
.event-card p {
  color: var(--host-muted);
}

/* --- Mini-stat pills under event titles: cool, not warm ----- */
.event-mini-stats span {
  background: var(--host-soft);
  border-color: var(--host-border);
  color: var(--host-muted);
}

/* --- Dashboard quick-link pills (also cool) ----------------- */
.dashboard-quick-links a {
  background: var(--host-card);
  border-color: var(--host-border);
  color: var(--host-ink);
}

/* --- Event tabs container: cool surface --------------------- */
.event-tabs {
  background: var(--host-card);
  border-color: var(--host-border);
}
.event-tabs a {
  color: var(--host-muted);
}
.event-tabs a.active,
.event-tabs a:hover {
  background: var(--host-ink);
  color: #fff !important;
}

/* --- Section title row badge / count chip ------------------- */
.section-title-row span {
  background: var(--host-soft);
  color: var(--host-ink);
}

/* --- Quick-action and message cards: cool surface ----------- */
.quick-action-grid a,
.message-action-card {
  background: var(--host-card);
  border-color: var(--host-border);
  color: var(--host-ink);
}
.quick-action-grid strong,
.message-action-card strong {
  color: var(--host-ink);
}
.quick-action-grid span,
.message-action-card span {
  color: var(--host-muted);
}
.message-action-card.warning {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* --- Sign-up admin item: cool surface ----------------------- */
.signup-admin-item {
  background: var(--host-card);
  border-color: var(--host-border);
}

/* --- Soft button: cool, with the accent surviving as text --- */
.soft-button,
.host-body button.soft-button,
.button.soft-button,
.host-body .button.secondary,
.host-body button.secondary,
body:not(.invite-body) .button.secondary,
body:not(.invite-body) button.secondary {
  background: var(--host-soft) !important;
  color: var(--host-ink) !important;
  border-color: var(--host-border) !important;
}

/* --- Dashboard tabs (filter chips): cool ------------------- */
.dashboard-tabs button {
  background: var(--host-soft) !important;
  border-color: var(--host-border) !important;
  color: var(--host-ink) !important;
}
.dashboard-tabs button.active {
  background: var(--host-ink) !important;
  border-color: var(--host-ink) !important;
  color: #fff !important;
}

/* --- Selection summary (contacts bulk-action chip) ---------- */
.selection-summary {
  background: var(--host-soft);
  color: var(--host-ink);
  border-color: var(--host-border);
}

/* --- Modal close button: cool ------------------------------ */
.modal-close {
  background: var(--host-soft) !important;
  color: var(--host-ink) !important;
  border-color: var(--host-border) !important;
}

/* --- Modal card: pure white, cool border ------------------- */
.modal-card {
  background: var(--host-card);
  border-color: var(--host-border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .14);
}

/* --- Event-card.php back-bar: cool ------------------------- */
.ec-back-link {
  background: var(--host-soft);
  border-color: var(--host-border);
  color: var(--host-ink) !important;
}
.ec-back-link:hover {
  background: var(--host-soft);
  filter: brightness(.97);
}

/* --- Sidebar card: pure white, lighter shadow -------------- */
.event-console > .event-sidebar,
.host-body .event-console > .event-sidebar {
  background: var(--host-card);
  border-color: var(--host-border);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

/* --- Mobile event pills: cool surface ---------------------- */
.event-pills {
  background: var(--host-card);
  border-top-color: var(--host-border);
  border-bottom-color: var(--host-border);
}
.event-pills-track {
  border-bottom-color: var(--host-border);
}
.event-pill {
  color: var(--host-muted);
}
.event-pill + .event-pill::before {
  background: var(--host-border);
}
.event-pill.active {
  color: var(--host-ink);
  /* underline keeps the orange accent — this is one of the
     places orange deliberately survives */
  border-bottom-color: var(--host-accent);
}

/* --- Chrome event strip: cool surface, accent reserved for
       the badge/CTA inside ------------------------------------ */
.event-strip {
  background: var(--host-card);
  border-bottom-color: var(--host-border);
}
.event-strip-eyebrow,
.event-strip-meta {
  color: var(--host-muted);
}
.event-strip-title {
  color: var(--host-ink);
}

/* --- Avatar dropdown: pure white, cool borders -------------- */
.avatar-panel {
  background: var(--host-card);
  border-color: var(--host-border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.avatar-panel-id {
  border-bottom-color: var(--host-border);
}
.avatar-name {
  color: var(--host-ink);
}
.avatar-email {
  color: var(--host-muted);
}
.avatar-panel-eyebrow {
  color: var(--host-muted);
}
.avatar-panel-event-title {
  color: var(--host-ink);
}
.avatar-panel-event-meta {
  color: var(--host-muted);
}
.avatar-panel-event {
  background: var(--host-soft);
}
.avatar-panel-links li a {
  color: var(--host-ink);
}
.avatar-panel-links li a:hover {
  background: var(--host-soft);
}
.avatar-panel-sep {
  border-top-color: var(--host-border);
}

/* --- Event sidebar links: cool muted ----------------------- */
.event-sidebar-link {
  color: var(--host-muted);
}
.event-sidebar-link:hover {
  background: var(--host-soft);
  color: var(--host-ink);
}
.event-sidebar-link.active {
  background: var(--host-ink);
  color: #fff;
}
.event-sidebar-sep {
  background: var(--host-border);
}

/* --- Density bumps: more whitespace inside common cards ---- */
.host-body .container,
body:not(.invite-body) .container {
  max-width: 1180px;
}
.consumer-dashboard {
  gap: 18px;
}
.event-card-list {
  gap: 14px;
}

/* ============================================================
   v.179.1 — soften dark buttons + fix dismiss-button bug
   ============================================================

   Issue 1: dark buttons (Manage, Apply, etc.) read as harsh
   black against the new light cool palette. The original
   #172126 (near-black slate) was tuned for the warm cream
   background; on cool gray it's too high-contrast. Softening
   to #334155 (slate-700) keeps strong CTA presence without
   feeling like a stamp. Where it must stay near-black (active
   nav state, brand-mark text), we keep --host-ink.

   Issue 2: the chrome strip dismiss × was rendering as a
   solid dark navy circle with no visible cross. Root cause:
   the legacy compat block's `body:not(.invite-body)
   button:not(.secondary):not(.danger) { background: #172126 }`
   rule was winning over `.event-strip-dismiss { background:
   transparent }` on specificity (0,2,1 vs 0,1,0). And the
   v5.13.12 host-body button rule has !important which
   guarantees it. The dismiss × pseudo-elements (1.5px wide)
   were too thin to be visible against the dark fill. Fix:
   explicit override that re-asserts transparent background
   with !important.
   ============================================================ */

/* --- Soften dark buttons globally ----------------------- */
.host-body .button.primary-pill,
.host-body button.primary-pill,
body:not(.invite-body) .button.primary-pill,
body:not(.invite-body) button.primary-pill,
.host-body .button.primary,
.host-body button.primary,
body:not(.invite-body) .button.primary,
body:not(.invite-body) button.primary,
.host-body .button:not(.secondary):not(.danger):not(.soft-button):not(.app-drawer-close):not(.question-option-remove):not(.question-add-option-btn):not(.reorder-move-btn),
.host-body button:not(.secondary):not(.danger):not(.soft-button):not(.event-strip-dismiss):not(.modal-close):not(.app-drawer-close):not(.question-option-remove):not(.question-add-option-btn):not(.reorder-move-btn):not(.btn-unstyled),
body:not(.invite-body) .button:not(.secondary):not(.danger):not(.soft-button):not(.app-drawer-close):not(.question-option-remove):not(.question-add-option-btn):not(.reorder-move-btn),
body:not(.invite-body) button:not(.secondary):not(.danger):not(.soft-button):not(.event-strip-dismiss):not(.modal-close):not(.app-drawer-close):not(.question-option-remove):not(.question-add-option-btn):not(.reorder-move-btn):not(.btn-unstyled) {
  /* v.185.4: added :not(.app-drawer-close) so the drawer's quiet
     close X (transparent + muted gray) doesn't get repainted dark
     by this rule. Same pattern as .event-strip-dismiss + .modal-close.
     v.186.1: added :not(.question-option-remove) so the option-row
     × doesn't render as a solid dark circle, and
     :not(.question-add-option-btn) so the "+ Add option" CTA inside
     the question drawer keeps its own styling.
     v.186.4: collapsed two prior page-specific exclusions
     (:not(.signups-move-btn):not(.questions-move-btn)) into a single
     :not(.reorder-move-btn) now that both pages share the .reorder-*
     classes. The chain is one exclusion shorter and the next page
     that adds a draggable list won't need to extend it. */
  background: var(--host-button-dark) !important;
  border-color: var(--host-button-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
}

/* --- Soften nav active state (was hard black bg) ------- */
.event-tabs a.active,
.event-tabs a:hover,
.event-sidebar-link.active,
.dashboard-tabs button.active,
.event-tabs-mobile nav a.active,
.event-tabs-mobile nav a:hover {
  background: var(--host-button-dark) !important;
  color: #fff !important;
}

/* --- Avatar circle: use the softer dark too ------------ */
.avatar-circle {
  background: var(--host-button-dark);
}
.avatar-menu > summary:hover .avatar-circle {
  background: var(--host-ink);   /* slightly darker on hover for press feel */
}

/* --- Chrome strip dismiss × — explicit transparent fix - */
.event-strip-dismiss,
.host-body .event-strip-dismiss,
body:not(.invite-body) .event-strip-dismiss,
body:not(.invite-body) button.event-strip-dismiss {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--host-muted);
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px;
}
.event-strip-dismiss:hover,
.host-body .event-strip-dismiss:hover,
body:not(.invite-body) .event-strip-dismiss:hover {
  background: var(--host-soft) !important;
  transform: none !important;
}

/* The X bars themselves — make sure they survive against the
   transparent background and aren't being painted over. The
   base rule defined them at 1.5px wide which is fine; we
   just re-assert the color in case a parent rule overrode it. */
.event-strip-dismiss-x::before,
.event-strip-dismiss-x::after {
  background: var(--host-muted);
}
.event-strip-dismiss:hover .event-strip-dismiss-x::before,
.event-strip-dismiss:hover .event-strip-dismiss-x::after {
  background: var(--host-ink);
}

/* =========================================================
   v.185 — Guest list row hover highlights.
   Member rows already get a hover tint (existing
   .guest-member-row-clickable:hover). Add the matching
   visual cue to household-parent rows and individual rows
   on guest-list.php so all clickable rows behave the same.
   ========================================================= */
.simple-guest-row.shared-parent-row:hover,
.simple-guest-row:not(.guest-member-row):not(.shared-parent-row):hover {
  background: rgba(255, 126, 45, 0.06);
  cursor: pointer;
}
.simple-guest-row.guest-member-row.guest-member-row-clickable:hover {
  background: rgba(255, 126, 45, 0.06);
  cursor: pointer;
}

/* =========================================================
   v.185 — Drawer footer event-scope caption.
   Single subtle line under the secondary button row that
   tells the host which event the Copy/Remove/Add buttons
   would act on. Italic, muted, small. Hidden via [hidden]
   when no event is in scope.
   ========================================================= */
.app-drawer-footer-event-scope {
  margin: 6px 0 0;
  padding: 0 4px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--host-ink-muted, #8a7868);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   v.185.1 — Copy-button success affordance.
   When a Copy RSVP Link button is clicked, the JS swaps the
   text to "✓ Copied to clipboard" and adds this class for
   1.6s. The class gives a green tint + bold text so the
   confirmation actually pops.
   ========================================================= */
.app-drawer-btn-copied,
.app-drawer-btn-copied:hover {
  background: #2e7d32 !important;
  color: #fff !important;
  border-color: #2e7d32 !important;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}

/* =========================================================
   v.186.1 — question-option × button explicit styling.

   The option-row × (and its sibling, the ↺ un-hide arrow)
   was being repainted by the v.179.1 dark-button rule as a
   solid dark circle + 999px border-radius from the v5.13.12
   base rule. With :not(.question-option-remove) added to
   v.179.1, the styling falls through to whatever earlier
   .question-option-remove rule exists in the file. This
   block re-asserts the intended look explicitly so the
   button reads as a quiet, paired control next to the input,
   not a destructive primary action.

   Same approach as .app-drawer-close in v.185.4: explicit
   transparent + muted color + soft-slate hover, with !important
   on border-radius and min-height to defeat the v5.13.12 base
   button rule that sets 999px / 38px without an opt-out.
   ========================================================= */
.question-option-remove,
.host-body .question-option-remove,
body:not(.invite-body) .question-option-remove {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--host-muted, #6b7280) !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.question-option-remove:hover,
.host-body .question-option-remove:hover,
body:not(.invite-body) .question-option-remove:hover {
  background: var(--host-soft, #f1f5f9) !important;
  color: var(--host-ink, #0f172a) !important;
  transform: none !important;
}
/* Rows with responses use the ↺ un-hide glyph instead of ×.
   When the row is currently disabled (hidden from new responders),
   the glyph is the action to UN-hide — give it a subtle filled
   treatment so it reads as "do this to restore" rather than
   matching the other rows' destructive ×. */
.question-option-row.has-responses.is-disabled .question-option-remove {
  background: color-mix(in srgb, var(--host-accent, #f97316) 12%, transparent) !important;
  color: var(--host-accent, #f97316) !important;
}
.question-option-row.has-responses.is-disabled .question-option-remove:hover {
  background: color-mix(in srgb, var(--host-accent, #f97316) 22%, transparent) !important;
}

/* The "+ Add option" CTA inside the question drawer. Quiet
   secondary look; sits below the option list. */
.question-add-option-btn,
.host-body .question-add-option-btn,
body:not(.invite-body) .question-add-option-btn {
  background: transparent !important;
  border: 1px dashed var(--host-border, rgba(15, 23, 42, .18)) !important;
  color: var(--host-muted, #6b7280) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  margin-top: 6px !important;
  min-height: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  align-self: flex-start;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.question-add-option-btn:hover,
.host-body .question-add-option-btn:hover,
body:not(.invite-body) .question-add-option-btn:hover {
  border-color: var(--host-ink, #0f172a) !important;
  color: var(--host-ink, #0f172a) !important;
  background: var(--host-soft, #f1f5f9) !important;
  transform: none !important;
}

/* =========================================================
   v.186.4 — shared row-reorder pattern (.reorder-*).

   Replaces the v.186.1/v.186.3 .signups-* block with a shared
   namespace used by BOTH event-signups.php and questions.php.
   Per host feedback ("why are these two pages styled
   separately?"), the row chrome, drag handle, drop indicators,
   and mobile ▲▼ buttons are now defined once here and consumed
   by both pages via identical markup.

   Page-specific bits (claim list on signups, summary bars on
   questions) still live under their respective .signups-* /
   .questions-* class chains — the outer row keeps BOTH classes
   (.reorder-row + .signups-row / .reorder-row + .questions-row)
   so page-scoped CSS keeps working. This block handles only the
   shared row chrome + reorder controls.

   Markup contract (must match on both pages):
     <div class="reorder-row {page}-row ..." data-{id}-id="..."
          draggable="true">
       <div class="reorder-row-drag" aria-hidden="true"
            title="Drag to reorder"></div>
       <div class="{page}-row-info">...page-specific content...</div>
       <div class="reorder-row-actions">
         <div class="reorder-row-move-mobile" aria-label="...">
           <button class="reorder-move-btn reorder-move-up" ...>▲</button>
           <button class="reorder-move-btn reorder-move-down" ...>▼</button>
         </div>
       </div>
     </div>

   The drag-handle is intentionally an EMPTY single div — the
   6-dot grip is painted by CSS via a stacked radial-gradient.
   v.186.1/v.186.3 had inner <span>s that we hid via CSS; that
   wart is gone now that we control both pages' markup.

   Visual decisions (same as v.186.3 signups, which was the
   host-approved look):
     • Cream/off-white row surface (#fffdf8) with very subtle
       warm border — reads as a content card, not a hard table
       row.
     • 6-dot grip handle (2 cols × 3 rows) painted with two
       offset radial-gradients on the .reorder-row-drag element.
     • Drop indicators use the orange accent as a 2px top/bottom
       border on the hovered row.
     • Mobile (≤720px): drag handle hidden, ▲▼ pair shown — touch
       dragging is unreliable across mobile browsers.
   ========================================================= */
.reorder-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  background: #fffdf8;
  border: 1px solid rgba(120, 90, 60, 0.10);
  border-radius: 14px;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.reorder-row:hover {
  background: #fffaf3;
  border-color: rgba(120, 90, 60, 0.16);
}
.reorder-row.is-dragging {
  opacity: .5;
}
.reorder-row.drop-above {
  border-top: 2px solid var(--host-accent, #f97316);
}
.reorder-row.drop-below {
  border-bottom: 2px solid var(--host-accent, #f97316);
}
.reorder-row-drag {
  width: 14px;
  height: 18px;
  align-self: center;
  justify-self: center;
  cursor: grab;
  user-select: none;
  background-image:
    radial-gradient(circle, rgba(120, 90, 60, .42) 1.4px, transparent 1.6px),
    radial-gradient(circle, rgba(120, 90, 60, .42) 1.4px, transparent 1.6px);
  background-size: 5px 6px;
  background-position: 0 0, 5px 0;
  background-repeat: repeat-y;
}
.reorder-row-drag:active {
  cursor: grabbing;
}
.reorder-row-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Mobile reorder ▲▼ buttons. Desktop hides them (drag handle
   takes over); mobile shows them as a stacked pair. */
.reorder-row-move-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
}
.reorder-move-btn,
.host-body .reorder-move-btn,
body:not(.invite-body) .reorder-move-btn {
  background: transparent !important;
  border: 1px solid var(--host-border, rgba(15, 23, 42, .12)) !important;
  color: var(--host-muted, #6b7280) !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reorder-move-btn:hover,
.host-body .reorder-move-btn:hover {
  background: var(--host-soft, #f1f5f9) !important;
  color: var(--host-ink, #0f172a) !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .reorder-row {
    grid-template-columns: 1fr auto;
    padding: 14px 16px;
  }
  .reorder-row-drag {
    display: none;
  }
  .reorder-row-move-mobile {
    display: flex;
  }
}
@media (min-width: 721px) {
  .reorder-row-move-mobile {
    display: none;
  }
}

/* Page-specific row content kept from v.186.1. These are NOT
   part of the shared reorder pattern — they style the *body*
   of the row, which is necessarily different per page. */
.signups-item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signups-row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.signups-row-info strong {
  font-size: 15px;
  color: var(--host-ink, #0f172a);
  font-weight: 600;
}
.signups-row-meta {
  font-size: 12px;
  color: var(--host-muted, #6b7280);
}
.signups-claim-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  color: var(--host-muted, #6b7280);
}
.signups-claim-list li::before {
  content: "•";
  margin-right: 4px;
  color: var(--host-accent, #f97316);
}
.signups-claim-list li:first-child::before {
  content: "";
  margin-right: 0;
}

/* =========================================================
   v.186.5 — non-required radio question "toggle-to-clear"
   hint paragraph.

   The PHP renderer puts data-allow-clear="1" on the choice
   grid when the question is non-required. The hint sits
   *outside* the grid as a sibling <p>, so we use the
   :has() + adjacent-sibling selector pattern to reveal it
   only when something is selected — that way it reads as
   a "you can undo" cue, not a permanent instruction that
   adds noise to a blank form.

   Scoped under body[data-rsvp2="1"] so the rule only fires
   on the v2 RSVP page and doesn't leak into any other
   surface that might use .rsvp2-choice-grid (none today,
   but the prefix is a contract).
   ========================================================= */
body[data-rsvp2="1"] .rsvp2-choice-hint {
  display: none;
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--r2-muted);
  line-height: 1.4;
}
body[data-rsvp2="1"] .rsvp2-choice-grid[data-allow-clear="1"]:has(input:checked) + .rsvp2-choice-hint {
  display: block;
}

/* =========================================================
   v.186.5 (revised again) — chrome strip: compact two-row
   layout with small eyebrow on top.

   Hosts asked for the "Current event" eyebrow back. To keep
   the strip short, the eyebrow is tiny (10px uppercase),
   sits on its own row above title+meta, and uses minimal
   line-height. Net: ~52px tall vs the ~44px one-row version,
   vs ~88px in the original eyebrow-stacked design.

   Layout trick: .event-strip-link is flex-wrap, the eyebrow
   has flex-basis: 100% (forces siblings to next row), then
   title + meta sit inline on row 2 with a small gap.

   Markup (admin_topbar PHP):
     <a class="event-strip-link" href="...overview">
       <span class="event-strip-eyebrow">Current event</span>
       <span class="event-strip-title">Title</span>
       <span class="event-strip-meta">Jul 4 · 6:00 PM · <span class="badge">status</span></span>
     </a>
   ========================================================= */
.event-strip-inner {
  align-items: center;
  gap: 12px;
}
/* Push the actions cluster (Switch event / Manage event / ×)
   to the right edge of the strip. Without this, since
   .event-strip-link is now flex:0 1 auto (natural width) rather
   than the old flex:1 1 0 (grow-to-fill) of .event-strip-text,
   the actions would sit immediately next to the link instead of
   anchored to the right — which left the X far to the left of
   the +Add Guests button below. */
.event-strip-actions {
  margin-left: auto;
}
/* Stacking context for the chrome strip on desktop so its
   Switch event dropdown panel can render above the page
   content below. Without this, the strip is z-auto in the
   root stacking context; the page's top card (especially
   .contacts-sticky-header at z:90, .event-console-nav-shell
   at z:65) creates its own positioned stacking context that
   lands on top of the panel's overflow. Pinning the strip
   to a positive z-index lifts the whole strip — and
   everything inside it, including the open dropdown — above
   those headers.

   z:100 chosen because:
     • must clear .contacts-sticky-header (z:90)
     • must clear .event-console-nav-shell (z:65)
     • should stay below the modal backdrop (z:1000) and
       the avatar-panel (z:1000) so dialogs and the avatar
       menu both still cover the strip when open
     • above .app-topbar (z:90) is fine — the topbar is
       sticky pinned at top:0 and the strip sits just below
       it, so they don't visually compete

   Wrapped in min-width:721px because the v.178 mobile rule
   ('.event-strip { position: sticky; top: 0; z-index: 70 }'
   inside @media (max-width: 720px)) needs to keep firing on
   mobile to pin the strip to the top of the scroll viewport.
   Without this guard, the desktop rule would win source order
   on mobile too and break that pinning. */
@media (min-width: 721px) {
  .event-strip {
    position: relative;
    /* z:200 chosen to clear the highest sticky header we render
       above the chrome strip's dropdown:
         .major-page-nav-shell  z:160  (contacts, themes, etc.)
         .contacts-sticky-header z:90
         .event-console-nav-shell z:65
         .app-topbar             z:90  (sits above us anyway)
       Modal backdrop is z:1000 and avatar-panel is z:1000, so we
       stay well below those — dialogs and the avatar menu still
       cover the open Switch event dropdown correctly. */
    z-index: 200;
  }
}
/* Per-page alignment via CSS variables. Default values match
   the event-console layout (guest list, event overview, etc.):
   1180px container, sidebar with 12px+14px inset on left, card
   with 24px padding on right. Pages whose content uses a
   different layout override these on body so the chrome bar's
   X aligns with that page's specific action button.

   Why :has() and not body classes: dashboards/etc. don't all
   have unique body classes today, and adding them everywhere
   is more invasive than reading the page's actual layout
   container. :has() is supported in every major browser since
   2023, which covers our audience.

   To add a new page-specific alignment: add a new body:has(...)
   block below with the right values. The math is:
     padding-left  = (1180 - inner-content-width)/2 + inner-left-inset
     padding-right = (1180 - inner-content-width)/2 + inner-right-inset
   where inner-content-width is the page's actual visible card
   width and inner-*-inset is the card's internal padding to the
   button you want to align with. */
body {
  --chrome-inset-left: 44px;
  --chrome-inset-right: 42px;
}
/* Dashboard pages use .consumer-dashboard (max-width: 1120px,
   centered within .container). The hero card .dashboard-welcome
   has padding: 38px. So button right edge sits at vw/2 + 522;
   chrome outer at 1180 means padding-right of 68 lands the X
   on that x-coordinate. Left side is symmetric. */
body:has(.consumer-dashboard) {
  --chrome-inset-left: 68px;
  --chrome-inset-right: 68px;
}
@media (min-width: 721px) {
  .event-strip-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: var(--chrome-inset-left, 44px);
    padding-right: var(--chrome-inset-right, 42px);
  }
}
.event-strip-link {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px 10px;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.event-strip-link:hover .event-strip-title {
  color: var(--host-accent, #f97316);
  transition: color 120ms ease;
}
/* Eyebrow on its own row (flex-basis:100% forces a wrap). */
.event-strip-link .event-strip-eyebrow {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--host-muted, #6b7280);
  line-height: 1.1;
  white-space: nowrap;
  margin: 0;
}
/* Title + meta inline on row 2. */
.event-strip-link .event-strip-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--host-ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.event-strip-link .event-strip-meta {
  font-size: 13px;
  color: var(--host-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 400;
}
/* Inline badge sits aligned with the meta text. Trim its
   vertical padding so it doesn't push the row taller. */
.event-strip-link .event-strip-meta .badge {
  font-size: 11px;
  padding: 2px 8px;
  vertical-align: baseline;
}

/* Empty-state copy inside the Switch event picker panel
   (when the host has no other events). Sits above the
   See all / + Create rows; small + muted so it reads as
   informational rather than an action. */
.event-strip-switch-empty {
  margin: 4px 0;
  padding: 6px 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--host-muted, #6b7280);
}

/* =========================================================
   v.186.5 — "Switch event" quick-picker in the chrome strip.

   <details>/<summary> popover with a list of the host's
   most-recently-touched OTHER events. Modeled on the
   .row-actions-menu / .row-actions-panel pattern used
   elsewhere in the admin so it feels familiar, but with
   multi-line items (title + date · status meta).

   Markup contract (rendered by admin_topbar in PHP):
     <details class="event-strip-switch" data-event-strip-switch>
       <summary class="button secondary small event-strip-switch-trigger">
         <span class="event-strip-switch-label">Switch event</span>
         <span class="event-strip-switch-caret">▾</span>
       </summary>
       <div class="event-strip-switch-panel">
         <a class="event-strip-switch-item">
           <span class="event-strip-switch-item-title">…</span>
           <span class="event-strip-switch-item-meta">…</span>
         </a>
         …
         <div class="event-strip-switch-sep"></div>
         <a class="event-strip-switch-item event-strip-switch-item-link">…</a>
       </div>
     </details>

   The summary inherits the existing .button.secondary.small
   chrome (sizing, padding, border) so we only need to:
     1. Strip the native <details> marker bullet.
     2. Style the caret + rotation on open.
     3. Position + paint the dropdown panel.
     4. Style the per-event rows + the final see-all/+create
        link variants.

   Outside-click dismissal is wired in admin_topbar's inline
   JS, parallel to the avatar dropdown's existing handler.
   ========================================================= */
.event-strip-switch {
  position: relative;
  display: inline-block;
}
.event-strip-switch summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.event-strip-switch summary::-webkit-details-marker { display: none; }
.event-strip-switch summary::marker { display: none; content: ''; }
.event-strip-switch-caret {
  font-size: 10px;
  line-height: 1;
  opacity: .75;
  transition: transform 150ms ease;
}
.event-strip-switch[open] .event-strip-switch-caret {
  transform: rotate(180deg);
}

/* The panel itself. Right-anchored to the trigger so it never
   overflows the right edge of the chrome strip. min-width keeps
   event titles readable; max-width prevents very long titles
   from blowing the panel up. On narrow phones the trigger sits
   near the right edge, so right: 0 plus max-width keeps the
   panel inside the viewport. */
.event-strip-switch-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 14px;
  background: var(--host-card, #fff);
  border: 1px solid var(--host-border, rgba(15,23,42,.08));
  box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
}

/* Per-event row. Two-line: title bold, meta muted small.
   Hover paints the row with --host-soft so the focus is
   visually obvious — same convention as avatar-panel-links
   and row-actions-item. */
.event-strip-switch-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--host-ink, #0f172a) !important;
  transition: background 120ms ease;
}
.event-strip-switch-item:hover,
.event-strip-switch-item:focus-visible {
  background: var(--host-soft, #f1f5f9);
  outline: none;
}
.event-strip-switch-item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--host-ink, #0f172a);
  /* Long titles ellipsis rather than wrap — keeps each row
     a predictable two-line height. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-strip-switch-item-meta {
  font-size: 12px;
  color: var(--host-muted, #6b7280);
  line-height: 1.3;
}

/* Divider between recent-events list and the "See all"/
   "+ Create event" link footer. 1px hairline matching the
   border tone so it doesn't compete with the panel border. */
.event-strip-switch-sep {
  height: 1px;
  background: var(--host-border, rgba(15,23,42,.08));
  margin: 6px 4px;
}

/* Footer link variant — single-line, accent color, smaller.
   Visually distinct from the event rows above so the host
   reads them as "meta actions" rather than another event
   in the list. */
.event-strip-switch-item-link {
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--host-accent, #f97316) !important;
}
.event-strip-switch-item-link:hover,
.event-strip-switch-item-link:focus-visible {
  background: color-mix(in srgb, var(--host-accent, #f97316) 10%, transparent);
  color: var(--host-accent, #f97316) !important;
}

/* Mobile: shrink the trigger label so it doesn't crowd the
   strip on narrow phones. The caret stays visible. */
@media (max-width: 480px) {
  .event-strip-switch-panel {
    min-width: 240px;
  }
}