/* BraveMeet P2 polish r01
   Shared main-system refinements after the V1.1 expert review.
   City Guide is intentionally out of scope. */

body.member-mode {
  --bm-p2-secondary: #526581;
  --bm-p2-muted: #657795;
  --bm-p2-line: #dfe7f2;
  --bm-p2-surface: #f8fbff;
}

/* Plans: make secondary information readable without competing with the title. */
body.member-mode #plans .member-plan-studio-copy > small,
body.member-mode #plans .member-plan-studio-copy > p,
body.member-mode #plans .member-plan-studio-attendance small,
body.member-mode #plans .member-plan-mine-row small,
body.member-mode #plans .member-plan-mine-row em,
body.member-mode #plans .member-plan-selected > span,
body.member-mode #plans .member-plan-selected-rsvp small,
body.member-mode #plans .member-plan-selected-chat span {
  color: var(--bm-p2-secondary) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body.member-mode #plans .member-plan-studio-copy > p,
body.member-mode #plans .member-plan-selected > span { max-width: 44ch !important; }
body.member-mode #plans .member-plan-mine-row em { min-width: 74px !important; text-align: right !important; }
body.member-mode #plans .member-plan-studio-list,
body.member-mode #plans .member-plan-mine { padding-bottom: 24px !important; }

/* Circles: a description is allowed to breathe and the rail reads as context. */
body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > em,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card small,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card p,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-plan small {
  color: var(--bm-p2-secondary) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > em {
  -webkit-line-clamp: 3 !important;
  max-width: 38ch !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card header > div { min-width: 0 !important; }
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card header small { display: block !important; }
body.member-mode #tools.member-circle-reference-layout .circle-card-actions > button:first-child:not(.join-circle) {
  color: #175dcc !important;
  font-weight: 700 !important;
}

/* Inbox and room chat: context is a readable label, not a tiny footnote. */
body.member-mode #inbox .conversation-context-meta span,
body.member-mode #inbox .room-context-note,
body.member-mode #inbox .room-context-note b,
body.member-mode #inbox .room-context-note span,
body.member-mode .member-conversation-rail .member-rail-meta span {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body.member-mode #inbox .room-context-note {
  max-width: 48ch !important;
  color: var(--bm-p2-secondary) !important;
  background: var(--bm-p2-surface) !important;
}
body.member-mode #inbox .room-context-note b { color: #1b355a !important; }
body.member-mode #inbox .thread-list > .thread > span:nth-child(2) small {
  min-height: 19px !important;
  color: var(--bm-p2-secondary) !important;
}
body.member-mode #inbox .thread-list > .thread:hover > span:nth-child(2) small,
body.member-mode #inbox .thread-list > .thread:focus-visible > span:nth-child(2) small {
  color: #244f9d !important;
}
body.member-mode #inbox .inbox-unread-divider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 10px !important;
  color: #175dcc !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
body.member-mode #inbox .inbox-unread-divider::before,
body.member-mode #inbox .inbox-unread-divider::after {
  content: "" !important;
  height: 1px !important;
  flex: 1 1 auto !important;
  background: #cfe0fb !important;
}
body.member-mode #inbox .composer-tool {
  position: relative !important;
  min-width: 40px !important;
  min-height: 40px !important;
}
body.member-mode #inbox .composer-tool[title]:hover::after,
body.member-mode #inbox .composer-tool[title]:focus-visible::after {
  content: attr(title) !important;
  position: absolute !important;
  z-index: 20 !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  background: #13233e !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
body.member-mode #inbox .composer { position: relative !important; }
body.member-mode .member-meet-mobile-interest-summary { display: none !important; }
@media (max-width: 820px) {
  body.member-mode #inbox .messenger.mobile-conversation-open .conversation {
    padding-bottom: calc(174px + env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #inbox .messenger.mobile-conversation-open .messages {
    padding-bottom: calc(188px + env(safe-area-inset-bottom)) !important;
  }
}

/* R230 type refinement: Meet's quick filters are controls, not metadata.
   Keep their 44px target while raising the label size for comfortable scanning
   at desktop and mobile widths. */
body.member-mode #discover .member-meet-mode-tabs button,
body.member-mode #discover .member-meet-intent-toggles button {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

/* R223 Meet visual finish: soften the legacy bottom contrast wash so the
   profile photo remains visible through the full editorial stage. */
