/* ============================================================================
   bouly.io — the Constellation topbar (SINGLE SOURCE OF TRUTH)
   Loaded by BOTH the landing (static/index.html) and every SSG subpage
   (src/templates/page.html). Same bar everywhere — edit here, nowhere else.

   Base position = sticky (correct for scrolling subpages). The landing is a
   full-screen canvas with body overflow:hidden, so it overrides #topbar to
   position:fixed + pointer-events:none in its own inline style (the ONLY
   landing-specific delta). Tokens consumed: --topbar-grad, --radius-sm,
   --surface, --border(-hi), --text(-muted/-dim), --font-mono, --azure(-dim).
   ============================================================================ */

#topbar {
  position: sticky; top: 0; left: 0; right: 0;
  height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  background: linear-gradient(to bottom, var(--topbar-grad) 60%, transparent);
  z-index: 120;
}

/* Wordmark / home button — <button> on the landing, <a> on subpages */
.topbar-brand {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);              /* was --text-dim (2.97:1, fails AA) → 6.24:1 */
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  user-select: none;
}
.topbar-brand:hover {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--surface);
}
/* The home glyph — only revealed once the landing enters the graph */
.topbar-brand .home-glyph {
  font-size: 0.65rem;
  opacity: 0;
  transform: translateX(2px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
body.in-graph .topbar-brand .home-glyph { opacity: 0.7; transform: translateX(0); }
body.in-graph .topbar-brand { color: var(--text-muted); }

.topbar-controls { display: flex; align-items: center; gap: 0.5rem; }

.btn-sm {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px;                       /* WCAG 2.5.5 touch target (bar is 48px) */
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;            /* never wrap a pill label (e.g. "Work with me") */
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-sm:hover { border-color: var(--border-hi); color: var(--text); }
/* Active page — .active (landing JS) OR aria-current (SSG) */
/* Active page: azure border + tint are the marker; label stays --text so the
   small (10px) pill text clears AA (azure-on-azure-dim was 4.04 / 3.76, fails). */
.btn-sm.active,
.btn-sm[aria-current="page"] { border-color: var(--azure); color: var(--text); background: var(--azure-dim); }
.btn-sm:active { background: var(--panel); color: var(--text); }

/* lang + theme share one width so the bar reads evenly */
#lang-toggle,
#theme-toggle { min-width: 2.6rem; justify-content: center; }
#theme-toggle { font-size: 0.8rem; letter-spacing: 0; }

@media (max-width: 640px) {
  #topbar { padding: 0 0.4rem; }
  .topbar-brand { font-size: 0.62rem; letter-spacing: 0.02em; padding: 0.2rem 0.25rem; }
  .topbar-controls { gap: 0.22rem; }
  .btn-sm { padding: 0.24rem 0.38rem; font-size: 0.57rem; letter-spacing: 0.02em; }
  #lang-toggle, #theme-toggle { min-width: 1.9rem; }
}