/* ==========================================================================
   app.css — luminol WebUI components
   Built on the design tokens of theme.css (vial design system, see
   DESIGN.md). Components here reference only CSS variables.
   ========================================================================== */

/* --- Top navigation — sticky bar, brand + section links + actions -------- */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
  padding: 0 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--ui);
}

.top-nav .brand {
  color: var(--yellow);
  font-weight: 600;
  text-decoration: none;
}

.top-nav .brand:hover {
  text-decoration: none;
}

.top-nav a.nav-link {
  color: var(--tx-2);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.top-nav a.nav-link:hover {
  background: var(--ui);
}

.top-nav a.nav-link[aria-current='page'] {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 40%, var(--ui-2));
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-2));
}

.top-nav .nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-nav .operator {
  color: var(--purple);
}

.top-nav form {
  display: inline;
}

.top-nav button {
  padding: 2px 8px;
}

@media (max-width: 820px) {
  .top-nav {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 12px;
  }
}