/* Research section tabs (Overview, 8.3B Persona Agents, Personas, Applications,
   Playground). The bar sits directly under the site header on each of those
   pages and sticks below it while scrolling. Colors are literal because the
   pages load different theme files. */
.rx-subnav {
  display: block;
  position: sticky;
  top: 69px;
  z-index: 90;
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid rgba(74, 143, 194, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rx-subnav-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  overflow-x: auto;
  scrollbar-width: none;
}
.rx-subnav-inner::-webkit-scrollbar { display: none; }
/* Centered like the main nav; auto margins (not justify-content) keep the
   first tab reachable when the row scrolls on narrow screens. */
.rx-subnav-inner > :first-child { margin-left: auto; }
.rx-subnav-inner > :last-child { margin-right: auto; }
.rx-subnav-label {
  flex: none;
  margin-right: 16px;
  color: #4A8FC2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rx-subnav a {
  position: relative;
  flex: none;
  padding: 13px 12px;
  color: #a3a9b1;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.rx-subnav a:hover,
.rx-subnav a[aria-current="page"] { color: #f5f5f5; }
.rx-subnav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #4A8FC2;
}
.rx-subnav a:focus-visible { outline: 2px solid #4A8FC2; outline-offset: -4px; border-radius: 6px; }

/* Pages built on the homepage stylesheet have a fixed header instead of a
   sticky one, so the bar starts below it inside <main>. */
.rx-subnav--home { margin-top: 69px; z-index: 15; }

/* The Playground's own toolbar is not sticky, so neither is the bar. */
.rx-subnav--static { position: relative; top: 0; }

@media (max-width: 850px) {
  .rx-subnav { top: 64px; }
  .rx-subnav--home { margin-top: 64px; }
  .rx-subnav--static { top: 0; }
  .rx-subnav-label { display: none; }
  .rx-subnav-inner { padding: 0 10px; }
  .rx-subnav a { padding: 12px 10px; font-size: 0.72rem; }
}