/* BraveMeet V1.1 layout refinement r01.
   P0/P1 structure pass for the main system only. City Guide is excluded. */

body.member-mode {
  --bm-layout-max: 1160px;
  --bm-layout-line: #e4e9f1;
  --bm-layout-soft: #f7f9fc;
  --bm-layout-copy: #344767;
}

/* Shared page rhythm: one title block, one working surface, one primary action. */
body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) > .topbar,
body.member-mode #profile > .member-profile-page-header {
  width: min(var(--bm-layout-max), calc(100% - 48px)) !important;
  margin-inline: auto !important;
}
body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) .view-subtitle,
body.member-mode #tools .tools-intro {
  max-width: 620px !important;
  color: var(--bm-layout-copy) !important;
  line-height: 1.55 !important;
}

/* Meet: keep the photo, narrative, and action rail in one stable first read. */
body.member-mode #discover .member-discover-layout {
  width: min(var(--bm-layout-max), calc(100% - 48px)) !important;
  max-width: var(--bm-layout-max) !important;
  margin: 16px auto 36px !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(370px, .88fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(24, 54, 108, .08) !important;
}
body.member-mode #discover .member-meet-card-stage,
body.member-mode #discover .member-meet-story {
  min-height: 520px !important;
  max-height: none !important;
  height: auto !important;
}
body.member-mode #discover .member-meet-focus {
  height: auto !important;
  min-height: 600px !important;
  grid-template-rows: auto 80px !important;
}
body.member-mode #discover .member-meet-card-stage {
  min-height: 520px !important;
  border-right: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #discover .member-meet-story {
  min-width: 0 !important;
  padding: 30px 34px 24px !important;
  background: #fff !important;
  overflow: visible !important;
}
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
  overflow: visible !important;
}
body.member-mode #discover .member-meet-profile-identity {
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #discover .member-meet-profile-identity h2 {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}
body.member-mode #discover .member-meet-profile-controls {
  margin-top: 14px !important;
  gap: 8px !important;
}
body.member-mode #discover .member-meet-profile-bio {
  max-width: 36ch !important;
  margin: 22px 0 !important;
  color: var(--bm-layout-copy) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
body.member-mode #discover .member-meet-interest-panel > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.member-mode #discover .member-meet-interest-tile {
  min-width: 0 !important;
  min-height: 124px !important;
  padding: 10px !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 14px !important;
  background: var(--bm-layout-soft) !important;
}
body.member-mode #discover .member-meet-interest-tile b {
  font-size: 14px !important;
}
body.member-mode #discover .member-meet-interest-tile small {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Meet region r02: desktop interest copy must not be clipped in the first viewport. */
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile {
    min-height: 178px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile small {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
  }
}
body.member-mode #discover .member-meet-action-rail {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 4 !important;
  min-height: 78px !important;
  padding: 12px 24px !important;
  border-top: 1px solid var(--bm-layout-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 -8px 24px rgba(24, 54, 108, .06) !important;
  backdrop-filter: blur(12px) !important;
}

/* Plans: separate Explore from My plans without making the right rail compete. */
body.member-mode #plans .member-plans-studio {
  width: min(var(--bm-layout-max), calc(100% - 48px)) !important;
  max-width: var(--bm-layout-max) !important;
  margin: 16px auto 36px !important;
  grid-template-columns: minmax(0, 1.34fr) minmax(340px, .66fr) !important;
  overflow: hidden !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(24, 54, 108, .07) !important;
}
body.member-mode #plans .member-plan-explore {
  padding: 32px 34px 42px !important;
}
body.member-mode #plans .member-plan-mine {
  min-width: 0 !important;
  padding: 32px 26px 42px !important;
  border-left: 1px solid var(--bm-layout-line) !important;
  background: #fbfcfe !important;
}
body.member-mode #plans .member-plan-explore-controls {
  display: grid !important;
  grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(108px, .7fr)) auto !important;
  align-items: end !important;
  gap: 10px !important;
}
body.member-mode #plans .member-plan-filter-trigger {
  min-width: 92px !important;
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  justify-self: stretch !important;
}
body.member-mode #plans.view.active.plans-studio-active .member-plans-studio {
  border-radius: 24px !important;
}
body.member-mode #plans .member-plan-studio-row {
  grid-template-columns: 174px minmax(180px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 17px 0 !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #plans .member-plan-studio-copy h3 {
  margin: 4px 0 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}
