/* The top bar every signed-in page shares (templates/partials/topbar.html). Self-contained: the
   sermon page (editor.css) and the app_base.html pages (app.css: Home, Settings, upload) load it.
   Colors come from studio/tokens.css. */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); font: 13px/1.45 var(--ui); color: var(--text); }
.top .in { display: flex; align-items: center; gap: 14px; height: 52px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top .grow { flex: 1; }
.top svg.i { width: 16px; height: 16px; flex: none; display: inline-block; }
.top .brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 14px; letter-spacing: -.015em; text-decoration: none; color: var(--text); flex: none; }
.top .brand .mk { width: 24px; height: 24px; border-radius: 7px; background: conic-gradient(from 210deg, #6b8cff, #9a7bff, #6b8cff); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
.top .church { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; white-space: nowrap; max-width: 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top .church .av { width: 16px; height: 16px; border-radius: 4px; background: var(--s-sermon); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; flex: none; }
.top .church .nm { overflow: hidden; text-overflow: ellipsis; }
.top .nav { display: flex; gap: 2px; margin: 0; }
.top .nav a { color: var(--text-2); text-decoration: none; padding: 6px 10px; border-radius: 7px; font-weight: 500; font-size: 13px; }
.top .nav a:hover { background: var(--surface-3); color: var(--text); }
.top .nav a.on { color: var(--text); background: var(--surface-3); }
.top .wb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); text-decoration: none; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; white-space: nowrap; flex: none; }
.top .wb:hover { color: var(--text); border-color: var(--border-2); }
.top .tb { font: inherit; width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; flex: none; }
.top .tb:hover { background: var(--surface-3); color: var(--text); }
.top .menu { position: relative; flex: none; }
.top .me { font: inherit; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.top .me:hover, .top .me[aria-expanded="true"] { color: var(--text); border-color: var(--muted); }
.top .mpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 240px; max-width: calc(100vw - 32px); background: var(--raise); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--pop); padding: 6px; display: flex; flex-direction: column; }
.top .mpop .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; min-width: 0; }
.top .mpop .who b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .mpop .who span { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .mpop a, .top .mpop button { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--text); }
.top .mpop a:hover, .top .mpop button:hover { background: var(--surface-3); }
.top .mpop form { margin: 0; }
.top a:focus-visible, .top button:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.top [hidden] { display: none !important; }
@media (max-width: 700px) {
  .top .in { gap: 8px; }
  .top .church, .top .wbl { display: none; }
  .top .wb { width: 28px; padding: 0; justify-content: center; }
  .top .nav a { padding: 6px 8px; }
}
@media (max-width: 360px) {
  .top .brand .bt { display: none; }
}