/*
 * BraveMeet Web System v1.1
 * Loaded after the historical style sheets while surfaces migrate module by
 * module. It sets shared foundations only; City content remains independent.
 */

:root {
  --bm-ios-blue: var(--bm-color-action);
  --bm-ios-blue-strong: var(--bm-color-action-pressed);
  --bm-ios-blue-soft: var(--bm-color-selected);
  --bm-ios-cyan-soft: var(--bm-color-fill);
  --bm-ios-ink: var(--bm-color-ink);
  --bm-ios-copy: var(--bm-color-copy);
  --bm-ios-muted: var(--bm-color-muted);
  --bm-ios-faint: var(--bm-color-muted);
  --bm-ios-line: var(--bm-color-line);
  --bm-ios-line-strong: #cbd5e3;
  --bm-ios-canvas: var(--bm-color-canvas);
  --bm-ios-surface: var(--bm-color-surface);
  --bm-ios-surface-solid: var(--bm-color-surface);
  --bm-ios-fill: var(--bm-color-fill);
  --bm-ios-fill-strong: #e8edf4;
  --bm-ios-radius-xs: var(--bm-radius-control);
  --bm-ios-radius-sm: var(--bm-radius-row);
  --bm-ios-radius-md: var(--bm-radius-panel);
  --bm-ios-radius-lg: var(--bm-radius-stage);
  --bm-ios-radius-xl: var(--bm-radius-stage);
  --bm-ios-font: var(--bm-font-sans);
  --bm-ios-ease: var(--bm-ease-standard);
  --bm-ios-shadow-sm: 0 1px 2px rgba(31, 61, 106, .04), 0 8px 24px rgba(31, 71, 132, .06);
  --bm-ios-shadow-md: 0 18px 52px rgba(28, 71, 137, .10), inset 0 1px 0 rgba(255, 255, 255, .88);
  --bm-ios-shadow-sheet: 0 28px 90px rgba(24, 55, 105, .18), inset 0 1px 0 rgba(255, 255, 255, .92);
  --visitor-font: var(--bm-font-sans);
  --visitor-navy: var(--bm-color-ink);
  --visitor-ink: var(--bm-color-ink);
  --visitor-copy: var(--bm-color-copy);
  --visitor-muted: var(--bm-color-muted);
  --visitor-line: var(--bm-color-line);
  --visitor-blue: var(--bm-color-action);
  --visitor-blue-strong: var(--bm-color-action-pressed);
  --visitor-blue-soft: var(--bm-color-selected);
  --visitor-wash: var(--bm-color-canvas);
  --visitor-radius: var(--bm-radius-panel);
  --visitor-radius-sm: var(--bm-radius-control);
  --visitor-shadow: 0 14px 36px rgba(16, 33, 63, .08);
  --visitor-shadow-soft: 0 8px 20px rgba(16, 33, 63, .05);
}

html,
body,
body.member-mode,
body.visitor-mode {
  background: var(--bm-color-canvas) !important;
  color: var(--bm-color-ink) !important;
  font-family: var(--bm-font-sans) !important;
}

body.member-mode .app-shell,
body.visitor-mode .app-shell,
body.member-mode main,
body.visitor-mode main,
body.member-mode .view,
body.visitor-mode .view {
  background: var(--bm-color-canvas) !important;
}

body.member-mode button,
body.member-mode input,
body.member-mode select,
body.member-mode textarea,
body.visitor-mode button,
body.visitor-mode input,
body.visitor-mode select,
body.visitor-mode textarea {
  font-family: var(--bm-font-sans) !important;
}

/* Historical screens declared several unrelated web fonts on individual
   components. Keep the brand image untouched, but make all product copy use
   the single system stack. */
body.member-mode :is(h1, h2, h3, h4, p, b, strong, small, span, em, time, label, a, button, input, select, textarea),
body.visitor-mode :is(h1, h2, h3, h4, p, b, strong, small, span, em, time, label, a, button, input, select, textarea) {
  font-family: var(--bm-font-sans) !important;
}

