/* Top navigation bar — brand centered in the OG-image style (DejaVu Sans Bold, teal
   letters #7bd0c1 / pink dots #e889a7); account/feedback/theme on the right; hamburger on
   the left on mobile. Sticky; the filter bar pins directly beneath it. */
@font-face {
  font-family: "BNMBrand";
  src: url("fonts/brand.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
.topnav {
  position: sticky; top: 0; z-index: 37;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg);
}
/* Absolutely centered brand so it stays put regardless of the burger/actions on either side. */
.nav-brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: "BNMBrand", system-ui, "Segoe UI", sans-serif;
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  text-decoration: none; white-space: nowrap; color: #7bd0c1;
}
.nav-brand .nav-dot { color: #e889a7; }
.nav-brand:hover { color: #8fdccd; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-burger { display: none; background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-control); padding: 6px 11px; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.nav-link { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-control); padding: 8px 12px; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.nav-link:hover { border-color: var(--accent); }
a.nav-link { text-decoration: none; }
.nav-actions #navTrends { order: 2; }
.topnav .acct { position: static; }
.topnav .theme-toggle { position: static; }
.theme-label { display: none; } /* icon-only on desktop; label shows in the mobile drawer */
.nav-ico { margin-right: 5px; } /* desktop spacing between the Feedback icon and its text */
/* Drawer-only rows (Sign out + feature sections) — mobile-only; hidden on desktop. */
#acctSignoutM, #navViewFav, #navMyLists, #navShareList, #navCreatePoll, #navMyPolls,
#navSep, #favHead, #pollHead { display: none; }
.nav-head { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); font-weight: 600; padding: 10px 4px 2px; }
.nav-sep { height: 1px; background: var(--line); margin: 6px 2px 2px; }
.acct-lastname { font-size: 12px; color: var(--muted); padding: 6px 4px 0; margin-top: 2px; border-top: 1px solid var(--line); }
.acct-lastname b { color: var(--ink); font-weight: 500; }
.topnav .acct-menu { right: 0; left: auto; }
/* Hamburger nav in ALL viewports (desktop == mobile) — the app-style top bar is
   identical everywhere: burger (left), centered brand, favorites heart (right). */
@media (min-width: 0px) {
  .topnav { justify-content: flex-start; }
  .nav-burger { display: block; }
  .nav-actions { position: absolute; top: calc(100% + 6px); left: 8px; right: auto; z-index: 36; display: none; flex-direction: column; align-items: stretch; gap: 8px; min-width: 210px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-surface); padding: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); }
  .topnav.open .nav-actions { display: flex; }
  .nav-link, .topnav .theme-toggle { width: 100%; text-align: left; }
  .topnav .acct-btn { width: 100%; text-align: left; max-width: none; display: flex; align-items: center; padding: 8px 12px; font-size: .88rem; }
  .topnav .acct-btn .nav-ico { flex: none; width: 24px; margin-right: 8px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
  .topnav .acct-btn svg { width: 18px; height: 18px; }
  .topnav .acct-menu { position: static; left: auto; right: auto; box-shadow: none; margin-top: 0; min-width: 0; width: 100%; }
  /* Drawer order: account card, Sign out, Voice, theme, Feedback, then the feature sections. */
  .nav-actions .acct { order: 1; }
  .nav-actions #acctSignoutM { order: 2; }
  .nav-actions #navVoice { order: 3; }
  .nav-actions .theme-toggle { order: 4; }
  .nav-actions #ideasNav { order: 5; }
  .nav-actions #navSep { order: 6; }
  .nav-actions #favHead { order: 7; }
  .nav-actions #navViewFav { order: 8; }
  .nav-actions #navMyLists { order: 9; }
  .nav-actions #navShareList { order: 10; }
  .nav-actions #pollHead { order: 11; }
  .nav-actions #navMyPolls { order: 12; }
  .nav-actions #navCreatePoll { order: 13; }
  /* Sign out + the injected "My polls" leave the account card; drawer rows take over. */
  .topnav .acct-signout { display: none; }
  /* The Favorites/Lists + Polls sections are signed-in only — no signed-out list features,
     so their headers + separator stay hidden until sign-in (favorites use the nav heart). */
  .topnav.signed-in #acctSignoutM,
  .topnav.signed-in #navMyLists,
  .topnav.signed-in #navShareList,
  .topnav.signed-in #navCreatePoll,
  .topnav.signed-in #navMyPolls { display: flex; }
  .topnav.signed-in #navSep,
  .topnav.signed-in #favHead,
  .topnav.signed-in #pollHead { display: block; }
  /* Show the "Switch to …" text label beside the icon (icon-only on desktop). */
  .theme-label { display: inline; }
  /* Every drawer row shares a flex layout + fixed-PX icon column so icons and labels
     line up regardless of font-size or emoji-vs-inline-SVG. */
  .nav-actions .nav-link, .nav-actions .theme-toggle {
    display: flex; align-items: center; width: 100%; text-align: left; padding: 8px 12px; font-size: .88rem;
  }
  .nav-actions .nav-link .nav-ico, .nav-actions .theme-icon {
    flex: none; width: 24px; margin-right: 8px; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-actions .nav-link svg { width: 18px; height: 18px; }
  /* When signed in, drop the redundant email toggle button and show the account card. */
  .topnav .acct-btn.in { display: none; }
  .topnav .acct-btn.in + .acct-menu { display: block; }
  .nav-brand { font-size: .72rem; letter-spacing: .14em; }
}
/* -1px so the pinned bar tucks under the nav (behind it) and no card sliver shows through the
   sub-pixel seam when the nav's real height is fractional (desktop rounding). */
.namebar { top: calc(var(--navh, 54px) - 1px); }
/* Favorites heart moved into the nav (upper-right, opposite the hamburger). */
.topnav .fav-toggle { padding: 8px 12px; font-size: .95rem; }
.topnav .fav-toggle span { font-size: .85rem; }
.nav-fav svg { width: 17px; height: 17px; }
@media (min-width: 0px) { .topnav .fav-toggle { margin-left: auto; } }
html.poll-mode .nav-fav { display: none; }
.nav-copyright { order: 99; color: var(--dim); font-size: .72rem; text-align: left; padding: 10px 12px 2px; line-height: 1.5; }