/* PicPlayer header components, adapted to MapMedium's local-first shell. */
.network-brand {
  display: flex; align-items: center; flex: 0 0 174px; width: 174px;
  align-self: stretch; gap: 10px; padding: 0 14px;
  border-right: 1px solid var(--border); color: var(--text); text-decoration: none;
}
.network-brand:hover { background: var(--surface-2); }
.network-brand .brand-mark { display: block; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; object-fit: cover; }
.network-brand .brand-copy { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; white-space: nowrap; }
.network-brand .brand-name { display: inline-flex; align-items: baseline; color: var(--text); font-size: 13px; letter-spacing: -.02em; line-height: 1; }
.network-brand .brand-name strong { font-weight: 800; }
.network-brand .brand-name span { font-weight: 400; }
.network-brand .brand-copy small { color: var(--muted); font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .025em; }
.topbar-left { align-self: stretch; }
.network-header-row { grid-area: network; display: flex; align-items: stretch; min-width: 0; height: 36px; padding: 0 9px; background: #fff; color: #303743; border-bottom: 1px solid #dfe1e9; z-index: 29; color-scheme: light; }
.menu-bar { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.menu-bar::-webkit-scrollbar { display: none; }
.network-menu { margin-left: auto; }
.menu-bar > button { flex: 0 0 auto; height: 30px; border-radius: 5px; border: 0; background: transparent; padding: 0 8px; cursor: pointer; color: #303743; white-space: nowrap; font-size: 12px; font-weight: 500; text-transform: uppercase; }
.menu-bar > button:hover, .menu-bar > button.active { background: #eef0f4; }
.menu-bar > button:focus-visible, .profile-button:focus-visible { outline: 2px solid #6750a4; outline-offset: -2px; }
.profile-button { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #414c5f; border-radius: 50%; background: #202938; color: #cfdbeb; cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.profile-button:hover, .profile-button.active { background: #33435a; border-color: #6e9bc7; }
.profile-initials { font-size: 13px; font-weight: 750; line-height: 1; }
.menu-popovers { position: fixed; inset: 0; pointer-events: none; z-index: 820; font-size: 12px; }
.menu-popover { display: none; position: absolute; min-width: min(245px,calc(100vw - 16px)); max-width: calc(100vw - 16px); padding: 5px; background: #252b35; color: #edf1f7; border: 1px solid #3a424f; border-radius: 7px; box-shadow: 0 18px 50px #0006; pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #566274 #252b35; color-scheme: dark; }
.menu-popover.open { display: block; }
.menu-popover button, .menu-popover a { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; border: 0; background: transparent; padding: 7px 9px; border-radius: 4px; text-align: left; cursor: pointer; color: inherit; text-decoration: none; white-space: nowrap; line-height: 1.35; }
.menu-popover button:hover, .menu-popover a:hover, .menu-popover button:focus-visible, .menu-popover a:focus-visible { background: #3a4656; outline: none; }
.menu-popover button:focus-visible, .menu-popover a:focus-visible { box-shadow: inset 0 0 0 1px #80b7e3; }
.menu-separator { height: 1px; background: #46505f; margin: 5px; }
.network-popover { min-width: min(215px,calc(100vw - 16px)); }
.current-app-badge { font-size: 9px; color: #86c8f7; font-weight: 500; }
.profile-popover { width: 245px; }
.profile-summary { display: grid; gap: 5px; padding: 8px 9px 9px; overflow-wrap: anywhere; }
.profile-summary strong { font-size: 13px; font-weight: 650; }
.profile-summary > span { font-size: 11px; color: #a0adbf; }
.profile-popover .profile-join { color: #90ceff; }
.profile-popover .profile-legal-link { font-size: 11px; color: #adb9ca; }
.site-header { height: 52px; padding: 0 10px 0 0; gap: 9px; }
.site-header .site-nav { margin-left: auto; }
@media (max-width: 760px) {
  .network-brand { flex-basis: 150px; width: 150px; padding: 0 10px; gap: 8px; }
  .network-header-row { padding: 0 5px; }
  .menu-bar > button { padding: 0 7px; }
}
@media (max-width: 600px) {
  .network-brand { flex-basis: 136px; width: 136px; padding: 0 8px; }
  .site-header { height: 48px; padding-right: 5px; gap: 5px; }
  .site-nav a { padding: 7px; font-size: 12px; }
  .content-body .site-nav > a:not(.btn) { display: none; }
}
@media (max-width: 420px) {
  .topbar .network-brand { width: 120px; flex-basis: 120px; padding: 0 5px; gap: 5px; }
}
@media print { .network-header-row, .menu-popovers, .profile-button { display: none !important; } }