/* Community bar (top of every page). Same position and look as the old promo bar.
   --bar-h is the bar's height: these defaults avoid a jump on first paint, and
   community-bar.js replaces it with the measured height. */
:root{--bar-h:41px;}
@media (max-width:699px){:root{--bar-h:33px;}}
body{padding-top:var(--bar-h);}
.nav-wrap{top:var(--bar-h)!important;}

.cbar{position:fixed;top:0;left:0;right:0;z-index:60;background:linear-gradient(90deg,oklch(0.24 0.05 275),oklch(0.30 0.09 285) 55%,oklch(0.26 0.06 275));border-bottom:1px solid oklch(0.62 0.11 285/.35);}
.cbar-in{max-width:1180px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:center;}
.cbar-link{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.3;color:oklch(0.95 0.01 285);letter-spacing:-0.005em;text-decoration:none;white-space:nowrap;}
.cbar-link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.cbar-ico{width:24px;height:24px;border-radius:7px;background:oklch(0.98 0 0/.12);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.cbar-ico svg{width:13px;height:13px;fill:#fff;}
/* Phones: one slim line. */
@media (max-width:699px){
  .cbar-in{padding:6px 12px;}
  .cbar-link{font-size:12.5px;gap:7px;}
  .cbar-ico{width:20px;height:20px;border-radius:6px;}
  .cbar-ico svg{width:11px;height:11px;}
}
/* Narrowest phones (320px): keep the line inside the screen. */
@media (max-width:359px){
  .cbar-in{padding:6px 10px;}
  .cbar-link{font-size:11px;gap:6px;}
}