.version-bar {
  align-self: stretch;
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 16px;
  margin-bottom: 16px;
  background: #13294F;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  /* Body (the showcase landing page's own layout) pads itself on every
     side to clear the phone mockup's drop-shadow bleed — see styles.css.
     This nav is body's first child, so without this it inherits that
     inset instead of running flush to the browser's top/left/right edges.
     --showcase-pad-top/-x are set alongside body's own padding so this
     stays in sync across breakpoints without duplicating the values. */
  margin-top: calc(-1 * var(--showcase-pad-top, 0px));
  margin-left: calc(-1 * var(--showcase-pad-x, 0px));
  margin-right: calc(-1 * var(--showcase-pad-x, 0px));
}
.version-bar a {
  color: rgba(255,255,255,.72); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
}
.version-bar a:hover { color: #fff; }
.version-bar a:focus-visible { outline: 2px solid #69BE28; outline-offset: 2px; }
.version-bar a[aria-current="page"] { background: #fff; color: #13294F; }

/* ── Shared components ────────────────────────────────────────────
   switcher.css is the one stylesheet both Release 1/2 and the Updated
   version load (root serves it directly, next/ via "../switcher.css"),
   so it's also where any component that must look identical and stay in
   sync across both versions lives — change it once here, not per copy. */

/* Unread-count pill — Conversations list rows (both versions' Messages
   list, next/'s Team list) and the Alerts tab's Text-button overlay
   badge (alert-text-badge, Release 1/2 only) all use this same look. */
.unread-badge {
  min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: #1E40AF; /* info-800 */ color: #fff;
  font: 700 10.5px Inter; display: flex; align-items: center; justify-content: center;
  flex: none;
}