/* ═══════════════════════════════════════════════════════
   Obzek.io — the bar every tool wears.

   One owner for the topbar so the tools directory and the tools
   themselves can't drift apart, and so the tool switcher is
   identical wherever you are: the logo goes home, the nav goes
   sideways. Tokens come from the host page's :root.
   ═══════════════════════════════════════════════════════ */

#topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem 1.5rem; padding: .8rem 2rem;
  background: rgba(5,2,15,.82);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.topbar-left { display: flex; align-items: center; gap: 1.1rem; min-width: 0; flex: 1 1 auto; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }

.logo {
  font-family: var(--font-head); font-weight: 800; font-size: 1.25rem;
  letter-spacing: -.03em; text-decoration: none; color: var(--text);
  white-space: nowrap; flex: none;
}
.logo em { font-style: normal; color: var(--gold-bright); }

/* ─── TOOL SWITCHER ─────────────────────────────────── */
/* Scrolls sideways rather than wrapping: the bar keeps one height
   no matter how many tools ship. */
.tool-nav {
  display: flex; align-items: center; gap: .2rem;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding-left: 1.1rem; border-left: 1px solid var(--border);
}
.tool-nav::-webkit-scrollbar { display: none; }

.tool-nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-size: .76rem; font-weight: 600;
  color: var(--text-sub); text-decoration: none; white-space: nowrap;
  padding: .38rem .75rem; border-radius: 100px;
  border: 1px solid transparent; transition: .15s ease;
}
.tool-nav a:hover { color: var(--text); background: rgba(109,40,217,.16); }
.tool-nav a[aria-current="page"] {
  color: var(--gold-light);
  border-color: var(--border-gold);
  background: rgba(245,158,11,.08);
}
.tool-nav a.soon { color: var(--text-muted); cursor: default; }
.tool-nav a.soon:hover { background: none; color: var(--text-muted); }
.tool-nav svg { flex: none; opacity: .85; }

/* ─── STATUS CHIPS ──────────────────────────────────── */
.privacy { font-size: .78rem; color: var(--text-sub); white-space: nowrap; }
.badge {
  font-family: var(--font-head); font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 100px;
  border: 1px solid var(--border-gold); color: var(--gold-light);
  background: rgba(245,158,11,.08); white-space: nowrap;
}
.badge.warn { border-color: rgba(248,113,113,.4); color: var(--danger, #F87171); background: rgba(248,113,113,.08); }

@media (max-width: 820px) {
  /* Give the switcher the whole first row instead of letting it fight
     the status chips for the last 80 pixels. */
  .topbar-left { flex: 1 1 100%; }
  .topbar-right { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  #topbar { padding: .7rem 1rem; }
  .privacy { display: none; }
  /* Tighten the logo and pills so three tools still fit a phone before
     the sideways scroll has to do any work. */
  .logo { font-size: 1.1rem; }
  .tool-nav { padding-left: .65rem; gap: 0; }
  .tool-nav a { padding: .34rem .5rem; font-size: .71rem; gap: .3rem; }
}