body.member-mode #plans .member-plan-studio-copy p,
body.member-mode #plans .member-plan-studio-attendance small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
body.member-mode #plans .member-plan-studio-attendance small,
body.member-mode #plans .member-plan-mine-row em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border: 1px solid #dbe4f4 !important;
  border-radius: 999px !important;
  background: #f7f9fc !important;
  color: #35557f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
body.member-mode #plans .member-plan-studio-action {
  min-width: 92px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
}
body.member-mode #plans .member-plan-mine > header {
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #plans .member-plan-mine-group {
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #plans .member-plan-mine-row {
  min-width: 0 !important;
  padding: 11px 0 !important;
  border-radius: 12px !important;
}

/* Circles: make Explore the primary workspace and My Circles an explicit rail. */
body.member-mode #tools.member-circle-reference-layout {
  width: min(var(--bm-layout-max), calc(100% - 48px)) !important;
  max-width: var(--bm-layout-max) !important;
  margin-inline: auto !important;
}
body.member-mode #tools.member-circle-reference-layout .circle-board {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 44px rgba(24, 54, 108, .07) !important;
}
body.member-mode #tools.member-circle-reference-layout .circle-board > .member-circle-room-heading {
  grid-column: 1 / -1 !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-focus {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: static !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  height: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-focus > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
body.member-mode #tools.member-circle-reference-layout #circle-list {
  width: auto !important;
  padding: 0 28px 28px !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
  min-width: 0 !important;
  padding: 24px 22px !important;
  border-left: 1px solid var(--bm-layout-line) !important;
  background: #fbfcfe !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-room-card {
  grid-template-columns: 170px minmax(0, 1fr) !important;
  min-width: 0 !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > strong {
  font-size: 17px !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > em {
  max-width: 42ch !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Inbox/Contacts: make source and relationship visible before the message body. */
body.member-mode #inbox {
  width: min(var(--bm-layout-max), calc(100% - 48px)) !important;
  max-width: var(--bm-layout-max) !important;
  margin-inline: auto !important;
}
body.member-mode #inbox .inbox-lanes {
  padding: 8px 0 14px !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #inbox .messenger,
body.member-mode #inbox .contacts-directory {
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(24, 54, 108, .06) !important;
}
body.member-mode #inbox .thread-source-chip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid #d5e1f5 !important;
  border-radius: 999px !important;
  background: #f4f7fc !important;
  color: #44618e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
body.member-mode #inbox .conversation-scope-label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: var(--bm-control-blue-soft) !important;
  color: var(--bm-control-blue) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
body.member-mode #inbox .contact-detail-panel {
  min-width: 0 !important;
  padding: 28px !important;
}
body.member-mode #inbox .contact-profile-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--bm-layout-line) !important;
}

/* You: keep the personal summary generous, then make the control console scannable. */
body.member-mode #profile {
  width: min(var(--bm-layout-max), calc(100% - 48px)) !important;
  max-width: var(--bm-layout-max) !important;
  margin-inline: auto !important;
}
body.member-mode #profile .profile-hero-web {
  width: 100% !important;
  min-height: 214px !important;
  margin: 0 !important;
  padding: 30px 34px !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(24, 54, 108, .06) !important;
}
body.member-mode #profile .profile-hero-web h1,
body.member-mode #profile .profile-hero-web p:not(.eyebrow) {
  color: var(--bm-color-ink) !important;
}
body.member-mode #profile .member-you-account-hub {
  width: 100% !important;
  margin-top: 22px !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(24, 54, 108, .06) !important;
}
body.member-mode #profile .member-you-v11-heading {
  padding: 26px 30px !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
}
body.member-mode #profile .member-you-v11-groups {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 20px !important;
}
body.member-mode #profile .member-you-v11-group {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 18px !important;
  background: var(--bm-layout-soft) !important;
}
body.member-mode #profile .member-you-v11-group > header {
  padding: 18px 18px 12px !important;
}
body.member-mode #profile .member-you-v11-row {
  min-height: 82px !important;
  padding: 15px 18px !important;
  border-top: 1px solid var(--bm-layout-line) !important;
  background: #fff !important;
}
body.member-mode #profile .member-you-v11-row b {
  font-size: 14px !important;
}
body.member-mode #profile .member-you-v11-row small {
  font-size: 12px !important;
  line-height: 1.4 !important;
}
body.member-mode #profile .member-you-v11-row em {
  display: grid !important;
  justify-items: end !important;
  gap: 3px !important;
  min-width: 150px !important;
  margin-left: 18px !important;
  text-align: right !important;
}
body.member-mode #profile .member-you-v11-row em strong {
  color: #2f5f9d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

