/* Dynamic where-to-watch header: shared markup/runtime, isolated presentation. */
.title-browser-page { position: relative; }
.title-browser-page .site-logo-top { display: flex; justify-content: center; margin-bottom: 24px; }
.title-browser-page .site-logo-top .logo { width: min(220px, 62vw); height: auto; }
.title-browser-page .social-follow-top { position: absolute; top: 0; right: 0; margin: 0; }
.title-browser-page .social-link-compact { border: 0; background: transparent; }
.title-browser-page .topbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; margin-bottom: 24px; border: 1px solid rgba(159,176,196,.26); border-radius: 16px; background: rgba(7,18,31,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.title-browser-page .topbar-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.title-browser-page .topbar-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 10px; color: #cad8e6; text-decoration: none; border-radius: 12px; font-weight: 600; }
.title-browser-page .topbar-links a:hover { color: #f5f2eb; background: rgba(255,255,255,.06); }
.title-browser-page .menu-toggle { display: none; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; color: #f5f2eb; background: rgba(255,255,255,.05); font: inherit; cursor: pointer; }
.title-browser-page :is(.site-logo-top a, .site-header a, .menu-toggle, .social-link):focus-visible { outline: 3px solid #9bd6d1; outline-offset: 3px; }
@media (max-width: 680px) {
  .title-browser-page .topbar { justify-content: space-between; }
  .title-browser-page .social-follow-top { position: static; justify-content: flex-end; margin: 0 0 12px; }
  .title-browser-page .site-header .social-follow-top { margin: 0; }
  .title-browser-page .site-header[data-header-ready="true"] .menu-toggle { display: inline-flex; }
  .title-browser-page .topbar-menu { width: 100%; }
  /* Without JS, links stay visible; after initialization the toggle controls them. */
  .title-browser-page .site-header[data-header-ready="true"] .topbar-menu:not(.is-open) { display: none; }
  .title-browser-page .topbar-links { justify-content: flex-start; }
}