/* Shared environment navbar.
   One markup block, one stylesheet, on every page of the environment.

   Class-scoped as .mw-nav on purpose: several pages already own a <nav>
   (the DAW menubar, the realtime suite site-nav), so a bare `nav` selector
   would repaint those too.

   The bar is a single non-wrapping row of a fixed height. Pages with a
   viewport-locked layout (the DAW, the sight-reading shell) subtract
   --mw-nav-h from their own height math, so that height must stay constant
   at every width — hence the link row scrolls sideways instead of wrapping. */

:root {
  --mw-nav-h: 56px;
  --mw-subnav-h: 42px;
}

/* Every length in the bar is px, never rem.
   Host pages disagree about the root font size — daw.css sets
   `:root { font: 13px Inter }`, which silently rendered the studio's bar at
   81% of everyone else's. Absolute units keep the global navbar identical on
   every page regardless of what the page does to its own typography. */
.mw-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
  height: var(--mw-nav-h);
  display: flex;
  align-items: center;
  /* Pinned because the realtime suite's styles.css carries a bare `nav {}`
     rule; the bar must lay out identically on every page. */
  justify-content: flex-start;
  gap: 20px;
  padding: 0 20px;
  background: linear-gradient(90deg, var(--clr-lilac-200), var(--clr-soft-pink));
  box-shadow: var(--shadow-soft);
  border-bottom: 1px solid rgba(17, 24, 39, .10);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  color: var(--clr-ink);
}

.mw-nav *,
.mw-nav *::before,
.mw-nav *::after {
  box-sizing: border-box;
}

/* Brand */
.mw-nav-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-blue);
  text-decoration: none;
  white-space: nowrap;
}

.mw-nav-title:hover {
  color: var(--clr-blue-strong);
}

/* The mark is the SVG in assets/brand — a 5:3 tile that already carries its own
   dark ground and rounded corners, so the slot only reserves space for it. */
.mw-nav-mark {
  display: block;
  width: 53px;
  height: 32px;
  flex: 0 0 auto;
}

/* Link row */
.mw-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mw-nav-links::-webkit-scrollbar {
  display: none;
}

.mw-nav-links a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--clr-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.mw-nav-links a:hover {
  color: var(--clr-blue);
  background: rgba(255, 255, 255, .55);
}

.mw-nav-links a[aria-current="page"] {
  color: var(--clr-blue-strong);
  background: rgba(255, 255, 255, .78);
  border-color: rgba(37, 99, 235, .28);
}

.mw-nav-links a:focus-visible,
.mw-nav-title:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .mw-nav {
    gap: 12px;
    padding: 0 12px;
  }

  /* The word drops, the mark stays: the row keeps its height either way. */
  .mw-nav-title .mw-nav-word {
    display: none;
  }
}

/* Anchors on pages that scroll under the sticky bar. */
.mw-nav-offset {
  scroll-margin-top: calc(var(--mw-nav-h) + 12px);
}

/* ------------------------------------------------------------------
   Section sub-navbar.

   Pages that own a companion tool carry it here instead of in the
   global bar — the realtime section pairs the analyzer with the sensor
   console. Sticks directly beneath the global bar.
   ------------------------------------------------------------------ */
.mw-subnav {
  position: sticky;
  top: var(--mw-nav-h);
  z-index: 999;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--clr-border);
  backdrop-filter: blur(12px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.mw-subnav::-webkit-scrollbar { display: none; }

.mw-subnav-label {
  flex: 0 0 auto;
  margin-right: 8px;
  color: var(--clr-subtle);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mw-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--clr-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.mw-subnav a:hover {
  color: var(--clr-blue);
  background: var(--clr-lilac-50);
}

.mw-subnav a[aria-current="page"] {
  color: var(--clr-blue-strong);
  background: var(--clr-lilac-100);
  border-color: rgba(37, 99, 235, .22);
}

.mw-subnav a:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   STANDARD SECONDARY BAR

   Every page carries some chrome directly beneath the global navbar:
   the environment's section topbar, the studio menubar, the realtime
   section sub-nav. This makes that band identical everywhere — same
   height, same surface, same sticky offset, same typography — so the
   two-bar stack reads as one system on every page.

   Only the frame is standardised. Each bar keeps its own contents and
   behaviour, and keeps its own horizontal padding, because each aligns
   to its own page's content edge. Vertical padding is zeroed so the
   fixed height is actually honoured.
   ------------------------------------------------------------------ */
.mw-subnav,
.mw-nav ~ .topbar,
.mw-nav ~ .menubar {
  box-sizing: border-box;
  position: sticky;
  top: var(--mw-nav-h);
  z-index: 999;
  height: var(--mw-subnav-h);
  min-height: var(--mw-subnav-h);
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--clr-border);
  backdrop-filter: blur(12px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  color: var(--clr-ink);
}