/* ═══════════════════════════════════════════════════════════
   engine/css/topbar.css — Top navigation bar
═══════════════════════════════════════════════════════════ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--topbar-h);
  background: var(--topbar-bg, var(--bg-card));
  border-bottom: 1px solid var(--topbar-border, var(--border));
  box-shadow: var(--shadow-card);
}

.topbar .icon-btn,
.topbar .brand {
  color: var(--topbar-fg, var(--icon-color));
}


.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 12px;
  gap: 8px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo {
  height: 26px;
  width: auto;
}

.logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
  .logo--light { display: none; }
  .logo--dark  { display: block; }
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--topbar-btn-size);
  height: var(--topbar-btn-size);
  border-radius: var(--radius-xs);
  color: var(--icon-color);
  transition: background 0.15s, color 0.15s;
}

.icon-btn .icon {
  width: var(--topbar-btn-icon);
  height: var(--topbar-btn-icon);
  opacity: 0.7;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-btn:hover .icon,
.icon-btn:focus-visible .icon {
  opacity: 1;
}