/* Shared top navigation bar for the SimBLE browser demos. Self-contained: it
   only defines .sitenav and its descendants, and reads theme tokens with
   fallbacks, so it drops onto both the inline-styled pages (scanner, hrm, the
   landing page) and the simble.css pages (playground, explorer, lightbulb)
   without colliding with their existing styles. */
.sitenav {
  display: flex;
  align-items: center;
  gap: 0.2rem 0.4rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border, #d0d7de);
  background: var(--panel, #f6f8fa);
  font: 500 0.88rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.sitenav .brand {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #1f2328);
  text-decoration: none;
  padding: 0.3rem 0.5rem 0.3rem 0.2rem;
  margin-right: 0.4rem;
}
.sitenav .brand b { color: var(--accent, #0969da); font-weight: 700; }
.sitenav .tabs { display: flex; gap: 0.1rem; flex-wrap: wrap; }
.sitenav .tabs a {
  color: var(--dim, #656d76);
  text-decoration: none;
  padding: 0.32rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.sitenav .tabs a:hover { color: var(--text, #1f2328); background: color-mix(in srgb, var(--text, #1f2328) 10%, transparent); }
.sitenav .tabs a[aria-current="page"] {
  color: var(--text, #1f2328);
  background: color-mix(in srgb, var(--accent, #0969da) 18%, transparent);
  font-weight: 600;
}
.sitenav .spacer { margin-left: auto; }
.sitenav .ext {
  color: var(--dim, #656d76);
  text-decoration: none;
  padding: 0.32rem 0.5rem;
  white-space: nowrap;
}
.sitenav .ext:hover { color: var(--accent, #0969da); }

/* Body links use the accent in both states — never the browser's default
   visited-purple, which reads as off-brand. Page-specific and nav links
   (higher specificity) still win. */
a:link, a:visited { color: var(--accent, #0969da); }

@media (max-width: 40rem) {
  .sitenav { gap: 0.1rem 0.2rem; padding: 0.4rem 0.6rem; }
  .sitenav .tabs a { padding: 0.3rem 0.45rem; }
}