/* 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}
}
@media (prefers-reduced-motion:reduce){.vibe-entry.vbar{animation:none}.vibe-entry.vbar .ve-box{transition:none}}