body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field::after {
  background: linear-gradient(180deg, rgba(7, 18, 45, 0) 82%, rgba(7, 18, 45, .38) 100%) !important;
}

/* Contacts: keep the address-book detail reachable above the mobile nav. */
body.member-mode #inbox .contacts-directory,
body.member-mode #inbox .contact-detail-panel { min-height: 0 !important; }
body.member-mode #inbox .contacts-directory-list,
body.member-mode #inbox .contact-detail-panel { padding-bottom: 28px !important; }
@media (max-width: 820px) {
  body.member-mode #inbox .contacts-directory-list,
  body.member-mode #inbox .contact-detail-panel {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
}

/* You/settings: keep security summaries and billing terms legible at a glance. */
body.member-mode #profile .member-you-v11-row em,
body.member-mode #profile .member-you-v11-row em strong,
body.member-mode #profile .member-you-v11-row em small,
body.member-mode .member-you-v11-modal--security .you-security-status,
body.member-mode .member-you-v11-modal--security .you-security-status small,
body.member-mode.member-you-v11-membership-open .membership-purchase-footer #plus-disclosure {
  color: var(--bm-p2-secondary) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
/* Review must sit above the membership rail so the user gets a clear
   confirmation state instead of a seemingly ignored CTA. */
body.member-mode.member-you-v11-membership-open .modal-backdrop {
  z-index: 120 !important;
}
body.member-mode #profile .member-you-v11-row em { max-width: 25ch !important; }
body.member-mode .member-you-v11-modal--security .you-security-status { display: grid !important; gap: 3px !important; }
body.member-mode.member-you-v11-membership-open .upgrade-panel .plan-choice strong span {
  color: #405675 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}
body.member-mode .member-you-v11-modal :is(.modal-close, .close-upgrade),
body.member-mode.member-you-v11-membership-open .upgrade-panel .close-upgrade {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--bm-p2-line) !important;
  box-shadow: none !important;
}
body.member-mode .member-you-v11-modal :is(.modal-close, .close-upgrade):focus-visible,
body.member-mode.member-you-v11-membership-open .upgrade-panel .close-upgrade:focus-visible {
  outline: 3px solid rgba(23, 93, 204, .28) !important;
  outline-offset: 2px !important;
}

/* Shared focus treatment for icon-only controls. */
body.member-mode :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(23, 93, 204, .28) !important;
  outline-offset: 2px !important;
}

