@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --ef-bg: #f2f5f2;
  --ef-card: #ffffff;
  --ef-ink: #14211b;
  --ef-muted: #68766e;
  --ef-line: #e2e8e3;
  --ef-teal: #2a6b57;
  --ef-teal-deep: #1f5546;
  --ef-teal-soft: #e3efe9;
  --ef-gold: #e6b13d;
  --ef-gold-soft: #faf0d8;
  --ef-danger: #b3261e;
  --ef-shadow: 0 18px 44px rgba(20, 33, 27, .09);
  /* The Matchmaker's Letter voice: warm paper surfaces, serif hand. */
  --ef-paper: #faf7f0;
  --ef-paper-edge: #efe9dc;
  --ef-serif: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
}

#screen-event-first {
  position: fixed;
  inset: 0;
  z-index: 8990;
  overflow: hidden;
  background: var(--ef-bg);
  color: var(--ef-ink);
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Bottom chrome, declared once. The mobile navigation is measured at runtime
     and combined with the device safe area; desktop keeps this at zero. */
  --ef-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ef-nav-h: 0px;
  --ef-nav-gap: 0px;
  --ef-nav-bottom: 0px;
  --ef-bottom-chrome: 0px;
  --ef-decide-tail: 4px;    /* opaque strip below the decide buttons */
  --ef-bg-0: rgba(242, 245, 242, 0);  /* --ef-bg at zero alpha */
}

/* `hidden` must actually hide. Any author `display` declaration outranks the
   user-agent's [hidden] { display: none }, and this sheet sets display on
   plenty of things — so `el.hidden = true` was silently doing nothing. That is
   how the membership modal came to show BOTH the PayPal component and the
   redirect fallback at once: the JS un-hides exactly one, and the CSS kept the
   other on screen. The trap had already been hit and patched one selector at a
   time; this is the general fix. */
#screen-event-first [hidden] { display: none !important; }

#screen-event-first *, #screen-event-first *::before, #screen-event-first *::after { box-sizing: border-box; }
#screen-event-first button, #screen-event-first input, #screen-event-first select { font: inherit; }
#screen-event-first button { margin: 0; }

.ef-shell { min-height: 100dvh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.ef-sidebar { position: sticky; top: 0; height: 100dvh; padding: 28px 18px; background: #fbfcfb; border-right: 1px solid var(--ef-line); display: flex; flex-direction: column; }
.ef-brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 28px; color: var(--ef-ink); }
.ef-brand-mark { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--ef-teal), var(--ef-teal-deep)); box-shadow: 0 8px 22px rgba(42,107,87,.24); }
.ef-brand strong { font-size: 16px; line-height: 1.1; display: block; }
.ef-brand span { color: var(--ef-muted); font-size: 11px; }
.ef-nav { display: grid; gap: 8px; }
.ef-nav-button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: transparent; color: var(--ef-muted); display: flex; align-items: center; gap: 12px; padding: 0 14px; font-weight: 700; cursor: pointer; text-align: left; position: relative; }
.ef-nav-button:hover { background: var(--ef-teal-soft); color: var(--ef-teal-deep); }
.ef-nav-button[aria-current='page'] { background: var(--ef-teal); color: #fff; box-shadow: 0 10px 24px rgba(42,107,87,.18); }
.ef-nav-icon { width: 22px; height: 22px; display: grid; place-items: center; }
.ef-nav-badge { margin-left: auto; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--ef-gold); color: #3d2a00; display: grid; place-items: center; font-size: 11px; font-weight: 800; }

/* Persistent account block. It takes the `margin-top: auto` so the identity row
   and the strapline sit together as one group at the bottom of the sidebar. */
.ef-account { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ef-line); }
.ef-account-row { display: flex; align-items: center; gap: 11px; padding: 0 10px 12px; min-width: 0; }
.ef-account-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: var(--ef-teal-deep); background: var(--ef-teal-soft); font-size: 13px; font-weight: 800; }
.ef-account-id { min-width: 0; line-height: 1.25; }
.ef-account-id strong { display: block; font-size: 13.5px; color: var(--ef-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-account-id span { color: var(--ef-muted); font-size: 11px; }
.ef-account-logout { width: 100%; min-height: 42px; border: 1px solid var(--ef-line); border-radius: 14px; background: #fff; color: var(--ef-muted); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ef-account-logout:hover { border-color: rgba(179,38,30,.3); background: rgba(179,38,30,.05); color: var(--ef-danger); }
.ef-account-logout-icon { width: 16px; height: 16px; display: grid; place-items: center; }
/* Slim global controls: two icons, no pills, every width. */
.ef-topbar { position: fixed; z-index: 8990; top: max(13px, env(safe-area-inset-top)); right: 13px; display: flex; align-items: center; gap: 8px; }

.ef-topbar-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border: 1px solid rgba(226,232,227,.9); border-radius: 50%; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); color: var(--ef-teal-deep); box-shadow: 0 8px 22px rgba(20,33,27,.12); cursor: pointer; }
.ef-topbar-btn:active { transform: scale(.94); }
.ef-topbar-chat { position: relative; color: #128c4b; }
.ef-chat-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(255,255,255,.95); animation: ef-chat-pulse 1.6s ease-in-out infinite; }
@keyframes ef-chat-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .ef-chat-dot { animation: none; } }

.ef-sidebar-foot { padding: 14px 10px 0; color: var(--ef-muted); font-size: 11px; line-height: 1.5; }

