/* r52 vibebar: "What's the vibe?" moved out of the page into a slim bar pinned in the top bar (homepage only, js/home.js).
   Phones/tablets: a second row of the fixed top bar (42px pill). Wide desktop (>=1180px): inline, centred between logo and actions.
   --vbar-h = extra top-bar height, used to push down things that sat right under the old bar. */
html.has-vbar{--vbar-h:48px}
.vibe-entry.vbar,html.has-vbar #nav .vibe-entry.vbar{position:relative;z-index:auto;max-width:none;margin:0;padding:0;border:0;background:none;border-radius:0;flex:1 0 100%;order:9;min-width:0;display:flex;flex-direction:column;animation:vbIn .28s ease both}
@keyframes vbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html.has-vbar .nav{flex-wrap:wrap;row-gap:8px;padding-bottom:10px;padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
.vibe-entry.vbar .ve-box{max-width:none;height:42px;box-sizing:border-box;padding:0 4px 0 14px;gap:9px;border-radius:999px;color:#fff;
  background:rgba(14,14,16,.58);-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);
  border:1px solid color-mix(in srgb,var(--hot) 55%,rgba(255,255,255,.18));transition:background-color .3s,border-color .2s,box-shadow .2s}
.nav.solid .vibe-entry.vbar .ve-box,.nav.vbar-open .vibe-entry.vbar .ve-box{background:var(--card,#17171a);color:var(--fg)}
.vibe-entry.vbar .ve-box{order:0}.vibe-entry.vbar .ve-sub{order:1}.vibe-entry.vbar .ve-ex{order:2} /* box never moves when it opens: hint + examples drop below it */
.vibe-entry.vbar .ve-lab{font-size:14px;color:inherit}
.vibe-entry.vbar .ve-box input{font-size:16px;padding:0;height:40px;line-height:40px;color:inherit}
.vibe-entry.vbar .ve-box input::placeholder{color:currentColor;opacity:.62}
.vibe-entry.vbar .ve-box svg{width:17px;height:17px}
.vibe-entry.vbar.ve-open .ve-box button{padding:8px 16px}
.vibe-entry.vbar.ve-open .ve-sub{margin:9px 4px 0;font-size:13px;text-align:left}
.vibe-entry.vbar.ve-open .ve-ex{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:8px -16px 0;padding:0 16px 2px;-webkit-overflow-scrolling:touch}
.vibe-entry.vbar .ve-ex::-webkit-scrollbar{display:none}
.vibe-entry.vbar .ve-ex button{flex:none;white-space:nowrap}
/* open: the top bar goes solid so the examples read over the hero */
.nav.vbar-open{background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
/* the pinned bar is the search now: the old nav field/icon stays in the DOM as the (hidden) results input (?q= links still work) */
html.has-vbar .nav .search{display:none}
/* things that sat right under the old top bar move down by the bar */
html.has-vbar .hv-btn{top:calc(64px + var(--vbar-h))}
html.has-vbar #hero .hv-credit,html.has-vbar #hero .slide .hv-credit{top:calc(106px + var(--vbar-h))}
@media (max-width:760px) and (max-height:720px){html.has-vbar #hero .slide .hv-credit{top:calc(76px + var(--vbar-h))}}
html.has-vbar #results{padding-top:calc(110px + var(--vbar-h))}
html.has-vbar .chips-bar{top:calc(66px + var(--vbar-h))}
html.has-vbar .tnx{padding-top:calc(84px + var(--vbar-h) + env(safe-area-inset-top))}
@media (max-width:760px){html.has-vbar .tnx{padding-top:calc(76px + var(--vbar-h) + env(safe-area-inset-top))}}
/* full-screen layers own the top: hide the bar there (same rule as the bottom tabs) */
html.nm-lock #nav .vibe-entry.vbar,html.nt-open #nav .vibe-entry.vbar,html.tq-open #nav .vibe-entry.vbar,html.tn-open #nav .vibe-entry.vbar,body.has-map #nav .vibe-entry.vbar{display:none}
/* tablets / small laptops: centred second row, not full width */
@media (min-width:761px){.vibe-entry.vbar{align-items:center}.vibe-entry.vbar .ve-box,.vibe-entry.vbar .ve-sub,.vibe-entry.vbar .ve-ex{width:min(100%,600px)}.vibe-entry.vbar.ve-open .ve-ex{flex-wrap:wrap;margin:8px 0 0;padding:0;overflow:visible}}
/* wide desktop: inline in the bar, between the logo and the actions */
@media (min-width:1180px){
  html.has-vbar{--vbar-h:0px}
  html.has-vbar .nav{flex-wrap:nowrap;padding:14px var(--pad)}
  html.has-vbar .nav .logo{order:0}
  html.has-vbar #nav .vibe-entry.vbar{order:1;flex:0 1 460px;margin:0 auto;align-items:stretch}
  html.has-vbar .nav .nav-right{order:2;margin-left:0}
  .vibe-entry.vbar .ve-box,.vibe-entry.vbar .ve-sub,.vibe-entry.vbar .ve-ex{width:auto}
  .vibe-entry.vbar.ve-open .ve-sub,.vibe-entry.vbar.ve-open .ve-ex{position:absolute;left:0;right:0}
  .vibe-entry.vbar.ve-open .ve-sub{top:100%;margin:8px 0 0;padding:12px 14px 58px;border-radius:14px;background:var(--bg,#111);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.35)}
  .vibe-entry.vbar.ve-open .ve-ex{top:100%;margin:42px 0 0;padding:0 14px;flex-wrap:nowrap;overflow-x:auto}
}
/* r58 homeorder: tuck on scroll down (html.vbar-tuck from js/home.js); phones/tablets only. --vbar-h is a registered length so
   everything offset by it (sticky chips, hero video controls) glides with the bar. The nav is fixed, so no content shifts (no CLS). */
@property --vbar-h{syntax:'<length>';inherits:true;initial-value:0px}
@media (max-width:1179px){
  html.has-vbar{transition:--vbar-h .3s ease}
  html.has-vbar.vbar-tuck{--vbar-h:0px}
  html.has-vbar .nav{row-gap:0}
  html.has-vbar #nav .vibe-entry.vbar{margin-top:8px}
  html.has-vbar #nav .vibe-entry.vbar:not(.ve-open){max-height:42px;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease,opacity .22s ease,transform .3s ease,visibility 0s}
  html.has-vbar.vbar-tuck #nav .vibe-entry.vbar:not(.ve-open){max-height:0;margin-top:0;opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;animation:none;
    transition:max-height .3s ease,margin-top .3s ease,opacity .2s ease,transform .3s ease,visibility 0s .3s}
}
@media (prefers-reduced-motion:reduce){.vibe-entry.vbar{animation:none}.vibe-entry.vbar .ve-box{transition:none}html.has-vbar,html.has-vbar #nav .vibe-entry.vbar,html.has-vbar #nav .vibe-entry.vbar:not(.ve-open),html.has-vbar.vbar-tuck #nav .vibe-entry.vbar:not(.ve-open){transition:none!important;animation:none!important}}