/* Meet first-viewport refinement: keep the complete dossier and command rail
   in view on desktop without shrinking the story column into a clipped card.
   The profile panel remains the only scroll owner when the viewport is short. */
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-reference-layout {
    height: min(680px, calc(100dvh - 260px)) !important;
    min-height: 480px !important;
    grid-template-rows: minmax(0, 1fr) 80px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage,
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-card {
    min-height: 0 !important;
    height: 100% !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-card .member-meet-photo-field {
    height: 100% !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  /* The older layout layer constrained the identity copy to the width of the
     adjacent controls, forcing names such as “Maya Chen, 27” onto two lines.
     Keep the controls on their own full-width row so the profile story starts
     with one confident identity read, matching the V1.1 reference composition. */
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity > div:first-child {
    max-width: none !important;
    min-width: 0 !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2 {
    white-space: nowrap !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-bio {
    max-width: none !important;
    margin-bottom: 12px !important;
  }
  /* Keep the three interest tiles legible without letting legacy editorial
     card height consume the first-read viewport. Descriptions remain visible
     through the existing two-line clamp from the V1.1 layer. */
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile {
    min-height: 128px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile > img {
    height: 52px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.3 !important;
  }
  /* Contacts detail is an address-book surface, not a hero splash. Keep the
     selected person's identity and actions in the first read instead of
     vertically centering a short card in a very tall blank panel. */
  body.member-mode #inbox .contact-detail-panel:has(.contact-profile-hero) {
    align-content: start !important;
    padding-block: 48px !important;
  }
}

/* Product control contract r01: one tactile language for the main system.
   Keep this additive and scoped to member-mode; City Guide owns its controls. */
body.member-mode {
  --bm-control-border: #d5deec;
  --bm-control-ink: #18345f;
  --bm-control-hover: #f4f8ff;
  --bm-control-active: #eaf3ff;
}
body.member-mode :is(
  .primary,
  .outline-button,
  .text-button,
  .member-plan-studio-action,
  .member-plan-create,
  .member-plan-selected-action,
  .join-circle,
  .member-circle-rail-action,
  .member-circle-rail-link,
  .member-meet-profile-link,
  .member-meet-person-navigation button,
  .member-plan-filter-trigger,
  .member-plan-filter-options button,
  .member-plan-filter-distance button,
  .filter,
  .inbox-space-toggle,
  .composer-tool
) {
  min-height: 44px !important;
  box-sizing: border-box !important;
  border-radius: var(--bm-radius-control, 10px) !important;
  transition: background-color var(--bm-motion-press, 110ms) var(--bm-ease-standard, ease),
    border-color var(--bm-motion-press, 110ms) var(--bm-ease-standard, ease),
    box-shadow var(--bm-motion-press, 110ms) var(--bm-ease-standard, ease),
    transform var(--bm-motion-press, 110ms) var(--bm-ease-standard, ease) !important;
}
body.member-mode :is(
  .outline-button,
  .text-button,
  .member-plan-studio-action.outline,
  .member-plan-filter-trigger,
  .member-plan-filter-options button,
  .member-plan-filter-distance button,
  .filter,
  .inbox-space-toggle,
  .member-meet-person-navigation button,
  .member-meet-profile-link,
  .composer-tool
) {
  border: 1px solid var(--bm-control-border) !important;
  color: var(--bm-control-ink) !important;
  background: #fff !important;
}
body.member-mode :is(
  .outline-button,
  .text-button,
  .member-plan-studio-action.outline,
  .member-plan-filter-trigger,
  .member-plan-filter-options button,
  .member-plan-filter-distance button,
  .filter,
  .inbox-space-toggle,
  .member-meet-person-navigation button,
  .member-meet-profile-link,
  .composer-tool
):is(:hover, :focus-visible) {
  background: var(--bm-control-hover) !important;
  border-color: #a9c4ed !important;
}
body.member-mode :is(
  .member-plan-filter-trigger.active,
  .member-plan-filter-options button.active,
  .member-plan-filter-distance button.active,
  .filter.active,
  .inbox-space-toggle.active
) {
  background: var(--bm-control-active) !important;
  border-color: var(--bm-color-action, #0a66ff) !important;
  color: #0b56c7 !important;
}
body.member-mode :is(button, a, input, select, textarea):focus:not(:focus-visible) {
  outline: none !important;
}
body.member-mode .modal :is(input, select, textarea),
body.member-mode .profile-editor-body :is(input, select, textarea),
body.member-mode .member-plan-filter-panel :is(input, select),
body.member-mode .member-circle-editor :is(input, select, textarea) {
  min-height: 44px !important;
  border-radius: var(--bm-radius-control, 10px) !important;
}
body.member-mode .modal textarea,
body.member-mode .profile-editor-body textarea,
body.member-mode .member-circle-editor textarea { min-height: 104px !important; }
body.member-mode .modal :is(.modal-close, .close-upgrade),
body.member-mode :is(.round-arrow, .member-meet-photo-action, .member-meet-gallery-action) {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--bm-control-border) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  background: #fff !important;
}
body.member-mode .modal :is(.modal-close, .close-upgrade):hover,
body.member-mode :is(.round-arrow, .member-meet-photo-action, .member-meet-gallery-action):hover {
  background: var(--bm-control-hover) !important;
  border-color: #a9c4ed !important;
}
body.member-mode :is(.composer-tool, .round-arrow, .member-meet-photo-action, .member-meet-gallery-action):is([aria-label], [title]) {
  display: inline-grid !important;
  place-items: center !important;
}

/* High-frequency filters need the same touch target as primary actions even
   when legacy layout rules gave them a compact 36–40px height. */
body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice,
body.member-mode #discover .member-meet-reference-layout .member-meet-person-navigation button,
body.member-mode #tools :is(
  [data-circle-interest-quick],
  [data-circle-access-quick],
  [data-circle-filter-toggle],
  .member-circle-location,
  .member-circle-filter-toggle,
  [data-member-circle-view],
  .circle-card-actions > button
),
body.member-mode #inbox .inbox-space-toggle {
  min-height: 44px !important;
}
body.member-mode #tools .member-circle-quick-filters button,
body.member-mode #tools button.member-circle-location,
body.member-mode #tools button.member-circle-filter-toggle,
body.member-mode #tools button[data-circle-interest-quick],
body.member-mode #tools button[data-circle-access-quick],
body.member-mode #tools button[data-circle-filter-toggle],
body.member-mode #inbox button.inbox-space-toggle {
  min-height: 44px !important;
  height: 44px !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-quick-filters button {
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-filter-toggle {
  min-height: 44px !important;
  height: 44px !important;
  border: 1px solid var(--bm-control-border) !important;
  border-left: 1px solid var(--bm-control-border) !important;
  border-radius: var(--bm-radius-control, 10px) !important;
  font-size: 14px !important;
}

/* Product control contract r02: semantic icons replace decorative Unicode
   glyphs, and fixed action rails always leave the final field readable. */
body.member-mode #inbox .composer :is(.composer-future-tool, [aria-label="Send voice note"], [data-composer-gift="true"])::before,
body.member-mode #inbox .voice-bubble::before,
body.member-mode #tools.member-circle-reference-layout .member-circle-search::before {
  content: none !important;
}
body.member-mode #inbox .composer :is(.composer-tool, .composer-future-tool) .visitor-icon {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  flex: 0 0 18px !important;
}
body.member-mode #inbox .composer :is(.composer-tool, .composer-future-tool) {
  min-width: 44px !important;
  width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
}
body.member-mode #inbox .voice-bubble::before { display: none !important; }
body.member-mode #tools.member-circle-reference-layout .member-circle-search {
  gap: 10px !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-search > .visitor-icon {
  width: 19px !important;
  height: 19px !important;
  margin-left: 14px !important;
  color: #667494 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  flex: 0 0 19px !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-search > input {
  padding-left: 0 !important;
}
body.member-mode .modal:has(#create-plan-form) #create-plan-form {
  padding-bottom: max(96px, calc(72px + env(safe-area-inset-bottom))) !important;
  scroll-padding-bottom: max(96px, calc(72px + env(safe-area-inset-bottom))) !important;
}
body.member-mode .modal:has(#create-plan-form) .plan-create-actions {
  min-height: 80px !important;
  padding-bottom: max(22px, calc(18px + env(safe-area-inset-bottom))) !important;
}

