/* BIPP2 | 2026-10-17 owner-approved blue visual direction.
   Scoped to application panels. The approved public landing remains unchanged.
   IMPORTANT: use the actual bell #CEE8E6 and brand blue #00A9E8. */
:root {
  --bipp-blue: #00A9E8;
  --bipp-dark: #0080AF;
  --bipp-bell: #CEE8E6;
  --bipp-ink: #16445b;
  --bipp-muted: #385d6b;
}
.phone .panel:not(#landing) {
  background: var(--bipp-blue);
  color: var(--bipp-ink);
}
.phone .panel:not(#landing) h2,
.phone .panel:not(#landing) h3,
.phone .panel:not(#landing) .field {
  color: var(--bipp-ink);
}
.phone .panel:not(#landing) p,
.phone .panel:not(#landing) .note,
.phone .panel:not(#landing) .checks {
  color: var(--bipp-ink);
}
.phone .panel:not(#landing) .chip,
.phone .panel:not(#landing) .bipp-looking-options,
.phone .panel:not(#landing) .privacy-settings,
.phone .panel:not(#landing) fieldset {
  background: rgba(206,232,230,.70) !important;
  border-color: var(--bipp-dark) !important;
  color: var(--bipp-ink);
}
.phone .panel:not(#landing) .input,
.phone .panel:not(#landing) select.input,
.phone .panel:not(#landing) textarea.input {
  background: rgba(206,232,230,.96);
  border: 1px solid var(--bipp-dark);
  color: #12384b;
  box-shadow: none;
}
.phone .panel:not(#landing) .input::placeholder { color:#426777; opacity:1; }
.phone .panel:not(#landing) .input:focus-visible,
.phone .panel:not(#landing) button:focus-visible,
.phone .panel:not(#landing) a:focus-visible {
  outline: 3px solid var(--bipp-ink);
  outline-offset: 3px;
}
.phone .panel:not(#landing) .btn,
.phone .panel:not(#landing) .btn.ghost,
.phone .panel:not(#landing) .bipp-action,
.phone .panel:not(#landing) .demo-grid button {
  background: var(--bipp-bell);
  color: var(--bipp-ink);
  border: 1px solid var(--bipp-dark);
  border-radius: 15px;
  box-shadow: none;
  font-weight: 800;
}
.phone .panel:not(#landing) .btn:hover,
.phone .panel:not(#landing) .bipp-action:hover,
.phone .panel:not(#landing) .demo-grid button:hover {
  background: #e4f5f2;
}
.phone .panel:not(#landing) .inner-screen {
  background: transparent;
  color: var(--bipp-ink);
}
.phone .panel:not(#landing) .back { color: var(--bipp-ink); }
.phone .panel:not(#landing) .bipp-page-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px auto 18px;
  padding: 4px 0;
}
.phone .panel:not(#landing) img[data-bipp-logo] {
  display: block;
  width: clamp(180px, 44vw, 285px);
  max-width: 100%;
  height: auto;
  min-height: 90px;
  object-fit: contain;
}
.phone .panel:not(#landing) .foot,
.phone .panel:not(#landing) .bipp-quick-controls {
  background: rgba(206,232,230,.7);
  border: 1px solid var(--bipp-dark);
}
.phone .panel:not(#landing) .bipp-quick-controls small,
.phone .panel:not(#landing) .bipp-quick-controls p,
.phone .panel:not(#landing) .bipp-quick-controls strong { color:var(--bipp-ink); }

/* Signed-in screens: remove the general-purpose dashboard veneer. */
body.bipp2-member-mode { background: var(--bipp-blue); }
body.bipp2-member-mode .panel.active { background: var(--bipp-blue); }
body.bipp2-member-mode #home > .bipp-page-brand,
body.bipp2-member-mode #home > .chip,
body.bipp2-member-mode #home > h2,
body.bipp2-member-mode #home > p,
body.bipp2-member-mode #home > #logout { display:none; }
body.bipp2-member-mode #home .inner-screen {
  min-height: auto;
  padding: 12px 4px 28px;
  background: transparent;
}
body.bipp2-member-mode .bipp-bottom-nav {
  background: var(--bipp-dark);
  border-top: 1px solid var(--bipp-bell);
  box-shadow: 0 -4px 18px #064b6455;
}
body.bipp2-member-mode .bipp-bottom-nav button {
  color: #e7f6fa;
  font-size: 12px;
  min-height: 55px;
}
body.bipp2-member-mode .bipp-bottom-nav button.active {
  color: #133a4c;
  background: var(--bipp-bell);
}
body.bipp2-member-mode .bipp-bottom-nav button>span:first-child {
  font-size: 23px;
}
body.bipp2-member-mode #dashboard .demo-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 640px;
  margin: 12px auto;
}
body.bipp2-member-mode #dashboard .demo-grid button {
  min-height: 54px;
  padding: 12px 16px;
  text-align: left;
  font-size: 16px;
}

/* Own profile: a real photo-led profile, not two tiny side-by-side photos. */
#myprofile .profile-show {
  position: relative;
  display: block;
  width: 100%;
  max-width: 620px;
  height: clamp(300px, 57dvh, 620px);
  margin: 14px auto;
  overflow: hidden;
  background: #0080af55;
  border: 2px solid var(--bipp-bell);
  border-radius: 24px;
  box-shadow: 0 12px 24px #02577a30;
}
#myprofile .profile-show img:not([hidden]) {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
#myprofile .profile-show img[hidden] { display:none!important; }
#myprofile .profile-show .bipp-own-photo-nav {
  position:absolute;
  right:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 8px;
  border-radius:16px;
  background:#063d5dc9;
  color:#fff;
  font-size:13px;
  z-index:2;
}
#myprofile .profile-show .bipp-own-photo-nav[hidden] { display:none!important; }
#myprofile .profile-show .bipp-own-photo-nav button {
  border: 1px solid var(--bipp-bell);
  background: var(--bipp-bell);
  color: var(--bipp-ink);
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:24px;
  cursor:pointer;
}
#myprofile #saved-name { margin: 16px 0 4px; font-size: clamp(26px, 5vw, 38px); }
#myprofile #saved-details { font-size: 16px; font-weight:650; margin:4px 0; }
#myprofile #saved-bio {
  font-size:16px;
  line-height:1.6;
  padding:10px 0 15px;
  overflow-wrap:anywhere;
  white-space:pre-line;
}
#myprofile #saved-ideal,
#myprofile #saved-privacy { display:none; }
#myprofile .btn { max-width:620px; display:block; margin-left:auto; margin-right:auto; }
#myprofile .btn[data-bipp-secondary-nav] { display:none; }
#settings .bipp-settings-section {
  max-width: 640px;
  margin: 14px auto;
  border: 1px solid var(--bipp-dark);
  background: rgba(206,232,230,.73);
  color:var(--bipp-ink);
  border-radius:18px;
  padding:16px;
}
#settings .bipp-settings-section p { line-height:1.6; }
#settings .bipp-settings-section button { max-width:100%; }
#forum .bipp-stories-info {
  max-width:640px;
  padding:18px;
  margin:15px auto;
  border:1px solid var(--bipp-dark);
  border-radius:18px;
  background:rgba(206,232,230,.73);
  line-height:1.6;
}

/* Do not force opaque white panels inside the member area. */
body.bipp2-member-mode #discover > div[style*="background:#"],
body.bipp2-member-mode #myprofile > p[style*="background:#"] {
  background: rgba(206,232,230,.72)!important;
  border-color:var(--bipp-dark)!important;
}
@media (max-width:520px) {
  body.bipp2-member-mode .panel.active { padding-left:14px; padding-right:14px; }
  .phone .panel:not(#landing) img[data-bipp-logo] { width: 190px; min-height:76px; }
  #myprofile .profile-show { height: min(61dvh,590px); }
  #myprofile #saved-name { margin-top:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone .panel:not(#landing) * { scroll-behavior:auto!important; transition-duration:0.01ms!important; }
}

/* Grouped editor. Each independent preference/consent section can be opened
   without scrolling through all immutable account fields. */
#onboarding details.bipp-edit-group {
  width: 100%;
  max-width: 720px;
  margin: 12px auto;
  padding: 0 14px;
  border: 1px solid var(--bipp-dark);
  border-radius: 18px;
  background: rgba(206,232,230,.78);
  overflow: clip;
  color: var(--bipp-ink);
}
#onboarding details.bipp-edit-group > summary {
  padding: 17px 4px;
  min-height: 55px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  color: var(--bipp-ink);
}
#onboarding details.bipp-edit-group[open] > summary {
  border-bottom: 1px solid var(--bipp-dark);
  margin-bottom: 12px;
}
#onboarding details.bipp-edit-group > div[style],
#onboarding details.bipp-edit-group > .privacy-settings,
#onboarding details.bipp-edit-group > .bipp-looking-options {
  background: rgba(206,232,230,.52)!important;
  border-color: var(--bipp-dark)!important;
}
#onboarding details.bipp-edit-group > .photo-layout {
  margin-top: 16px;
}
#onboarding details.bipp-edit-group .photo-card {
  background: rgba(206,232,230,.75);
  border: 1px solid var(--bipp-dark);
}
#onboarding #profile-msg {
  background: rgba(206,232,230,.78);
  border-radius: 12px;
  padding: 8px 12px;
}
#settings #bipp-settings-privacy > button,
#settings .bipp-quick-actions button {
  background: var(--bipp-bell);
  color: var(--bipp-ink);
  border: 1px solid var(--bipp-dark);
  min-height: 44px;
}
#onboarding .photo-layout {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
@media(max-width:520px){
  #onboarding details.bipp-edit-group { padding-left:11px; padding-right:11px; }
  #onboarding details.bipp-edit-group > summary { font-size:16px; }
}

/* 2026-10-17 approved customer journey: one card + next-profile circles. */
.bipp-free-promise{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  text-align:center;
  max-width:360px;
  margin:-8px auto 18px;
  padding:12px 14px;
  background:rgba(206,232,230,.16);
  border:1px solid var(--bipp-bell);
  border-radius:18px;
  color:#fff;
  line-height:1.4;
}
.bipp-free-promise strong{font-size:18px;font-weight:900;letter-spacing:.2px;}
.bipp-free-promise span{font-size:12px;font-weight:650;}
body.bipp2-member-mode #discover-results .bipp-view-options,
body.bipp2-member-mode #discover-results-list{display:none!important}
body.bipp2-member-mode #discover-results:not([hidden]){
  max-width:640px;
  margin-inline:auto;
  background:transparent;
}
body.bipp2-member-mode #discover-results .bipp-inline-filter{
  display:block;
  width:auto;
  min-width:0;
  min-height:40px;
  margin:12px auto;
  padding:9px 15px;
  border:1px solid var(--bipp-dark);
  border-radius:15px;
  background:var(--bipp-bell);
  color:var(--bipp-ink);
  font:inherit;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
}
#bipp-discovery-settings>summary{
  list-style:none;
  cursor:pointer;
  color:var(--bipp-ink);
  font-size:18px;
  font-weight:800;
  padding:4px 0;
  min-height:40px;
}
#bipp-discovery-settings>summary::-webkit-details-marker{display:none}
#bipp-discovery-settings>summary::after{content:'⌄';float:right}
#bipp-discovery-settings[open]>summary::after{content:'⌃'}
#bipp-discovery-settings .checks{margin:10px 0}
#bipp-discovery-settings .note{color:var(--bipp-ink)}
#bipp-discovery-settings [style*="background:#eef8fc"]{
  background:transparent!important;
  border:0!important;
  padding:10px 0!important;
}
#bipp-discovery-save-status{
  font-size:14px;
  font-weight:750;
  color:var(--bipp-ink);
  min-height:1.5em;
  margin:9px 0 0;
}
#bipp-settings-ads .bipp-action{
  display:block;
  width:100%;
  margin:8px 0;
  border:1px solid var(--bipp-dark);
  border-radius:14px;
  background:var(--bipp-bell);
  color:var(--bipp-ink);
  padding:13px;
  font-size:14px;
  font-weight:800;
}
#public-profile .bipp-upcoming-profiles[hidden]{display:none!important}
#public-profile .bipp-upcoming-profiles{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:7px auto 0;
  width:min(100%,760px);
  padding:5px 4px 3px;
  color:var(--bipp-ink);
}
#public-profile .bipp-upcoming-label{
  display:block;
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
}
#public-profile .bipp-upcoming-list{
  display:flex;
  align-items:flex-start;
  gap:11px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:3px 2px 5px;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