@media (max-width: 820px) {
  /* Inbox precision r02: the fixed six-destination dock must never sit on
     top of the only text-entry surface. Keep the composer in the scroll flow,
     but pin it above the dock when it reaches the viewport edge. */
  body.member-mode #inbox {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #inbox .messenger .messages {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #inbox .messenger .composer {
    position: sticky !important;
    bottom: calc(50px + env(safe-area-inset-bottom)) !important;
    z-index: 6 !important;
    min-height: 72px !important;
    margin-bottom: calc(50px + env(safe-area-inset-bottom)) !important;
    transform: translateY(calc(-50px - env(safe-area-inset-bottom))) !important;
    background: #fff !important;
    box-shadow: 0 -8px 20px rgba(24, 54, 108, .08) !important;
  }
  /* Keep the final outgoing bubble in the reading column above the lifted
     composer. The composer intentionally clears the fixed dock; the message
     canvas must clear that same visual band so the last message is never
     hidden behind the editor. */
  body.member-mode #inbox .messenger .messages {
    transform: translateY(calc(-50px - env(safe-area-inset-bottom))) !important;
    margin-bottom: calc(-50px - env(safe-area-inset-bottom)) !important;
  }
  body.member-mode #inbox .messenger .bubble.mine {
    position: relative !important;
    z-index: 2 !important;
    transform: translateY(-28px) !important;
  }
  body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) > .topbar,
  body.member-mode #profile > .member-profile-page-header,
  body.member-mode #discover .member-discover-layout,
  body.member-mode #plans .member-plans-studio,
  body.member-mode #tools.member-circle-reference-layout,
  body.member-mode #inbox,
  body.member-mode #profile { width: calc(100% - 28px) !important; }
  body.member-mode #discover .member-discover-layout,
  body.member-mode #plans .member-plans-studio,
  body.member-mode #tools.member-circle-reference-layout .circle-board { grid-template-columns: minmax(0, 1fr) !important; }
  body.member-mode #discover .member-meet-card-stage { min-height: 400px !important; border-right: 0 !important; border-bottom: 1px solid var(--bm-layout-line) !important; }
  body.member-mode #discover .member-meet-card-stage,
  body.member-mode #discover .member-meet-story { max-height: none !important; }
  body.member-mode #discover .member-meet-story { min-height: 0 !important; overflow: auto !important; }
  body.member-mode #discover .member-meet-focus { height: auto !important; grid-template-rows: none !important; }
  body.member-mode #discover .member-meet-story { padding: 24px 20px 18px !important; }
  body.member-mode #discover .member-meet-interest-panel > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.member-mode #plans .member-plan-mine,
  body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail { border-top: 1px solid var(--bm-layout-line) !important; border-left: 0 !important; }
  body.member-mode #plans .member-plan-explore-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.member-mode #plans .member-plan-explore-controls label:first-child { grid-column: 1 / -1 !important; }
  body.member-mode #tools.member-circle-reference-layout #circle-list { padding-inline: 18px !important; }
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-card { grid-template-columns: 104px minmax(0, 1fr) !important; }
  body.member-mode #tools.member-circle-reference-layout .member-circle-focus { grid-column: 1 !important; grid-row: auto !important; }
  body.member-mode #profile .member-you-v11-groups { grid-template-columns: minmax(0, 1fr) !important; padding: 14px !important; }
  body.member-mode #profile .profile-hero-web { padding: 24px 20px !important; }
}

