/* =========================================================
   Navy INDEX HEADER CONTROLS - SINGLE SOURCE OF TRUTH
   ========================================================= */

/* Header geometry only. */
body[data-rime-search-only] .site-head{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  height:118px!important;
  min-height:118px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Logo: true viewport center, independent from controls. */
body[data-rime-search-only] .site-head .logo-h1{
  position:absolute!important;
  left:50vw!important;
  top:14px!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:10!important;
}

body[data-rime-search-only] .site-head #logo,
body[data-rime-search-only] .site-head .rime-logo{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  overflow:visible!important;
}

/*
 * Theme + auth are ONE flex group.
 * This is the important part: no independent left/right coordinates anymore.
 */
body[data-rime-search-only] .site-head .rime-head-controls{
  position:absolute!important;
  top:18px!important;
  right:max(20px, calc((100vw - 1120px) / 2))!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  width:auto!important;
  height:40px!important;
  margin:0!important;
  padding:0!important;
  z-index:50!important;
}

/* Theme pill is now normal flex content, not independently positioned. */
body[data-rime-search-only] .site-head .rime-head-controls #theme-seg.theme-seg{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:3px!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  box-sizing:border-box!important;
  border-radius:999px!important;
}

body[data-rime-search-only] .site-head .rime-head-controls #theme-seg.theme-seg button{
  position:static!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
}

/* Auth slot is exactly the same height as the theme pill. */
body[data-rime-search-only] .site-head .rime-head-controls #auth-slot,
body[data-rime-search-only] .site-head .rime-head-controls .auth-slot{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 40px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Login/profile circle itself. */
body[data-rime-search-only] .site-head .rime-head-controls #auth-slot .auth-btn,
body[data-rime-search-only] .site-head .rime-head-controls .auth-slot .auth-btn{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

body[data-rime-search-only] .site-head .rime-head-controls .auth-btn img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  border-radius:50%!important;
}

/* MOBILE: one circular theme button + one circular auth button. */
@media(max-width:640px){
  body[data-rime-search-only] .site-head{
    height:104px!important;
    min-height:104px!important;
  }

  body[data-rime-search-only] .site-head .logo-h1{
    left:50vw!important;
    top:12px!important;
    transform:translateX(-50%)!important;
  }

  body[data-rime-search-only] .site-head .rime-head-controls{
    top:14px!important;
    right:12px!important;
    height:38px!important;
    gap:8px!important;
  }

  body[data-rime-search-only] .site-head .rime-head-controls #theme-seg.theme-seg{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    border-radius:50%!important;
  }

  body[data-rime-search-only] .site-head .rime-head-controls #theme-seg.theme-seg button{
    display:none!important;
  }

  body[data-rime-search-only] .site-head .rime-head-controls #theme-seg.theme-seg button.on{
    display:grid!important;
    position:static!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:0!important;
    place-items:center!important;
    border-radius:50%!important;
  }

  body[data-rime-search-only] .site-head .rime-head-controls #theme-seg.theme-seg button.on svg{
    width:18px!important;
    height:18px!important;
  }

  body[data-rime-search-only] .site-head .rime-head-controls #auth-slot,
  body[data-rime-search-only] .site-head .rime-head-controls .auth-slot,
  body[data-rime-search-only] .site-head .rime-head-controls #auth-slot .auth-btn,
  body[data-rime-search-only] .site-head .rime-head-controls .auth-slot .auth-btn{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
  }
}