/* Open Library Publications — Sticky Zone + Bright Toggle — 2026-08-28 v1
 * Fixes: stray search pseudo-element, sticky search/content overlap in dark mode,
 * and dark/light toggle becoming a darker red after repeated clicks.
 */
:root{
  --ol39-red:#e3343f;
  --ol39-red-hover:#e3343f;
  --ol39-page:#f7f8fa;
  --ol39-page-dark:#11151d;
  --ol39-header-h:68px;
  --ol39-header-gap:14px;
  --ol39-content-gap:22px;
}

/* --------------------------------------------------------------------------
   1) A REAL STICKY ZONE: panel + protected gap move together
   -------------------------------------------------------------------------- */
html body.openlib-site-index .openlib_search_sticky_zone{
  position:sticky!important;
  top:calc(var(--ol39-header-h) + var(--ol39-header-gap))!important;
  z-index:1180!important;
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:0 0 var(--ol39-content-gap)!important;
  background:var(--ol39-page)!important;
  isolation:isolate!important;
}
html[data-openlib-color-mode="dark"] body.openlib-site-index .openlib_search_sticky_zone{
  background:var(--ol39-page-dark)!important;
}

/* Search panel itself is no longer sticky; the wrapper owns sticky behavior. */
html body.openlib-site-index .openlib_search_sticky_zone > .openlib_search_panel--primary,
html body.openlib-site-index.openlib-search-is-fixed .openlib_search_sticky_zone > .openlib_search_panel--primary,
html[data-openlib-color-mode="dark"] body.openlib-site-index .openlib_search_sticky_zone > .openlib_search_panel--primary,
html[data-openlib-color-mode="dark"] body.openlib-site-index.openlib-search-is-fixed .openlib_search_sticky_zone > .openlib_search_panel--primary{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
  overflow:hidden!important;
}

/* Kill every historical decorative pseudo element. This also removes the
   white/red sliver that appeared at the left edge of the search panel. */
html body.openlib-site-index .openlib_search_panel--primary:before,
html body.openlib-site-index .openlib_search_panel--primary:after,
html body.openlib-site-index.openlib-search-is-fixed .openlib_search_panel--primary:before,
html body.openlib-site-index.openlib-search-is-fixed .openlib_search_panel--primary:after,
html[data-openlib-color-mode="dark"] body.openlib-site-index .openlib_search_panel--primary:before,
html[data-openlib-color-mode="dark"] body.openlib-site-index .openlib_search_panel--primary:after,
html[data-openlib-color-mode="dark"] body.openlib-site-index.openlib-search-is-fixed .openlib_search_panel--primary:before,
html[data-openlib-color-mode="dark"] body.openlib-site-index.openlib-search-is-fixed .openlib_search_panel--primary:after{
  display:none!important;
  content:none!important;
  position:static!important;
  width:0!important;
  height:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Old v38 spacer is no longer needed. */
html body.openlib-site-index .openlib_search_clearance{
  display:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

/* Keep Browse comfortably separated below the sticky zone in both modes. */
html body.openlib-site-index .openlib_journal_section{
  margin-top:8px!important;
  padding-top:0!important;
}
html[data-openlib-color-mode="dark"] body.openlib-site-index .openlib_journal_section{
  margin-top:10px!important;
}

/* --------------------------------------------------------------------------
   2) DARK/LIGHT BUTTON — EXACT SAME BRIGHT RED IN EVERY STATE
   -------------------------------------------------------------------------- */
html body button#openlib-color-mode-toggle.openlib_color_mode_toggle,
html body button#openlib-color-mode-toggle.openlib_color_mode_toggle:hover,
html body button#openlib-color-mode-toggle.openlib_color_mode_toggle:focus,
html body button#openlib-color-mode-toggle.openlib_color_mode_toggle:focus-visible,
html body button#openlib-color-mode-toggle.openlib_color_mode_toggle:active,
html[data-openlib-color-mode="light"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle,
html[data-openlib-color-mode="light"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle:hover,
html[data-openlib-color-mode="light"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle:focus,
html[data-openlib-color-mode="light"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle:active,
html[data-openlib-color-mode="dark"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle,
html[data-openlib-color-mode="dark"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle:hover,
html[data-openlib-color-mode="dark"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle:focus,
html[data-openlib-color-mode="dark"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle:focus-visible,
html[data-openlib-color-mode="dark"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle:active{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:var(--ol39-red)!important;
  background-color:var(--ol39-red)!important;
  background-image:none!important;
  border-color:var(--ol39-red)!important;
  color:#fff!important;
  filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  box-shadow:none!important;
  outline:none!important;
}
html body button#openlib-color-mode-toggle.openlib_color_mode_toggle .fa,
html[data-openlib-color-mode="light"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle .fa,
html[data-openlib-color-mode="dark"] body button#openlib-color-mode-toggle.openlib_color_mode_toggle .fa{
  color:#fff!important;
  opacity:1!important;
  filter:none!important;
}

/* Login/Register stay on the same bright red token. */
html body .openlib_account_cluster--guest > a.openlib_auth_switch__item,
html[data-openlib-color-mode="light"] body .openlib_account_cluster--guest > a.openlib_auth_switch__item,
html[data-openlib-color-mode="dark"] body .openlib_account_cluster--guest > a.openlib_auth_switch__item{
  color:var(--ol39-red)!important;
}
html body .openlib_account_cluster--guest > a.openlib_auth_switch__item span,
html[data-openlib-color-mode="light"] body .openlib_account_cluster--guest > a.openlib_auth_switch__item span,
html[data-openlib-color-mode="dark"] body .openlib_account_cluster--guest > a.openlib_auth_switch__item span{
  color:inherit!important;
}

@media(max-width:767px){
  :root{
    --ol39-header-h:62px;
    --ol39-header-gap:10px;
    --ol39-content-gap:16px;
  }
}