/* Inbox precision r01: keep the page title, space switcher and search tools
   readable as one deliberate hierarchy on narrow screens. */
body.member-mode #inbox > .member-inbox-topbar {
  align-items: end !important;
  gap: 18px !important;
}
body.member-mode #inbox > .member-inbox-topbar > div {
  min-width: 0 !important;
}
body.member-mode #inbox > .member-inbox-topbar #inbox-space-toggle {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
body.member-mode #inbox .member-thread-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "heading heading" "search clear" !important;
  gap: 10px !important;
  padding: 18px 18px 16px !important;
  border-bottom: 1px solid var(--bm-layout-line) !important;
  background: #fff !important;
}
body.member-mode #inbox .member-thread-tools-heading {
  grid-area: heading !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body.member-mode #inbox .member-thread-tools-heading .eyebrow {
  margin: 0 !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}
body.member-mode #inbox .member-thread-tools-heading > span {
  color: #657795 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body.member-mode #inbox .member-thread-tools > label {
  grid-area: search !important;
  min-width: 0 !important;
}
body.member-mode #inbox .member-thread-tools > label input {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}
body.member-mode #inbox .member-search-clear {
  grid-area: clear !important;
  align-self: stretch !important;
  min-width: 54px !important;
  padding: 0 10px !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #315fae !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
body.member-mode #inbox .thread-list {
  background: #fff !important;
}
body.member-mode #inbox .thread-list > .thread {
  min-height: 76px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #edf1f7 !important;
}
body.member-mode #inbox .thread-list > .thread:hover,
body.member-mode #inbox .thread-list > .thread:focus-visible {
  background: #f7faff !important;
}
body.member-mode #inbox .thread-list > .thread.active {
  background: #eef5ff !important;
  box-shadow: inset 3px 0 0 #1769e8 !important;
}
body.member-mode #inbox .thread-list > .thread > span:nth-child(2) {
  min-width: 0 !important;
}
body.member-mode #inbox .thread-list > .thread > span:nth-child(2) b {
  display: block !important;
  overflow: hidden !important;
  color: #182a4a !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.member-mode #inbox .thread-list > .thread > span:nth-child(2) small {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin-top: 5px !important;
  color: #647695 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
body.member-mode #inbox .thread-list > .thread > time {
  align-self: start !important;
  margin-top: 2px !important;
  color: #6c7d99 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
body.member-mode #inbox .inbox-lane-empty {
  margin: 0 !important;
  padding: 28px 18px !important;
  color: #657795 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body.member-mode #inbox .thread-source-chip.request {
  border-color: #ecd6a9 !important;
  background: #fff8e9 !important;
  color: #8a5a12 !important;
}
body.member-mode #inbox .thread-request-status {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  color: #667795 !important;
}
body.member-mode #inbox .message-request-thread > span:nth-child(2) small {
  flex-wrap: wrap !important;
  row-gap: 3px !important;
}
body.member-mode #inbox .message-request-actions {
  display: grid !important;
  gap: 12px !important;
  margin: 18px 24px 24px !important;
  padding: 16px !important;
  border: 1px solid var(--bm-layout-line) !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
}
body.member-mode #inbox .message-request-actions textarea {
  width: 100% !important;
  min-height: 84px !important;
  padding: 12px !important;
  border: 1px solid #dce5f3 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #1b2a4a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}