body.member-mode .primary,
body.member-mode .member-task-primary,
body.member-mode .member-plan-create,
body.member-mode .member-meet-action-primary,
body.visitor-mode .primary,
body.visitor-mode .account-quick-access {
  min-height: var(--bm-control-standard) !important;
  border-color: var(--bm-color-action) !important;
  border-radius: var(--bm-radius-control) !important;
  background: var(--bm-color-action) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

body.member-mode .primary:hover,
body.member-mode .member-task-primary:hover,
body.member-mode .member-plan-create:hover,
body.member-mode .member-meet-action-primary:hover,
body.visitor-mode .primary:hover,
body.visitor-mode .account-quick-access:hover {
  background: var(--bm-color-action-pressed) !important;
  transform: none !important;
}

body.member-mode .outline-button,
body.member-mode .filter,
body.member-mode .member-segmented-control button,
body.member-mode .text-button,
body.visitor-mode .outline-button {
  border-color: var(--bm-color-line) !important;
  color: var(--bm-color-action) !important;
  font-weight: 600 !important;
}

body.member-mode .filter.active,
body.member-mode .member-segmented-control button.active,
body.member-mode .member-segmented-control button[aria-selected="true"] {
  border-color: transparent !important;
  background: var(--bm-color-selected) !important;
  color: var(--bm-color-action) !important;
  box-shadow: inset 0 -2px 0 var(--bm-color-action) !important;
}

body.member-mode input,
body.member-mode select,
body.member-mode textarea,
body.visitor-mode input,
body.visitor-mode select,
body.visitor-mode textarea {
  border-color: var(--bm-color-line) !important;
  border-radius: var(--bm-radius-control) !important;
  background: #fff !important;
  color: var(--bm-color-ink) !important;
}

body.member-mode input:focus-visible,
body.member-mode select:focus-visible,
body.member-mode textarea:focus-visible,
body.member-mode button:focus-visible,
body.visitor-mode input:focus-visible,
body.visitor-mode select:focus-visible,
body.visitor-mode textarea:focus-visible,
body.visitor-mode button:focus-visible {
  outline: 3px solid rgba(10, 102, 255, .24) !important;
  outline-offset: 2px !important;
}

body.member-mode .eyebrow,
body.visitor-mode .eyebrow {
  color: var(--bm-color-muted) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}

body.member-mode .public-policy-links,
body.visitor-mode .public-policy-links {
  border-top-color: var(--bm-color-line) !important;
  background: #fff !important;
}

/* Product workspaces: a shared, quiet white stage.  These selectors only
   style existing member components and intentionally do not enter /cities/. */
body.member-mode #discover,
body.member-mode #plans,
body.member-mode #tools,
body.member-mode #inbox,
body.member-mode #profile {
  background: #fff !important;
}

body.member-mode #profile .member-you-account-hub {
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  box-shadow: none !important;
}

/* Meet keeps the approved photo-stage / profile-dossier composition, with no
   decorative blue wash competing with the member photography. */
body.member-mode #discover .member-meet-focus {
  overflow: clip !important;
  border: 0 !important;
  border-top: 1px solid var(--bm-color-line) !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-card-stage,
body.member-mode #discover .member-meet-card-stage::after {
  background: #fff !important;
}

body.member-mode #discover .member-meet-card-stage {
  padding: var(--bm-space-4) !important;
  border-right: 1px solid var(--bm-color-line) !important;
}

body.member-mode #discover .member-meet-card-stage .live-person-card,
body.member-mode #discover .member-meet-card-stage .live-person-card:hover {
  box-shadow: none !important;
  transform: none !important;
}

body.member-mode #discover .member-meet-profile-panel {
  background: #fff !important;
}

body.member-mode #discover .member-meet-story,
body.member-mode #discover .member-meet-moment {
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-moment {
  border-left-color: var(--bm-color-line) !important;
}

body.member-mode #discover .member-meet-profile-identity h2,
body.member-mode #discover .member-meet-profile-bio {
  color: var(--bm-color-ink) !important;
}

body.member-mode #discover .member-meet-interest-tile,
body.member-mode #discover .member-meet-availability,
body.member-mode #discover .member-meet-starter {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-interest-tile:hover,
body.member-mode #discover .member-meet-starter:hover {
  border-color: #bfd6ff !important;
  background: var(--bm-color-selected) !important;
  transform: none !important;
}

