/* The top bar (bar.js). Needs tokens.css. Phone: brand and actions on one line, the links as a scrolling row beneath.
   Desktop: brand, links, search and actions on one line. */
header#bar{position:sticky;top:0;z-index:60;margin:0;padding:0;max-width:none;min-height:var(--gl-bar-h)}
.gl-bar{background:rgba(7,6,11,.74);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--gl-line)}
.gl-bar__row{max-width:var(--gl-max);margin:0 auto;padding:0 var(--gl-gutter);display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand end" "search search" "nav nav";align-items:center;column-gap:var(--gl-4)}
.gl-brand{grid-area:brand;display:flex;align-items:center;min-height:var(--gl-bar-h);color:var(--gl-text);text-decoration:none;justify-self:start}
.gl-brand .gl-wordmark{height:22px}
.gl-bar__end{grid-area:end;display:flex;align-items:center;gap:var(--gl-2)}
.gl-nav{grid-area:nav;display:flex;gap:var(--gl-1);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gl-gutter) * -1);padding:0 var(--gl-gutter) 10px}
.gl-nav::-webkit-scrollbar{display:none}
.gl-nav__a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 var(--gl-4);border-radius:var(--gl-r-pill);color:var(--gl-muted);font:600 var(--gl-fs-sm)/1 var(--gl-font-ui);text-decoration:none;transition:color var(--gl-dur-1),background var(--gl-dur-1)}
.gl-nav__a:hover{color:var(--gl-text);background:rgba(255,255,255,.06)}
.gl-nav__a[aria-current="page"]{color:var(--gl-text);background:rgba(255,255,255,.1)}
.gl-search{grid-area:search;display:none;position:relative;margin:0 0 10px}
.gl-searching .gl-search{display:block}
.gl-search__i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gl-muted);display:flex;pointer-events:none}
.gl-search__in{width:100%;min-height:44px;padding:0 var(--gl-4) 0 42px;border-radius:var(--gl-r-pill);border:1px solid var(--gl-line-2);background:rgba(255,255,255,.05);color:var(--gl-text);font:inherit;font-size:var(--gl-fs-sm)}
.gl-search__in::placeholder{color:var(--gl-dim)}
.gl-search__in:focus{outline:2px solid var(--gl-accent);outline-offset:1px;background:rgba(255,255,255,.08)}
.gl-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--gl-text-2);cursor:pointer}
.gl-iconbtn:hover{background:rgba(255,255,255,.08);color:var(--gl-text)}
.gl-bar__upload{min-height:40px;padding:0 var(--gl-3);width:44px;height:44px;border-radius:50%;padding:0}
.gl-bar__upload span{display:none}
.gl-bar__in{min-height:40px;padding:0 var(--gl-4)}
.gl-account{position:relative}
.gl-avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--gl-line-2);background:linear-gradient(135deg,var(--gl-accent-lo),#37277a);color:#fff;font:700 var(--gl-fs-sm)/1 var(--gl-font-ui);cursor:pointer}
.gl-avatar:hover{border-color:var(--gl-accent-hi)}
.gl-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;padding:var(--gl-2);border-radius:var(--gl-r);border:1px solid var(--gl-line-2);background:var(--gl-surface-2);box-shadow:var(--gl-shadow);display:grid;gap:2px;z-index:70}
.gl-menu[hidden]{display:none}
.gl-menu__who{margin:0;padding:8px 12px 10px;color:var(--gl-dim);font-size:var(--gl-fs-xs);overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--gl-line);margin-bottom:4px}
.gl-menu__i{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:var(--gl-r-sm);background:transparent;color:var(--gl-text-2);font:500 var(--gl-fs-sm)/1.2 var(--gl-font-ui);text-decoration:none;cursor:pointer}
.gl-menu__i:hover,.gl-menu__i:focus-visible{background:rgba(255,255,255,.08);color:var(--gl-text)}
.gl-menu__out{color:var(--gl-danger)}
.gl-bar__notices{border-top:1px solid var(--gl-line);background:rgba(157,123,255,.08)}
.gl-notice{max-width:var(--gl-max);margin:0 auto;padding:8px var(--gl-gutter);display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;color:var(--gl-text);font-size:var(--gl-fs-sm)}
.gl-notice .gl-link{background:none;border:0;color:var(--gl-accent-hi);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}

@media (min-width:960px){
  .gl-bar__row{grid-template-columns:auto auto minmax(180px,420px) 1fr;grid-template-areas:"brand nav search end";column-gap:var(--gl-5);min-height:var(--gl-bar-h)}
  .gl-nav{margin:0;padding:0}
  .gl-search{display:block;margin:0}
  .gl-search__open{display:none}
  .gl-bar__end{justify-self:end}
  .gl-bar__upload{width:auto;height:40px;border-radius:var(--gl-r-pill);padding:0 var(--gl-4)}
  .gl-bar__upload span{display:inline}
}
@media (min-width:960px) and (max-width:1180px){.gl-nav__a{padding:0 var(--gl-3)}}
@media (max-width:360px){.gl-brand .gl-wordmark{height:17px}.gl-bar__in{padding:0 12px}.gl-bar__end{gap:4px}.gl-iconbtn,.gl-bar__upload{width:40px;height:40px}}