/* Meet mobile: the portrait is a preview, not a full-screen gate. Bring the
   identity, starter and interests into the same first reading sequence. */
@media (max-width: 820px) {
  body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage,
  body.member-mode #discover .member-meet-reference-layout .live-person-card,
  body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field {
    min-height: 240px !important;
    height: clamp(240px, 64vw, 280px) !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-gallery {
    bottom: 12px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
    padding: 24px 20px calc(28px + env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-mobile-interest-summary {
    align-items: center !important;
    bottom: 68px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    left: 14px !important;
    max-width: calc(100% - 28px) !important;
    position: absolute !important;
    z-index: 3 !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-mobile-interest-summary span {
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(213, 222, 236, .95) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(24, 52, 95, .12) !important;
    color: #18345f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }
}

/* Product control contract r03: the mobile surface should expose one clear
   identity read before the user has to scroll, while supporting content and
   tools keep comfortable density. */
@media (max-width: 820px) {
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > em {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    min-height: 58px !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: hidden !important;
  }
  body.member-mode #tools.member-circle-reference-layout .circle-card-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 14px 14px !important;
  }
  body.member-mode #tools.member-circle-reference-layout .circle-card-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
  }
  body.member-mode #plans :is(.member-plan-studio-copy > small,
    .member-plan-studio-copy > p,
    .member-plan-studio-attendance small,
    .member-plan-mine-row small,
    .member-plan-mine-row em,
    .member-plan-selected > span,
    .member-plan-selected-rsvp small,
    .member-plan-selected-chat span) {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  body.member-mode #inbox .composer :is(.composer-tool, .composer-future-tool) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid var(--bm-control-border) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--bm-control-ink) !important;
    box-shadow: none !important;
  }
  body.member-mode #inbox .messenger.mobile-conversation-open .composer .composer-future-tool {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
  }
  body.member-mode #inbox .composer :is(.composer-future-tool, [disabled]) {
    opacity: .52 !important;
    background: #f7f9fc !important;
    border-style: dashed !important;
  }
}

