/* Header mode dots: fixed centered track; labels centered over ticks; dark-mode text readable. */
.site-header .header-center-controls{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
.site-header .header-mode-switch{
  display:block!important;
  width:360px!important;
  max-width:360px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  flex:0 0 360px!important;
}
.site-header .header-mode-switch .mode-switch{
  --tick-size:14px!important;
  --track-y:10px!important;
  --track-pad:calc(var(--tick-size) / 2)!important;
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:48px!important;
  padding:0 0 10px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.site-header .header-mode-switch .mode-switch-mod{
  width:300px!important;
  max-width:300px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.site-header .header-mode-switch:has(.mode-switch-mod){
  width:300px!important;
  max-width:300px!important;
  flex-basis:300px!important;
}
.site-header .header-mode-switch .mode-switch::before{
  content:""!important;
  position:absolute!important;
  left:var(--track-pad)!important;
  right:var(--track-pad)!important;
  bottom:var(--track-y)!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(34,197,94,.7),rgba(167,139,250,.7),rgba(56,189,248,.7),rgba(251,146,60,.7))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.22)!important;
}
.site-header .header-mode-switch .mode-switch .mode-knob{display:none!important;}
.site-header .header-mode-switch .mode-switch .mode-option{
  appearance:none!important;
  position:absolute!important;
  z-index:2!important;
  left:calc(var(--track-pad) + ((100% - (var(--track-pad) * 2)) * var(--mode-pos,0)))!important;
  bottom:22px!important;
  transform:translateX(-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-width:54px!important;
  height:auto!important;
  padding:0 .2rem!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#dbeafe!important;
  -webkit-text-fill-color:#dbeafe!important;
  text-align:center!important;
  font-size:.72rem!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:0 1px 2px rgba(0,0,0,.72)!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.site-header .header-mode-switch .mode-switch .mode-option::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-20px!important;
  width:var(--tick-size)!important;
  height:var(--tick-size)!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  background:#cbd5e1!important;
  border:2px solid #07110c!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.72)!important;
}
.site-header .header-mode-switch .mode-switch .mode-option[aria-pressed="true"]{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-decoration:none!important;
}
.site-header .header-mode-switch .mode-switch .mode-option[aria-pressed="true"]::after{
  background:currentColor!important;
  width:calc(var(--tick-size) * 1.22)!important;
  height:calc(var(--tick-size) * 1.22)!important;
  bottom:calc(-20px - (var(--tick-size) * .11))!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 8px 18px rgba(0,0,0,.34)!important;
}
.site-header .header-mode-switch .mode-switch .mode-option:hover,
.site-header .header-mode-switch .mode-switch .mode-option:focus-visible{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  outline:0!important;
  text-decoration:underline!important;
  text-underline-offset:4px!important;
}
.site-header .header-mode-switch .mode-switch-mod .mode-option:nth-of-type(1){--mode-pos:0!important;}
.site-header .header-mode-switch .mode-switch-mod .mode-option:nth-of-type(2){--mode-pos:.5!important;}
.site-header .header-mode-switch .mode-switch-mod .mode-option:nth-of-type(3){--mode-pos:1!important;}
.site-header .header-mode-switch .mode-switch-admin .mode-option:nth-of-type(1){--mode-pos:0!important;}
.site-header .header-mode-switch .mode-switch-admin .mode-option:nth-of-type(2){--mode-pos:.333333!important;}
.site-header .header-mode-switch .mode-switch-admin .mode-option:nth-of-type(3){--mode-pos:.666667!important;}
.site-header .header-mode-switch .mode-switch-admin .mode-option:nth-of-type(4){--mode-pos:1!important;}
html[data-theme="dark"] .site-header .header-mode-switch .mode-switch .mode-option,
html[data-theme="dark"] .site-header .header-mode-switch .mode-switch .mode-option[aria-pressed="true"]{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
}
@media(max-width:760px){
  .site-header .header-center-controls{
    grid-area:mode!important;
    width:100%!important;
    flex:0 0 100%!important;
    justify-self:center!important;
    justify-content:center!important;
    padding-top:6px!important;
  }
  .site-header .header-mode-switch,
  .site-header .header-mode-switch:has(.mode-switch-mod){
    width:min(340px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    flex:0 1 min(340px,calc(100vw - 32px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .site-header .header-mode-switch .mode-switch,
  .site-header .header-mode-switch .mode-switch-mod{
    --tick-size:13px!important;
    width:100%!important;
    max-width:100%!important;
    height:44px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .site-header .header-mode-switch .mode-switch .mode-option{
    font-size:.66rem!important;
    min-width:46px!important;
    padding-inline:.08rem!important;
  }
}

/* 2026-08-24 member mobile header mode-bar containment: keep private mode switch from distorting public Browse hero. */
@media (max-width:760px){
  .site-header .header-center-controls:has(.header-mode-switch){
    grid-area:mode!important;
    width:100%!important;
    flex:0 0 100%!important;
    justify-self:center!important;
    justify-content:center!important;
    align-items:center!important;
    padding:2px 14px 7px!important;
    margin:0!important;
  }
  .site-header .header-center-controls:has(.header-mode-switch) .header-mode-switch,
  .site-header .header-center-controls:has(.header-mode-switch) .header-mode-switch:has(.mode-switch-mod){
    width:min(280px,calc(100vw - 84px))!important;
    max-width:280px!important;
    flex:0 1 min(280px,calc(100vw - 84px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .site-header .header-center-controls:has(.header-mode-switch) .mode-switch,
  .site-header .header-center-controls:has(.header-mode-switch) .mode-switch-mod,
  .site-header .header-center-controls:has(.header-mode-switch) .mode-switch-admin{
    --tick-size:10px!important;
    --track-y:5px!important;
    height:30px!important;
    padding:0 0 5px!important;
  }
  .site-header .header-center-controls:has(.header-mode-switch) .mode-switch .mode-option{
    bottom:15px!important;
    min-width:38px!important;
    font-size:.58rem!important;
    letter-spacing:.01em!important;
    padding-inline:.05rem!important;
  }
  .site-header .header-center-controls:has(.header-mode-switch) .mode-switch .mode-option::after{
    bottom:-15px!important;
  }
  .site-header .header-center-controls:has(.header-mode-switch) .mode-switch .mode-option[aria-pressed="true"]::after{
    bottom:calc(-15px - (var(--tick-size) * .11))!important;
  }
}

/* 2026-08-24 member Browse header clearance: if the private mode switch is present, start the Browse page header below it instead of letting the hero clip under the member row. */
@media (max-width:760px){
  body:has(.site-header .header-mode-switch) main.site-main .container.browse-page .browse-page-header-section{
    margin-top:38px!important;
  }
}