@charset "UTF-8";
/* styles.v8.css — topbar polish, defensive overrides */

/* ── Safety: hide any v7 subscribe-star that somehow leaked OUT of the
 *    tag-chip row. The button is only valid inside #tagChips. ─────────── */

.v7-sub-btn { display: inline-grid; }
:where(.topbar, .nav-list, .admin-quick, .admin-link, #loginBtn) .v7-sub-btn {
  display: none !important;
}

/* ── Same kind of safety for any leaked v3 nav-icon glyph inside the
 *    topbar (admin-quick should be a plain text button). ─────────────── */

.topbar .admin-quick .v3-icon,
.topbar .admin-quick > svg {
  display: none !important;
}
.topbar .admin-quick {
  /* Re-collapse layout after icon is hidden. The injected markup is
     `<svg> <span>Admin</span>` so we make the wrapper a flex row again. */
  display: inline-flex;
  gap: 0;
}
.topbar .admin-quick span { display: inline; }

/* ── Topbar layout: a single neat right-aligned cluster ─────────────── */

.topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.topbar .search-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.topbar .mobile-menu { flex: 0 0 auto; }
.topbar .admin-quick,
.topbar #loginBtn,
.topbar .v7-bell {
  flex: 0 0 auto;
}

/* Bell: make its hit-area the same height as the surrounding buttons,
 * collapse the wrapper so the SVG actually centers. */
.topbar .v7-bell {
  margin: 0;
}
.topbar .v7-bell .v7-bell-btn {
  width: 38px;
  height: 38px;
  min-height: 0;
}

/* Admin-quick: keep the gold accent of admin.v2 but compact. */
.topbar .admin-quick {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(200, 151, 63, 0.42);
  background: linear-gradient(180deg, rgba(200, 151, 63, 0.16), rgba(200, 151, 63, 0.06));
  color: #ffe1a7;
  font-weight: 700;
  text-decoration: none;
  align-items: center;
}
.topbar .admin-quick:hover {
  background: linear-gradient(180deg, rgba(200, 151, 63, 0.24), rgba(200, 151, 63, 0.1));
  border-color: rgba(200, 151, 63, 0.7);
}

/* Login button: align with bell visually. */
.topbar #loginBtn {
  min-height: 38px;
  padding: 0 14px;
}

/* Search input row: trim height, neat focus ring. */
.topbar .search-wrap input {
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Stop the orphan "Amy Admin" pill from rendering inside the topbar.
 *    Some session badges land on .topbar > [data-session] / .topbar > a
 *    when not part of the expected cluster — force-hide stray children
 *    that aren't the known elements. We allow only:
 *      .mobile-menu, .search-wrap, .admin-quick, .v7-bell, #loginBtn,
 *      and any modal/dialog directly inside it. ─────────────────────── */
.topbar > :not(.mobile-menu):not(.search-wrap):not(.admin-quick)
       :not(.v7-bell):not(#loginBtn):not(dialog) {
  /* purely defensive — does nothing in current markup */
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar .search-wrap { order: 99; flex: 1 1 100%; }
  .topbar .admin-quick { padding: 0 12px; }
  .topbar #loginBtn { padding: 0 12px; }
}