/* Conversation avatars should read as people, not fixture initials. */
body.member-mode #inbox .thread[data-conversation-id="conversation-priya"] .avatar,
body.member-mode #inbox .conversation[data-conversation-id="conversation-priya"] .avatar {
  background-image: url("/assets/demo/synthetic-priya-v1.png") !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
body.member-mode #inbox .thread[data-conversation-id="conversation-sofia"] .avatar,
body.member-mode #inbox .conversation[data-conversation-id="conversation-sofia"] .avatar {
  background-image: url("/assets/demo/synthetic-maya-v1.png") !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
body.member-mode #inbox .thread[data-conversation-id="conversation-ryan"] .avatar,
body.member-mode #inbox .conversation[data-conversation-id="conversation-ryan"] .avatar {
  background-image: url("/assets/demo/synthetic-leo-v1.png") !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
body.member-mode #inbox .thread.plan-thread .avatar {
  background-image: url("/assets/demo/synthetic-plans-cafe-v1.png") !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
body.member-mode #inbox .thread.circle-thread .avatar {
  background-image: url("/assets/demo/synthetic-layla-v1.png") !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
@media (max-width: 820px) {
  body.member-mode #plans .member-plan-explore {
    padding-top: 18px !important;
  }
  body.member-mode #plans .member-plan-explore-header {
    align-items: center !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: space-between !important;
  }
  body.member-mode #plans .member-plan-explore-header > div {
    min-width: 0 !important;
  }
  body.member-mode #plans .member-plan-explore-create {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid var(--bm-color-action, #0a66ff) !important;
    border-radius: 999px !important;
    background: var(--bm-color-action, #0a66ff) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  /* Inbox lanes are one compact navigation row. Let the lane strip own any
     overflow instead of wrapping Contacts onto a visually disconnected row. */
  body.member-mode #inbox .inbox-lanes {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    padding: 4px 6px !important;
    scrollbar-width: none !important;
  }
  body.member-mode #inbox .inbox-lanes::-webkit-scrollbar { display: none !important; }
  body.member-mode #inbox .inbox-lane {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    min-width: max-content !important;
    padding-inline: 8px !important;
    white-space: nowrap !important;
  }
  /* Safety is a real conversation action, not a footer annotation. */
  body.member-mode #inbox :is(
    .member-rail-boundary > [data-member-conversation-safety],
    .conversation > header .safety-link
  ) {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 12px !important;
    border: 1px solid var(--bm-control-border) !important;
    border-radius: 999px !important;
    color: var(--bm-control-ink) !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  body.member-mode #inbox .conversation > header .safety-link {
    min-width: 62px !important;
    padding-inline: 10px !important;
    font-size: 0 !important;
  }
  body.member-mode #inbox .conversation > header .safety-link::before {
    content: "Safety" !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
  body.member-mode #inbox :is(
    .member-rail-boundary > [data-member-conversation-safety],
    .conversation > header .safety-link
  ):is(:hover, :focus-visible) {
    background: var(--bm-control-hover) !important;
    border-color: #a9c4ed !important;
  }
  /* Legacy mobile styles supplied a second pseudo-label; the visible button
     already carries the complete action name. */
  body.member-mode #inbox .conversation > header .safety-link::after {
    content: none !important;
  }
  body.member-mode #inbox .conversation > header .member-conversation-retention {
    gap: 4px !important;
    min-width: 56px !important;
    width: calc(100vw - 28px) !important;
    padding: 0 6px !important;
  }
  body.member-mode #inbox .conversation > header .member-conversation-retention > span {
    display: block !important;
    min-width: 0 !important;
  }
  body.member-mode #inbox .conversation > header .member-conversation-retention > span small {
    display: none !important;
  }
  body.member-mode #inbox .conversation > header .member-conversation-retention > span b {
    display: block !important;
    font-size: 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  body.member-mode #inbox .conversation > header .member-conversation-retention > span b::after {
    content: "Keep" !important;
    font-size: 11px !important;
  }

  /* Meet actions stay available while the profile story is being read. The
     fixed rail sits above the mobile navigation, so the user never has to
     hunt through interests just to Pass, Gift, Say Hi or Like. */
  body.member-mode #discover .member-meet-action-rail {
    position: fixed !important;
    inset: auto !important;
    top: calc(100dvh - 144px) !important;
    left: -16px !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100vw - 43px) !important;
    margin: 0 !important;
    grid-area: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: grid !important;
    transform: translateY(-43vh) !important;
    z-index: 30 !important;
    border: 1px solid var(--bm-control-border) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 10px 28px rgba(24, 52, 95, .16) !important;
  }
  body.member-mode #discover .member-meet-action-rail .say-hi-action > span {
    font-size: 0 !important;
  }
  body.member-mode #discover .member-meet-action-rail .say-hi-action > span::after {
    content: "Say Hi" !important;
    font-size: 11px !important;
  }
  body.member-mode #discover .member-meet-action-rail .member-meet-action {
    font-size: 11px !important;
  }
  body.member-mode #discover .member-meet-focus {
    transform: none !important;
    overflow: visible !important;
  }
  body.member-mode .app-shell > main {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  body.member-mode #discover .member-discover-layout {
    overflow: visible !important;
  }
  body.member-mode #discover .member-meet-reference-layout {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  /* Keep the message field usable at phone width; upcoming calls remain
     discoverable on desktop and return in the expanded composer later. */
  body.member-mode #inbox .messenger.mobile-conversation-open .composer .composer-future-tool {
    display: none !important;
  }
}
@media (min-width: 821px) {
  body.member-mode #inbox .composer .composer-future-tool {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
  }
}