.ef-main { min-width: 0; height: 100dvh; overflow-y: auto; padding: 58px clamp(22px, 4vw, 64px) 64px 22px; padding-left: clamp(22px, 4vw, 64px); }
.ef-content { width: min(100%, 1180px); margin: 0 auto; }
.ef-eyebrow { color: var(--ef-teal); font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.ef-title { margin: 7px 0 0; font-family: var(--ef-serif); font-weight: 500; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.015em; color: var(--ef-ink); }
.ef-subtitle { max-width: 600px; margin: 9px 0 0; color: var(--ef-muted); font-size: 15px; line-height: 1.6; }
.ef-refresh { width: auto; border: 1px solid var(--ef-line); border-radius: 999px; background: #fff; color: var(--ef-teal-deep); padding: 9px 14px; font-weight: 700; cursor: pointer; }

.ef-card { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 24px; box-shadow: 0 7px 24px rgba(20,33,27,.04); }
.ef-event-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .7fr); gap: 20px; }
.ef-result-band { margin-bottom: 20px; padding: 22px; border: 1px solid var(--ef-line); background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); gap: 24px; align-items: center; }
.ef-result-band h3 { margin: 7px 0 8px; font-family: var(--ef-serif); font-size: 27px; font-weight: 500; }
.ef-result-band p { margin: 10px 0 0; max-width: 650px; color: var(--ef-muted); font-size: 13px; line-height: 1.55; }
.ef-result-counts { display: flex; gap: 10px; flex-wrap: wrap; }
.ef-result-counts span { min-width: 130px; padding: 10px 12px; background: var(--ef-bg); color: var(--ef-muted); font-size: 12px; }
.ef-result-counts strong { display: block; color: var(--ef-teal-deep); font-size: 22px; }
.ef-result-offer { display: grid; gap: 8px; }
.ef-result-offer > strong { font-size: 22px; color: var(--ef-teal-deep); }
.ef-result-offer > span, .ef-result-offer label { color: var(--ef-muted); font-size: 11px; line-height: 1.45; }
.ef-result-offer label { display: flex; align-items: flex-start; gap: 7px; }
.ef-result-action { width: 100%; }
.ef-paypal-checkout { width: 100%; margin-top: 14px; text-align: left; }
.ef-paypal-cta { display: block; width: 100%; min-height: 48px; margin: 0; }
.ef-paypal-cta[disabled] { opacity: .5; pointer-events: none; }
.ef-paypal-status { min-height: 17px; margin-top: 7px; color: var(--ef-muted); font-size: 10.5px; line-height: 1.45; text-align: center; }
.ef-paypal-status.is-error { color: var(--ef-danger); }
.ef-event-hero { position: relative; overflow: hidden; min-height: 535px; padding: clamp(24px, 5vw, 52px); color: #fff; background: radial-gradient(circle at 85% 15%, rgba(230,177,61,.45), transparent 32%), radial-gradient(circle at 7% 92%, rgba(176,224,199,.18), transparent 35%), linear-gradient(145deg, #173e35 0%, #2a6b57 55%, #1f5546 100%); box-shadow: var(--ef-shadow); }
.ef-event-hero::after { content: ''; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; right: -130px; bottom: -170px; box-shadow: 0 0 0 40px rgba(255,255,255,.025), 0 0 0 80px rgba(255,255,255,.02); }
.ef-event-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.ef-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.11); backdrop-filter: blur(10px); font-size: 12px; font-weight: 800; }
.ef-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #8ee1bd; box-shadow: 0 0 0 5px rgba(142,225,189,.14); }
.ef-event-meta { margin-top: 38px; color: #d9eee5; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ef-event-title { max-width: 640px; margin: 13px 0 14px; color: #fff; font-family: var(--ef-serif); font-weight: 500; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; letter-spacing: -.02em; }
.ef-event-copy { max-width: 580px; margin: 0; color: #deeee7; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; }
.ef-feature-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.ef-feature-chip { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: #eef9f4; font-size: 12px; font-weight: 700; }
.ef-event-bottom { width: 100%; margin-top: auto; }
.ef-attendee-faces { display: flex; gap: 9px; width: 100%; margin: 4px 0 18px; padding: 2px 2px 9px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.ef-attendee-face { width: 50px; height: 50px; flex: 0 0 50px; overflow: hidden; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(255,255,255,.13); scroll-snap-align: start; }
.ef-attendee-face img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Specificity, not preference: `#screen-event-first button { font: inherit }`
   is (1,0,1) and this rule is (0,1,0), so the 800 below has never applied and
   every primary button has rendered at weight 400. The id prefix is what makes
   it take effect. See also the mobile nav. */
#screen-event-first .ef-button { font-weight: 800; }
.ef-button { width: 100%; min-height: 52px; border: 0; border-radius: 16px; padding: 12px 18px; background: var(--ef-teal); color: #fff; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .15s ease, background .15s ease, opacity .15s ease; }
.ef-button:hover { transform: translateY(-1px); background: var(--ef-teal-deep); }
.ef-button:active { transform: translateY(0); }
.ef-button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.ef-button-gold { background: var(--ef-gold); color: #352500; box-shadow: 0 12px 28px rgba(230,177,61,.22); }
.ef-button-gold:hover { background: #f0bd4e; }
.ef-button-secondary { background: #fff; color: var(--ef-teal-deep); border: 1px solid var(--ef-line); }
.ef-button-danger { background: #fff; color: var(--ef-danger); border: 1px solid #efc6c3; }
.ef-event-hero .ef-button { min-height: 58px; font-size: 16px; }
.ef-button-sub { margin-top: 9px; width: 100%; text-align: center; color: #cfe4da; font-size: 11px; }
.ef-calendar-link { display: block; width: 100%; margin-top: 10px; color: #d9eee5; text-align: center; font-size: 12px; }

.ef-event-side { display: grid; align-content: start; gap: 14px; }
.ef-side-card { padding: 22px; }
.ef-side-label { color: var(--ef-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ef-side-title { margin: 8px 0 5px; font-size: 19px; line-height: 1.25; }
.ef-side-copy { margin: 0; color: var(--ef-muted); font-size: 13px; line-height: 1.55; }
.ef-stat-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.ef-stat { padding: 12px; border-radius: 15px; background: var(--ef-bg); }
.ef-stat strong { display: block; font-size: 20px; color: var(--ef-teal-deep); }
.ef-stat span { color: var(--ef-muted); font-size: 11px; }
.ef-upcoming-list { display: grid; gap: 9px; margin-top: 13px; }
.ef-upcoming { width: 100%; border: 1px solid var(--ef-line); border-radius: 14px; background: #fff; padding: 12px; text-align: left; color: var(--ef-ink); cursor: pointer; }
.ef-upcoming[aria-current='true'] { border-color: var(--ef-teal); background: var(--ef-teal-soft); }
.ef-upcoming strong, .ef-upcoming span { display: block; }
.ef-upcoming span { margin-top: 3px; color: var(--ef-muted); font-size: 11px; }

.ef-network-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: end; margin-bottom: 18px; }
.ef-segments { display: inline-flex; max-width: 430px; padding: 4px; border-radius: 14px; background: #e8ece8; }
.ef-segment { min-height: 38px; border: 0; border-radius: 11px; padding: 0 16px; background: transparent; color: var(--ef-muted); font-weight: 700; cursor: pointer; }
.ef-segment[aria-selected='true'] { background: #fff; color: var(--ef-ink); box-shadow: 0 3px 12px rgba(20,33,27,.08); }
.ef-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ef-filter { width: auto; min-height: 42px; border: 1px solid var(--ef-line); border-radius: 999px; padding: 0 14px; background: #fff; color: var(--ef-ink); }
.ef-count { color: var(--ef-muted); font-size: 13px; font-weight: 600; }
.ef-profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ef-profile-card { overflow: hidden; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.ef-profile-card:hover { transform: translateY(-3px); box-shadow: var(--ef-shadow); }
.ef-profile-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ef-teal-soft); }
.ef-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-verified { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ef-teal); color: #fff; border: 2px solid #fff; font-size: 14px; font-weight: 900; }
.ef-profile-body { padding: 15px; }
.ef-profile-name { margin: 0; font-size: 18px; }
.ef-profile-meta { margin-top: 5px; color: var(--ef-muted); font-size: 12px; line-height: 1.45; min-height: 34px; }
.ef-readiness { display: inline-flex; margin-top: 10px; padding: 6px 9px; border-radius: 999px; background: var(--ef-gold-soft); color: #76540a; font-size: 10px; font-weight: 800; }

.ef-offer { margin: 14px 0; padding: 13px; border-radius: 14px; background: var(--ef-gold-soft); color: #684a0b; font-size: 12px; line-height: 1.5; }

.ef-list { display: grid; gap: 12px; max-width: 780px; }
.ef-connection { padding: 18px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.ef-connection-profile-trigger { grid-column: 1 / 3; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; cursor: pointer; }
.ef-connection-profile-trigger:focus-visible, .ef-history-profile-trigger:focus-visible, .ef-call-profile-trigger:focus-visible { outline: 3px solid var(--ef-gold); outline-offset: 4px; border-radius: 12px; }
.ef-connection img, .ef-connection-avatar { width: 58px; height: 58px; border-radius: 18px; object-fit: cover; background: var(--ef-teal-soft); }
.ef-connection-avatar { display: grid; place-items: center; color: var(--ef-teal); font-weight: 800; }
.ef-connection-title { display: block; margin: 0; font-size: 16px; }
.ef-connection-description { display: block; margin: 4px 0 0; color: var(--ef-muted); font-size: 12px; line-height: 1.45; }
.ef-connection .ef-button { width: auto; min-height: 42px; border-radius: 12px; font-size: 12px; }
.ef-inline-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ef-slot-meter { display: grid; grid-template-columns: repeat(10, minmax(10px, 1fr)); gap: 4px; max-width: 260px; }
.ef-slot { height: 8px; border-radius: 999px; background: var(--ef-line); }
.ef-slot[data-used='true'] { background: var(--ef-gold); }

.ef-me-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .55fr); gap: 18px; }
.ef-me-card { padding: 22px; }
.ef-setting { padding: 17px 0; border-bottom: 1px solid var(--ef-line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ef-setting:last-child { border-bottom: 0; }
.ef-setting strong, .ef-setting span { display: block; }
.ef-setting span { margin-top: 4px; color: var(--ef-muted); font-size: 12px; line-height: 1.45; }
.ef-switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.ef-switch input { position: absolute; opacity: 0; }
.ef-switch-track { position: absolute; inset: 0; border-radius: 999px; background: #cdd5cf; transition: background .2s ease; cursor: pointer; }
.ef-switch-track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s ease; }
.ef-switch input:checked + .ef-switch-track { background: var(--ef-teal); }
.ef-switch input:checked + .ef-switch-track::after { transform: translateX(20px); }
.ef-member-card { padding: 26px; background: linear-gradient(145deg, #183e34, var(--ef-teal)); color: #fff; }
.ef-member-card h3 { margin: 10px 0 4px; color: #fff; font-size: 22px; }
.ef-member-card p { color: #d9ece4; font-size: 12px; line-height: 1.5; }

.ef-empty, .ef-error { padding: 34px 22px; border: 1px dashed var(--ef-line); border-radius: 20px; background: rgba(255,255,255,.65); color: var(--ef-muted); text-align: center; }
.ef-error { border-style: solid; border-color: #efc6c3; color: var(--ef-danger); background: #fff9f8; }
.ef-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; padding:16px 18px; border:1px solid rgba(197,159,57,.38); border-radius:18px; background:#fff9e7; color:var(--ef-ink); }
.ef-banner strong, .ef-banner span { display:block; }
.ef-banner span { margin-top:4px; color:var(--ef-muted); font-size:.88rem; }
.ef-banner .ef-button { width:auto; flex:0 0 auto; }
.ef-skeleton { min-height: 160px; border-radius: 20px; background: linear-gradient(90deg, #e9eeea 25%, #f7f9f7 50%, #e9eeea 75%); background-size: 200% 100%; animation: ef-shimmer 1.25s infinite; }
@keyframes ef-shimmer { to { background-position: -200% 0; } }

.ef-modal-backdrop { position: fixed; inset: 0; z-index: 11000; background: rgba(12,28,22,.64); display: grid; place-items: center; padding: 18px; }
.ef-modal { width: min(100%, 580px); max-height: min(88dvh, 820px); overflow-y: auto; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.ef-modal-compact { width: min(100%, 430px); }
.ef-diary-profile-modal { position: relative; width: min(100%, 680px); max-height: min(94dvh, 920px); overflow: hidden; display: flex; flex-direction: column; }
.ef-diary-profile-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ef-diary-profile-header { padding: 24px 62px 0 24px; }
.ef-diary-profile-gallery { padding: 0 24px; }
.ef-diary-profile-details { padding: 8px 24px 26px; }
.ef-diary-profile-close { z-index: 8; }
.ef-diary-profile-actions { position: sticky; z-index: 7; bottom: 0; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ef-line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.ef-diary-profile-actions .ef-button { flex: 1; margin: 0; }
.ef-diary-profile-actions .ef-text-action { flex: 0 0 auto; }

/* Curated prospect card: one person, full attention. */
.ef-reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.ef-reason { background: var(--ef-teal-soft); color: var(--ef-teal-deep); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }

/* Locked tease: a shape, not a person — the payload carries no data. */

.ef-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ef-history-card { display: flex; gap: 11px; align-items: center; padding: 11px; }
.ef-history-photo { width: 46px; height: 46px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; background: var(--ef-teal-soft); }
.ef-history-photo img { width: 100%; height: 100%; object-fit: cover; }
.ef-history-card strong { display: block; font-size: 13.5px; }
.ef-history-card span { color: var(--ef-muted); font-size: 11.5px; }

/* Locked directory preview: the paid layout, blurred and inert. The cards hold no
   data — the server sends shapes, not people — so this is presentation only and
   there is nothing here for a determined viewer to recover. */
.ef-modal-hero { position: relative; aspect-ratio: 16 / 10; background: var(--ef-teal-soft); overflow: hidden; }
.ef-modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.ef-modal-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(20,33,27,.78); color: #fff; cursor: pointer; }
.ef-modal-body { padding: 24px; }
.ef-modal-title { margin: 0; font-size: 25px; }
.ef-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 17px 0; }
.ef-detail { padding: 12px; border-radius: 14px; background: var(--ef-bg); }
.ef-detail small { display: block; color: var(--ef-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ef-detail strong { display: block; margin-top: 4px; font-size: 13px; }
.ef-safety-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.ef-text-action { border: 0; background: transparent; color: var(--ef-muted); padding: 5px; font-size: 12px; text-decoration: underline; cursor: pointer; }
.ef-field { width: 100%; min-height: 48px; border: 1px solid var(--ef-line); border-radius: 13px; padding: 10px 12px; color: var(--ef-ink); background: #fff; }
.ef-toast { position: fixed; z-index: 12000; left: 50%; bottom: 26px; transform: translateX(-50%); max-width: min(90vw, 480px); padding: 12px 17px; border-radius: 999px; background: var(--ef-ink); color: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--ef-shadow); }

.ef-mobile-nav { display: none; }

/* ============ The Matchmaker's Letter components ============ */
/* The letter column: one place owns the reading width. */
.ef-column { max-width: 560px; }
.ef-letter { background: var(--ef-paper); border: 1px solid var(--ef-paper-edge); border-radius: 22px; padding: 22px 20px 20px; box-shadow: 0 10px 30px rgba(31,85,70,.08); }
.ef-salaam { font-family: var(--ef-serif); font-style: italic; font-size: 15px; color: var(--ef-teal-deep); }
.ef-letter-title { font-family: var(--ef-serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.12; letter-spacing: -.01em; margin: 8px 0 2px; text-wrap: balance; }
.ef-flourish { width: 46px; height: 2px; background: var(--ef-gold); border-radius: 2px; margin: 12px 0; }

.ef-portrait { position: relative; border-radius: 18px; overflow: hidden; margin: 14px 0 4px; aspect-ratio: 4 / 4.6; background: linear-gradient(160deg, #315f4f 0%, var(--ef-teal-deep) 60%); }
.ef-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ef-portrait .ef-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ef-serif); font-style: italic; font-size: 90px; color: rgba(250,247,240,.35); }
.ef-portrait-veil { position: absolute; inset: auto 0 0 0; padding: 40px 14px 11px; color: var(--ef-paper); background: linear-gradient(180deg, transparent, rgba(16,32,26,.74)); display: block; font-size: 13px; }
.ef-portrait-veil .ef-veil-name { font-family: var(--ef-serif); font-weight: 500; font-size: 19px; line-height: 1.15; display: block; }
.ef-verify-pill { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; font-weight: 700; background: rgba(250,247,240,.16); border: 1px solid rgba(250,247,240,.35); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); white-space: nowrap; }

.ef-prospect-gallery { overflow: hidden; outline: none; }
.ef-prospect-gallery:focus-visible { box-shadow: 0 0 0 3px rgba(31,120,91,.28); }
.ef-gallery-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.ef-gallery-track::-webkit-scrollbar { display: none; }
.ef-gallery-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; padding: 0; border: 0; background: #dce8e1; scroll-snap-align: start; cursor: zoom-in; overflow: hidden; }
.ef-prospect-gallery .ef-gallery-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ef-gallery-slide.is-error::after { content: 'Photo unavailable'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ef-muted); font-size: 13px; font-weight: 700; background: var(--ef-teal-soft); }
.ef-prospect-gallery .ef-portrait-veil { z-index: 3; pointer-events: none; }
.ef-gallery-arrow { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(17,35,28,.68); color: #fff; backdrop-filter: blur(8px); cursor: pointer; transform: translateY(-50%); }
.ef-gallery-arrow:disabled { opacity: .25; cursor: default; }
.ef-gallery-prev { left: 12px; }
.ef-gallery-next { right: 12px; }
.ef-gallery-count { position: absolute; z-index: 4; top: 12px; right: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(17,35,28,.72); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); }
.ef-gallery-dots { display: flex; justify-content: center; gap: 7px; min-height: 20px; padding-top: 9px; }
.ef-gallery-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #b9c7bf; cursor: pointer; transition: width .18s ease, background .18s ease; }
.ef-gallery-dots button[aria-current="true"] { width: 20px; border-radius: 999px; background: var(--ef-teal); }

.ef-photo-viewer { position: fixed; inset: 0; z-index: 13000; display: grid; place-items: center; background: rgba(5,10,8,.96); }
.ef-photo-viewer-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; touch-action: pan-y; }
.ef-photo-viewer-stage > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ef-photo-viewer-close, .ef-photo-viewer-arrow { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(15,25,20,.72); color: #fff; cursor: pointer; }
.ef-photo-viewer-close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.ef-photo-viewer-arrow { top: 50%; transform: translateY(-50%); }
.ef-photo-viewer-prev { left: 16px; }
.ef-photo-viewer-next { right: 16px; }
.ef-photo-viewer-count { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; background: rgba(15,25,20,.72); color: #fff; font-size: 12px; font-weight: 800; }

.ef-matching-update { width: min(100%, 560px); margin: 20px auto 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--ef-gold); display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 10px; }
.ef-matching-update-mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ef-teal); font-size: 20px; }
.ef-matching-update-mark span { width: 16px; height: 16px; border: 2px solid #c9d8d0; border-top-color: var(--ef-teal); border-radius: 50%; animation: ef-summary-spin .8s linear infinite; }
.ef-matching-update p { margin: 7px 0 0; color: var(--ef-ink); font-family: var(--ef-serif); font-size: 15px; line-height: 1.5; }
@keyframes ef-summary-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ef-gallery-track { scroll-behavior: auto; } .ef-gallery-dots button { transition: none; } .ef-matching-update-mark span { animation: none; } }

.ef-storyline { display: grid; gap: 9px; margin: 12px 0 2px; }
.ef-storyline p { margin: 0; font-size: 14.5px; line-height: 1.55; padding-left: 18px; position: relative; }
.ef-storyline p::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ef-gold); }
.ef-letter-quote { font-family: var(--ef-serif); font-style: italic; font-size: 14px; color: var(--ef-teal-deep); margin: 14px 0 0; }

/* The decide bar pins ABOVE the fixed chrome, not behind it. It used to be
   `bottom: 0; z-index: 5`, which parked it under the membership CTA (8994)
   and the nav (8995) — the sticky behaviour was never actually visible on a
   phone. .ef-main has overflow but no z-index/transform/opacity, so it opens
   no stacking context and the bar competes directly with the fixed chrome:
   8993 puts it above all page content and still below both, which is what
   keeps the chrome on top during iOS rubber-band overscroll.

   `bottom: 0` is deliberate and is NOT the old value doing nothing. A sticky
   offset is measured against the scrollport REDUCED BY the scroll container's
   padding, and .ef-main's padding-bottom is exactly --ef-bottom-chrome — so
   zero already parks the bar precisely on top of the chrome. Repeating the
   variable here double-counts it and floats the bar a whole chrome-height too
   high, over the photo. The fix for the original bug was making that padding
   accurate (and raising z-index), not adding an inset. */
/* Chips summarise the prospect ON the photo (the mockup's lead), while the
   full detail moves below the fold into .ef-prospect-more. */
.ef-veil-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
/* Sized to fit two chips per row at 375px. These sit ON the photo, so they are
   secondary metadata — the picture is the thing being sold. min-width:0 plus
   ellipsis stops one long profession string from claiming a whole row. */
.ef-veil-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: rgba(250,247,240,.9); color: var(--ef-ink); font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 5px rgba(20,33,27,.16); }
.ef-prospect-more { margin-top: 12px; }
.ef-deck-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 10px; color: var(--ef-muted); font-size: 12px; }
.ef-deck-progress strong { color: var(--ef-ink); }
.ef-deck-progress .ef-text-action { padding: 0; min-height: 0; font-size: inherit; vertical-align: baseline; }

.ef-decide { position: sticky; bottom: 0; z-index: 8993; padding: 10px 0 var(--ef-decide-tail); background: linear-gradient(180deg, var(--ef-bg-0) 0, var(--ef-bg) 14px); }
.ef-decide-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
/* Each caption now lives inside the button it explains. They used to sit in a
   detached .ef-decide-micro row, which read as noise under two bare buttons. */
.ef-decide-row .ef-button { margin: 0; flex-direction: column; gap: 3px; min-height: 66px; padding: 10px 12px; line-height: 1.2; }
/* Once the captions have done their job the buttons lose the row they needed
   for them. 44px keeps a comfortable touch target. */
.ef-decide-slim .ef-decide-row .ef-button { min-height: 44px; gap: 0; padding: 8px 12px; }
.ef-decide-row .ef-button b { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; }
.ef-decide-row .ef-button small { font-size: 10.5px; font-weight: 600; line-height: 1.3; text-align: center; opacity: .8; }
.ef-decide-icon { flex: 0 0 auto; width: 17px; height: 17px; display: grid; place-items: center; }
.ef-button-meet { background: var(--ef-teal-deep); color: #fff; box-shadow: 0 12px 28px rgba(31,85,70,.22); }
.ef-button-meet:hover { background: #17453a; }
/* .ef-button:hover (0,2,0) out-specifies .ef-button-secondary (0,1,0) and sets
   --ef-teal-deep. Harmless while Meet was gold; now that Meet IS teal-deep, a
   hovered Pass would be indistinguishable from Meet without this. */
.ef-button-secondary:hover { background: var(--ef-teal-soft); color: var(--ef-teal-deep); }

.ef-ringrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ef-ring { width: 44px; height: 44px; position: relative; flex: 0 0 auto; }
.ef-ring svg { transform: rotate(-90deg); display: block; }
.ef-ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--ef-teal-deep); }
.ef-ringrow small { font-size: 12.5px; color: var(--ef-muted); line-height: 1.4; }
.ef-ringrow small strong { color: var(--ef-ink); }

.ef-bigring { display: grid; place-items: center; padding: 20px 0 4px; }
.ef-bigring-wrap { position: relative; width: 168px; height: 168px; }
.ef-bigring-wrap svg { transform: rotate(-90deg); display: block; }
.ef-bigring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ef-bigring-label b { font-family: var(--ef-serif); font-weight: 500; font-size: 28px; display: block; }
.ef-bigring-label span { font-size: 11px; color: var(--ef-muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

.ef-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.ef-stat-tile { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 16px; padding: 13px 8px; text-align: center; }
.ef-stat-tile b { font-family: var(--ef-serif); font-weight: 500; font-size: 22px; display: block; }
.ef-stat-tile span { font-size: 10px; color: var(--ef-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.ef-day-head { font-family: var(--ef-serif); font-size: 17px; margin: 18px 4px 8px; display: flex; gap: 8px; align-items: baseline; }
.ef-day-head small { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--ef-muted); font-weight: 600; }
.ef-call-card { background: var(--ef-teal-deep); color: #f2ede1; border-radius: 18px; padding: 15px 15px 13px; margin-bottom: 8px; box-shadow: 0 12px 30px rgba(31,85,70,.28); }
.ef-call-profile-trigger { width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: transparent; color: inherit; display: block; text-align: left; cursor: pointer; }
.ef-call-profile-trigger strong { display: block; font-family: var(--ef-serif); font-weight: 500; font-size: 21px; margin: 4px 0 2px; }
.ef-call-profile-trigger > span:last-child { display: block; font-size: 12.5px; color: rgba(242,237,225,.75); }
.ef-call-when { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ef-gold); }
.ef-call-card h4 { font-family: var(--ef-serif); font-weight: 500; font-size: 21px; margin: 4px 0 2px; }
.ef-call-card p { margin: 0 0 10px; font-size: 12.5px; color: rgba(242,237,225,.75); }
.ef-call-card .ef-button { margin: 0; }
.ef-ghost-row { border: 1.5px dashed var(--ef-line); background: rgba(255,255,255,.55); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; font-size: 12.5px; color: var(--ef-muted); display: flex; gap: 10px; align-items: center; }
.ef-ghost-row .ef-ghost-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ef-gold); flex: 0 0 auto; }
.ef-wait-badge { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--ef-gold-soft); color: #8a6414; white-space: nowrap; }
.ef-diary-waiting { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.ef-history-profile-trigger { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.ef-history-profile-trigger > span:last-child { min-width: 0; }

.ef-frost { position: relative; }
.ef-frost-glass { position: absolute; inset: 0; border-radius: 22px; backdrop-filter: blur(7px); background: rgba(250,247,240,.24); display: grid; place-items: end center; padding: 16px; }
.ef-frost-pill { background: var(--ef-teal-deep); color: #f6efe2; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 8px 14px; display: inline-flex; gap: 7px; align-items: center; }
.ef-steps-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; }
.ef-step-tile { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 15px; padding: 12px 9px; text-align: center; }
.ef-step-tile .ef-step-n { font-family: var(--ef-serif); font-style: italic; color: #b8862a; font-size: 17px; }
.ef-step-tile b { display: block; font-size: 11.5px; margin-top: 3px; }
.ef-step-tile span { font-size: 10px; color: var(--ef-muted); line-height: 1.35; display: block; margin-top: 2px; }
.ef-proof-line { margin: 4px 6px 12px; text-align: center; font-family: var(--ef-serif); font-style: italic; font-size: 14.5px; color: var(--ef-teal-deep); }
.ef-toldus-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ef-toldus-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--ef-gold); border-radius: 999px; background: var(--ef-gold-soft); color: #6b4e00; font-size: 12px; font-weight: 700; }
.ef-toldus-chip button { border: 0; background: none; color: #6b4e00; font-size: 12px; cursor: pointer; padding: 0; line-height: 1; }
.ef-reason-toldus { color: var(--ef-gold); font-weight: 700; }
/* Stated plainly rather than styled as an alert: widening a search to find
   somebody is an honest thing to admit, not a failure to apologise for. */
.ef-reason-relaxed { color: var(--ef-muted); font-style: italic; }
.ef-tease-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(1.5px) saturate(.95); transform: scale(1.03); }
.ef-tease-pill { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; }
.ef-tease-facts { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--ef-teal-deep); }
.ef-tease-facts i { color: var(--ef-gold); font-style: normal; }
.ef-how-line { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ef-muted); letter-spacing: .02em; margin: 12px 0; }
.ef-price-card { background: var(--ef-card); border: 1.5px solid var(--ef-teal-deep); border-radius: 20px; padding: 16px; text-align: center; position: relative; }
.ef-price-badge { position: absolute; top: -9px; right: 14px; background: var(--ef-gold); color: #3a2c07; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.ef-price-card .ef-price-amount { font-family: var(--ef-serif); font-weight: 500; font-size: 28px; }
.ef-price-card small { color: var(--ef-muted); font-size: 12px; display: block; margin-top: 2px; }
.ef-membership-activation { text-align: center; padding-top: 34px; padding-bottom: 36px; }
.ef-membership-activation .ef-button { margin-top: 20px; }
.ef-activation-spinner { width: 52px; height: 52px; margin: 0 auto 18px; border: 5px solid var(--ef-line); border-top-color: var(--ef-teal); border-radius: 50%; animation: ef-spin .8s linear infinite; }
.ef-activation-success, .ef-activation-warning { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800; }
.ef-activation-success { background: #dff2e9; color: var(--ef-teal-deep); }
.ef-activation-warning { background: var(--ef-gold-soft); color: #8a6414; }
.ef-activation-support { display: inline-block; margin-top: 16px; }
@keyframes ef-spin { to { transform: rotate(360deg); } }

.ef-beat { text-align: center; padding: 8px 6px 0; }
.ef-beat .ef-beat-k { font-family: var(--ef-serif); font-style: italic; color: #b8862a; font-size: 15px; }
.ef-beat h3 { font-family: var(--ef-serif); font-weight: 500; font-size: 30px; margin: 8px 0 10px; line-height: 1.15; }
.ef-beat p { color: var(--ef-muted); font-size: 14px; line-height: 1.6; margin: 0 auto; max-width: 30ch; }
.ef-beat .ef-beat-art { margin: 24px auto 0; width: 150px; height: 150px; border-radius: 50%; background: var(--ef-paper); border: 1px solid var(--ef-paper-edge); display: grid; place-items: center; font-size: 52px; }
.ef-beat-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0 12px; }
.ef-beat-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ef-line); }
.ef-beat-dots .on { background: var(--ef-gold); width: 20px; border-radius: 4px; }

.ef-facesrow { display: flex; padding: 4px 0 2px; }
.ef-facesrow .ef-face { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ef-paper); margin-right: -9px; background: linear-gradient(150deg,#4d7767,var(--ef-teal-deep)); display: grid; place-items: center; color: rgba(250,247,240,.55); font-family: var(--ef-serif); font-style: italic; font-size: 16px; overflow: hidden; flex: 0 0 auto; }
.ef-facesrow .ef-face img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .ef-reveal-seq > * { opacity: 0; transform: translateY(10px); animation: ef-rise .55s ease forwards; }
  .ef-reveal-seq > *:nth-child(1) { animation-delay: .05s; }
  .ef-reveal-seq > *:nth-child(2) { animation-delay: .22s; }
  .ef-reveal-seq > *:nth-child(3) { animation-delay: .42s; }
  .ef-reveal-seq > *:nth-child(4) { animation-delay: .62s; }
  .ef-reveal-seq > *:nth-child(5) { animation-delay: .8s; }
  .ef-reveal-seq > *:nth-child(n+6) { animation-delay: .95s; }
  @keyframes ef-rise { to { opacity: 1; transform: none; } }
}

@media (max-width: 1020px) {
  .ef-result-band { grid-template-columns: 1fr; gap: 14px; }
  .ef-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ef-event-layout { grid-template-columns: 1fr; }
  .ef-event-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ef-shell { display: block; }
  .ef-sidebar { display: none; }
  #screen-event-first {
    /* The nav min-height is only a floor. trackChromeHeights() replaces it
       with the rendered box so sticky controls cannot overlap it. */
    --ef-nav-h: 66px;
    --ef-nav-gap: 10px;
    --ef-nav-bottom: max(var(--ef-nav-gap), var(--ef-safe-bottom));
    --ef-bottom-chrome: calc(var(--ef-nav-bottom) + var(--ef-nav-h));
    --ef-decide-tail: 8px;
  }
  .ef-main { height: 100dvh; padding: max(22px, env(safe-area-inset-top)) 14px var(--ef-bottom-chrome); }
  /* The scroll cushion goes INSIDE the sticky containing block, not on
     .ef-main. Sticky offsets measure against the scrollport, so padding on
     .ef-main sits outside #ef-content and would shorten the sticky range —
     the decide bar would visibly hop as it released at max scroll. On
     .ef-content it extends the range instead, so the release point lands
     exactly where the bar was already pinned. */
  .ef-content { max-width: 430px; padding-bottom: 14px; }
  .ef-title { font-size: 29px; }
  .ef-subtitle { font-size: 13px; }
  .ef-refresh { padding: 8px 10px; font-size: 11px; }
  .ef-event-hero { min-height: calc(100dvh - 128px); padding: 24px 19px; border-radius: 27px; }
  .ef-event-meta { margin-top: 34px; }
  .ef-event-title { font-size: 44px; }
  .ef-event-copy { font-size: 15px; }
  .ef-event-bottom { padding-bottom: calc(var(--ef-bottom-chrome) + 20px); }
  .ef-attendee-face { width: 46px; height: 46px; flex-basis: 46px; }
  .ef-event-side { grid-template-columns: 1fr; }
  .ef-network-toolbar { grid-template-columns: 1fr; }
  .ef-segments { width: 100%; max-width: none; }
  .ef-segment { flex: 1; padding: 0 8px; font-size: 12px; }
  .ef-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .ef-filter-row::-webkit-scrollbar { display: none; }
  .ef-filter { flex: 0 0 auto; }
  .ef-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .ef-profile-body { padding: 12px; }
  .ef-profile-name { font-size: 16px; }
  .ef-connection { grid-template-columns: 50px minmax(0, 1fr); }
  .ef-connection-profile-trigger { grid-column: 1 / -1; grid-template-columns: 50px minmax(0, 1fr); }
  .ef-connection img, .ef-connection-avatar { width: 50px; height: 50px; border-radius: 15px; }
  .ef-connection .ef-inline-actions { grid-column: 1 / -1; justify-content: stretch; }
  .ef-connection .ef-button { flex: 1; }
  .ef-me-grid { grid-template-columns: 1fr; }
  .ef-banner { align-items:flex-start; flex-direction:column; }
  .ef-member-card { order: -1; }
  /* The bottom dock owns the single mobile navigation surface. */
  .ef-bottom-dock {
    position: fixed; z-index: 8994; left: 10px; right: 10px; bottom: var(--ef-nav-bottom);
    max-width: 440px; margin: 0 auto; overflow: hidden;
    border: 1px solid rgba(226,232,227,.9); border-radius: 21px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(18px);
    box-shadow: 0 15px 40px rgba(20,33,27,.16);
  }
  .ef-mobile-nav { position: static; min-height: var(--ef-nav-h); padding: 7px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #screen-event-first .ef-mobile-nav .ef-nav-button { min-height: 46px; padding: 3px 2px; border-radius: 14px; flex-direction: column; justify-content: center; gap: 2px; font-size: 9px; font-weight: 700; line-height: 1.15; text-align: center; }
  .ef-mobile-nav .ef-nav-icon { width: 18px; height: 18px; }
  .ef-mobile-nav .ef-nav-badge { position: absolute; top: 2px; right: 11px; min-width: 17px; height: 17px; font-size: 9px; }
  .ef-modal-backdrop { align-items: end; padding: 0; }
  .ef-modal { width: 100%; max-height: 92dvh; border-radius: 25px 25px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .ef-diary-profile-backdrop { align-items: stretch; }
  .ef-diary-profile-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; padding-bottom: 0; }
  .ef-diary-profile-header { padding: max(20px, env(safe-area-inset-top)) 58px 0 18px; }
  .ef-diary-profile-gallery { padding: 0 18px; }
  .ef-diary-profile-details { padding: 7px 18px 22px; }
  .ef-diary-profile-actions { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
  .ef-diary-profile-actions .ef-button { min-height: 46px; padding-left: 10px; padding-right: 10px; }
  .ef-diary-waiting { grid-template-columns: minmax(0, 1fr) auto; }
  .ef-diary-waiting .ef-history-profile-trigger { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .ef-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ef-event-title { font-size: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-event-first *, #screen-event-first *::before, #screen-event-first *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

#screen-event-first :focus-visible { outline: 3px solid #f1c45c; outline-offset: 3px; }

/* Membership close: value stack before the ask. The modal previously led with
   a price and one dense sentence, which gives someone nothing to say yes to. */
.ef-sell-price { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 14px 0 2px; }
.ef-sell-amount { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; color: var(--ef-ink); line-height: 1; }
.ef-sell-per { font-size: 15px; color: var(--ef-muted); font-weight: 600; }
.ef-sell-anchor { text-align: center; font-size: 13px; color: var(--ef-muted); margin: 0 0 4px; }
.ef-sell-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--ef-teal-soft); color: var(--ef-teal-deep); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.ef-benefits { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ef-line); text-align: left; display: grid; gap: 12px; }
.ef-benefits li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.42; color: var(--ef-ink); }
.ef-benefits li b { font-weight: 700; }
.ef-tick { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; background: var(--ef-teal); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ef-sell-trust { text-align: center; font-size: 12px; color: var(--ef-muted); margin-top: 10px; }

/* Blur alone reads as a broken image, not as something purchasable. The lock
   overlay names the reason and gives it a tap target. */
.ef-unlock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, rgba(20,33,27,.10), rgba(20,33,27,.34)); border: 0; width: 100%; cursor: pointer; z-index: 3; padding: 0; text-align: center; }
.ef-unlock-overlay:hover .ef-unlock-pill { transform: translateY(-1px); background: #f0bd4e; }
.ef-unlock-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ef-gold); color: #352500; font-size: 14px; font-weight: 800; padding: 11px 18px; border-radius: 999px; box-shadow: 0 10px 24px rgba(20,33,27,.28); transition: transform .15s ease, background .15s ease; }
.ef-unlock-sub { font-size: 12.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(20,33,27,.55); letter-spacing: .01em; }

/* Pass reasons: a tap rather than an essay. Sized for a thumb — this is the
   step where a required text box produced keyboard mash from people who just
   wanted to say no. */
.ef-pass-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ef-pass-reason { padding: 9px 13px; border: 1px solid var(--ef-line); border-radius: 999px; background: transparent; color: var(--ef-ink); font: inherit; font-size: 12.5px; line-height: 1.2; cursor: pointer; min-height: 38px; }
.ef-pass-reason:hover { border-color: var(--ef-gold); }
.ef-pass-reason.is-selected { border-color: var(--ef-gold); background: var(--ef-gold); color: #1a1a1a; font-weight: 600; }
.ef-pass-reason:focus-visible { outline: 2px solid var(--ef-gold); outline-offset: 2px; }

/* Incoming identities are never delivered to a free client. This tile renders
   only the server-generated blurred derivative and coarse teaser facts — the
   blur is baked upstream, never a CSS filter over a real photo URL. */
.ef-incoming-teaser { padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; overflow: hidden; }
.ef-incoming-teaser-main { width: 100%; min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 13px; align-items: center; padding: 0; border: 0; background: transparent; color: var(--ef-ink); box-shadow: none; text-align: left; }
.ef-incoming-teaser-main:hover { transform: none; box-shadow: none; }
.ef-incoming-teaser-photo { position: relative; display: block; width: 82px; height: 98px; overflow: hidden; border-radius: 18px; background: var(--ef-teal-soft); }
.ef-incoming-teaser-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-incoming-teaser-photo > span { width: 100%; height: 100%; display: grid; place-items: center; padding: 28px; color: var(--ef-teal-deep); }
.ef-incoming-teaser-photo > i { position: absolute; right: 7px; bottom: 7px; width: 25px; height: 25px; display: grid; place-items: center; padding: 6px; border-radius: 50%; background: var(--ef-gold); color: #352500; font-style: normal; }
.ef-incoming-teaser-copy { display: grid; gap: 5px; min-width: 0; }
.ef-incoming-teaser-copy strong { font-family: var(--ef-serif); font-size: 18px; }
.ef-incoming-teaser-copy small, .ef-incoming-teaser-copy em { color: var(--ef-muted); font-size: 11.5px; line-height: 1.4; font-style: normal; }
.ef-incoming-teaser-copy b { color: #76540a; font-size: 11px; }

@media (max-width: 620px) {
  .ef-incoming-teaser { grid-template-columns: 1fr; }
  .ef-incoming-teaser .ef-inline-actions { justify-content: stretch; }
  .ef-incoming-teaser .ef-inline-actions .ef-button { flex: 1; }
}