/* Version switcher bar. Sits above every design without editing their markup. */
:root { --cbar-h: 40px; }
body { padding-top: var(--cbar-h) !important; }
html { scroll-padding-top: var(--cbar-h); }
/* the designs pin their own navs with inline position:sticky;top:0 — move them below the bar */
[style*="position:sticky"] { top: var(--cbar-h) !important; }

#croc-bar {
  position: fixed; inset: 0 0 auto 0; height: var(--cbar-h); z-index: 2147483647;
  display: flex; align-items: center; gap: 2px; padding: 0 8px;
  background: #0c0f0d; border-bottom: 1px solid #23302a;
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #8fa397;
  overflow-x: auto; scrollbar-width: none; -webkit-font-smoothing: antialiased;
}
#croc-bar::-webkit-scrollbar { display: none; }
#croc-bar .cb-label { flex: none; padding: 0 10px 0 4px; color: #55665c; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
#croc-bar a {
  flex: none; padding: 7px 11px; border-radius: 4px; text-decoration: none;
  color: #cfe0d5; background: transparent; white-space: nowrap; transition: background .12s;
}
#croc-bar a:hover { background: #1a241e; color: #fff; }
#croc-bar a[aria-current="page"] { background: #33ff88; color: #070a08; font-weight: 700; }
#croc-bar .cb-sp { flex: 1 1 auto; min-width: 8px; }
#croc-bar .cb-admin { border: 1px solid #23302a; }
#croc-bar .cb-x { flex: none; margin-left: 4px; background: none; border: 0; color: #55665c; font: inherit; cursor: pointer; padding: 7px 8px; }
#croc-bar .cb-x:hover { color: #cfe0d5; }
body.croc-bar-hidden { padding-top: 0 !important; }
body.croc-bar-hidden #croc-bar { display: none; }
body.croc-bar-hidden [style*="position:sticky"] { top: 0 !important; }

#croc-bar-show {
  position: fixed; top: 0; left: 0; z-index: 2147483647; display: none;
  background: #0c0f0d; color: #8fa397; border: 1px solid #23302a; border-top: 0; border-left: 0;
  border-radius: 0 0 6px 0; font: 500 11px/1 ui-monospace, monospace; padding: 6px 9px; cursor: pointer;
}
body.croc-bar-hidden #croc-bar-show { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}