body.member-mode #discover .member-meet-action-rail {
  border-top: 1px solid var(--bm-color-line) !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-action-secondary {
  border-color: transparent !important;
  background: #fff !important;
  color: var(--bm-color-ink) !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-action-primary {
  border-radius: 999px !important;
  background: var(--bm-color-action) !important;
  box-shadow: none !important;
}

/* Person switching is deliberately text-led in the dossier header. It must
   not resemble the gallery arrows that change photos for the same person. */
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity {
    gap: var(--bm-space-4) !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity > div:first-child {
    max-width: calc(100% - 236px) !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-controls {
    gap: var(--bm-space-2) !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-person-navigation button {
    width: auto !important;
    padding: 0 10px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-person-navigation button span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-link {
    border-radius: var(--bm-radius-control) !important;
  }
}

/* Plans empty state: preserve momentum with one clear next action and a
   lightweight reset, instead of leaving the explore surface visually dead. */
body.member-mode #plans .member-plan-studio-empty {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px 14px !important;
  min-height: 190px !important;
  padding: 34px 24px !important;
  border: 1px solid var(--bm-color-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  text-align: center !important;
}
body.member-mode #plans .member-plan-studio-empty h3,
body.member-mode #plans .member-plan-studio-empty p { flex: 0 0 100%; }
body.member-mode #plans .member-plan-studio-empty p { margin: 0 !important; }
body.member-mode #plans .member-plan-studio-empty button {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
}
body.member-mode #plans .member-plan-studio-empty button[data-studio-reset] {
  border: 1px solid var(--bm-color-line) !important;
  background: #fff !important;
  color: var(--bm-color-action) !important;
}
body.member-mode #plans .member-plan-studio-empty button[data-studio-create] {
  border: 1px solid var(--bm-color-action) !important;
  background: var(--bm-color-action) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(22,94,232,.16) !important;
}
@media (max-width: 820px) {
  body.member-mode #plans .member-plan-studio-empty { padding: 28px 18px !important; }
  body.member-mode #plans .member-plan-studio-empty button { width: 100% !important; }
}

@media (min-width: 821px) {
  body.member-mode #discover .member-meet-card-stage {
    padding: 0 !important;
  }

  body.member-mode #discover .member-meet-card-stage .live-person-card,
  body.member-mode #discover .member-meet-card-stage .live-person-card .portrait {
    border-radius: 0 !important;
  }
}

/* Meet precision pass: give the photography and dossier the same calm, full
   width rhythm as the approved desktop composition without changing filters,
   profile data, gallery behavior or connection actions. */
@media (min-width: 1024px) {
  body.member-mode #discover .member-discover-layout > .people-grid {
    width: min(1440px, calc(100vw - 48px)) !important;
    max-width: none !important;
  }

  body.member-mode #discover .member-meet-focus {
    grid-template-columns: minmax(0, 1.12fr) minmax(440px, .88fr) !important;
    min-height: clamp(606px, calc(100dvh - 284px), 720px) !important;
  }

  body.member-mode #discover .member-meet-story {
    padding: 34px 48px 28px !important;
  }

  body.member-mode #discover .member-meet-profile-identity h2 {
    font-size: clamp(42px, 4vw, 58px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
  }

  body.member-mode #discover .member-meet-profile-bio {
    max-width: 34ch;
    font-size: 20px !important;
    line-height: 1.38 !important;
  }

  body.member-mode #discover .member-meet-interest-panel ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Keep verified profile media above the stage surface. The gallery, counter and
   lower contrast wash remain above the photo so controls stay legible. */
body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field > .discover-profile-image {
  z-index: 2 !important;
}

/* Keep media crop choices CSP-safe: Meet uses fixed classes instead of inline
   object-position styles so the strict production style policy stays intact. */
body.member-mode #discover .member-meet-media-position-0 { object-position: center 34%; }
body.member-mode #discover .member-meet-media-position-1 { object-position: center 24%; }
body.member-mode #discover .member-meet-media-position-2 { object-position: center 47%; }
body.member-mode #discover .member-meet-media-position-3 { object-position: 42% center; }
body.member-mode #discover .member-meet-media-position-4 { object-position: 58% center; }