body.member-mode #inbox .message-request-actions > div {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body.member-mode #inbox .message-request-actions button {
  min-height: 44px !important;
}
@media (max-width: 820px) {
  body.member-mode #inbox .message-request-actions {
    margin: 14px 16px 20px !important;
    padding: 14px !important;
  }
  body.member-mode #inbox .message-request-actions > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.member-mode #inbox .message-request-actions button[data-decision="accepted"] {
    grid-column: 1 / -1 !important;
  }
  body.member-mode #inbox .message-request-actions button {
    width: 100% !important;
    padding-inline: 10px !important;
  }
}
@media (max-width: 820px) {
  body.member-mode #inbox > .member-inbox-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px 0 8px !important;
  }
  body.member-mode #inbox > .member-inbox-topbar > div,
  body.member-mode #inbox > .member-inbox-topbar #inbox-space-toggle {
    grid-column: 1 !important;
  }
  body.member-mode #inbox > .member-inbox-topbar #inbox-space-toggle {
    justify-self: start !important;
  }
  body.member-mode #inbox > .member-inbox-topbar h1 {
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1 !important;
  }
  body.member-mode #inbox > .member-inbox-topbar .view-subtitle {
    max-width: 34ch !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* Plans precision loop r02: the layout refinement file loads after the member
   redesign. Reassert the mobile plan row contract here so legacy four-column
   desktop tracks cannot clip copy or actions on narrow screens. */
@media (max-width: 820px) {
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-areas:
      "media copy"
      "media attendance"
      "media action" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px 0 !important;
    overflow: visible !important;
  }
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-media {
    grid-area: media !important;
    width: 88px !important;
    min-width: 88px !important;
    height: 88px !important;
  }
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-copy {
    grid-area: copy !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-attendance {
    grid-area: attendance !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-action {
    grid-area: action !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
    width: max-content !important;
    min-width: 104px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  /* Keep the named areas as the final declaration: grid-column/grid-row
     longhands reset the grid-area shorthand to auto. */
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-media { grid-area: media !important; }
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-copy { grid-area: copy !important; }
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-attendance { grid-area: attendance !important; }
  body.member-mode #plans .member-plans-studio .member-plan-explore .member-plan-studio-list > .member-plan-studio-row > .member-plan-studio-action { grid-area: action !important; }
}

/* Plans precision loop r03: make unsaved-exit decisions feel intentional and
   keep the fixed mobile navigation from hiding the final list row. */
body.member-mode .unsaved-change-confirm {
  display: grid !important;
  gap: 10px !important;
  margin-top: 18px !important;
  padding: 16px !important;
  border: 1px solid #f0c8c8 !important;
  border-radius: 14px !important;
  background: #fff8f8 !important;
  color: #1b2a4a !important;
}
body.member-mode .unsaved-change-confirm b { font-size: 14px !important; }
body.member-mode .unsaved-change-confirm span { color: #5c6b83 !important; font-size: 13px !important; line-height: 1.45 !important; }
body.member-mode .unsaved-change-confirm > div { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
body.member-mode .unsaved-change-confirm button { min-height: 40px !important; }
body.member-mode #plans .member-plan-mine-empty { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
body.member-mode #plans .member-plan-mine-empty p { margin: 0 !important; }
@media (max-width: 820px) {
  body.member-mode #plans .member-plans-studio { padding-bottom: 32px !important; }
  body.member-mode #plans .member-plan-mine-empty { align-items: flex-start !important; flex-direction: column !important; }
}

/* Circles precision loop r02: keep the fixed member nav outside the content
   reading area and let Circle names carry their full two-line meaning. */
body.member-mode #tools.member-circle-reference-layout #circle-list {
  padding-bottom: 40px !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.2 !important;
}
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: 2 !important;
  overflow: hidden !important;
}
body.member-mode #tools.member-circle-reference-layout .member-circle-room-status {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
}
@media (max-width: 820px) {
  body.member-mode #tools.member-circle-reference-layout #circle-list {
    padding-bottom: 112px !important;
  }
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-card {
    min-height: 174px !important;
  }
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > strong {
    font-size: 17px !important;
  }
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > small,
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-body > em,
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-status {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  body.member-mode #tools.member-circle-reference-layout .circle-card-actions {
    padding-bottom: 10px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  body.member-mode #tools.member-circle-reference-layout .circle-card-actions > button {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 0 !important;
  }
}

/* Keep an explicit detail entry in the reference layout. Older iOS rules hid
   Preview because the card-select surface was the only detail affordance. */
body.member-mode #tools.member-circle-reference-layout .circle-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
body.member-mode #tools.member-circle-reference-layout .circle-card-actions .view-live-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 12px !important;
}
body.member-mode #tools.member-circle-reference-layout .circle-card-actions .text-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}