/* R174 precision follow-up: keep secondary Plan summaries readable instead
   of truncating names in the narrow personal rail, and keep reset actions
   atomic at phone width. */
body.member-mode #plans .member-plan-mine-row > span b {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.25 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
body.member-mode #plans .member-plan-filter-summary button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
body.member-mode #inbox .thread-list > .thread > span:nth-child(2) small {
  max-width: 28ch !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
  row-gap: 3px !important;
}
body.member-mode #tools #circle-form small,
body.member-mode #tools #circle-form .modal-note {
  color: var(--bm-p2-secondary) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body.member-mode .modal-backdrop #circle-form small,
body.member-mode .modal-backdrop #circle-invite-form small {
  color: var(--bm-p2-secondary) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body.member-mode .modal-backdrop #circle-invite-form input[name="expiresAt"] {
  min-height: 42px !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
}
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile {
    min-height: 144px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile small {
    -webkit-line-clamp: 3 !important;
  }
}
@media (max-width: 820px) {
  body.member-mode #plans .member-plan-studio-list,
  body.member-mode #plans .member-plan-mine {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #inbox .thread-list {
    padding-bottom: calc(176px + env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #inbox .thread-list > .thread {
    min-height: 104px !important;
    padding: 12px 11px !important;
  }
  body.member-mode #plans .member-plan-mine-row > span b {
    -webkit-line-clamp: 2 !important;
  }
}

/* R175 mobile reading order: the profile story must finish its identity and
   starter read before the action rail enters the flow. Keeping the rail in
   the third grid row removes the old overlay between the name and bio while
   preserving comfortable reachability after the story is read. */
@media (max-width: 820px) {
  body.member-mode #discover .member-meet-reference-layout {
    grid-template-rows: auto auto auto !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage,
  body.member-mode #discover .member-meet-reference-layout .live-person-card,
  body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field {
    height: clamp(200px, 52vw, 220px) !important;
    min-height: 200px !important;
  }
  body.member-mode #discover .member-meet-action-rail {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: start !important;
    transform: none !important;
  }
}

/* Keep long personal Plan titles readable in the narrow rail; the row grows
   slightly instead of ending with an unexplained ellipsis. */
body.member-mode #plans .member-plan-mine-row {
  min-height: 92px !important;
}
body.member-mode #plans .member-plan-mine-row > span b {
  -webkit-line-clamp: 3 !important;
  line-height: 1.2 !important;
}

body.member-mode #plans .member-plan-date-inputs .member-date-label {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}
body.member-mode #plans .member-plan-date-inputs .member-date-label small {
  color: var(--bm-p2-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
body.member-mode #plans .member-plan-date-inputs label {
  font-size: 12px !important;
}
body.member-mode #plans .member-plan-date-inputs input {
  min-height: 40px !important;
  font-size: 13px !important;
}

