/* Guest Patch: Sidebar program items */
.navItem{display:block;width:100%;text-align:left;padding:12px 12px;margin:6px 0;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.92);font-weight:900;cursor:pointer;}
.navItem:hover{background:rgba(255,255,255,.08)}
#bpSidebar.open{transform:translateX(0) !important;}
#bpSidebarScrim{display:none;}
#bpSidebarScrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998;}


/* Fallback CAD button styling */
.bpCadFbBtn{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);font-weight:900;cursor:pointer}
.bpCadFbBtn:hover{background:rgba(255,255,255,.10)}
.bpCadFbBtn--ghost{background:rgba(0,0,0,.18)}


/* Fallback CAD Full Model v2 */
#bpCadFallbackMount{isolation:isolate;}
#bpCadFallbackMount canvas{touch-action:none;}


/* Global Crimson + Gold accent (American Crimson Red + Gold) */
:root{
  --bp-crimson:#9b1c31;
  --bp-crimson-2:#b91c1c;
  --bp-gold:#d4af37;
  --bp-gold-2:#f5c542;
}

/* Primary pill/button accents */
button.pill, .pill{
  border-color: rgba(212,175,55,.35) !important;
}
button.pill:hover, .pill:hover{
  box-shadow: 0 0 0 2px rgba(155,28,49,.22), 0 0 0 5px rgba(212,175,55,.12);
}

/* Active top tabs */
.tabs .tab.active, .tabs a.active, .top-tabs .tab.active, .top-tabs a.active{
  background: linear-gradient(90deg, rgba(155,28,49,.35), rgba(212,175,55,.20)) !important;
  border-color: rgba(212,175,55,.55) !important;
}

/* Key highlights */
.badge.verified, .verified-badge, .isVerified{
  border-color: rgba(212,175,55,.6) !important;
}
a:hover{
  color: rgba(245,197,66, .95);
}

/* Subtle header glow */
header, .header, .topbar{
  box-shadow: 0 10px 22px rgba(155,28,49,.12);
}

/* Inputs focus */
input:focus, select:focus, textarea:focus{
  outline: 2px solid rgba(212,175,55,.45) !important;
  box-shadow: 0 0 0 4px rgba(155,28,49,.18) !important;
}


/* Button text legibility rules */
button, .btn, .cad-btn{
  color: rgba(255,255,255,.92);
}

/* Green buttons (keep text white) */
.btn-green, .green, .bg-green, .cad-btn.green, button.green, button[data-accent="green"]{
  color: rgba(255,255,255,.96) !important;
}

/* Any button with white background should have black text */
.btn-white, .white, button.white, .cad-btn.white{
  color: rgba(0,0,0,.92) !important;
}
/* common inline white background patterns */
button[style*="background:#fff"], button[style*="background: #fff"],
button[style*="background:white"], button[style*="background: white"],
button[style*="background-color:#fff"], button[style*="background-color: #fff"],
button[style*="background-color:white"], button[style*="background-color: white"]{
  color: rgba(0,0,0,.92) !important;
}



/* Auth button pinned top-right (inset like screenshot) */
.headerTopBar{ position: relative; }
#headerRightAuth{
  position: absolute;
  top: 12px;           /* inset */
  right: 18px;         /* inset */
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 50;
}
#headerRightAuth #acc_info{ display:none; }
#headerRightAuth.isAuthed #btn_login{ display:none; }
#headerRightAuth.isAuthed #acc_info{ display:flex !important; align-items:center; gap:10px; }




/* Auth button fixed top-right (inset) */
.headerRightAuthFloating{
  position: fixed !important;
  top: 12px !important;
  right: 18px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999 !important;
}




/* FORCE auth button to top-right header area */
#headerRightAuth,
.headerRightAuthFloating{
  position: fixed !important;
  top: 12px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  z-index: 10000 !important;
}




/* FORCE auth button to top-right (inset) */
.headerRightAuthFloating{
  position: fixed !important;
  top: 12px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  z-index: 10000 !important;
}
.headerRightAuthFloating #acc_info{ display:none; }
.headerRightAuthFloating.isAuthed #btn_login{ display:none; }
.headerRightAuthFloating.isAuthed #acc_info{ display:flex !important; align-items:center; gap:10px; }


/* v14: auth pinned top-right inset, always visible */
#headerRightAuth.headerRightAuthFloating{
  position: fixed !important;
  top: 12px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
}
#headerRightAuth.headerRightAuthFloating button{
  pointer-events: auto !important;
}
/* ensure it doesn't get pushed off by safe-area */
@media (max-width: 520px){
  #headerRightAuth.headerRightAuthFloating{ right: 12px !important; top: 10px !important; }
}

/* v17: header/tabs restoration (no regressions) */
#appHeader{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
}
#headerTopBar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
}
#appHeader .tabs{
  display:flex !important;
  width:100% !important;
  overflow:auto !important;
  padding-bottom:6px !important;
}

/* v19: white background controls -> black text */
input, select, textarea{
  color: #000 !important;
}
button.pill, button.btn, button{
  /* if the button background is light, make text dark */
}
button[style*="background:#fff"], button[style*="background: #fff"],
button.white, .btn-white{
  color:#000 !important;
}



/* v20: Mobile-first layout fixes (no regressions) */
html, body { overflow-x: hidden !important; }

/* Make header and tabs usable on mobile */
.header { position: sticky; top: 0; z-index: 5000; }
.tabs{
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 10px 12px !important;
  width: 100% !important;
}
.tabs .tab{ flex: 0 0 auto !important; white-space: nowrap !important; }

/* Common 2-column grids collapse to one column on small screens */
@media (max-width: 900px){
  .grid.two, .grid.three, .grid.four { display: grid !important; grid-template-columns: 1fr !important; }
  .wrap.grid.two, .wrap.grid.three, .wrap.grid.four { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .bp-index-wrap{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .bp-toc{ position: relative !important; max-height: 40vh; overflow:auto; }
}

/* Prevent hidden panels from collapsing height weirdly */
.panel[hidden]{ display: none !important; }

/* Add breathing room so fixed auth doesn't overlap content */
main, .main, #app { padding-top: 6px; }

/* Mobile Programs quick button */
#bpMobileProgramsBtn{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 10050;
  padding: 10px 14px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
@media (min-width: 901px){
  #bpMobileProgramsBtn{ display:none !important; }
}
#bpProgramsOverlay{
  position: fixed; inset: 0; z-index: 10060;
  background: rgba(0,0,0,.55);
  display:none;
}
#bpProgramsOverlay .sheet{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: min(560px, 96vw);
  max-height: 70vh;
  overflow:auto;
  background: rgba(10,20,40,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px 18px 0 0;
  padding: 14px;
}
#bpProgramsOverlay .progItem{
  width: 100%;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 12px;
  margin: 8px 0;
}