#public-profile .bipp-upcoming-list::-webkit-scrollbar{display:none}
#public-profile .bipp-upcoming-avatar{
  flex:0 0 58px;
  width:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  gap:2px;
  border:0;
  background:transparent;
  color:var(--bipp-ink);
  font-size:25px;
  font-weight:750;
  cursor:pointer;
  scroll-snap-align:center;
  min-height:66px;
}
#public-profile .bipp-upcoming-avatar img,
#public-profile .bipp-upcoming-avatar>img{
  width:51px;
  height:51px;
  min-height:51px;
  max-width:51px;
  max-height:51px;
  display:block;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--bipp-bell);
  box-shadow:0 2px 8px #00639165;
}
#public-profile .bipp-upcoming-avatar span{
  font-size:10px;
  line-height:1.1;
  width:100%;
  max-width:58px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--bipp-ink);
}
#public-profile .bipp-upcoming-avatar:focus-visible{
  border-radius:12px;
  outline:3px solid var(--bipp-ink);
  outline-offset:2px;
}
body.bipp2-member-mode #public-profile .bipp-swipe-card{
  height:calc(100dvh - 270px - env(safe-area-inset-bottom));
  max-height:690px;
  min-height:340px;
}
@media(max-width:520px){
  body.bipp2-member-mode #public-profile .bipp-swipe-card{
    height:calc(100dvh - 212px - env(safe-area-inset-bottom));
    min-height:340px;
    max-height:none;
  }
  #public-profile .bipp-upcoming-profiles{padding-inline:8px}
  #public-profile .bipp-upcoming-avatar{flex-basis:54px;width:54px}
  #public-profile .bipp-upcoming-avatar img{width:47px;height:47px;min-height:47px;max-height:47px}
  .bipp-free-promise{padding:10px 13px;margin:0 auto 14px;}
  .bipp-free-promise strong{font-size:16px}
}
@media(max-height:650px) and (max-width:520px){
  body.bipp2-member-mode #public-profile .bipp-swipe-card{min-height:300px;height:calc(100dvh - 185px - env(safe-area-inset-bottom))}
}