body.member-mode .member-circle-match-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
body.member-mode .member-circle-match-tags span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(30, 96, 224, .18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--bm-control-ink) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

@media (min-width: 821px) {
  /* Keep all three interest descriptions readable while returning
     Availability to the same first desktop viewport. */
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile > img {
    height: 44px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile small {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
    padding-bottom: 12px !important;
  }
}

/* R215 control contract correction: legacy iOS layers kept a few visible
   member controls below the shared 44px target. These late, scoped rules
   preserve the existing white-canvas treatment while making the target
   consistent across Meet, Circles and Inbox. */
body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail > header button,
body.member-mode #tools.member-circle-reference-layout .member-circle-quick-filters button,
body.member-mode #tools.member-circle-reference-layout .member-task-primary,
body.member-mode #tools.member-circle-reference-layout [data-circle-rail-new],
body.member-mode #tools.member-circle-v9 .member-task-primary,
body.member-mode #tools.member-circle-v9 [data-member-create-circle],
body.member-mode .member-task-primary,
body.member-mode [data-member-create-circle],
body.member-mode #inbox .conversation header .safety-link,
body.member-mode #inbox .conversation header .privacy-link,
body.member-mode #inbox .send {
  min-height: 44px !important;
  box-sizing: border-box !important;
}
body.member-mode #inbox .send {
  width: 44px !important;
  height: 44px !important;
}
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-link,
body.member-mode #discover .member-meet-reference-layout .member-meet-starter,
body.member-mode #plans .join,
body.member-mode #plans .member-plan-studio-action.primary,
body.member-mode #plans [data-studio-reset],
body.member-mode #tools.member-circle-reference-layout .circle-card-actions > button,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-action,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-link {
  min-height: 44px !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

/* Keep the membership purchase rail inside the panel's scroll contract. The
   optional-credit choices must be able to reach the visible area above the
   sticky review action instead of ending underneath it. */
body.member-mode.member-you-v11-membership-open .upgrade-panel {
  scroll-padding-bottom: 196px !important;
  padding-bottom: 196px !important;
}
body.member-mode.member-you-v11-membership-open .membership-purchase-footer {
  isolation: isolate !important;
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(540px, 100vw) !important;
  margin: 0 !important;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom)) !important;
}
body.member-mode.member-you-v11-membership-open .membership-purchase-footer #plus-disclosure {
  max-width: 32ch !important;
  margin-inline: auto !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 18px !important;
}
@media (max-width: 820px) {
  body.member-mode.member-you-v11-membership-open .upgrade-panel {
    scroll-padding-bottom: calc(214px + env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(214px + env(safe-area-inset-bottom)) !important;
  }
}

/* R177 mobile finish: expose the Meet starter before the fixed nav while
   keeping the photo, identity and action rail in a readable flow. */
@media (max-width: 820px) {
  body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage,
  body.member-mode #discover .member-meet-reference-layout .live-person-card,
  body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field {
    height: 150px !important;
    min-height: 150px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity {
    margin-top: -10px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-controls {
    height: 32px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2 {
    font-size: 28px !important;
    line-height: 1.02 !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-bio {
    margin-top: 8px !important;
  }
body.member-mode #discover .member-meet-reference-layout .member-meet-starter {
    margin-top: -22px !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
    row-gap: 3px !important;
  }
}

/* R231 final precedence: keep the cross-module type pass above legacy
   component-specific typography rules. */
body.member-mode #plans [data-studio-query],
body.member-mode #plans [data-studio-city],
body.member-mode #plans [data-studio-date],
body.member-mode #plans [data-studio-time] { font-size: 14px !important; line-height: 20px !important; }
body.member-mode #plans .member-plan-filter-summary,
body.member-mode #plans .member-plan-mine-group h3,
body.member-mode #tools .member-circle-my-rail h3,
body.member-mode #profile .eyebrow { font-size: 13px !important; line-height: 18px !important; }
body.member-mode #inbox .thread small,
body.member-mode #profile .member-profile-visibility-snapshot small { font-size: 13px !important; line-height: 18px !important; }
body.member-mode #inbox .thread-list > .thread > span:nth-child(2) small { font-size: 13px !important; line-height: 18px !important; }
body.member-mode #inbox button.thread > span:nth-child(2) > small { font-size: 13px !important; line-height: 18px !important; }