body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field::after {
  z-index: 3 !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-photo-count,
body.member-mode #discover .member-meet-reference-layout .member-meet-gallery,
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-more {
  z-index: 4 !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage .live-person-card {
  display: block !important;
  grid-template-rows: none !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage .member-meet-photo-field {
  height: 100% !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-photo-loading {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  background: linear-gradient(110deg, #f4f7fb 8%, #ffffff 18%, #f4f7fb 33%);
  background-size: 220% 100%;
  color: transparent;
  font-size: 0;
  pointer-events: none;
  animation: bm-meet-media-skeleton 1.45s ease-in-out infinite;
  transition: opacity .18s ease, visibility .18s ease;
}

@keyframes bm-meet-media-skeleton {
  to { background-position: -120% 0; }
}

body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field.is-media-ready .member-meet-photo-loading {
  opacity: 0;
  visibility: hidden;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-photo-field:not(.is-media-ready)::after {
  display: none !important;
}

/* Plans separates exploration from personal commitments using a calm two-pane
   workspace. All filters, lists and actions remain the existing live UI. */
body.member-mode #plans .member-plans-studio {
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr) !important;
  overflow: clip !important;
  border: 0 !important;
  border-top: 1px solid var(--bm-color-line) !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #plans .member-plan-explore {
  padding: var(--bm-space-6) !important;
  background: #fff !important;
}

body.member-mode #plans .member-plan-mine {
  padding: var(--bm-space-5) !important;
  border-left: 1px solid var(--bm-color-line) !important;
  background: #fff !important;
}

body.member-mode #plans .member-plan-explore-header,
body.member-mode #plans .member-plan-mine > header {
  border-bottom-color: var(--bm-color-line) !important;
}

body.member-mode #plans .member-plan-explore-controls input,
body.member-mode #plans .member-plan-explore-controls select,
body.member-mode #plans .member-plan-filter-trigger,
body.member-mode #plans .member-plan-filter-panel {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #plans .member-plan-filter-panel {
  border-radius: var(--bm-radius-panel) !important;
}

/* Plans currently carries city-level data only. Keep the filter honest until
   the live Plan contract exposes a real per-Plan distance value. */
body.member-mode #plans .member-plan-filter-distance {
  display: none !important;
}

/* White-surface contract: application workspaces stay white; blue is reserved
   for selection, focus and primary action rather than ambient decoration. */
body.member-mode #tools.member-circle-v9 .member-circle-overview > button,
body.member-mode #tools.member-circle-v9 #circle-list > article.member-circle-room-card,
body.member-mode #tools.member-circle-v9 .member-circle-focus,
body.member-mode #tools.member-circle-v9 .member-circle-context > section,
body.member-mode #tools.member-circle-v9 .member-circle-my-rail,
body.member-mode #tools.member-circle-v9 .member-circle-rail-card,
body.member-mode #tools.member-circle-v9 .member-circle-message-list,
body.member-mode #tools.member-circle-v9 .member-circle-inline-composer,
body.member-mode #inbox .member-conversation-rail,
body.member-mode #inbox .member-rail-section,
body.member-mode #inbox .contacts-shortcuts,
body.member-mode #inbox .contacts-directory,
body.member-mode #profile .profile-hero-web,
body.member-mode #profile .profile-hero-content,
body.member-mode #profile .profile-showcase {
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #tools.member-circle-v9 .member-circle-context > section:first-child {
  background: #fff !important;
}

body.member-mode #profile .profile-hero-web::before,
body.member-mode #profile .profile-hero-web::after {
  display: none !important;
}

body.member-mode #profile .member-you-membership-facts > span {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
}

body.member-mode #plans .member-plan-studio-row,
body.member-mode #plans .member-plan-mine-row,
body.member-mode #plans .member-plan-selected {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #plans .member-plan-studio-row:hover,
body.member-mode #plans .member-plan-mine-row:hover,
body.member-mode #plans .member-plan-mine-row.selected {
  background: var(--bm-color-selected) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.member-mode #plans .member-plan-create,
body.member-mode #plans .member-plan-studio-action.primary,
body.member-mode #plans .member-plan-selected-action {
  border-radius: var(--bm-radius-control) !important;
  background: var(--bm-color-action) !important;
  box-shadow: none !important;
}

/* Circles uses white rows and a thin divided personal rail rather than an
   illustrated dashboard. Existing Join, chat and request states are intact. */
body.member-mode #tools.member-circle-reference-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #tools.member-circle-reference-layout .circle-board,
body.member-mode #tools.member-circle-reference-layout .member-circle-focus {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-search,
body.member-mode #tools.member-circle-reference-layout .member-circle-quick-filters button,
body.member-mode #tools.member-circle-reference-layout .circle-card,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-quick-filters button.active,
body.member-mode #tools.member-circle-reference-layout .circle-card:hover {
  background: var(--bm-color-selected) !important;
  border-color: #bfd6ff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
  border-left-color: var(--bm-color-line) !important;
  background: #fff !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card header,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-conversation,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-plan {
  border-color: var(--bm-color-line) !important;
}

/* Inbox and account settings follow the same white canvas, short grouped
   rows and blue-only selection model. Privacy controls remain collapsed until
   the member explicitly opens their existing settings flow. */
