html { scroll-padding-top:calc(var(--app-header-height,65px) + 12px); }
#appHeader { min-height:64px; padding:8px 32px; gap:6px 20px; }
#appHeader .app-nav-button { min-height:36px; padding:8px 10px; font-size:13px; }
#appHeader #searchInput { height:38px; }
#appHeader :is(.header-settings-button,.header-profile-btn) { width:36px; height:36px; min-height:36px; }
#librarySidebar { top:calc(var(--app-header-height,65px) + 12px); }

#appHeader .rusl-brand-button {
  display: block;
  width: 176px;
  max-width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e8cf68;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#appHeader .rusl-brand-button:focus-visible {
  outline: 2px solid #e8cf68;
  outline-offset: 4px;
}

#appHeader .rusl-brand-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.rusl-brand-disc {
  transform-box: fill-box;
  transform-origin: center;
}

.rusl-brand-sheen {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  #appHeader { min-height:0; padding:8px 16px; gap:6px 10px; }
  #appHeader:has(> .search-wrap.hidden) #appNav { grid-row:2; }
  #appHeader .rusl-brand-button {
    width: 160px;
    height: 40px;
  }
}

@media(pointer:coarse) {
  #appHeader .app-nav-button { min-height:44px; }
  #appHeader :is(.header-settings-button,.header-profile-btn) { width:44px; height:44px; min-height:44px; }
  #appHeader #searchInput { height:44px; }
}

@media (prefers-reduced-motion: reduce) {
  .rusl-brand-sheen {
    display: none;
  }
}

/* Keep the longer RUSWRLD lettering readable on tablets. */
@media (min-width: 761px) and (max-width: 1200px) { #appHeader { grid-template-columns:176px 264px minmax(140px,1fr) auto; padding:8px 24px; column-gap:16px; } }
@media (min-width: 761px) and (max-width: 960px) { #appHeader { grid-template-columns:176px 1fr auto; } }