/* 2026-10-17 — CSIPP quiet UI: member screens never show developer diagnostics. */
#nearby .bipp-csipp-intro {
  margin:6px 0 16px;
  padding:0;
  background:none;
  border:0;
  color:var(--bipp-ink);
  font-size:15px;
  line-height:1.5;
}
#nearby #csipp-status,
#nearby #csipp-push-status,
#nearby .bipp-csipp-explainer,
#nearby .bipp-csipp-consent-note {
  display:none!important;
}
#nearby .bipp-csipp-help {
  border:0;
  background:transparent;
  padding:4px 0 12px;
  font-size:13px;
  color:var(--bipp-ink);
}
#nearby .bipp-csipp-help > summary {
  cursor:pointer;
  font-weight:700;
  list-style:none;
}
#nearby .bipp-csipp-help > summary::-webkit-details-marker{display:none}
#nearby .bipp-csipp-help > p { color:var(--bipp-ink);line-height:1.5; }
.bipp-csipp-error-popup[hidden]{display:none!important}
.bipp-csipp-error-popup {
  position:fixed;
  z-index:10000;
  top:max(20px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  width:min(92vw,480px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:2px solid #953c31;
  border-radius:15px;
  padding:14px 12px 14px 18px;
  background:#fff4f2;
  color:#772a23;
  box-shadow:0 7px 28px #00364a55;
  font:700 14px/1.4 system-ui,-apple-system,sans-serif;
}
.bipp-csipp-error-popup button {
  flex:0 0 38px;
  height:38px;
  border-radius:50%;
  border:1px solid #772a23;
  color:#772a23;
  background:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

/* Member's own profile: essential account actions stay discoverable. */
#myprofile .bipp-profile-account-actions{
  display:grid;
  gap:11px;
  width:min(100%,620px);
  margin:18px auto 8px;
  padding:17px 0 10px;
  border-top:1px solid var(--bipp-bell);
}
#myprofile .bipp-profile-account-actions .bipp-profile-partner-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:12px;
  border:1px solid var(--bipp-dark);
  border-radius:15px;
  background:var(--bipp-bell);
  color:var(--bipp-ink);
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  text-align:center;
}
#myprofile #bipp-profile-logout {
  min-height:48px;
  width:100%;
  margin:0;
}
#myprofile .bipp-profile-delete-zone{
  padding:12px 16px;
  border:1px solid var(--bipp-dark);
  border-radius:15px;
  background:rgba(206,232,230,.65);
}
#myprofile .bipp-profile-delete-zone summary{
  cursor:pointer;
  font-size:14px;
  color:var(--bipp-ink);
  font-weight:800;
  min-height:27px;
}
#myprofile .bipp-profile-delete-zone p{
  margin:9px 0 12px;
  line-height:1.5;
  color:var(--bipp-ink);
  font-size:13px;
}
#myprofile .bipp-profile-delete-request{
  min-height:44px;
  width:100%;
  cursor:pointer;
  border:1px solid #904943;
  border-radius:12px;
  padding:10px;
  color:#792b27;
  background:#fff0eb;
  font-family:inherit;font-size:14px;font-weight:800;line-height:1.3;
}
#myprofile .bipp-profile-delete-request:focus-visible,
#myprofile .bipp-profile-partner-link:focus-visible{
  outline:3px solid var(--bipp-ink);
  outline-offset:3px;
}