body.member-mode #inbox .thread-list,
body.member-mode #inbox .conversation,
body.member-mode #inbox .member-thread-tools,
body.member-mode #inbox .member-inbox-lane-placeholder,
body.member-mode #profile .member-profile-overview > article,
body.member-mode #profile .member-you-settings-grid > article,
body.member-mode #profile .member-you-membership {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #inbox .messenger {
  border: 0 !important;
  border-top: 1px solid var(--bm-color-line) !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.member-mode #inbox .thread.active,
body.member-mode #inbox .inbox-lane.active,
body.member-mode #profile .member-profile-overview > article:hover,
body.member-mode #profile .member-you-settings-grid > article:hover {
  background: var(--bm-color-selected) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.member-mode #inbox .conversation > header,
body.member-mode #inbox .composer,
body.member-mode #profile .member-you-account-hub > header,
body.member-mode #profile .member-you-membership {
  border-color: var(--bm-color-line) !important;
}

body.member-mode #profile .member-you-account-hub,
body.member-mode #profile .member-profile-overview {
  background: #fff !important;
}

/* Historical module styles still carried a pale-blue wash on secondary
   columns. These are working surfaces, not status messages: keep them white
   and reserve blue for an explicit selected or primary-action state. */
body.member-mode #plans .member-plan-explore,
body.member-mode #plans .member-plan-mine,
body.member-mode #inbox .thread-list,
body.member-mode #inbox .member-conversation-rail,
body.member-mode #inbox .messages,
body.member-mode #inbox .composer,
body.member-mode #inbox .contacts-directory-list,
body.member-mode #inbox .contact-detail-panel,
body.member-mode #profile .member-profile-page-header > span,
body.member-mode .modal .live-filter-tier.premium {
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #inbox .member-conversation-retention,
body.member-mode #inbox .contacts-shortcuts button:first-child {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #tools.member-circle-v9 .member-circle-room-card.selected,
body.member-mode #tools.member-circle-v9 .member-circle-featured {
  background: #fff !important;
  box-shadow: none !important;
}

/* Visitor pages use the same canvas. Photography carries the visual energy;
   background gradients do not. */
body.visitor-mode #visitor-experience .visitor-home-scene,
body.visitor-mode #visitor-experience .visitor-home-journey,
body.visitor-mode #visitor-experience .visitor-plans-scene,
body.visitor-mode #visitor-experience .visitor-inbox-scene {
  background: #fff !important;
}

body.visitor-mode #visitor-experience .visitor-home-hero {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.visitor-mode #visitor-experience .visitor-home-hero::after,
body.visitor-mode #visitor-experience .visitor-home-world::before,
body.visitor-mode #visitor-experience .visitor-meet-stage::before {
  display: none !important;
}

body.visitor-mode #visitor-experience .visitor-home-kicker span {
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  color: var(--bm-color-muted) !important;
  backdrop-filter: none !important;
}

body.visitor-mode #visitor-experience .visitor-home-copy h1 {
  color: var(--bm-color-ink) !important;
  text-shadow: none !important;
}

body.visitor-mode #visitor-experience .visitor-home-copy h1 em,
body.visitor-mode #visitor-experience .visitor-home-city-action span {
  color: var(--bm-color-action) !important;
}

body.visitor-mode #visitor-experience .visitor-home-copy > p:not(.visitor-home-kicker),
body.visitor-mode #visitor-experience .visitor-home-assurance,
body.visitor-mode #visitor-experience .visitor-home-city-action {
  color: var(--bm-color-copy) !important;
}

body.visitor-mode #visitor-experience .visitor-home-city-action {
  border-bottom-color: var(--bm-color-line) !important;
}

body.visitor-mode #visitor-experience .visitor-home-plan-photo,
body.visitor-mode #visitor-experience .visitor-home-person,
body.visitor-mode #visitor-experience .visitor-home-city-card,
body.visitor-mode #visitor-experience .visitor-home-circle-card,
body.visitor-mode #visitor-experience .visitor-home-story-board,
body.visitor-mode #visitor-experience .visitor-inbox-product,
body.visitor-mode #visitor-experience .visitor-plan-list,
body.visitor-mode #visitor-experience .visitor-plan-detail,
body.visitor-mode #visitor-experience .visitor-circle-chat {
  border-color: var(--bm-color-line) !important;
  box-shadow: none !important;
}

