/* ---------------------------------------------------------------------------
   Return bar.

   This lands on pages with several different token sets (the product pages
   each carry their own palette, the journal has its own, the marketing pages
   another). Every colour below therefore reads a token with a literal
   fallback, so the bar inherits whatever palette the page it sits on uses
   and never arrives in the wrong one.
   --------------------------------------------------------------------------- */
.backbar{
  position:sticky; top:0; z-index:60;
  background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line, rgba(255,255,255,.14));
}
.backbar-in{
  width:min(1160px, calc(100% - 44px)); margin:0 auto;
  display:flex; align-items:center; gap:12px; min-height:46px;
  font-family:inherit; font-size:13px;
}
.backbar a{
  display:inline-flex; align-items:center; gap:8px;
  color:#f4fbf7; text-decoration:none; font-weight:650;
  padding:6px 2px; border-radius:3px;
}
.backbar a:hover{ color:var(--mint, #78ffe0); }
.backbar a:focus-visible{ outline:2px solid var(--mint, #78ffe0); outline-offset:3px; }
.backbar .ar{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.backbar .ctx{
  margin-left:auto; min-width:0; font-size:12px;
  color:#b9c9c1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:560px){ .backbar .ctx{ display:none } }
@media (prefers-reduced-motion: reduce){ .backbar{ -webkit-backdrop-filter:none; backdrop-filter:none } }