/* One header geometry for every page, including narrow screens. */
.site-header {
  min-height: 66px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--color-divider, #ccc);
  background: var(--color-bg, #f3f2f2);
  color: var(--color-text, #201e1d);
  font-family: var(--font-body, system-ui);
  position: relative;
  z-index: 20;
}
.site-header .site-brand { display: inline-flex; flex: 0 0 auto; margin: 0; padding: 0; }
.site-header .brand-logo-img { display: block; width: 155.5125px; height: 26px; max-width: none; object-fit: contain; }
.theme-dark .site-header .brand-logo-img { filter: brightness(0) invert(1); }
.site-header .site-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.site-header a { color: inherit; font-size: 14px; text-decoration: none; white-space: nowrap; }
.site-header a:hover { text-decoration: underline; }
.site-header .site-header-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 14px; border: 1px solid transparent;
  color: #fff; background: #ec3013; font-weight: 700; line-height: 1.3;
}
.site-header .site-header-primary:hover { color: #fff; background: #dd2b0f; text-decoration: none; }
.site-header .site-header-primary:active { color: #fff; background: #ae1800; }
.site-header a:focus-visible { outline: 2px solid #ec3013; outline-offset: 3px; }
.site-header [hidden] { display: none !important; }
.site-account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.host-topbar { position: static; }
.host-topbar .session-name-input { min-width: 0; max-width: 100%; }
.document-main { max-width: 900px; padding: 32px 24px; margin: 0 auto; font-size: 17px; line-height: 1.8; }
.document-main h2 { margin-top: 24px; }
body:has(.document-main) { max-width: none; margin: 0; padding: 0; }
body:has(.site-header) .status-page { min-height: calc(100vh - 66px); }
body:has(#app) #sessionOverlay { top: 66px; }
body:has(#app) #connBanner { top: 66px; }
@media (max-width: 720px) {
  .site-header { gap: 8px; }
  .site-header .site-header-actions { gap: 8px; }
  .site-header .site-header-secondary, .site-header .site-account-name { display: none; }
  .site-header .site-header-primary { padding-inline: 10px; }
}
@media (max-width: 350px) {
  .site-header { padding-inline: 12px; }
  .site-header .site-header-primary { font-size: 13px; padding-inline: 8px; }
}