body.visitor-mode #visitor-experience .visitor-circle-stage {
  border: 1px solid var(--bm-color-line) !important;
  background: #fff !important;
}

body.visitor-mode #visitor-experience .visitor-plans-scene,
body.visitor-mode #visitor-experience .visitor-private-messages,
body.visitor-mode #visitor-experience .visitor-home-story-mobile figure {
  background: #fff !important;
  box-shadow: none !important;
}

body.visitor-mode #visitor-experience .visitor-intent-switch button.active {
  background: var(--bm-color-selected) !important;
  color: var(--bm-color-action) !important;
  box-shadow: inset 0 -2px 0 var(--bm-color-action) !important;
}

body.visitor-mode #visitor-experience .visitor-circle-card:hover,
body.visitor-mode #visitor-experience .visitor-home-steps button:hover {
  background: var(--bm-color-selected) !important;
  border-color: #bfd6ff !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 960px) {
  body.member-mode #plans .member-plans-studio {
    grid-template-columns: 1fr !important;
  }

  body.member-mode #plans .member-plan-mine {
    border-top: 1px solid var(--bm-color-line) !important;
    border-left: 0 !important;
  }

  body.member-mode #discover .member-meet-card-stage {
    border-right: 0 !important;
    border-bottom: 1px solid var(--bm-color-line) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.member-mode *,
  body.visitor-mode *,
  body.member-mode *::before,
  body.member-mode *::after,
  body.visitor-mode *::before,
  body.visitor-mode *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Product Design precision pass — R27. Keep the member shell intentional at
   narrow widths: the bottom navigation owns the full viewport and every
   module gets one readable column before any secondary rail. */
@media (max-width: 820px) {
  body.member-mode .sidebar {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 0 !important;
  }
  body.member-mode .sidebar nav {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  body.member-mode .sidebar nav .nav-item {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  body.member-mode .sidebar nav .nav-item > span:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.member-mode .sidebar nav .nav-item > span:first-child > svg,
  body.member-mode .sidebar nav .nav-item .visitor-icon {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  body.member-mode .sidebar nav .nav-item > span:first-child > svg *,
  body.member-mode .sidebar nav .nav-item .visitor-icon * {
    fill: none !important;
    stroke: currentColor !important;
  }

  /* The desktop split is deliberately replaced, rather than squeezed, on
     phones. This prevents the 0px/340px grid regression in Circles. */
  body.member-mode #tools.member-circle-reference-layout .circle-board {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "heading" "list" "rail" !important;
    width: 100% !important;
  }
  body.member-mode #tools.member-circle-reference-layout .member-circle-focus,
  body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body.member-mode #tools.member-circle-reference-layout .member-circle-focus {
    position: static !important;
    margin: 24px 0 0 !important;
    padding: 24px 0 !important;
    border-top: 1px solid var(--bm-color-line) !important;
    border-left: 0 !important;
  }

  /* Keep Meet's action rail available without obscuring the fixed nav. */
  body.member-mode #discover .member-meet-action-rail {
    position: sticky !important;
    bottom: 70px !important;
    z-index: 8 !important;
    margin-inline: 14px !important;
    border: 1px solid var(--bm-color-line) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 12px 28px rgba(18,48,96,.10) !important;
  }
  body.member-mode #discover .member-meet-photo-loading {
    transition: opacity .15s ease !important;
  }
  body.member-mode #discover .member-meet-photo-field.is-media-ready .member-meet-photo-loading {
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

@media (min-width: 821px) {
  body.member-mode #discover .member-meet-photo-field.is-media-ready .member-meet-photo-loading {
    visibility: hidden !important;
    opacity: 0 !important;
  }
}
/* Final mobile authority: Circle discovery cards never collapse into split columns. */
@media (max-width: 820px) {
  body.member-mode #tools.member-circle-reference-layout #circle-list.circle-list {
    width: 100% !important;
    padding-inline: 0 !important;
  }
  body.member-mode #tools.member-circle-reference-layout #circle-list > article.member-circle-room-card {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.member-mode #tools.member-circle-reference-layout #circle-list > article.member-circle-room-card:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.member-mode #tools.member-circle-reference-layout .member-circle-room-select {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }
  body.member-mode #tools.member-circle-reference-layout .circle-card-actions {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }
  body.member-mode #tools.member-circle-reference-layout #circle-list > article.member-circle-room-card > footer.circle-card-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
    padding-right: 0 !important;
  }
}